/* F—04 · Commandes & expédition — maquettes de templates/landing/features/commandes.html.twig.
   États : .k1…k8 (timeline du hero, cumulatif) et [data-s="n"] (étape exacte) ;
   scène : [data-active="n"] (couche affichée) et .a0…a4 (étape jouée).
   Préfixe : cm- (hero), c0-/cp-/c1-/c2-/c3- (couches de scène), ml- (e-mails), bento :
   sr- (recherche), tb- (onglets), pc- (produits commandés), sk- (stock), hi- (historique), hs- (HubSpot). */

/* ======================= Hero : la liste « Commandes » ======================= */
.cm{width:1080px}
.cm-shell{display:grid;grid-template-columns:178px 1fr;height:520px}
.cm-main{position:relative;display:flex;flex-direction:column;min-width:0}
.cm-bell{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--bd);color:var(--tx-2)}
.cm-bell .ico{width:13px;height:13px}
.cm-bell i{position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--tx);opacity:0;transform:scale(.3);transition:opacity .3s,transform .45s var(--ez-b)}
.k1 .cm-bell i{opacity:1;transform:none;transition-delay:.5s}
.cm-head{display:flex;justify-content:space-between;align-items:center;padding:15px 20px 13px;border-bottom:1px solid var(--bd)}
.cm-acts{display:flex;gap:8px}
.cm-tool{display:flex;align-items:center;gap:8px;padding:12px 20px 12px}
.cm-tool .sp{flex:1}
.cm-chips{position:relative;display:flex;gap:5px}
.cm-chip{font-size:11px;font-weight:500;padding:5px 10px;border-radius:999px;border:1px solid var(--bd);color:var(--tx-2);white-space:nowrap;transition:color .4s,border-color .4s}
.cm-chip.on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
/* Le trait de lumière : où la commande est rangée maintenant */
.cm-lamp{position:absolute;left:0;bottom:-7px;height:2px;width:var(--w,70px);border-radius:2px;background:var(--grad);opacity:calc(.95 * var(--tex));
  transform:translateX(var(--x,0));box-shadow:0 0 12px 1px rgba(123,77,255,calc(.7 * var(--tex)));transition:transform .8s var(--ez),width .8s var(--ez),opacity .4s}
.cm-q{height:28px;width:252px;font-size:11px;overflow:hidden;white-space:nowrap}
.cm-q .ph{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-cnt{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--bd);font-family:'Spline Sans Mono';font-size:11px;color:var(--tx-2)}
.cm-cnt .ico{width:12px;height:12px}
.cm-cnt b{font-weight:500;font-variant-numeric:tabular-nums}

.cm-lh,.cm-r{display:grid;grid-template-columns:142px minmax(0,1fr) 96px 98px 84px 132px 16px;gap:14px;align-items:center}
.cm-lh{padding:0 33px 7px;font-family:'Spline Sans Mono';font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.cm-lh .r{text-align:right}
.cm-lh .c-sh{text-align:right}
.cm-rows{--rh:56px;display:flex;flex-direction:column;gap:6px;padding:0 20px}
.cm-r{position:relative;padding:6px 12px;border:1px solid var(--bd);border-radius:10px;background:rgba(255,255,255,.015);font-size:12px;color:var(--tx-2)}
.cm-r small{display:block;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3);margin-top:2px;font-weight:400}
.c-ref{font-family:'Spline Sans Mono';font-size:11px;color:var(--tx);font-weight:500}
.c-cli{min-width:0}
.c-cli b{display:block;font-weight:600;color:var(--tx);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amt{text-align:right;font-variant-numeric:tabular-nums;color:var(--tx)}
.mg{text-align:right;font-variant-numeric:tabular-nums;color:var(--tx);font-weight:600;font-size:11.5px}
.c-st{display:flex;justify-content:flex-end}
.c-k{display:flex;flex-direction:column;align-items:center;gap:2px}
.c-k i{width:3px;height:3px;border-radius:50%;background:var(--tx-3)}
/* La ligne suivie : un trait de lumière à gauche */
.cm-r.hot{border-color:var(--bd-2);background:rgba(255,255,255,.045)}
.cm-r.hot::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--grad);opacity:var(--tex)}

/* Étape 1 : la commande du devis 2051 arrive en tête ; les autres lignes lui font
   de la place. Sans JS (pas de .fx-js), la ligne est là d'emblée.
   (Transitions posées seulement à l'arrivée : pas de fondu parasite au chargement.) */
.fx-js .cm:not(.k1) .cm-r:not(.hot){transform:translateY(calc(-1 * var(--rh)))}
.fx-js .cm:not(.k1) .cm-r.hot{opacity:0;transform:translateY(-16px) scale(.97)}
.cm.k1 .cm-r{transition:transform .8s var(--ez),opacity .5s}
.cm.k1 .cm-r.hot{transition:opacity .5s .3s,transform .8s var(--ez-b) .25s}
.fx-js .cm:not(.k1) .cm-lamp{opacity:0;transition:none}

/* Pastille de statut : gris = en attente, blanc = fait, plein = livrée */
.cm-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--bd-2);font-size:11px;font-weight:500;color:var(--tx);white-space:nowrap;
  transition:background .45s,color .45s,border-color .45s}
.cm-pill .d{width:6px;height:6px;border-radius:50%;background:var(--tx);flex:none;transition:background .4s}
.cm-pill.dn{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.cm-pill.dn .d{background:var(--bg)}
.cm-hp,.cm-ip{border-style:dashed;color:var(--tx-2)}
.cm-hp{cursor:pointer}
.cm-hp .d,.cm-ip .d{background:transparent;box-shadow:inset 0 0 0 1.5px var(--tx-3)}
.cm-pl{display:inline-grid;width:45px;transition:width .45s var(--ez)}
.cm-pl>span{grid-area:1/1;text-align:left;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .45s var(--ez)}
.cm-pl .l0{opacity:1;transform:none}
/* les passages (cumulatif : la règle la plus basse gagne) */
/* k3 · k5 · k7 : la pastille change APRÈS le clic sur « OK » de la confirmation (≈ 2 s) */
.k3 .cm-hp{border-style:solid;color:var(--tx);transition-delay:2.05s}
.k3 .cm-hp .d{background:var(--tx);box-shadow:none;transition-delay:2.05s}
.k3 .cm-pl{width:52px;transition-delay:2s}
.k5 .cm-pl{width:70px;transition-delay:2s}
.k7 .cm-pl{width:46px;transition-delay:2s}
.k8 .cm-pl{width:30px;transition-delay:1.25s}
.k3 .cm-pl .l0{opacity:0;transform:translateY(-8px);transition-delay:2s}
.k3 .cm-pl .l1{opacity:1;transform:none;transition-delay:2.08s}
.k5 .cm-pl .l1{opacity:0;transform:translateY(-8px);transition-delay:2s}
.k5 .cm-pl .l2{opacity:1;transform:none;transition-delay:2.08s}
.k7 .cm-pl .l2{opacity:0;transform:translateY(-8px);transition-delay:2s}
.k7 .cm-pl .l3{opacity:1;transform:none;transition-delay:2.08s}
.k8 .cm-pl .l3{opacity:0;transform:translateY(-8px);transition-delay:1.25s}
.k8 .cm-pl .l4{opacity:1;transform:none;transition-delay:1.33s}
.k8 .cm-hp{background:var(--tx);color:var(--bg);border-color:var(--tx);transition-delay:1.3s}
.k8 .cm-hp .d{background:var(--bg);transition-delay:1.3s}
/* éclat sur la pastille à chaque passage */
.cm-hp{position:relative}
.cm-hp::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:1.5px solid #fff;opacity:0;transform:scale(.8)}
[data-s="3"] .cm-hp::after,[data-s="5"] .cm-hp::after,[data-s="7"] .cm-hp::after{animation:cmPing .8s var(--ez) 2.05s}
[data-s="8"] .cm-hp::after{animation:cmPing .8s var(--ez) 1.25s}
@keyframes cmPing{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.25)}}

