/* C—03 · Ajouter le B2B à votre site e-commerce — maquettes de templates/landing/cas/site-e-commerce.html.twig.
   Trigrammes : ecm- (héros), ecj- (couches du trajet), ecs- (« Votre site n'est pas sur PrestaShop ? »).
   Univers de démo neutre : brennor.fr (PrestaShop), Paul D. d'Acme Industrie, devis #2052.
   Héros : .ecm[data-tl] → .k0…k13 (cumulatif) et [data-s="n"] (exact) ;
   trajet : [data-active="n"] (couche affichée) et .a0…a6 (étape jouée).
   Couleurs : l'interface de Stolip reste noir / blanc / gris ; l'orange d'AVA sur ce qui est à elle
   (lanceur, panneau, capsule de la voie) ; les couleurs Atelier sur la ligne du temps et la voie. */

/* ======================= Héros : la question posée sur le site devient un devis ======================= */
/* --sw = largeur du site ; --bx / --by = coin de la fenêtre de Stolip. Entre les deux, la voie (140 px). */
.ecm{position:relative;width:1120px;height:628px;--sw:480px;--bx:620px;--by:52px}
.ecm-body{position:absolute;inset:0}

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

/* ---------- Votre site : brennor.fr (PrestaShop), îlot clair ---------- */
.ecm-site{position:absolute;z-index:2;left:0;top:52px;width:var(--sw);height:572px}
.ecm-chrome{height:40px;background:#F2F2EF;gap:12px}
.ecm-chrome .win-url{max-width:none;margin:0;flex:1;height:24px;background:#fff}
.ecm-sh{display:flex;align-items:center;gap:22px;height:52px;padding:0 20px;border-bottom:1px solid var(--bd);background:#fff}
.ecm-logo{display:flex;align-items:baseline;gap:7px;flex:none}
.ecm-logo i{align-self:center;width:16px;height:16px;border-radius:4px;background:#141418;box-shadow:inset 0 -5px 0 #3A3D44}
.ecm-logo b{font-family:'Schibsted Grotesk';font-size:14px;font-weight:700;letter-spacing:.16em;color:#141418}
.ecm-logo small{font-size:10.5px;color:var(--tx-3)}
.ecm-nav{display:flex;gap:16px;font-size:12px;color:var(--tx-2)}
.ecm-nav span{position:relative;padding:4px 0}
.ecm-nav .on{color:var(--tx);font-weight:600}
.ecm-nav .on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:1px;background:#141418}
.ecm-cart{margin-left:auto;display:flex;gap:12px;color:var(--tx-2)}
.ecm-cart .ico{width:16px;height:16px}
.ecm-pg{padding:14px 20px 0}
.ecm-bc{font-size:10.5px;color:var(--tx-3)}
.ecm-bc span{margin:0 4px}
.ecm-h1{display:flex;align-items:baseline;gap:12px;margin-top:6px;font-family:var(--disp);font-weight:600;font-size:28px;letter-spacing:-.013em;color:var(--tx)}
.ecm-h1 small{font-family:'Hanken Grotesk';font-size:11.5px;font-weight:400;letter-spacing:0;color:var(--tx-3)}
.ecm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.ecm-pc{display:flex;flex-direction:column;gap:3px;padding:9px 9px 10px;border:1px solid var(--bd);border-radius:12px;background:#fff}
.ecm-pc .im{height:150px;border-radius:9px;background:#F3F1EC;display:grid;place-items:center;margin-bottom:6px}
.ecm-pc .im .ec-big{width:96px;height:96px}
.ecm-pc b{font-size:12.5px;font-weight:600;color:var(--tx)}
.ecm-pc small{font-size:10.5px;color:var(--tx-3)}
.ecm-pc .ft{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.ecm-pc .st{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--tx-2)}
.ecm-pc .st i{width:6px;height:6px;border-radius:50%;background:#141418}
.ecm-pc .add{font-size:10.5px;font-weight:600;padding:6px 10px;border-radius:7px;background:#141418;color:#fff}

/* Dessins produit (repris de la page AVA) */
.ec-big{fill:none;stroke:#16130F;stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round}
.ec-big .fr,.ec-big .bx{fill:#FFFFFF}
.ec-big .sd{fill:#E4E0D8}
.ec-big .lt{fill:#FFE4C2;stroke:#C2410C;stroke-width:.8}
.ec-big .gl{fill:#FFFFFF;stroke:none;opacity:.75}
.ec-big .ray{stroke:var(--av,#F97316);stroke-width:1.3}
.ec-big .br{stroke-width:1.4}
.ec-big .fn{stroke-width:1.05}
.ec-big .bt{fill:#FFFFFF;stroke-width:1.2}
.ec-pr{width:22px;height:22px;fill:none;stroke:var(--tx-2);stroke-width:1.6;stroke-linejoin:round}
.ec-pr .ln{stroke-width:1.1;opacity:.7}

/* Le lanceur d'AVA : capsule à logo, en bas à droite ; s'élargit au focus */
.ecm-pill{position:absolute;right:14px;bottom:14px;z-index:4;display:flex;align-items:center;gap:8px;width:300px;height:48px;padding:4px 5px 4px 4px;border-radius:999px;
  background:rgba(255,255,255,.9);border:1px solid color-mix(in srgb,var(--av) 55%,transparent);
  box-shadow:0 18px 40px -18px rgba(20,20,24,.45),inset 0 1px 0 rgba(255,255,255,.6);
  transition:width .45s cubic-bezier(.32,.72,.32,1),opacity .35s,transform .45s var(--ez)}
.ecm-pill .lg{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--av) 10%,#fff)}
.ecm-pill .lg .avamark{width:24px;height:24px}
.ecm-pill .in{position:relative;flex:1;min-width:0;display:grid;font-size:12px;color:var(--tx);white-space:nowrap;overflow:hidden}
.ecm-pill .in>span{grid-area:1/1;overflow:hidden;text-overflow:clip}
.ecm-pill .ph{color:color-mix(in srgb,var(--tx) 70%,transparent);transition:opacity .2s}
.ecm-pill .snd,.ecm-pin .snd{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--av);color:#fff;transition:transform .3s var(--ez-b)}
.ecm-pill .snd .ico,.ecm-pin .snd .ico{width:14px;height:14px;stroke-width:2}
.ecm.k1 .ecm-pill{width:440px;box-shadow:0 18px 40px -18px rgba(20,20,24,.45),0 0 0 4px color-mix(in srgb,var(--av) 16%,transparent)}
.ecm.k2 .ecm-pill .ph{opacity:0}
.ecm[data-s="3"] .ecm-pill .snd{transform:scale(.88);transition-delay:.75s}
.ecm.k3 .ecm-pill{opacity:0;transform:translateY(8px) scale(.97);transition-delay:1s}

/* Le panneau d'AVA */
.ecm-panel{position:absolute;right:14px;bottom:14px;z-index:5;width:372px;height:478px;display:flex;flex-direction:column;border-radius:18px;background:#fff;border:1px solid rgba(20,20,24,.1);overflow:hidden;
  box-shadow:0 30px 70px -26px rgba(20,20,24,.55);opacity:0;transform:translateY(16px) scale(.98);transform-origin:100% 100%;transition:opacity .45s,transform .6s var(--ez)}
.ecm.k3 .ecm-panel{opacity:1;transform:none;transition-delay:.95s}
.ecm-ph{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border-bottom:1px solid var(--bd);flex:none}
.ecm-ph .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--av) 10%,#fff);border:1px solid color-mix(in srgb,var(--av) 30%,transparent)}
.ecm-ph .av .avamark{width:17px;height:17px}
.ecm-ph b{font-family:'Schibsted Grotesk';font-size:13.5px;font-weight:600}
.ecm-ph small{font-size:10.5px;color:var(--tx-3)}
.ecm-ph .x{margin-left:auto;width:22px;height:22px;display:grid;place-items:center;color:var(--tx-3)}
.ecm-ph .x svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}
.ecm-th{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:12px 12px 10px;background:linear-gradient(180deg,#FFFFFF 0%,#FFFAF4 100%);overflow:hidden}
.ecm-u{align-self:flex-end;max-width:88%;background:#18181B;color:#fff;font-size:11.5px;font-weight:500;line-height:1.4;padding:7px 12px;border-radius:14px 14px 4px 14px}
.ecm-a{align-self:flex-start;max-width:100%;background:#fff;border:1px solid var(--bd);border-radius:14px 14px 14px 4px;padding:9px 11px;font-size:11.5px;line-height:1.45;color:var(--tx)}
.ecm-a.a2,.ecj-s4{display:flex;align-items:flex-start;gap:7px}
.ecm-a .ico,.ecj-s4 .ico{width:13px;height:13px;flex:none;margin-top:2px;color:var(--av);stroke-width:2.2}
.ecm-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}
.ecm-card{display:flex;flex-direction:column;gap:3px;min-width:0;padding:6px;border:1px solid var(--bd);border-radius:10px;background:#fff}
.ecm-card .im{height:50px;border-radius:7px;background:#F3F1EC;display:grid;place-items:center;margin-bottom:3px}
.ecm-card .im .ec-big{width:40px;height:40px}
.ecm-card>b{font-size:10.5px;font-weight:600;line-height:1.3}
.ecm-card .pr{font-size:9.5px;color:var(--tx-2);white-space:nowrap}
.ecm-card .pr b{color:var(--tx);font-weight:600}
.ecm-card .cta{margin-top:4px;text-align:center;font-size:9.5px;font-weight:600;padding:5px 0;border-radius:7px;background:var(--tx);color:#fff}
.ecm-u,.ecm-a,.ecm-card{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .55s var(--ez-b)}
.ecm.k3 .u1{opacity:1;transform:none;transition-delay:1.25s}
.ecm.k3 .a1{opacity:1;transform:none;transition-delay:1.75s}
.ecm.k3 .ecm-card{opacity:1;transform:none;transition-delay:calc(var(--i) * 160ms + 2s)}
.ecm.k5 .u2{opacity:1;transform:none;transition-delay:.35s}
.ecm.k5 .a2{opacity:1;transform:none;transition-delay:1s}
.ecm-pin{flex:none;display:flex;align-items:flex-end;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--bd)}
.ecm-pin .in{position:relative;flex:1;min-width:0;min-height:42px;display:grid;align-items:center;padding:6px 11px;border-radius:12px;border:1px solid var(--bd-2);font-size:11px;line-height:1.4;color:var(--tx);transition:border-color .3s}
.ecm-pin .in>span{grid-area:1/1}
.ecm-pin .ph{color:var(--tx-3);transition:opacity .2s}
.ecm-pin .ty{transition:opacity .25s}
.ecm.k4 .ecm-pin .ph{opacity:0}
.ecm.k4 .ecm-pin .in{border-color:color-mix(in srgb,var(--av) 60%,transparent)}
.ecm[data-s="5"] .ecm-pin .snd{transform:scale(.88);transition-delay:.6s}
.ecm.k5 .ecm-pin .ty{opacity:0;transition-delay:.3s}
.ecm.k5 .ecm-pin .ph{opacity:1;transition-delay:.35s}
.ecm.k5 .ecm-pin .in{border-color:var(--bd-2);transition-delay:.3s}

/* ---------- Entre les deux : la voie ---------- */
.ecm-lane{position:absolute;left:var(--sw);top:52px;width:calc(var(--bx) - var(--sw));height:572px;z-index:1;pointer-events:none;--ly:196px}
.ecm-lane>i{position:absolute;left:-12px;right:-12px;height:1.5px;background:var(--bd-2);overflow:hidden}
.ecm-lane>i:nth-child(1){top:calc(var(--ly) - 7px)}.ecm-lane>i:nth-child(2){top:var(--ly)}.ecm-lane>i:nth-child(3){top:calc(var(--ly) + 7px)}
.ecm-lane>i::after{content:"";position:absolute;inset:0;background:var(--av);transform:translateX(-101%)}
.ecm.k6 .ecm-lane>i::after{animation:ecm-sweep 1.1s var(--ez) .1s forwards}
.ecm.k6 .ecm-lane>i:nth-child(1)::after{animation-delay:.04s}.ecm.k6 .ecm-lane>i:nth-child(3)::after{animation-delay:.16s}
@keyframes ecm-sweep{0%{transform:translateX(-101%)}100%{transform:none}}
/* la capsule ne passe sur rien : elle sort de sous le site et plonge sous Stolip, à la hauteur de la ligne #2052 */
.ecm-lane .cap{position:absolute;left:50%;top:calc(var(--ly) + .75px);display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 12px 0 5px;border-radius:13px;background:var(--av);
  font-family:'Spline Sans Mono';font-size:10.5px;font-weight:500;color:#0A0B0D;white-space:nowrap;opacity:0;transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px var(--bg)}
.ecm-lane .cap .avamark{width:17px;height:17px;padding:1px;border-radius:50%;background:#fff}
.ecm-lane .cap .avamark>use{stroke:var(--av)}
.ecm.k6 .cap{animation:ecm-out 1.6s cubic-bezier(.45,0,.3,1) .05s forwards}
@keyframes ecm-out{0%{opacity:1;transform:translate(calc(-50% - 140px),-50%)}38%{transform:translate(calc(-50% - 4px),-50%)}62%{transform:translate(calc(-50% + 4px),-50%)}99%{opacity:1;transform:translate(calc(-50% + 140px),-50%)}100%{opacity:0;transform:translate(calc(-50% + 140px),-50%)}}

/* ---------- Chez vous : Stolip ---------- */
.ecm-bo{position:absolute;z-index:2;left:var(--bx);top:var(--by);width:500px;height:572px}
.ecm-bc2{opacity:0;transition:opacity .3s}
.ecm.k7 .ecm-bc2{opacity:1;transition-delay:1s}

/* Vue 1 — la liste des devis */
.ecm-list,.ecm-fi{position:absolute;left:0;right:0;top:46px;bottom:0;padding:14px 16px;transition:opacity .45s,transform .6s var(--ez)}
.ecm-list{overflow:hidden;border-radius:0 0 14px 14px}
.ecm-more{position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;background:linear-gradient(180deg,transparent,var(--bg-2) 82%)}
.ecm-lh{display:flex;align-items:center;justify-content:space-between}
.ecm-lh .mk-btn .ico{width:11px;height:11px}
.ecm-fc{display:flex;gap:5px;margin:12px 0 10px}
.ecm-fc span{font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid var(--bd);color:var(--tx-3)}
.ecm-fc .on{background:var(--ac-dim);border-color:var(--bd-2);color:var(--tx)}
.ecm-tr{display:grid;grid-template-columns:70px minmax(0,1fr) 92px 98px;gap:10px;align-items:center;padding:0 10px;height:46px;border-bottom:1px solid var(--bd);font-size:12px;color:var(--tx-2);font-variant-numeric:tabular-nums}
.ecm-tr.h{height:28px;font-family:'Spline Sans Mono';font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3)}
.ecm-tr .r{text-align:right}
.ecm-tr .rf{color:var(--tx);font-weight:600}
.ecm-tr small{display:block;font-family:'Spline Sans Mono';font-size:9px;font-weight:400;color:var(--tx-3);margin-top:1px}
.ecm-tr .cl{color:var(--tx);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecm-pill-s{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-family:'Spline Sans Mono';font-size:10px;padding:3px 9px;border-radius:999px;border:1px solid var(--bd-2);color:var(--tx-2);white-space:nowrap}
.ecm-pill-s .d{width:6px;height:6px;border-radius:50%;background:currentColor}
/* la demande arrive en tête */
.ecm-rows{position:relative}
.ecm-tr.nw{height:0;opacity:0;overflow:hidden;border-bottom-color:transparent;background:rgba(255,255,255,.06);border-radius:8px;
  transition:height .55s var(--ez),opacity .4s,background .8s,border-color .3s}
.ecm-tr.nw .ecm-pill-s{background:var(--tx);border-color:var(--tx);color:var(--bg)}
.ecm.k6 .ecm-tr.nw{height:46px;opacity:1;border-bottom-color:var(--bd);transition-delay:1.2s,1.3s,1.2s,1.2s}
.ecm[data-s="7"] .ecm-tr.nw{background:rgba(255,255,255,.1)}
.ecm.k7 .ecm-list{opacity:0;transform:translateX(-14px);transition-duration:.25s,.4s;transition-delay:.88s;pointer-events:none}

/* Vue 2 — la fiche du devis #2052 */
.ecm-fi{display:flex;flex-direction:column;gap:7px;padding-bottom:58px;opacity:0;transform:translateX(16px);pointer-events:none}
.ecm.k7 .ecm-fi{opacity:1;transform:none;transition-delay:1.12s}
.ecm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ecm-ttl{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:10px;row-gap:3px}
.ecm-ttl small{grid-column:1 / span 2;font-size:11.5px;color:var(--tx-3);white-space:nowrap}
.ecm-acts{position:relative;display:flex;align-items:center;gap:7px}
.ecm-acts .mk-btn .ico{width:11px;height:11px}
.ecm-st{position:relative;display:inline-grid;grid-template-columns:auto auto;transition:background .4s,color .4s,border-color .4s}
.ecm-st .s{grid-column:2;grid-row:1;opacity:0;transition:opacity .3s}
.ecm-st .s0{opacity:1}
.ecm.k13 .ecm-st .s0{opacity:0;transition-delay:.9s}.ecm.k13 .ecm-st .s1{opacity:1;transition-delay:.9s}
.ecm.k13 .ecm-st{background:var(--tx);color:var(--bg);border-color:var(--tx);transition-delay:.9s}
.ecm-menu{position:absolute;right:0;top:36px;z-index:12;width:232px;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)}
.ecm-menu span{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;font-size:12px;color:var(--tx-2)}
.ecm-menu .hl{color:var(--tx)}
.ecm-menu .ico{width:13px;height:13px}
.ecm[data-s="12"] .ecm-menu{opacity:1;transform:none;transition-delay:.75s}
.ecm[data-s="13"] .ecm-menu .hl{background:rgba(255,255,255,.08)}
.ecm[data-s="13"] .ecm-menu{opacity:0;transition-delay:.9s,.9s}

/* Contacts : la demande du chat a créé un contact sans e-mail (téléphone seul) ; Julie ajoute la fiche
   de Paul (déjà client, avec son espace), puis ★ « Définir comme contact principal » */
.ecm-ct{flex:none;display:flex;align-items:center;gap:6px;height:38px}
.ecm-ct>.mk-lbl{flex:none;margin-right:2px}
.ecm-slot{display:grid}
.ecm-slot>*{grid-area:1/1}
.ecm-cadd{justify-self:start;align-self:center;transition:opacity .3s,background .3s}
.ecm-cadd .ico{width:11px;height:11px}
.ecm-cc{display:inline-grid;grid-template-columns:20px auto auto;align-items:center;column-gap:6px;height:36px;padding:0 6px;border:1px solid var(--bd);border-radius:9px;background:rgba(255,255,255,.02);transition:border-color .4s,background .4s}
.ecm-cc .mk-av{width:20px;height:20px;font-size:8px}
.ecm-cc .nm b{display:block;font-size:11px;font-weight:600;line-height:1.25;color:var(--tx)}
.ecm-cc .nm small{display:block;font-family:'Spline Sans Mono';font-size:8.5px;line-height:1.3;color:var(--tx-3);white-space:nowrap}
.ecm-pp,.ecm-star{grid-column:3;grid-row:1;transition:opacity .3s,transform .4s var(--ez-b)}
.ecm-pp{justify-self:end;padding:2px 6px;font-size:9px;gap:4px}
.ecm-pp .d{display:none}
.ecm-star{justify-self:end;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--tx-2)}
.ecm-star .ico{width:13px;height:13px;stroke-width:1.7}
/* au départ : le contact du chat est principal ; la fiche de Paul n'est pas encore ajoutée */
.ecm-cc.c1 .ecm-star,.ecm-cc.c2 .ecm-pp{opacity:0;transform:scale(.8)}
.ecm-cc.c2{opacity:0;transform:translateY(4px) scale(.97);transition:opacity .35s,transform .45s var(--ez-b),border-color .4s,background .4s}
.ecm[data-s="8"] .ecm-cadd{background:rgba(255,255,255,.1);transition-delay:.7s}
.ecm.k8 .ecm-cadd{opacity:0;transition-delay:.85s}
.ecm.k8 .ecm-cc.c2{opacity:1;transform:none;transition-delay:.9s}
.ecm[data-s="9"] .ecm-cc.c2 .ecm-star{background:rgba(255,255,255,.1);color:var(--tx);transition-delay:.7s}
.ecm.k9 .ecm-cc.c2 .ecm-star{opacity:0;transform:scale(.8);transition-delay:.85s}
.ecm.k9 .ecm-cc.c2 .ecm-pp{opacity:1;transform:none;transition-delay:.9s}
.ecm.k9 .ecm-cc.c2{border-color:var(--bd-2);background:rgba(255,255,255,.05);transition-delay:.9s}
.ecm.k9 .ecm-cc.c1 .ecm-pp{opacity:0;transform:scale(.8);transition-delay:.85s}
.ecm.k9 .ecm-cc.c1 .ecm-star{opacity:1;transform:none;transition-delay:.95s}

/* le projet : ce qu'AVA a transmis */
.ecm-prj{flex:none;padding:8px 13px 9px;border-radius:11px;border:1px solid var(--bd);background:rgba(255,255,255,.02)}
.ecm-prh{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.ecm-tag{display:inline-flex;align-items:center;gap:6px;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-2);padding:2px 8px 2px 4px;border-radius:999px;border:1px solid var(--bd-2)}
.ecm-tag .avamark{width:14px;height:14px}
.ecm-prj p{font-size:12px;line-height:1.42;color:var(--tx)}
.ecm-prj p b{font-weight:600}
.ecm-prj p.m{margin-top:4px;font-family:'Spline Sans Mono';font-size:10px;line-height:1.5;color:var(--tx-2)}

/* les lignes : vides, puis chiffrées au palier */
.ecm-lines{flex:none;position:relative;border:1px solid var(--bd);border-radius:11px;overflow:hidden;height:116px}
.ecm-lr{display:grid;grid-template-columns:30px minmax(0,1fr) 34px 36px 58px 84px;gap:8px;align-items:center;padding:0 12px;height:43px;font-size:12px;color:var(--tx-2);font-variant-numeric:tabular-nums}
.ecm-lr.h{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)}
.ecm-lr.h>span:first-child{grid-column:1 / span 2}
.ecm-lr.l2{border-top:1px solid var(--bd)}
.ecm-lr .r{text-align:right}
.ecm-lr .b{color:var(--tx);font-weight:600}
.ecm-lr .th{width:30px;height:30px;border-radius:7px;background:var(--bg);border:1px solid var(--bd);display:grid;place-items:center}
.ecm-lr .th .ec-pr{width:20px;height:20px}
.ecm-lr .nm{min-width:0}
.ecm-lr .nm b{display:block;font-size:12px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecm-lr .nm small{display:block;font-family:'Spline Sans Mono';font-size:8.5px;color:var(--tx-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecm-lr.l1,.ecm-lr.l2{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .55s var(--ez)}
/* les lignes arrivent au clic sur « Ajouter un produit » (fin de l'état 10) : les totaux glissent avec elles (état 11) */
.ecm.k11 .ecm-lr.l1{opacity:1;transform:none;transition-delay:.05s}
.ecm.k11 .ecm-lr.l2{opacity:1;transform:none;transition-delay:.25s}
.ecm-empty{position:absolute;left:0;right:0;top:28px;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:opacity .35s}
.ecm-empty small{font-size:11px;color:var(--tx-3)}
.ecm-empty .mk-btn .ico{width:11px;height:11px}
.ecm[data-s="10"] .ecm-add{background:rgba(255,255,255,.1);color:var(--tx);transition-delay:.65s}
.ecm.k11 .ecm-empty{opacity:0;transition-delay:0s;transition-duration:.2s}

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

.ecm-low{flex:none;display:flex;align-items:center;gap:12px;height:36px;padding:0 12px;border-radius:10px;border:1px dashed var(--bd-2);transition:border-color .4s}
.ecm-rl{display:grid;min-width:0}
.ecm-rl>span{grid-area:1/1;display:flex;gap:6px;align-items:center;transition:opacity .4s}
.ecm-rl .r0{font-size:11px;color:var(--tx-3)}
.ecm-rl .r1{opacity:0}
.ecm-rl .r1 span{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx);padding:3px 8px;border-radius:6px;border:1px solid var(--bd-2);white-space:nowrap}
.ecm-rc{margin-left:auto;opacity:0;transition:opacity .4s}
.ecm.k13 .ecm-rl .r0{opacity:0;transition-delay:1.2s}
.ecm.k13 .ecm-rl .r1{opacity:1;transition-delay:1.3s}
.ecm.k13 .ecm-rc{opacity:1;transition-delay:1.5s}
.ecm.k13 .ecm-low{border-style:solid;transition-delay:1.3s}

.ecm-t{left:16px;bottom:12px;max-width:468px;white-space:nowrap}
.ecm.k13 .t-send{opacity:1;transform:none;transition-delay:1s}

/* ---------- Curseur : une position par étape (coordonnées dans .ecm, 1120 px de large).
   Côté site, depuis son bord droit (--sw : le lanceur et le panneau d'AVA y sont ancrés) ; chez Stolip,
   depuis le coin de la fenêtre (--bx / --by) : sur téléphone, elle se pose par-dessus le site.
   Mesurées au banc (getBoundingClientRect). ---------- */
.ecm .mk-cur{--cx:calc(var(--sw) - 156px);--cy:589px}
.ecm.k1 .mk-cur{--cx:calc(var(--sw) - 168px);--cy:586px}
.ecm.k3 .mk-cur{--cx:calc(var(--sw) - 38px);--cy:585px}
.ecm.k4 .mk-cur{--cx:calc(var(--sw) - 218px);--cy:592px}
.ecm.k5 .mk-cur{--cx:calc(var(--sw) - 45px);--cy:582px}
.ecm.k6 .mk-cur{--cx:calc(var(--sw) - 20px);--cy:520px}
.ecm.k7 .mk-cur{--cx:calc(var(--bx) + 92px);--cy:calc(var(--by) + 197px)}
.ecm.k8 .mk-cur{--cx:calc(var(--bx) + 298px);--cy:calc(var(--by) + 140px)}
.ecm.k9 .mk-cur{--cx:calc(var(--bx) + 461px);--cy:calc(var(--by) + 139px)}
.ecm.k10 .mk-cur{--cx:calc(var(--bx) + 248px);--cy:calc(var(--by) + 346px)}
.ecm.k11 .mk-cur{--cx:calc(var(--bx) + 455px);--cy:calc(var(--by) + 99px)}
.ecm.k12 .mk-cur{--cx:calc(var(--bx) + 416px);--cy:calc(var(--by) + 78px)}
.ecm.k13 .mk-cur{--cx:calc(var(--bx) + 372px);--cy:calc(var(--by) + 152px)}
.ecm[data-s="1"] .mk-cur::after,.ecm[data-s="3"] .mk-cur::after,.ecm[data-s="4"] .mk-cur::after,.ecm[data-s="5"] .mk-cur::after,
.ecm[data-s="7"] .mk-cur::after,.ecm[data-s="8"] .mk-cur::after,.ecm[data-s="9"] .mk-cur::after,.ecm[data-s="10"] .mk-cur::after,
.ecm[data-s="12"] .mk-cur::after,.ecm[data-s="13"] .mk-cur::after{animation:clk .55s var(--ez) .8s forwards}
.ecm[data-s="1"] .mk-cur::after{animation-delay:.2s}
.ecm[data-s="8"] .mk-cur::after,.ecm[data-s="9"] .mk-cur::after{animation-delay:.72s}
.ecm[data-s="10"] .mk-cur::after{animation-delay:.62s}
/* après l'envoi, le curseur quitte le menu et se range dans la barre du haut (rien à masquer) ;
   transition (et non animation) : en mouvement réduit, l'état final le montre rangé */
.ecm[data-s="13"] .mk-cur{translate:-72px -122px;transition:transform .9s cubic-bezier(.55,.05,.25,1),opacity .4s,translate .8s cubic-bezier(.55,.05,.25,1) 1.5s}

/* ---------- Téléphone : la fenêtre de Stolip se pose par-dessus le site quand la demande arrive ---------- */
@media(max-width:700px){
  .ecm{--sw:560px;--bx:44px;--by:96px;height:690px}
  .ecm-lane{display:none}
  .ecm-when{left:290px}
  .ecm-bo{z-index:8;box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4);opacity:0;transform:translateX(60px);transition:opacity .6s,transform .7s var(--ez)}
  .ecm.k6 .ecm-bo{opacity:1;transform:none;transition-delay:.4s}
  .ecm.k6 .ecm-tr.nw{transition-delay:1.3s,1.4s,1.3s,1.3s}
}

/* ======================= Le trajet ======================= */
/* L'étape porte sa pastille « activé à la mise en route » sous sa date (COHERENCE). */
.ecj .uc-step>.fx-onb{align-self:flex-start;margin-top:12px}
/* AVA dans la pastille « qui agit » */
.ecj .uc-auto.ecj-ava .avamark{width:16px;height:16px}
/* Calendrier : du 14/09 au 01/10, AVA répond sur le site (pointillé orange, au-dessus de la voie) */
.ecj-run{position:absolute;z-index:1;top:20px;height:2px;left:calc(18px + (100% - 36px) / var(--n) * .5);width:calc((100% - 36px) / var(--n) * 17);
  background:repeating-linear-gradient(90deg,var(--c-ava) 0 4px,transparent 4px 8px);opacity:0;transition:opacity .5s}
.ecj-run span{position:absolute;left:50%;top:-17px;transform:translateX(-50%);font-family:'Spline Sans Mono';font-size:8.5px;letter-spacing:.04em;color:var(--c-ava);white-space:nowrap}
.a2 .ecj-run{opacity:1;transition-delay:.6s}
.ecj-cap .c1{display:none}
[data-active="4"] .ecj-cap .c0,[data-active="5"] .ecj-cap .c0,[data-active="6"] .ecj-cap .c0{display:none}
[data-active="4"] .ecj-cap .c1,[data-active="5"] .ecj-cap .c1,[data-active="6"] .ecj-cap .c1{display:inline}
@media(min-width:901px) and (max-height:800px){.ecj-run{top:15px}.ecj-run span{top:-14px}}
@media(max-width:900px){.ecj-run{left:calc(10px + (100% - 20px) / var(--n) * .5);width:calc((100% - 20px) / var(--n) * 17);top:16px}.ecj-run span{display:none}}

/* L0 — le module PrestaShop « AVA Platform » */
.ecj-mod{width:470px;padding:16px 18px}
.ecj-drop{display:flex;justify-content:center;align-items:center;height:46px;margin-top:6px;border:1.5px dashed var(--bd-2);border-radius:10px;background:var(--bg-2)}
.ecj-zip{display:inline-flex;align-items:center;gap:7px;font-family:'Spline Sans Mono';font-size:11px;color:var(--tx);padding:5px 11px;border-radius:7px;border:1px solid var(--bd-2);background:#fff;
  transform:translateY(-34px);opacity:0;transition:transform .6s var(--ez-b),opacity .3s}
.ecj-zip .ico{width:13px;height:13px}
.a0 .ecj-zip{transform:none;opacity:1;transition-delay:.3s}
.ecj-mrow{display:flex;align-items:flex-start;gap:12px;margin-top:12px}
.ecj-mq{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;flex:none;background:#141418;color:#fff}
.ecj-mq .ico{width:17px;height:17px}
.ecj-mt b{display:block;font-size:13px;font-weight:600}
.ecj-mt b small{font-family:'Spline Sans Mono';font-size:10px;font-weight:400;color:var(--tx-3);margin-left:6px}
.ecj-mt>span{display:block;font-size:11px;line-height:1.45;color:var(--tx-2);margin-top:2px}
.ecj-pg{margin-top:12px;height:4px}
.a0 .ecj-pg i{--v:1;transition-delay:.7s;transition-duration:1.1s}
.ecj-chk{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.ecj-chk>span{display:flex;align-items:center;gap:9px;font-size:12px;opacity:.25;transition:opacity .4s;transition-delay:calc(var(--i) * 280ms + 1.7s)}
.ecj-chk i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#141418;color:#fff;flex:none}
.ecj-chk i .ico{width:11px;height:11px;stroke-width:2.6}
.a0 .ecj-chk>span{opacity:1}
.ecj-stat{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--bd);font-size:12px}
.ecj-stat b{font-weight:600}
.ecj-stat code{font-family:'Spline Sans Mono';font-size:10.5px;background:var(--bg-4);padding:1px 5px;border-radius:4px}
/* « non connectée » reste affiché jusqu'à la bascule (dernière coche cochée) : jamais de « Statut : » vide */
.ecj-sv{display:inline-grid}
.ecj-sv>span{grid-area:1/1;white-space:nowrap}
.ecj-stat .s0{color:var(--tx-3)}
.ecj-stat .s0,.ecj-stat .s1{transition:opacity .3s,transform .45s var(--ez)}
.ecj-stat .s1{opacity:0;transform:translateY(4px)}
.a0 .ecj-stat .s0{opacity:0;transform:translateY(-4px);transition-delay:2.45s}
.a0 .ecj-stat .s1{opacity:1;transform:none;transition-delay:2.6s}

/* L1 — Ma boutique : la première synchro (demandée par le module à l'installation), puis le temps réel */
.ecj-shop{width:480px;padding:15px 17px}
.ecj-sh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ecj-sh .mk-h{font-size:16px}
.a1 .ecj-boot{opacity:1;transition-delay:.2s}
.ecj-kh{margin-top:14px;font-family:'Schibsted Grotesk';font-size:12.5px;font-weight:600;color:var(--tx)}
.ecj-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.ecj-kpi{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;border:1px solid var(--bd);background:rgba(255,255,255,.02)}
.ecj-kpi b{font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--tx);font-variant-numeric:tabular-nums}
.ecj-kpi small{font-size:10.5px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.ecj-kpi.k1 b,.ecj-kpi.k1 small{opacity:0;transform:translateY(4px);transition:opacity .4s,transform .5s var(--ez)}
.a1 .ecj-kpi.k1 b{opacity:1;transform:none;transition-delay:.5s}
.a1 .ecj-kpi.k1 small{opacity:1;transform:none;transition-delay:.6s}
.ecj-rt{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1.15fr);align-items:center;width:480px}
.ecj-rt .mk-card{display:flex;flex-direction:column;gap:3px;padding:10px 12px}
.ecj-rt b{font-size:12px;font-weight:600}
.ecj-rt .v{display:flex;align-items:center;gap:6px;font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx-2)}
.ecj-rt .v em{font-style:normal;color:var(--tx);font-weight:500}
.ecj-rt .v .mk-chip{margin-left:auto;padding:2px 7px;font-size:9px;opacity:0;transform:scale(.7);transition:opacity .3s,transform .45s var(--ez-b)}
.ecj-rt-a,.ecj-rt-b{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .55s var(--ez)}
.a1 .ecj-rt-a{opacity:1;transform:none;transition-delay:1.6s}
.a1 .ecj-rt-b{opacity:1;transform:none;transition-delay:2.3s}
.a1 .ecj-rt-b .mk-chip{opacity:1;transform:none;transition-delay:2.8s}
.ecj-rt-w{position:relative;height:22px;display:grid;place-items:center}
.ecj-rt-w i{position:absolute;left:4px;right:4px;top:50%;height:1.5px;background:var(--bd-2);overflow:hidden}
.ecj-rt-w i::after{content:"";position:absolute;inset:0;background:var(--c-branchements);transform:translateX(-101%);transition:transform .7s var(--ez)}
.a1 .ecj-rt-w i::after{transform:none;transition-delay:1.9s}
.ecj-rt-w span{position:relative;font-family:'Spline Sans Mono';font-size:9px;color:#0A0B0D;background:var(--c-branchements);padding:1px 6px;border-radius:5px;opacity:0;transition:opacity .3s}
.a1 .ecj-rt-w span{opacity:1;transition-delay:2s}

/* L2 — /bienvenue : tout est en place */
.ecj-wel{width:480px;padding:0 18px 16px}
.ecj-tn{display:flex;gap:4px;margin:0 -18px;padding:9px 12px;border-bottom:1px solid var(--bd);font-size:11px;color:var(--tx-3)}
.ecj-tn span{padding:4px 9px;border-radius:7px}
.ecj-tn .on{background:var(--ac-dim);color:var(--tx)}
.ecj-wh{margin-top:14px;font-family:'Schibsted Grotesk';font-weight:600;font-size:18px;color:var(--tx)}
.ecj-wh small{display:block;margin-top:3px;font-family:'Hanken Grotesk';font-weight:400;font-size:11.5px;color:var(--tx-3)}
.ecj-jg{display:flex;align-items:center;gap:10px;margin:12px 0 6px}
.ecj-jg .mk-bar{flex:1}
.ecj-jg .mk-bar i{--v:.667}
.a2 .ecj-jg .mk-bar i{--v:1;transition-delay:1s}
.ecj-jg .mk-lbl{display:inline-grid;grid-template-columns:auto auto;column-gap:4px}
.ecj-jg .j2,.ecj-jg .j3{grid-column:1;grid-row:1;transition:opacity .3s}
.ecj-jg .j3{opacity:0}
.a2 .ecj-jg .j2{opacity:0;transition-delay:1s}.a2 .ecj-jg .j3{opacity:1;transition-delay:1s}
.ecj-et{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;align-items:start;padding:10px 0;border-top:1px solid var(--bd)}
.ecj-et .nm{position:relative;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--tx);color:var(--bg)}
.ecj-et .nm .ico{width:12px;height:12px;stroke-width:2.6}
.ecj-et b{display:block;font-size:12.5px;font-weight:600;color:var(--tx)}
.ecj-et small{display:block;margin-top:2px;font-size:11px;line-height:1.45;color:var(--tx-2)}
.ecj-et small u{text-decoration:none;color:var(--tx)}
.ecj-et small b{display:inline;font-size:inherit}
.ecj-tons{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ecj-tons span{font-size:10px;padding:3px 8px;border-radius:999px;border:1px solid var(--bd);color:var(--tx-3)}
.ecj-tons .on{border-color:var(--tx-2);color:var(--tx)}
/* l'étape 3 se coche quand la première conversation est servie */
.ecj-et.e3 .nm{background:transparent;border:1.5px solid var(--bd-2);color:var(--tx-2);font-family:'Spline Sans Mono';font-size:10.5px;transition:background .4s,border-color .4s,color .4s}
.ecj-et.e3 .nm>*{grid-area:1/1;transition:opacity .3s}
.ecj-et.e3 .nm .ico{opacity:0}
.a2 .ecj-et.e3 .nm{background:var(--tx);border-color:var(--tx);color:var(--bg);transition-delay:1s}
.a2 .ecj-et.e3 .nm .n0{opacity:0;transition-delay:1s}
.a2 .ecj-et.e3 .nm .ico{opacity:1;transition-delay:1s}
.ecj-et.e3 small{opacity:0;transform:translateY(4px);transition:opacity .45s,transform .55s var(--ez)}
.a2 .ecj-et.e3 small{opacity:1;transform:none;transition-delay:1.3s}

/* L3 — sur brennor.fr : la conversation de Paul D. */
.ecj-site{width:470px;padding:0;overflow:hidden}
.ecj-sbar{display:flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-bottom:1px solid var(--bd);background:#F7F7F5}
.ecj-sbar>i{width:7px;height:7px;border-radius:50%;background:rgba(20,20,24,.13)}
.ecj-surl{display:inline-flex;align-items:center;gap:5px;margin-left:10px;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3);border:1px solid var(--bd);border-radius:6px;padding:2px 9px;background:#fff}
.ecj-surl .ico{width:10px;height:10px}
.ecj-swh{display:flex;align-items:baseline;gap:8px;padding:8px 12px;border-bottom:1px solid var(--bd)}
.ecj-swh .av{align-self:center;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,#F97316 10%,#fff);border:1px solid color-mix(in srgb,#F97316 30%,transparent)}
.ecj-swh .av .avamark{width:15px;height:15px}
.ecj-swh b{font-family:'Schibsted Grotesk';font-size:13px;font-weight:600}
.ecj-swh small{font-size:10.5px;color:var(--tx-3)}
.ecj-sth{display:flex;flex-direction:column;gap:8px;padding:11px 12px 12px;background:linear-gradient(180deg,#FFFFFF 0%,#FFFAF4 100%)}
.ecj-sth .ecm-u,.ecj-sth .ecm-a{opacity:1;transform:none}
.ecj-pc{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.ecj-pw{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;gap:7px 8px;align-items:center;min-width:0;padding:7px;border:1px solid var(--bd);border-radius:11px;background:#fff}
.ecj-pw .im{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:#F3F1EC}
.ecj-pw .im .ec-big{width:38px;height:38px}
.ecj-pw .bd{display:flex;flex-direction:column;gap:2px;min-width:0}
.ecj-pw .bd>b{font-size:10.5px;font-weight:600;line-height:1.3}
.ecj-pw .pr{font-size:9.5px;color:var(--tx-2);white-space:nowrap}
.ecj-pw .pr b{color:var(--tx);font-weight:600}
.ecj-pw .cta{grid-column:1 / span 2;display:block;text-align:center;font-size:10px;font-weight:600;padding:5px 0;border-radius:7px;background:var(--tx);color:#fff}
.ecj-s1,.ecj-s2,.ecj-s3,.ecj-s4,.ecj-pw{opacity:0!important;transform:translateY(8px)!important;transition:opacity .4s,transform .55s var(--ez-b)}
.a3 .ecj-s1{opacity:1!important;transform:none!important;transition-delay:.3s}
.a3 .ecj-s2{opacity:1!important;transform:none!important;transition-delay:1s}
.a3 .ecj-pw{opacity:1!important;transform:none!important;transition-delay:calc(var(--i) * 180ms + 1.4s)}
.a3 .ecj-s3{opacity:1!important;transform:none!important;transition-delay:2.4s}
.a3 .ecj-s4{opacity:1!important;transform:none!important;transition-delay:3.1s}

/* L4 — la demande devient le devis #2052 */
.ecj-dl{width:470px;padding:13px 15px}
.ecj-dr{display:grid;grid-template-columns:56px minmax(0,1fr) 90px auto;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;font-size:12px;color:var(--tx-2);font-variant-numeric:tabular-nums}
.ecj-dr+.ecj-dr{border-top:1px solid var(--bd);border-radius:0}
.ecj-dr .rf{color:var(--tx);font-weight:600}
.ecj-dr .cl{color:var(--tx);min-width:0}
.ecj-dr .cl small{display:block;font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
.ecj-dr .r{text-align:right}
.ecj-dr.nw{background:rgba(255,255,255,.06);opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .55s var(--ez-b)}
.ecj-dr.nw .ecm-pill-s{background:var(--tx);border-color:var(--tx);color:var(--bg)}
.a4 .ecj-dr.nw{opacity:1;transform:none;transition-delay:.5s}
.ecj-prj{width:470px;padding:13px 15px;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s var(--ez)}
.a4 .ecj-prj{opacity:1;transform:none;transition-delay:1.1s}
.ecj-ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--bd)}
.ecj-ph .mk-h{font-size:15px}
.ecj-ph .mk-h small{display:block;margin-top:2px;font-family:'Hanken Grotesk';font-size:11px;font-weight:400;letter-spacing:0;color:var(--tx-3)}
.ecj-prj .t{font-size:12.5px;line-height:1.5;color:var(--tx)}
.ecj-prj .t b{font-weight:600}
.ecj-kv{display:flex;flex-direction:column;margin-top:9px;border-top:1px solid var(--bd)}
.ecj-kv>span{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;padding:6px 0;border-bottom:1px solid var(--bd);font-size:12px;color:var(--tx);
  opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .45s var(--ez);transition-delay:calc(var(--i) * 220ms + 1.5s)}
.ecj-kv>span:last-child{border-bottom:none}
.ecj-kv em{font-style:normal;font-family:'Spline Sans Mono';font-size:9.5px;letter-spacing:.04em;color:var(--tx-3);align-self:center}
.a4 .ecj-kv>span{opacity:1;transform:none}

/* L5 — l'appel, les lignes au palier, le résumé */
.ecj-call{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tx-2);opacity:0;transition:opacity .5s}
.ecj-call .ico{width:14px;height:14px;flex:none}
.a5 .ecj-call{opacity:1;transition-delay:.3s}
/* le contact principal : la fiche de Paul, avec son espace (l'envoi pour validation part vers elle) */
.ecj-ct{width:520px;display:flex;align-items:center;gap:8px;padding:9px 12px}
.ecj-ct>.mk-lbl{flex:none;width:62px}
.ecj-cc{flex:1 1 0;display:flex;align-items:center;gap:8px;min-width:0;padding:5px 9px 5px 6px;border-radius:9px;border:1px solid var(--bd)}
.ecj-cc .nm{min-width:0}
.ecj-cc .nm small{white-space:nowrap}
.ecj-cc>.mk-chip{margin-left:auto}
.ecj-cc .mk-av{width:22px;height:22px;font-size:8.5px;flex:none}
.ecj-cc .nm b{display:block;font-size:11.5px;font-weight:600;line-height:1.2;color:var(--tx)}
.ecj-cc .nm small{display:block;font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
.ecj-cc.o{flex:0 1 auto;opacity:.55}
.ecj-cc.p{border-color:var(--bd-2);background:rgba(255,255,255,.04)}
.ecj-cc .mk-chip{padding:2px 7px;font-size:9px;gap:4px}
.ecj-cc .mk-chip .ico{width:10px;height:10px;fill:currentColor;stroke:none}
.ecj-ct{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez)}
.a5 .ecj-ct{opacity:1;transform:none;transition-delay:.5s}
.ecj-ln{width:520px;padding:13px 15px}
.ecj .lay5{gap:12px}
.ecj-pt{margin-top:6px}
.ecj-pt .mk-tr{grid-template-columns:minmax(0,1fr) 46px 58px 32px 52px 74px;gap:7px;padding:9px 11px;font-size:12px;font-variant-numeric:tabular-nums}
.ecj-pt .mk-tr.h{font-size:8px;padding:7px 11px}
.ecj-pt .b{font-weight:600;color:var(--tx)}
.ecj-pt .p1,.ecj-pt .p2{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez),background .45s}
.a5 .ecj-pt .p1{opacity:1;transform:none;transition-delay:1.1s}
.a5 .ecj-pt .p2{opacity:1;transform:none;transition-delay:1.45s}
.ecj-sum{width:480px;padding:12px 16px}
.ecj-sum .sl{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--tx-2);padding:5px 0;border-bottom:1px solid var(--bd)}
.ecj-sum .sl b{color:var(--tx);font-weight:600;font-variant-numeric:tabular-nums}
.ecj-sum .sl.tot{border-bottom:none}
.ecj-sum .sl.tot span{color:var(--tx);font-weight:600}
.ecj-sum .sl.tot b{font-family:var(--disp);font-size:20px;letter-spacing:-.02em}
.ecj-mg{display:flex;align-items:baseline;gap:12px;margin-top:5px;padding:8px 12px;border-radius:9px;border:1px solid var(--bd);background:rgba(255,255,255,.02)}
.ecj-mg b{font-size:15px;margin-left:auto;font-variant-numeric:tabular-nums}
.ecj-mg>span:last-child{font-family:'Spline Sans Mono';font-size:11px;color:var(--tx-2)}

/* L6 — l'envoi, les relances, le deal */
.ecj-mail{width:480px;padding:15px 17px}
.ecj-mh{display:flex;align-items:center;gap:12px}
.ecj-mh>.ico{width:30px;height:30px;padding:7px;border-radius:9px;border:1px solid var(--bd-2);color:var(--tx);flex:none}
.ecj-mh b{display:block;font-size:13.5px}
.ecj-mh small{font-size:11px;color:var(--tx-3)}
.ecj-mh .mk-chip{margin-left:auto;flex:none}
.ecj-link{display:flex;align-items:center;gap:10px;margin-top:11px;padding:8px 11px;border-radius:9px;border:1px dashed color-mix(in srgb,var(--c-espace-client) 55%,transparent);font-size:12px;color:var(--tx);
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez)}
.ecj-link .ico{width:15px;height:15px;color:var(--c-espace-client);flex:none}
.ecj-link small{display:block;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.a6 .ecj-link{opacity:1;transform:none;transition-delay:.8s}
.ecj-rg{grid-template-columns:.8fr .8fr 1.2fr}
.ecj-rg.q1,.ecj-rg.q2{opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .5s var(--ez)}
.a6 .ecj-rg.q1{opacity:1;transform:none;transition-delay:1.3s}
.a6 .ecj-rg.q2{opacity:1;transform:none;transition-delay:1.5s}
.ecj-mf{margin-top:9px;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.ecj-hs{width:480px;padding:13px 17px;border-color:color-mix(in srgb,var(--c-branchements) 40%,var(--bd-2));opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--ez)}
.a6 .ecj-hs{opacity:1;transform:none;transition-delay:2.1s}
.ecj-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ecj-hd b{display:block;font-size:12.5px;font-weight:600}
.ecj-hd small{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.ecj-hr{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;color:var(--tx-2)}
.ecj-hr>span:first-child{margin-right:4px}

/* ======================= Votre site n'est pas sur PrestaShop ? ======================= */
.ecs{margin-top:120px}
.ecs-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 48px;margin-bottom:26px}
.ecs-h h3{font-family:var(--disp);font-weight:600;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.016em;line-height:1.05}
.ecs-h p{max-width:58ch;font-size:15.5px;line-height:1.6;color:var(--tx-2)}
.ecs-t{border-top:1px solid var(--bd)}
.ecs-r{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr) minmax(0,1fr);gap:0 40px;padding:22px 0;border-bottom:1px solid var(--bd);font-size:15px;line-height:1.6;color:var(--tx-2);align-items:baseline}
.ecs-hd{padding:14px 0 12px;font-family:'Spline Sans Mono';font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.ecs-r .k{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:center}
.ecs-r .k .ico{width:18px;height:18px;color:var(--tx-2)}
.ecs-r .k b{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.02em;line-height:1.15;color:var(--tx)}
.ecs-r .k small{grid-column:2;font-family:'Spline Sans Mono';font-size:10px;letter-spacing:.03em;color:var(--tx-3);margin-top:3px}
.ecs-r.cur{position:relative}
.ecs-r.cur::before{content:"";position:absolute;left:-18px;top:22px;bottom:22px;width:3px;border-radius:2px;background:var(--fx-c)}
.ecs-r.cur .k .ico{color:var(--fx-c)}
.ecs-r.cur .k small{color:var(--fx-c)}
@media(max-width:820px){
  .ecs{margin-top:80px}
  .ecs-hd{display:none}
  .ecs-r{grid-template-columns:1fr;gap:8px;padding:20px 0;font-size:14.5px}
  .ecs-r>span:not(.k)::before{display:block;margin-bottom:2px;font-family:'Spline Sans Mono';font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}
  .ecs-r>span:nth-child(2)::before{content:"Ce qui s'installe"}
  .ecs-r>span:nth-child(3)::before{content:"Ce qu'AVA connaît"}
  .ecs-r.cur::before{left:-12px}
}

/* Tablette (520–900 px) : le panneau du trajet est bas (--vh plafonné à 240 px par cas/base.css) et la
   toile reste à l'échelle 1 ; les couches les plus hautes (400 px) dépasseraient. On les réduit ici. */
@media(min-width:520px) and (max-width:900px){.ecj .cx>.lay>*{zoom:.82}.ecj .cx>.lay5>*{zoom:.76}}