/* Le trait de lumière suit la commande d'un filtre à l'autre (positions mesurées) */
.cm-lamp{--x:68px;--w:64px}
.k1 .cm-lamp{transition-delay:.9s}
.k3 .cm-lamp{--x:153px;--w:63px;transition-delay:2.2s}
.k5 .cm-lamp{--x:237px;--w:75px;transition-delay:2.2s}
.k7 .cm-lamp{--x:333px;--w:57px;transition-delay:2.2s}
.k8 .cm-lamp{--x:411px;--w:41px;transition-delay:1.4s}

/* Menu « Changer le statut » */
.cm-menu{position:absolute;z-index:12;top:182px;right:63px;width:224px;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);pointer-events:none}
.cm-menu span{display:flex;align-items:center;gap:8px;height:27px;padding:0 10px;border-radius:7px;font-size:11.5px;color:var(--tx-2);transition:background .25s,color .25s}
.cm-menu .fx{margin-left:auto;width:13px;height:13px;border-radius:50%;border:1px solid var(--tx-3);display:grid;place-items:center;font-style:normal;font-family:'Spline Sans Mono';font-size:8px;color:var(--tx-3);line-height:1}
[data-s="2"] .cm-menu,[data-s="4"] .cm-menu,[data-s="6"] .cm-menu{opacity:1;transform:none;transition-delay:.85s}
[data-s="3"] .cm-menu,[data-s="5"] .cm-menu,[data-s="7"] .cm-menu{opacity:0;transition-delay:.95s}
/* le statut courant n'est pas proposé */
[data-s="0"] .cm-menu .m-imp,[data-s="1"] .cm-menu .m-imp,[data-s="2"] .cm-menu .m-imp,[data-s="3"] .cm-menu .m-imp{display:none}
[data-s="4"] .cm-menu .m-conf,[data-s="5"] .cm-menu .m-conf{display:none}
[data-s="6"] .cm-menu .m-prod,[data-s="7"] .cm-menu .m-prod{display:none}
[data-s="3"] .cm-menu .m-conf,[data-s="5"] .cm-menu .m-prod,[data-s="7"] .cm-menu .m-ship{background:rgba(255,255,255,.09);color:var(--tx);transition-delay:.55s}
/* l'info-bulle du statut survolé (le title réel de l'item), qui part avec le menu */
.cm-tip{position:absolute;z-index:13;right:297px;max-width:240px;padding:7px 10px;border-radius:7px;background:var(--tx);color:var(--bg);font-size:10.5px;line-height:1.35;font-weight:500;
  opacity:0;pointer-events:none}
.cm-tip::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--tx);transform:rotate(45deg)}
.cm-tip.tp1{top:189px}
.cm-tip.tp2{top:316px}
[data-s="3"] .tp1,[data-s="7"] .tp2{animation:cmTip 1.15s var(--ez) both}
@keyframes cmTip{0%,45%{opacity:0;transform:translateX(6px)}58%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}}

/* Confirmation : la vraie question du confirm() de la liste, posée AVANT le changement
   (en haut, comme la boîte du navigateur). Le curseur va cliquer « OK » : décalage
   --okx/--oky ajouté par la propriété translate (le transform reste celui de l'étape),
   revenu à zéro avant la fin de l'étape pour que l'étape suivante parte de là. */
.cm-cf{position:absolute;z-index:15;top:10px;left:50%;width:330px;margin-left:-235px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:11px;row-gap:12px;
  padding:13px 14px 12px;border-radius:12px;border:1px solid var(--bd-2);background:var(--bg-3);opacity:0;pointer-events:none}
.cm-cf .x{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--tx);color:var(--bg)}
.cm-cf .x .ico{width:14px;height:14px}
.cm-cf .q{grid-column:2;align-self:center}
.cm-cf.cf-prod{min-height:101px;align-content:space-between}   /* même bas que les autres : ne coupe pas la ligne des filtres */
.cm-cf.cf-prod .q{grid-column:1 / -1}
.cm-cf b{display:block;font-size:12px;line-height:1.35;color:var(--tx)}
.cm-cf small{display:block;margin-top:3px;font-size:10.5px;line-height:1.4;color:var(--tx-2)}
.cm-cf .bt{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:6px}
.cm-cf .mk-btn{font-size:10.5px;padding:5px 12px}
[data-s="3"] .cf-conf,[data-s="5"] .cf-prod,[data-s="7"] .cf-ship{animation:cmCf 1.15s var(--ez) .95s both}
[data-s="3"] .cf-conf .pri,[data-s="5"] .cf-prod .pri,[data-s="7"] .cf-ship .pri{animation:cmOk .5s var(--ez) 1.68s both}
@keyframes cmCf{0%{opacity:0;transform:translateY(-8px) scale(.98)}22%{opacity:1;transform:none}82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px) scale(.99)}}
@keyframes cmOk{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
.cm[data-s="3"] .mk-cur,.cm[data-s="5"] .mk-cur,.cm[data-s="7"] .mk-cur{animation:cmToOk 1.5s 1.15s both}
@keyframes cmToOk{0%{translate:0 0;animation-timing-function:cubic-bezier(.55,.05,.25,1)}33%{translate:var(--okx) var(--oky)}60%{translate:var(--okx) var(--oky);animation-timing-function:cubic-bezier(.55,.05,.25,1)}100%{translate:0 0}}

/* Livrée (bas gauche) et cartes qui arrivent / partent (bas droite) */
.cm-t{left:20px;bottom:16px;width:420px}
.cm-t span:last-child{line-height:1.45;color:var(--tx-2)}
.cm-t b{color:var(--tx)}
[data-s="8"] .t-deliv{opacity:1;transform:none;transition-delay:1.45s}

.cm-fly{position:absolute;z-index:14;right:20px;bottom:16px;width:310px;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;border:1px solid var(--bd-2);background:var(--bg-3);opacity:0;pointer-events:none}
.cm-fly .fi{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--tx);color:var(--bg)}
.cm-fly .fi .ico{width:15px;height:15px}
.cm-fly .ft{min-width:0;display:flex;flex-direction:column;gap:1px}
.cm-fly em{font-style:normal;font-family:'Spline Sans Mono';font-size:9px;letter-spacing:.04em;color:var(--tx-3)}
.cm-fly b{font-size:11.5px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-fly small{font-size:10px;color:var(--tx-3)}
/* arrivée (de la droite) puis effacement ; départ (s'envole vers la droite) */
[data-s="1"] .f-new{animation:cmIn 2.4s var(--ez) .3s both}
[data-s="7"] .f-ship{animation:cmOut 1.8s var(--ez) 2.2s both}
/* le suivi transporteur arrive, la commande passe « Livrée », l'e-mail part */
[data-s="8"] .f-trk{animation:cmIn 1.5s var(--ez) .05s both}
[data-s="8"] .f-del{animation:cmOut 2.3s var(--ez) 1.55s both}
@keyframes cmIn{0%{opacity:0;transform:translateX(150px)}18%{opacity:1;transform:none}82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes cmOut{0%{opacity:0;transform:translate(-60px,16px) scale(.94)}16%{opacity:1;transform:none}64%{opacity:1;transform:none}100%{opacity:0;transform:translate(330px,-34px) rotate(5deg) scale(.96)}}

/* Curseur : une position par étape (coordonnées dans la fenêtre, 1080 px de large) */
.cm .mk-cur{--cx:640px;--cy:640px}
.cm.k2 .mk-cur{--cx:972px;--cy:205px}
.cm.k3 .mk-cur{--cx:876px;--cy:245px}
.cm.k4 .mk-cur{--cx:968px;--cy:205px}
.cm.k5 .mk-cur{--cx:876px;--cy:272px}
.cm.k6 .mk-cur{--cx:960px;--cy:205px}
.cm.k7 .mk-cur{--cx:876px;--cy:380px}
.cm.k8 .mk-cur{--cx:640px;--cy:472px}   /* au repos : c'est le transporteur qui agit */
.cm[data-s="2"] .mk-cur::after,.cm[data-s="4"] .mk-cur::after,.cm[data-s="6"] .mk-cur::after{animation:clk .55s var(--ez) .8s forwards}
/* étapes de statut : clic sur le statut, puis clic sur « OK » de la confirmation */
.cm[data-s="3"] .mk-cur::after,.cm[data-s="5"] .mk-cur::after,.cm[data-s="7"] .mk-cur::after{animation:clk .55s var(--ez) .8s forwards,cmClk .55s var(--ez) 1.68s forwards}
@keyframes cmClk{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
/* décalage curseur → bouton « OK » (mesuré : centre du bouton moins la position de l'étape) */
.cm[data-s="3"]{--okx:-190px;--oky:-116px}
.cm[data-s="5"]{--okx:-190px;--oky:-143px}
.cm[data-s="7"]{--okx:-190px;--oky:-236px}

/* Mobile : la maquette est rognée (sidebar masquée) — on retire « Total HT » comme
   le vrai écran (col-opt) et on resserre pour garder la pastille de statut visible. */
@media(max-width:600px){
  .cm .col-opt,.cm .c-k{display:none}
  .cm-lh,.cm-r{grid-template-columns:120px 110px 84px 64px 104px;gap:12px}
  .cm-lh{padding-left:33px}
  .cm-r{width:560px}
  .cm-r.r5{display:none}
  .cm-menu{right:auto;left:344px}
  .cm-tip{right:566px}
  .cm-t{width:300px}
  .cm-fly{right:auto;left:330px;width:250px}
  /* une règle par étape, dans l'ordre : les .kN sont cumulatives, la dernière déclarée gagne */
  .cm.k2 .mk-cur{--cx:700px;--cy:208px}
  .cm.k3 .mk-cur{--cx:610px;--cy:245px}
  .cm.k4 .mk-cur{--cx:700px;--cy:208px}
  .cm.k5 .mk-cur{--cx:610px;--cy:272px}
  .cm.k6 .mk-cur{--cx:700px;--cy:208px}
  .cm.k7 .mk-cur{--cx:610px;--cy:380px}
  .cm.k8 .mk-cur{--cx:600px;--cy:440px}
  .cm[data-s="3"]{--okx:76px;--oky:-116px}
  .cm[data-s="5"]{--okx:76px;--oky:-143px}
  .cm[data-s="7"]{--okx:76px;--oky:-236px}
}

/* ======================= Scène ======================= */
.fx-commandes .cx{position:relative;height:452px}
.fx-commandes .lay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(18px) scale(.975);transition:opacity .55s var(--ez),transform .8s var(--ez);pointer-events:none}
[data-active="0"] .lay0,[data-active="1"] .lay1,[data-active="2"] .lay2,[data-active="3"] .lay3,[data-active="4"] .lay4{opacity:1;transform:none;transition-delay:.12s}
.fx-commandes .fx-dots button{background:rgba(255,255,255,.18)}
[data-active="0"] .fx-dots button:nth-child(1),[data-active="1"] .fx-dots button:nth-child(2),[data-active="2"] .fx-dots button:nth-child(3),[data-active="3"] .fx-dots button:nth-child(4),[data-active="4"] .fx-dots button:nth-child(5){background:#fff;width:34px}
.cm-rh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.cm-rh .mk-lbl{display:inline-flex;align-items:center;gap:6px}
.cm-rh .mk-lbl .ico{width:11px;height:11px}
.cm-rh b{display:block;font-size:13.5px;color:var(--tx)}
.cm-rh small{font-size:10.5px;color:var(--tx-3)}
.fx-commandes .fx{flex:none;width:13px;height:13px;border-radius:50%;border:1px solid var(--tx-3);display:inline-grid;place-items:center;font-style:normal;font-family:'Spline Sans Mono';font-size:8px;color:var(--tx-3);line-height:1;margin-left:6px}
/* pastilles d'icône communes aux cartes de la scène */
.c1-er .x,.cp-mu .fi,.c3-ml .fi{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--tx);color:var(--bg)}
.c1-er .x .ico,.cp-mu .fi .ico,.c3-ml .fi .ico{width:15px;height:15px}
/* Pastille « activé à la mise en route » (base.css) : juste sous la ligne .n d'une étape, avant le h3
   (même place que sur la page Devis), ou dans le surtitre d'une section */
.fx-commandes .fx-step .fx-onb{align-self:flex-start;margin-top:14px;margin-bottom:-4px}
.cm-kt{flex-wrap:wrap;row-gap:10px}
.cm-kt>span:first-child{white-space:nowrap}
.cm-kt .fx-onb{text-transform:none;margin-left:4px}

/* C0 — le devis devient commande */
.c0-w{position:relative;width:524px;height:432px}
.c0-dv{position:absolute;left:0;top:0;width:262px;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;row-gap:2px;padding:11px 13px}
.c0-dv .mk-lbl{grid-column:1}
.c0-dv b{grid-column:1;font-size:12.5px;color:var(--tx)}
.c0-dv .mk-chip{grid-column:2;grid-row:1 / 3}
.c0-wire{position:absolute;left:112px;top:62px;width:40px;height:34px;overflow:visible}
.c0-wire path{stroke:#fff;stroke-width:2;fill:none;stroke-dasharray:4 5;animation:cmWire 1.1s linear infinite;opacity:.25;transition:opacity .4s}
.a0 .c0-wire path{opacity:1}
@keyframes cmWire{to{stroke-dashoffset:-18}}
.c0-od{position:absolute;left:0;top:96px;width:332px;padding:14px 15px}
.c0-oh{margin-bottom:6px}
.c0-oh b{display:block;font-size:13.5px;color:var(--tx);white-space:nowrap}
.c0-oh>span{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.c0-oh small{font-size:10.5px;color:var(--tx-3)}
.c0-oh .mk-chip{font-size:9px}
.c0-l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px dashed var(--bd);font-size:12.5px;color:var(--tx);
  opacity:0;transform:translateY(-26px) scale(.97);transition:opacity .45s,transform .7s var(--ez-b);transition-delay:calc(var(--i) * 180ms + 400ms)}
.c0-l small{display:block;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.c0-l b{font-variant-numeric:tabular-nums}
.a0 .c0-l{opacity:1;transform:none}
.c0-t{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:11px}
.c0-t span{display:flex;flex-direction:column;gap:3px;font-family:'Spline Sans Mono';font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.c0-t b{font-family:var(--disp);font-size:21px;letter-spacing:-.015em;word-spacing:.14em;text-transform:none;color:var(--tx);white-space:nowrap}
.c0-ad{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.04);font-size:11px;color:var(--tx-2)}
.c0-ad .ico{width:13px;height:13px;flex:none}
/* la marge reprise du devis */
.c0-mg{position:absolute;left:350px;top:96px;width:174px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 13px;opacity:0;transform:translateX(-14px) scale(.95);transition:opacity .45s,transform .7s var(--ez-b)}
.c0-mg b{font-family:var(--disp);font-size:26px;letter-spacing:-.015em;word-spacing:.14em;line-height:1.05;color:var(--tx);font-variant-numeric:tabular-nums;margin-top:3px}
.c0-mg small{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-2)}
.c0-mg .mk-bar{align-self:stretch;margin-top:9px}
.c0-mg .mk-bar i{--v:0}
.a0 .c0-mg{opacity:1;transform:none;transition-delay:1.4s}
.a0 .c0-mg .mk-bar i{--v:.301;transition-delay:1.7s}
/* … et la commande, rangée dans la liste */
.c0-nt{position:absolute;left:350px;top:226px;width:174px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 13px 12px;opacity:0;transform:translateY(16px);transition:opacity .45s,transform .7s var(--ez-b)}
.c0-nt .mk-lbl{display:inline-flex;align-items:center;gap:6px;margin-bottom:5px}
.c0-nt .mk-lbl .ico{width:11px;height:11px}
.c0-nt b{font-family:'Spline Sans Mono';font-size:11px;font-weight:500;color:var(--tx)}
.c0-nt small{font-size:10.5px;color:var(--tx-2)}
.c0-nt .cm-pill{margin-top:7px;height:22px;font-size:10.5px}
.a0 .c0-nt{opacity:1;transform:none;transition-delay:2s}

/* CP — les commandes de la boutique PrestaShop (synchro complète) */
.cp-w{position:relative;width:524px;height:440px}
.cp-sy{position:absolute;left:0;top:0;width:300px;padding:13px 14px}
.cp-f{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 13px}
.cp-f span{display:flex;flex-direction:column;gap:3px;min-width:0}
.cp-f em{font-style:normal;font-family:'Spline Sans Mono';font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.cp-f b{font-size:11.5px;font-weight:500;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-go{font-size:11.5px;transform-origin:30% 50%}
.cp-go .ico{width:12px;height:12px}
.a1 .cp-go{animation:cpPress .5s var(--ez) .5s}
@keyframes cpPress{40%{transform:scale(.94)}100%{transform:none}}
.cp-bar{margin-top:13px}
.cp-bar i{--v:0}
.a1 .cp-bar i{--v:1;transition-duration:1.4s;transition-delay:.8s}
.cp-fl{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:10.5px;line-height:1.4;color:var(--tx-2);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez)}
.cp-fl .ok{width:16px;height:16px;border-radius:50%;background:var(--tx);color:var(--bg);display:grid;place-items:center;font-size:9px;flex:none}
.a1 .cp-fl{opacity:1;transform:none;transition-delay:2.2s}
.cp-mu{position:absolute;right:0;top:24px;width:206px;display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding:11px 13px;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .7s var(--ez-b)}
.cp-mu b{display:block;font-size:12px;color:var(--tx)}
.cp-mu small{display:block;font-size:10.5px;color:var(--tx-2);line-height:1.4;margin-top:2px}
.a1 .cp-mu{opacity:1;transform:none;transition-delay:3.4s}
.cp-ls{position:absolute;left:0;top:222px;width:524px;padding:12px 13px 7px}
.cp-c{height:24px;padding:0 9px;font-size:10.5px}
.cp-n{display:inline-grid}
.cp-n span{grid-area:1/1;text-align:center;font-variant-numeric:tabular-nums;transition:opacity .3s}
.cp-n .n1{opacity:0}
.a1 .cp-n .n0{opacity:0;transition-delay:2.45s}
.a1 .cp-n .n1{opacity:1;transition-delay:2.5s}
.cp-r{display:grid;grid-template-columns:104px minmax(0,1fr) 80px 92px;gap:12px;align-items:center;padding:6px 10px;margin-bottom:6px;border:1px solid var(--bd);border-radius:9px;background:rgba(255,255,255,.02);font-size:11.5px;color:var(--tx);
  opacity:0;transform:translateY(-14px) scale(.98);transition:opacity .45s,transform .7s var(--ez-b);transition-delay:calc(var(--i) * 220ms + 2.45s)}
.a1 .cp-r{opacity:1;transform:none}
.cp-r small{display:block;font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3);margin-top:1px;font-weight:400}
.cp-r .rf{font-family:'Spline Sans Mono';font-size:10.5px;font-weight:500}
.cp-r .cl{min-width:0}
.cp-r .cl b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-r .cm-pill{justify-self:end;height:22px;font-size:10.5px}

/* C1 — des statuts à conséquences */
.c1-w{position:relative;width:524px;height:440px}
.c1-mn{position:absolute;left:0;top:0;width:296px;padding:12px 8px 8px}
.c1-mn .cm-rh{padding:0 6px}
.c1-i{padding:5px 8px;border-radius:7px;transition:background .4s,box-shadow .4s}
.c1-i>span{display:flex;align-items:center;font-size:12px;color:var(--tx)}
.c1-i small{display:block;font-family:'Spline Sans Mono';font-size:9px;line-height:1.35;color:var(--tx-3);margin-top:1px}
.c1-i:not(.e-conf):not(.e-ann){opacity:.62}
[data-active="2"] .e-conf{background:rgba(255,255,255,.08);box-shadow:inset 2px 0 0 #fff;transition-delay:.6s}
[data-active="2"] .e-ann{background:rgba(255,255,255,.06);transition-delay:2.3s}
.c1-sk{position:absolute;right:0;top:20px;width:212px;padding:13px 14px}
.c1-pn{display:block;font-size:13px;color:var(--tx)}
.c1-pm{display:block;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3);margin-top:2px}
.c1-g{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 0 10px}
.c1-g span{display:flex;flex-direction:column;gap:3px;padding-left:9px;border-left:1px solid var(--bd)}
.c1-g span:first-child{padding-left:0;border-left:none}
.c1-g em{font-style:normal;font-family:'Spline Sans Mono';font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.c1-g b{font-family:var(--disp);font-size:18px;letter-spacing:-.01em;word-spacing:.14em;color:var(--tx)}
.c1-sk .mk-bar i{--v:0}
.a2 .c1-sk .mk-bar i{--v:.4167;transition-duration:1.3s}
.c1-hl{margin-top:10px;padding-top:9px;border-top:1px dashed var(--bd);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez)}
.c1-hl b{display:block;font-size:11.5px;font-weight:600;color:var(--tx-2)}
.c1-hl b span{color:var(--tx)}
.c1-hl small{display:block;font-family:'Spline Sans Mono';font-size:8.5px;color:var(--tx-3);margin-top:2px}
.a2 .c1-hl{opacity:1;transform:none;transition-delay:1.3s}
/* la confirmation réelle, qui annonce la conséquence avant de valider */
.c1-er{position:absolute;right:0;top:264px;width:212px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px 13px 12px;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .7s var(--ez-b)}
.c1-er b{display:block;font-size:12px;color:var(--tx)}
.c1-er small{display:block;font-size:10.5px;color:var(--tx-2);line-height:1.4;margin-top:3px}
.c1-bt{align-self:stretch;display:flex;justify-content:flex-end;gap:6px}
.c1-bt .mk-btn{font-size:10.5px;padding:5px 11px}
.a2 .c1-er{opacity:1;transform:none;transition-delay:2.5s}

/* C2 — SendCloud */
.c2-w{position:relative;width:524px;height:440px}
.c2-fm,.c2-rs{position:absolute;left:0;top:0;width:524px;padding:14px 15px}
.c2-fm{transition:opacity .5s,transform .7s var(--ez)}
.c2-g3{display:grid;grid-template-columns:1fr 1.35fr 1.15fr;gap:8px}
.c2-g3 label{display:flex;flex-direction:column;gap:5px}
.c2-g3 .mk-in{height:30px;font-size:11.5px;justify-content:space-between;font-weight:500;white-space:nowrap;padding:0 9px}
.c2-g3 .mk-in .ico{width:11px;height:11px}
.c2-md{position:relative;display:grid!important;grid-template-columns:1fr auto;align-items:center}
.c2-md .m0,.c2-md .m1{grid-area:1/1;transition:opacity .3s}
.c2-md .m1{opacity:0}
.c2-md .ico{grid-column:2;grid-row:1}
.a3 .c2-md .m0{opacity:0;transition-delay:.5s}
.a3 .c2-md .m1{opacity:1;transition-delay:.55s}
.c2-ph{display:flex;justify-content:space-between;align-items:center;margin:14px 0 8px;font-size:11.5px;color:var(--tx);font-weight:600}
.c2-ph>span:first-child{display:flex;align-items:center;gap:7px}
.c2-ph .ico{width:13px;height:13px}
.c2-add{font-size:10.5px;padding:5px 9px}
.c2-pk{display:grid;grid-template-columns:62px repeat(4,1fr);gap:7px;align-items:center;padding:0 9px;margin-bottom:0;border:1px solid transparent;border-radius:8px;background:rgba(255,255,255,.02);font-size:11.5px;overflow:hidden;
  max-height:0;opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .5s var(--ez-b),max-height .45s var(--ez),padding .45s var(--ez),margin .45s var(--ez),border-color .3s}
.c2-pk b{font-size:11.5px;color:var(--tx)}
.c2-pk .mk-in{height:26px;font-size:11px;padding:0 8px;justify-content:space-between;font-variant-numeric:tabular-nums}
.c2-pk .mk-in em{font-style:normal;font-family:'Spline Sans Mono';font-size:8.5px;color:var(--tx-3)}
.a3 .c2-pk{max-height:44px;padding:7px 9px;margin-bottom:6px;border-color:var(--bd);opacity:1;transform:none}
.a3 .c2-pk.p1{transition-delay:.75s}
.a3 .c2-pk.p2{transition-delay:1.55s}
.a3 .c2-pk.p3{transition-delay:2.25s}
.c2-go{margin-top:8px;display:inline-grid}
.c2-go>span{grid-area:1/1;display:flex;align-items:center;gap:6px;transition:opacity .3s}
.c2-go .g1{opacity:0}
.a3 .c2-go .g0{opacity:0;transition-delay:3.05s}
.a3 .c2-go .g1{opacity:1;transition-delay:3.1s}
.a3 .c2-fm{opacity:0;transform:translateX(-30px) scale(.97);transition-delay:3.9s}
.c2-rs{opacity:0;transform:translateX(30px) scale(.97);transition:opacity .5s,transform .8s var(--ez)}
.a3 .c2-rs{opacity:1;transform:none;transition-delay:4.1s}
.c2-p{display:grid;grid-template-columns:72px 1.25fr 1fr auto;gap:10px;align-items:center;padding:9px 10px;margin-top:7px;border:1px solid var(--bd);border-radius:9px;background:rgba(255,255,255,.02);
  opacity:0;transform:translateY(10px);transition:opacity .4s,transform .6s var(--ez-b);transition-delay:calc(var(--i) * 160ms + 4.4s)}
.a3 .c2-p{opacity:1;transform:none}
.c2-p em{font-style:normal;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-2)}
.c2-p span{display:flex;flex-direction:column;gap:1px;min-width:0}
.c2-p small{font-family:'Spline Sans Mono';font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-3)}
.c2-p b{font-size:11.5px;color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.c2-p .mk-btn{font-size:10.5px;padding:5px 8px;flex-direction:row}
.c2-a{display:flex;gap:8px;margin-top:12px;opacity:0;transition:opacity .4s 5s}
.a3 .c2-a{opacity:1}
.c2-a .mk-btn{font-size:11px}
/* le curseur de la couche : deux clics « Ajouter un colis », puis « Créer l'expédition » */
.c2-cur{position:absolute;left:0;top:0;z-index:5;width:18px;height:18px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));transform:translate(300px,330px)}
.c2-cur svg{width:18px;height:18px;display:block}
[data-active="3"] .c2-cur{animation:c2Cur 4s cubic-bezier(.55,.05,.25,1) .2s both}
@keyframes c2Cur{
  0%{opacity:0;transform:translate(330px,300px)}
  8%{opacity:1;transform:translate(470px,70px)}       /* Mode d'expédition */
  17%{transform:translate(470px,70px) scale(.85)}
  20%{transform:translate(462px,118px) scale(1)}     /* Ajouter un colis */
  30%{transform:translate(462px,118px) scale(1)}
  33%{transform:translate(462px,118px) scale(.85)}
  37%{transform:translate(462px,118px) scale(1)}
  48%{transform:translate(462px,118px) scale(1)}
  51%{transform:translate(462px,118px) scale(.85)}
  55%{transform:translate(462px,118px) scale(1)}
  70%{transform:translate(112px,312px) scale(1)}     /* Créer l'expédition SendCloud */
  75%{transform:translate(112px,312px) scale(.85)}
  80%{opacity:1;transform:translate(112px,312px) scale(1)}
  100%{opacity:0;transform:translate(120px,300px)}}

/* C3 — le suivi transporteur, jusqu'au client (couche 4) */
.c3-w{position:relative;width:524px;height:440px}
.c3-bo{position:absolute;left:0;top:0;width:268px;display:flex;flex-direction:column;gap:8px;padding:11px 13px}
.c3-st{display:inline-grid;justify-items:start}
.c3-st .cm-pill{grid-area:1/1;transition:opacity .35s,transform .5s var(--ez-b)}
.c3-st .s1{opacity:0;transform:scale(.85)}
.a4 .c3-st .s0{opacity:0;transition-delay:.9s}
.a4 .c3-st .s1{opacity:1;transform:none;transition-delay:.95s}
.c3-app{position:absolute;right:0;top:84px;width:470px;padding:16px 16px 14px;border-radius:14px;border:1px solid var(--bd-2);background:var(--bg)}
.c3-h b{display:block;font-family:'Schibsted Grotesk';font-size:14px;color:var(--tx)}
.c3-h small{font-size:11px;color:var(--tx-3)}
.c3-fr{display:flex;align-items:center;margin:16px 4px 8px}
.c3-fr .n{width:10px;height:10px;border-radius:50%;background:var(--tx);flex:none;transition:transform .5s var(--ez-b),background .4s,box-shadow .4s}
.c3-fr .sg{flex:1;height:2px;background:var(--tx);position:relative}
.c3-fr .sg5{background:var(--bd-2);overflow:hidden}
.c3-fr .sg5::after{content:"";position:absolute;inset:0;background:var(--tx);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ez)}
.c3-fr .n4{transform:scale(1.35);box-shadow:0 0 0 4px rgba(20,20,24,.1)}
.c3-fr .n5{background:var(--bg);box-shadow:inset 0 0 0 2px var(--bd-2)}
.a4 .c3-fr .n4{transform:none;box-shadow:none;transition-delay:1.3s}
.a4 .c3-fr .sg5::after{transform:none;transition-delay:1.3s}
.a4 .c3-fr .n5{background:var(--tx);box-shadow:0 0 0 4px rgba(20,20,24,.1);transform:scale(1.35);transition-delay:2.1s}
.c3-lb{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;font-size:10px;color:var(--tx);font-weight:600}
.c3-lb span{display:flex;flex-direction:column;gap:1px;text-align:center}
.c3-lb span:first-child{text-align:left}
.c3-lb span:last-child{text-align:right}
.c3-lb small{font-weight:400;font-size:9px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.c3-lb .l5{color:var(--tx-2);font-weight:400;transition:color .4s 2.1s}
.a4 .c3-lb .l5{color:var(--tx);font-weight:700}
.c3-lb .l5 small{display:grid;justify-items:end}
.c3-lb .l5 em{grid-area:1/1;font-style:normal;transition:opacity .3s}
.c3-lb .l5 .p1{opacity:0}
.a4 .c3-lb .l5 .p0{opacity:0;transition-delay:2.1s}
.a4 .c3-lb .l5 .p1{opacity:1;transition-delay:2.15s}
.c3-sv{margin-top:14px;padding-top:12px;border-top:1px solid var(--bd)}
.c3-tn{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding:9px 11px;border-radius:9px;background:var(--bg-2);font-size:11.5px}
.c3-tn b{color:var(--tx);font-weight:600;font-variant-numeric:tabular-nums}
.c3-bd{display:inline-grid;font-size:10px;font-weight:600}
.c3-bd span{grid-area:1/1;text-align:center;padding:2px 8px;border-radius:999px;transition:opacity .3s}
.c3-bd .b0{background:var(--bg-4);color:var(--tx-2)}
.c3-bd .b1{background:var(--tx);color:var(--bg);opacity:0}
.a4 .c3-bd .b0{opacity:0;transition-delay:.9s}
.a4 .c3-bd .b1{opacity:1;transition-delay:.95s}
.c3-hi{display:flex;flex-direction:column;gap:5px;margin-top:10px;font-size:11px;color:var(--tx)}
.c3-hi .sm{font-size:10px;font-weight:600;color:var(--tx-2);margin-bottom:2px}
.c3-hi .e{display:flex;align-items:center;gap:8px}
.c3-hi .e i{width:6px;height:6px;border-radius:50%;background:var(--tx)}
.c3-hi .e em{font-style:normal;color:var(--tx-3);font-size:10px}
.c3-hi .e4{opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .5s var(--ez);transition-delay:.7s}
.a4 .c3-hi .e4{opacity:1;transform:none}
.c3-ml{position:absolute;right:0;top:0;width:242px;display:flex;align-items:center;gap:11px;padding:10px 12px;opacity:0;transform:translate(20px,-6px);transition:opacity .45s,transform .7s var(--ez-b)}
.c3-ml em{display:block;font-style:normal;font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
.c3-ml b{display:block;font-size:11.5px;color:var(--tx)}
.c3-ml .nw{white-space:nowrap}
.a4 .c3-ml{opacity:1;transform:none;transition-delay:2.6s}

/* ======================= E-mails client ======================= */
.cm-ml{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--bd);border-radius:20px;background:var(--bg-2);padding:34px}
.cm-ml>.tex{z-index:0}
.ml-in{position:relative;z-index:2}
.ml-grid{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:28px;align-items:start}
.ml-feed{border:1px solid var(--bd-2);border-radius:14px;background:var(--bg-3);padding:14px 14px 0;box-shadow:0 30px 60px -24px rgba(0,0,0,.95)}
.ml-fh{padding:0 2px 10px;border-bottom:1px solid var(--bd)}
.ml-vp{--h:62px;position:relative;height:calc(var(--h) * 6);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.ml-list{display:flex;flex-direction:column-reverse;padding-top:10px;transform:translateY(calc(var(--h) * -10));transition:transform .8s var(--ez)}
.k1 .ml-list{transform:translateY(calc(var(--h) * -9))}
.k2 .ml-list{transform:translateY(calc(var(--h) * -8))}
.k3 .ml-list{transform:translateY(calc(var(--h) * -7))}
.k4 .ml-list{transform:translateY(calc(var(--h) * -6))}
.k5 .ml-list{transform:translateY(calc(var(--h) * -5))}
.k6 .ml-list{transform:translateY(calc(var(--h) * -4))}
.k7 .ml-list{transform:translateY(calc(var(--h) * -3))}
.k8 .ml-list{transform:translateY(calc(var(--h) * -2))}
.k9 .ml-list{transform:translateY(calc(var(--h) * -1))}
.k10 .ml-list{transform:none}
.ml-i{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:11px;align-items:center;height:calc(var(--h) - 8px);margin-bottom:8px;padding:0 11px;border:1px solid var(--bd);border-radius:10px;background:var(--bg-2);
  opacity:0;transform:scale(.96);transition:opacity .5s,transform .7s var(--ez-b),border-color .4s,background .4s}
.ml-i .fi{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--bd-2);color:var(--tx-2);transition:background .4s,color .4s}
.ml-i .fi .ico{width:14px;height:14px}
.ml-i .ft{min-width:0;display:flex;flex-direction:column;gap:2px}
.ml-i em{font-style:normal;font-family:'Spline Sans Mono';font-size:9px;letter-spacing:.04em;color:var(--tx-3)}
.ml-i b{font-size:12.5px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-i .fm{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-3)}
.k1 .i1,.k2 .i2,.k3 .i3,.k4 .i4,.k5 .i5,.k6 .i6,.k7 .i7,.k8 .i8,.k9 .i9,.k10 .i10{opacity:1;transform:none}
[data-s="1"] .i1,[data-s="2"] .i2,[data-s="3"] .i3,[data-s="4"] .i4,[data-s="5"] .i5,[data-s="6"] .i6,[data-s="7"] .i7,[data-s="8"] .i8,[data-s="9"] .i9,[data-s="10"] .i10{border-color:var(--bd-2);background:var(--bg-4)}
[data-s="1"] .i1 .fi,[data-s="2"] .i2 .fi,[data-s="3"] .i3 .fi,[data-s="4"] .i4 .fi,[data-s="5"] .i5 .fi,[data-s="6"] .i6 .fi,[data-s="7"] .i7 .fi,[data-s="8"] .i8 .fi,[data-s="9"] .i9 .fi,[data-s="10"] .i10 .fi{background:var(--tx);color:var(--bg);border-color:var(--tx)}

.ml-tab{min-width:0}
.ml-tabs{display:flex;gap:18px;padding:0 4px;border-bottom:1px solid var(--bd)}
.ml-tabs span{padding:9px 0;font-size:12px;color:var(--tx-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ml-tabs .on{color:var(--tx);border-bottom-color:var(--tx)}
.ml-card{margin-top:14px;border:1px solid var(--bd-2);border-radius:14px;background:var(--bg-3);padding:14px 14px 8px;box-shadow:0 30px 60px -24px rgba(0,0,0,.95)}
.ml-ch{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.ml-ch b{font-size:13px;color:var(--tx)}
.ml-n{display:inline-grid}
.ml-n span{grid-area:1/1;text-align:center;opacity:0;transition:opacity .3s}
.ml-n .n0{opacity:1}
/* l'onglet Emails ne garde que les envois liés à la commande : à partir de i6 */
.k6 .ml-n .n0{opacity:0}.k6 .ml-n .n1{opacity:1}
.k7 .ml-n .n1{opacity:0}.k7 .ml-n .n2{opacity:1}
.k8 .ml-n .n2{opacity:0}.k8 .ml-n .n3{opacity:1}
.k9 .ml-n .n3{opacity:0}.k9 .ml-n .n4{opacity:1}
.k10 .ml-n .n4{opacity:0}.k10 .ml-n .n5{opacity:1}
.ml-th,.ml-r{display:grid;grid-template-columns:98px 124px minmax(0,1fr) 126px 46px;gap:10px;align-items:center}
.ml-th{padding:0 8px 7px;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)}
.ml-th .r,.ml-r .r{text-align:right}
.ml-rows{position:relative;min-height:198px}
.ml-r{padding:0 8px;height:0;overflow:hidden;font-size:11px;color:var(--tx-2);border-bottom:1px solid transparent;opacity:0;
  transition:height .5s var(--ez),opacity .45s,background .4s,border-color .3s}
.ml-r span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ml-r span:first-child{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.ml-r .s{color:var(--tx)}
.ml-r .r{color:var(--tx);font-weight:600}
.k6 .ml-r.r1,.k7 .ml-r.r2,.k8 .ml-r.r3,.k9 .ml-r.r4,.k10 .ml-r.r5{height:39px;opacity:1;border-bottom-color:var(--bd)}
[data-s="6"] .r1,[data-s="7"] .r2,[data-s="8"] .r3,[data-s="9"] .r4,[data-s="10"] .r5{background:rgba(255,255,255,.05)}
.ml-empty{position:absolute;left:0;right:0;top:20px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:26px 16px;border:1.5px dashed var(--bd-2);border-radius:11px;text-align:center;transition:opacity .4s}
.ml-empty .ico{width:26px;height:26px;color:var(--tx-3);margin-bottom:4px}
.ml-empty b{font-size:13px;color:var(--tx-2)}
.ml-empty small{font-size:11px;color:var(--tx-3)}
.k6 .ml-empty{opacity:0}
.ml-lang{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:11px 13px;border:1px solid var(--bd);border-radius:11px;background:var(--bg-2)}
.ml-fl{display:inline-grid;flex:1;min-width:0}
.ml-fl b,.ml-lg span{grid-area:1/1}
.ml-fl b{font-size:12px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-lg{display:inline-grid}
.ml-fl .fr,.ml-lg .fr{animation:mlFr 6s var(--ez) infinite}
.ml-fl .en,.ml-lg .en{animation:mlEn 6s var(--ez) infinite}
@keyframes mlFr{0%,40%{opacity:1;transform:none}45%,95%{opacity:0;transform:translateY(-5px)}100%{opacity:1;transform:none}}
@keyframes mlEn{0%,46%{opacity:0;transform:translateY(5px)}51%,89%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-5px)}}
@media(max-width:900px){
  .ml-grid{grid-template-columns:1fr;gap:22px}
  .cm-ml{padding:18px}
}
@media(max-width:600px){
  .ml-th,.ml-r{grid-template-columns:96px minmax(0,1fr) 44px}
  .ml-th span:nth-child(2),.ml-th span:nth-child(4),.ml-r span:nth-child(2),.ml-r span:nth-child(4){display:none}
  .ml-tabs{gap:14px;overflow:hidden}
  .ml-tabs span:nth-child(-n+2){display:none}
  .ml-i b{font-size:12px}
}

/* ======================= Bento ======================= */
.fx-commandes .viz>.tl-body{position:absolute;inset:0;padding:10px 12px}
/* Recherche */
.fx-commandes .bz-sr>.tl-body{display:flex;flex-direction:column;gap:5px;padding:9px 12px}
.sr-q{position:relative;height:26px;font-size:10.5px;flex:none;overflow:hidden;white-space:nowrap}
.sr-q .ico{width:12px;height:12px;flex:none}
.sr-t{color:var(--tx);font-weight:500}
.sr-t:empty{display:none}
.bz-sr.k1 .sr-q .ph{display:none}
.bz-sr.k1 .sr-q{border-color:var(--bd-2)}
.sr-r{flex:none;display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:8px;align-items:center;padding:2px 8px;border:1px solid var(--bd);border-radius:7px;font-size:10px;line-height:14px;color:var(--tx-2);
  max-height:20px;overflow:hidden;transition:opacity .4s,max-height .5s var(--ez),padding .5s var(--ez),margin .5s var(--ez),border-color .4s,background .4s,color .4s}
.sr-r .rf{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx)}
.sr-r .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-r .r{font-variant-numeric:tabular-nums}
.k2 .sr-r.o{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-5px;border-color:transparent}
.k2 .sr-r.h{border-color:var(--bd-2);background:rgba(255,255,255,.06);color:var(--tx);transition-delay:.35s}
/* Une commande, neuf onglets */
.tb-h b{font-family:'Schibsted Grotesk';font-size:11.5px;color:var(--tx)}
.tb-s{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.tb-s span{font-size:9.5px;line-height:1.3;padding:3px 7px;border-radius:999px;border:1px solid var(--bd);color:var(--tx-3);transition:background .35s,color .35s,border-color .35s}
.tb-s .t0{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.k1 .tb-s .t0{background:none;color:var(--tx-3);border-color:var(--bd)}
[data-s="1"] .tb-s .t1,[data-s="2"] .tb-s .t2,[data-s="3"] .tb-s .t3,[data-s="4"] .tb-s .t4,[data-s="5"] .tb-s .t5,[data-s="6"] .tb-s .t6,[data-s="7"] .tb-s .t7,[data-s="8"] .tb-s .t8{background:var(--tx);color:var(--bg);border-color:var(--tx)}
/* Produits commandés */
.pc-h{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:var(--tx);margin:0 0 3px;line-height:1.3}
.pc-h .ico{width:11px;height:11px}
.pc-h span{margin-left:4px;font-family:'Spline Sans Mono';font-size:8.5px;font-weight:400;color:var(--tx-3);border:1px solid var(--bd);border-radius:5px;padding:0 5px}
.pc-r{display:grid;grid-template-columns:minmax(0,1fr) 30px 96px;gap:8px;align-items:center;padding:3px 8px;margin-bottom:6px;line-height:1.3;border:1px solid var(--bd);border-radius:7px;font-size:10.5px;color:var(--tx)}
.pc-r small{display:block;font-family:'Spline Sans Mono';font-size:8.5px;color:var(--tx-3)}
.pc-r .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-r .q{text-align:right;font-variant-numeric:tabular-nums;color:var(--tx-2)}
.pc-s{display:inline-grid;justify-items:end}
.pc-s span{grid-area:1/1;font-size:9.5px;padding:2px 7px;border-radius:5px;border:1px solid var(--bd-2);white-space:nowrap;transition:opacity .35s,transform .45s var(--ez-b),background .35s,color .35s}
.pc-s .s1{opacity:0;transform:translateY(5px)}
.k1 .pc-r:nth-of-type(2) .pc-s .s0,.k2 .pc-r:nth-of-type(4) .pc-s .s0{opacity:0;transform:translateY(-5px)}
.k1 .pc-r:nth-of-type(2) .pc-s .s1,.k2 .pc-r:nth-of-type(4) .pc-s .s1{opacity:1;transform:none;background:var(--tx);color:var(--bg);border-color:var(--tx)}
/* Stock */
.sk-h,.sk-r{display:grid;grid-template-columns:minmax(0,1fr) 28px 36px 30px 26px 34px;gap:5px;align-items:center}
.sk-h{font-family:'Spline Sans Mono';font-size:7.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-3);padding:0 7px 5px}
.sk-r{padding:7px;border:1px solid var(--bd);border-radius:7px;font-size:10px;color:var(--tx);font-variant-numeric:tabular-nums}
.sk-h .r,.sk-r .r{text-align:right}
.sk-r .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-b{display:inline-grid;justify-items:center}
.sk-b span{grid-area:1/1;font-size:9px;padding:1px 6px;border-radius:5px;border:1px solid var(--bd-2);transition:opacity .35s}
.sk-b .b1{opacity:0;background:var(--tx);color:var(--bg);border-color:var(--tx)}
.k1 .sk-b .b0{opacity:0;transition-delay:.9s}
.k1 .sk-b .b1{opacity:1;transition-delay:.95s}
.sk-n{display:flex;align-items:center;gap:8px;margin-top:9px;padding:7px 9px;border-radius:8px;border:1px solid var(--bd-2);background:var(--bg-3);font-size:10px;color:var(--tx-2);line-height:1.35;
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .55s var(--ez-b)}
.sk-n .ico{width:13px;height:13px;flex:none;color:var(--tx)}
.sk-n b{color:var(--tx)}
.k2 .sk-n{opacity:1;transform:none}
/* Historique */
.bz-hi .tl-body{display:flex;flex-direction:column;gap:7px}
.hi-l{display:flex;align-items:flex-start;gap:9px;font-size:10.5px;color:var(--tx-2);transition:opacity .4s,transform .55s var(--ez)}
.hi-l i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--tx-2);margin-top:4px;flex:none}
.hi-l b{color:var(--tx)}
.hi-l small{display:block;font-family:'Spline Sans Mono';font-size:8.5px;color:var(--tx-3);margin-top:1px}
.hi-l.hx3,.hi-l.hx2{opacity:0;transform:translateY(-8px)}
.k1 .hi-l.hx2,.k2 .hi-l.hx3{opacity:1;transform:none}
.k1 .hi-l.hx2 i,.k2 .hi-l.hx3 i{background:var(--tx);border-color:var(--tx)}
/* HubSpot */
.bz-hs .tl-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.bz-hs .tl-body>.hs-ok{position:absolute;left:12px;right:12px;top:52px}
.hs-b{font-size:11px;transition:background .3s,color .3s,transform .2s}
.k1 .hs-b{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.hs-q{font-size:10.5px;color:var(--tx-2);line-height:1.4;padding:7px 9px;border:1px solid var(--bd-2);border-radius:8px;background:var(--bg-3);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .5s var(--ez)}
.k1 .hs-q{opacity:1;transform:none}
.k2 .hs-q{opacity:0;transform:translateY(-6px)}
.hs-ok{display:flex;align-items:center;gap:7px;padding:8px 9px;border:1px solid var(--bd-2);border-radius:8px;background:var(--bg-3);font-size:10.5px;line-height:1.4;color:var(--tx);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .5s var(--ez-b)}
.hs-ok .ok{width:16px;height:16px;border-radius:50%;background:var(--tx);color:var(--bg);display:grid;place-items:center;font-size:9px;flex:none}
.k2 .hs-ok{opacity:1;transform:none;transition-delay:.3s}

/* Mouvement réduit / sans JS : l'état final est lisible tel quel */
.fx-reduce .ml-fl .fr,.fx-reduce .ml-lg .fr{animation:none}
.fx-reduce .cm .mk-cur{opacity:0}
.fx-reduce .ml-fl .en,.fx-reduce .ml-lg .en{animation:none;opacity:0}