/* F—03 · Espace client — maquettes de templates/landing/features/espace-client.html.twig.
   Parti pris : le côté CLIENT est clair (îlots .lt posés sur la page sombre) ;
   ce qui remonte chez vous (Stolip) reste sombre.
   États : .k1…k12 / [data-s="n"] (timelines), [data-active="n"] + .a0 (scènes .ec-s1 et .ec-s2). */

/* ---------- Commun aux îlots clairs de la page ---------- */
.fx-espace-client .lt .mk-cur path{fill:#141418;stroke:#fff}
.fx-espace-client .lt .mk-cur::after{border-color:#141418}
.lt .win-top .dots i{background:rgba(20,20,24,.14)}
.ec-win .mk-float,.ec-dash .mk-float,.ec-sp .mk-float,.viz.lt .mk-float{box-shadow:0 18px 40px -14px rgba(20,20,24,.32),0 0 0 1px rgba(20,20,24,.04)}
.lt .mk-av{background:var(--bg-4);color:var(--tx-2);font-weight:600}
.ec-chrome{height:40px;gap:12px;background:#F1F1EE;border-bottom:1px solid var(--bd)}
.ec-chrome .win-url{max-width:360px;height:24px;background:#fff;color:var(--tx-2)}
.ec-chrome-sp{width:44px;flex:none}
.ec-pr{width:30px;height:30px;fill:#DCDCD7;stroke:#A6A7A2;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.ec-pr .ln{fill:none}
.ec-badge{display:inline-grid;align-items:center;font-size:11px;font-weight:600;line-height:1.2;padding:3px 9px;border-radius:999px;border:1px solid var(--bd-2);color:var(--tx-2);background:var(--bg-2);white-space:nowrap;transition:background .4s,color .4s,border-color .4s}
.ec-badge>span{grid-area:1/1;transition:opacity .35s}
.ec-badge .d{opacity:0}
.ec-badge.hot{border-color:var(--tx);color:var(--tx);background:#fff}
.ec-badge.sol{background:var(--tx);border-color:var(--tx);color:#fff}
.ec-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:9px;background:var(--tx);color:#fff;font-size:13px;font-weight:600;border:1px solid var(--tx);white-space:nowrap;
  transition:background .35s,color .35s,border-color .35s,opacity .35s,transform .2s,box-shadow .35s}
.ec-btn.ec-o{background:#fff;color:var(--tx);border-color:var(--bd-2)}
.ec-btn.sm{height:28px;padding:0 10px;font-size:11.5px;border-radius:7px}
.ec-btn.xs{height:24px;padding:0 8px;font-size:10.5px;border-radius:6px}
.ec-btn .ico{width:13px;height:13px}
.ec-sel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;height:30px;padding:0 8px 0 9px;border-radius:7px;border:1px solid var(--bd-2);background:#fff;
  font-size:11.5px;color:var(--tx);white-space:nowrap;transition:border-color .3s,box-shadow .3s}
.ec-sel .v{grid-area:1/1;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.ec-sel .v0{color:var(--tx-2)}
.ec-sel .v1{opacity:0}
.ec-sel .ico{grid-area:1/2;width:12px;height:12px;color:var(--tx-3)}
.ec-inp{display:flex;align-items:center;justify-content:center;height:30px;width:100%;border-radius:7px;border:1px solid var(--bd-2);background:#fff;font-size:12.5px;font-weight:600;color:var(--tx);
  font-variant-numeric:tabular-nums;transition:border-color .3s,box-shadow .3s}
.ec-sh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--bd)}
.ec-sh b{font-family:'Schibsted Grotesk';font-size:15px;font-weight:600;color:var(--tx)}
.ec-sh span{font-size:12px;color:var(--tx-2)}
/* Les listes déroulantes : ouvertes à l'étape du clic, refermées après le choix */
@keyframes ecHold{0%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes ecPop{0%{opacity:0;transform:translateY(10px) scale(.97)}14%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}

/* ---------- Hero : pastille « activé à la mise en route » ----------
   Dernier élément de .fx-hrow, sur sa propre ligne, juste sous les boutons. Grand écran : grille
   (chapeau à gauche sur deux rangs, boutons puis pastille à droite) ; petit écran : les boutons
   prennent la ligne, la pastille passe dessous. */
.fx-espace-client .ec-onb{align-self:flex-start}
@media(min-width:901px){
  .fx-espace-client .fx-hero .fx-hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;column-gap:48px;row-gap:12px;align-items:end}
  .fx-espace-client .fx-hero .fx-hrow .fx-sub{grid-column:1;grid-row:1/3}
  .fx-espace-client .fx-hero .fx-hrow .fx-cta{grid-column:2;grid-row:1}
  .fx-espace-client .ec-onb{grid-column:2;grid-row:2;justify-self:start}
}
@media(max-width:900px){
  .fx-espace-client .fx-hero .fx-hrow .fx-cta{flex-basis:100%}
  .fx-espace-client .ec-onb{margin-top:-16px}
}

/* ======================= Hero : le devis complété puis accepté ======================= */
.ec-win{width:1080px}
.ec-app{position:relative;height:630px;display:flex;flex-direction:column}
.ec-hd{display:flex;align-items:center;gap:22px;height:54px;padding:0 22px;border-bottom:1px solid var(--bd);flex:none}
.ec-logo{position:relative;width:26px;height:26px;border-radius:8px;background:var(--tx);flex:none}
.ec-logo i{position:absolute;left:7px;top:7px;width:12px;height:12px;border-radius:50% 50% 50% 3px;background:#fff}
.ec-nav{display:flex;gap:2px}
.ec-nav span{font-size:13px;color:var(--tx-2);padding:6px 10px;border-radius:7px}
.ec-nav .on{color:var(--tx);background:var(--bg-4);font-weight:600}
.ec-q{display:flex;align-items:center;gap:8px;height:32px;width:250px;padding:0 12px;border-radius:8px;border:1px solid var(--bd);background:var(--bg-2);font-size:12.5px;color:var(--tx-3)}
.ec-q .ico{width:14px;height:14px}
.ec-hr{margin-left:auto;display:flex;align-items:center;gap:16px}
.ec-selb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx-2)}
.ec-selb .ico,.ec-bell .ico{width:15px;height:15px;color:var(--tx-2)}
.ec-bell{display:grid}
.ec-pg{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:26px;padding:18px 22px 20px}

/* Colonne principale */
.ec-l{display:flex;flex-direction:column;min-width:0}
.ec-fil{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-2);white-space:nowrap}
.ec-fil>.ico{width:12px;height:12px;color:var(--tx-3)}
.ec-fil .cur{display:inline-flex;align-items:center;gap:5px;background:var(--tx);color:#fff;border-radius:6px;padding:3px 8px;font-size:11.5px;font-weight:600}
.ec-fil .cur .ico,.ec-fil .ec-st .ico{width:12px;height:12px}
.ec-fil .ec-st{display:inline-flex;align-items:center;color:var(--tx-3);transition:color .4s}
.ec-fil .ec-st .ico{margin-right:5px}
.ec-fil .ec-st>span{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;transition:max-width .6s var(--ez),opacity .35s}
.ec-fil .ec-st .p{max-width:160px}
.ec-fil .ec-st .d{max-width:0;opacity:0;color:var(--tx);font-weight:600}
.ec-h1{display:flex;align-items:center;gap:12px;margin-top:14px}
.ec-h1>b{font-family:'Schibsted Grotesk';font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--tx)}
.ec-meta{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--tx-2)}
.ec-meta span{display:inline-flex;align-items:center;gap:5px}
.ec-meta .ico{width:13px;height:13px}
.ec-meta i{font-style:normal;color:var(--tx-3)}
.ec-rcv{margin-top:18px}
.ec-it{display:grid;grid-template-columns:46px minmax(0,1fr) 56px 60px 92px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--bd)}
.ec-it .th{width:46px;height:46px;border-radius:9px;background:var(--bg-2);border:1px solid var(--bd);display:grid;place-items:center}
.ec-it .nm{min-width:0}
.ec-it .nm b{display:block;font-size:13.5px;font-weight:600;color:var(--tx)}
.ec-it .nm small{display:grid;align-items:start;font-size:11.5px;line-height:1.45;color:var(--tx-2);margin-top:2px}
.ec-it .nm small>span{grid-area:1/1;transition:opacity .4s}
.ec-it .nm small i{display:inline-block;width:11px}
.ec-it .nm .m1{opacity:0;color:var(--tx)}
.ec-it .nm em{display:inline-block;font-style:normal;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:5px;background:var(--bg-4);color:var(--tx-2);margin-top:5px}
.ec-it .q{font-size:12px;color:var(--tx-2);text-align:right;font-variant-numeric:tabular-nums}
.ec-it .pu{font-size:12.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.ec-it .pt{font-family:'Schibsted Grotesk';font-size:14.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ec-msg{display:flex;gap:8px;align-items:flex-start}
.ec-msg.me{flex-direction:row-reverse}
.ec-av{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:9.5px;font-weight:700;background:var(--tx);color:#fff;border:1px solid var(--tx)}
.ec-msg .bd{display:flex;flex-direction:column;align-items:flex-start;max-width:84%}
.ec-msg.me .bd{align-items:flex-end}
.ec-msg .bb{font-size:11px;line-height:1.45;padding:7px 10px;border-radius:12px 12px 12px 4px;background:var(--bg-4);border:1px solid var(--bd);color:var(--tx)}
.ec-msg.me .bb{background:var(--tx);color:#fff;border-color:var(--tx);border-radius:12px 4px 12px 12px}

/* Colonne de décision */
.ec-r{display:flex;flex-direction:column;gap:14px;min-width:0}
.ec-tot{border:1px solid var(--bd-2);border-radius:14px;background:var(--bg-2);padding:16px}
.ec-tot-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ec-tot .k{display:block;font-size:12px;color:var(--tx-2)}
.ec-tot .big{display:block;font-family:var(--disp);font-size:31px;font-weight:600;letter-spacing:-.013em;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--tx)}
.ec-pills{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.ec-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:6px;background:var(--tx);color:#fff}
.ec-pill .ico{width:12px;height:12px}
.ec-pill.g{background:var(--bg-4);color:var(--tx-2)}
.ec-tva{font-size:11.5px;color:var(--tx-2);margin-top:9px}
.ec-tva b{color:var(--tx)}
/* Blocs repliables (grid 1fr → 0fr) */
.ec-dec,.ec-cpl,.ec-ln{display:grid;grid-template-rows:1fr;transition:grid-template-rows .65s var(--ez),opacity .45s}
.cl-in{min-height:0}
.ec-win.k7 .ec-ln>.cl-in,.ec-win.k10 .ec-cpl>.cl-in,.ec-win.k12 .ec-dec>.cl-in{overflow:hidden}
.ec-dec-b{margin-top:13px;padding-top:13px;border-top:1px solid var(--bd-2);display:flex;flex-direction:column;gap:8px}
.ec-cpl-b{border:1px solid var(--bd-2);border-radius:11px;background:#fff;padding:11px 12px;margin-bottom:6px}
.ec-cpl-t{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--tx)}
.ec-cpl-t .ico{width:15px;height:15px}
.ec-ln-b{margin-top:9px;border:1px solid var(--bd);border-radius:9px;padding:10px;background:var(--bg-2)}
.ec-ln-n{font-size:12.5px;font-weight:600;color:var(--tx)}
.ec-ln-n span{font-weight:400;color:var(--tx-2)}
.ec-row{position:relative;margin-top:8px}
.ec-col{display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:var(--tx-2)}
.ec-szl{font-size:10.5px;color:var(--tx-2);margin-top:9px}
.ec-sz{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:4px}
.ec-sz label{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--tx-2);font-variant-numeric:tabular-nums}
.ec-sz .ec-inp{height:28px;font-size:12px}
.ec-sz .ec-inp b{opacity:0;transform:translateY(5px);transition:opacity .3s,transform .45s var(--ez-b)}
.ec-opts,.ec-aopts{position:absolute;z-index:6;padding:4px;border-radius:9px;border:1px solid var(--bd-2);background:#fff;display:flex;flex-direction:column;
  opacity:0;transform:translateY(-4px) scale(.98);transform-origin:0 0;transition:opacity .25s,transform .3s var(--ez);pointer-events:none}
.ec-opts{left:0;top:50px;width:170px}
.ec-opts span,.ec-aopts span{font-size:11.5px;padding:5px 8px;border-radius:6px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .25s}
.ec-opts span:first-child,.ec-aopts span:first-child{color:var(--tx-3)}
.ec-cnt{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px}
.ec-cnt-t{display:grid;font-size:11.5px;color:var(--tx-2)}
.ec-cnt-t>span{grid-area:1/1;display:inline-flex;align-items:center;gap:4px;transition:opacity .3s}
.ec-cnt-t b{color:var(--tx);font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.ec-cnt-t .c1{opacity:0;color:var(--tx);font-weight:600}
.ec-cnt-t .ico{width:13px;height:13px}
.ec-save,.ec-asave{opacity:.3}
.ec-miss{font-size:11.5px;color:var(--tx-2);margin-top:9px;line-height:1.45}
.ec-dec-b>.ec-btn{width:100%}
.ec-acc{opacity:.28}
.ec-liv{margin-top:18px}
.ec-liv-h{display:flex;align-items:center;gap:7px;color:var(--tx);padding-bottom:8px;border-bottom:1px solid var(--bd)}
.ec-liv-h .ico{width:16px;height:16px}
.ec-liv-h b{font-family:'Schibsted Grotesk';font-size:15px;font-weight:600}
.ec-liv-s{display:grid;margin-top:12px;max-width:440px}
.ec-liv-e,.ec-liv-d{grid-area:1/1;transition:opacity .4s,transform .5s var(--ez)}
.ec-liv-e{position:relative;display:flex;flex-direction:column;gap:6px}
.ec-liv-e .lb{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--tx-2)}
.ec-liv-e .lb .ico{width:13px;height:13px}
.ec-asel{height:32px}
.ec-aopts{left:0;right:0;bottom:70px;transform-origin:0 100%}
.ec-lbtn{display:flex;gap:6px}
.ec-liv-d{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--tx-2);opacity:0;transform:translateY(6px);padding-top:2px}
.ec-liv-d b{font-size:13px;color:var(--tx)}
.ec-liv-d .ad{color:var(--tx)}
.ec-toast{right:22px;bottom:20px;width:430px;border-color:var(--bd-2);box-shadow:0 18px 40px -14px rgba(20,20,24,.35)}
.ec-toast b{font-weight:600}

/* --- Les étapes du hero --- */
/* 1 · ouvrir la liste des coloris ; 2 · choisir « Noir » */
.ec-win[data-s="1"] .ec-csel{border-color:var(--tx);box-shadow:0 0 0 3px rgba(20,20,24,.07);transition-delay:.75s}
.ec-win[data-s="1"] .ec-opts{opacity:1;transform:none;transition-delay:.85s}
.ec-win[data-s="2"] .ec-opts{animation:ecHold 1.05s both}
.ec-win[data-s="2"] .ec-opts .hl{background:var(--bg-4);transition-delay:.6s}
.ec-win.k2 .ec-csel .v0{opacity:0;transition-delay:.9s}
.ec-win.k2 .ec-csel .v1{opacity:1;transition-delay:.95s}
/* 3–6 · la répartition par pointure : 39-40, 41-42, 43-44, puis 45 */
.ec-win.k3 .z1 b,.ec-win.k4 .z3 b,.ec-win.k5 .z5 b{opacity:1;transform:none;transition-delay:.45s}
.ec-win.k3 .z2 b,.ec-win.k4 .z4 b,.ec-win.k5 .z6 b,.ec-win.k6 .z7 b{opacity:1;transform:none;transition-delay:.9s}
.ec-win[data-s="3"] :is(.z1,.z2),.ec-win[data-s="4"] :is(.z3,.z4),.ec-win[data-s="5"] :is(.z5,.z6),.ec-win[data-s="6"] .z7{border-color:var(--tx);box-shadow:0 0 0 3px rgba(20,20,24,.07);transition-delay:.4s}
/* 7 · le compteur tombe à zéro, puis « Enregistrer » */
.ec-win.k7 .ec-cnt-t .c0{opacity:0;transition-delay:.45s}
.ec-win.k7 .ec-cnt-t .c1{opacity:1;transition-delay:.55s}
.ec-win.k7 .ec-save{opacity:1;transition-delay:.6s}
.ec-win[data-s="7"] .ec-save{transform:scale(.95);transition-delay:1s}
.ec-win.k7 .ec-ln{grid-template-rows:0fr;opacity:0;transition-delay:1.3s}
.ec-win[data-s="7"] .t1,.ec-win[data-s="8"] .t1{animation:ecPop 2.4s 1.15s both}
.ec-win.k7 .ec-it2 .m0{opacity:0;transition-delay:1.45s}
.ec-win.k7 .ec-it2 .m1{opacity:1;transition-delay:1.55s}
/* 8 · ouvrir le carnet d'adresses ; 9 · choisir l'entrepôt */
.ec-win[data-s="8"] .ec-asel{border-color:var(--tx);box-shadow:0 0 0 3px rgba(20,20,24,.07);transition-delay:.75s}
.ec-win[data-s="8"] .ec-aopts{opacity:1;transform:none;transition-delay:.85s}
.ec-win[data-s="9"] .ec-aopts{animation:ecHold 1.05s both}
.ec-win[data-s="9"] .ec-aopts .hl{background:var(--bg-4);transition-delay:.6s}
.ec-win.k9 .ec-asel .v0{opacity:0;transition-delay:.9s}
.ec-win.k9 .ec-asel .v1{opacity:1;transition-delay:.95s}
.ec-win.k9 .ec-asave{opacity:1;transition-delay:1.05s}
/* 10 · enregistrer l'adresse : plus rien ne manque, le bouton s'allume */
.ec-win[data-s="10"] .ec-asave{transform:scale(.95);transition-delay:.8s}
.ec-win[data-s="10"] .t2,.ec-win[data-s="11"] .t2{animation:ecPop 2.2s .9s both}
.ec-win.k10 .ec-liv-e{opacity:0;transition-delay:.95s}
.ec-win.k10 .ec-liv-d{opacity:1;transform:none;transition-delay:1.15s}
.ec-win.k10 .ec-cpl{grid-template-rows:0fr;opacity:0;transition-delay:1.1s}
.ec-win.k10 .ec-acc{opacity:1;box-shadow:0 0 0 4px rgba(20,20,24,.08);transition-delay:1.6s}
/* 11 · accepter ; 12 · le devis est accepté, la commande apparaît dans le fil */
.ec-win[data-s="11"] .ec-acc{transform:scale(.97);transition-delay:.8s}
.ec-win.k12 .t3{opacity:1;transform:none;transition-delay:.35s}
.ec-win.k12 .ec-stat{background:var(--tx);border-color:var(--tx);color:#fff;transition-delay:.9s}
.ec-win.k12 .ec-stat .p{opacity:0;transition-delay:.9s}
.ec-win.k12 .ec-stat .d{opacity:1;transition-delay:.9s}
/* Le fil : seule l'étape Commande s'allume (le BAT reste « Pas encore de BAT ») */
.ec-win.k12 .ec-fil .st-c{color:var(--tx);transition-delay:1.3s}
.ec-win.k12 .ec-fil .st-c .p{opacity:0;max-width:0;transition-delay:1.35s}.ec-win.k12 .ec-fil .st-c .d{opacity:1;max-width:220px;transition-delay:1.5s}
.ec-win.k12 .ec-dec{grid-template-rows:0fr;opacity:0;transition-delay:2.1s}

/* Curseur : une position par étape (coordonnées dans la fenêtre, 1080 px de large) */
.ec-win .mk-cur{--cx:560px;--cy:480px}
.ec-win.k1 .mk-cur{--cx:770px;--cy:356px}
.ec-win.k2 .mk-cur{--cx:745px;--cy:412px}
.ec-win.k3 .mk-cur{--cx:745px;--cy:434px}
.ec-win.k4 .mk-cur{--cx:846px;--cy:434px}
.ec-win.k5 .mk-cur{--cx:946px;--cy:434px}
.ec-win.k6 .mk-cur{--cx:996px;--cy:434px}
.ec-win.k7 .mk-cur{--cx:968px;--cy:470px}
.ec-win.k8 .mk-cur{--cx:300px;--cy:534px}
.ec-win.k9 .mk-cur{--cx:262px;--cy:463px}
.ec-win.k10 .mk-cur{--cx:61px;--cy:569px}
.ec-win.k11 .mk-cur{--cx:834px;--cy:267px}
.ec-win.k12 .mk-cur{--cx:1010px;--cy:480px}
.ec-win[data-s="1"] .mk-cur::after,.ec-win[data-s="2"] .mk-cur::after,.ec-win[data-s="3"] .mk-cur::after,.ec-win[data-s="4"] .mk-cur::after,.ec-win[data-s="5"] .mk-cur::after,.ec-win[data-s="6"] .mk-cur::after,
.ec-win[data-s="8"] .mk-cur::after,.ec-win[data-s="9"] .mk-cur::after,.ec-win[data-s="10"] .mk-cur::after,.ec-win[data-s="11"] .mk-cur::after{animation:clk .55s var(--ez) .8s forwards}
.ec-win[data-s="7"] .mk-cur::after{animation:clk .55s var(--ez) 1s forwards}
/* Maquette rognée (mobile : .clip posé par data-fit-min, seule la colonne de décision est visible) :
   les clics du carnet d'adresses (k8-k10) tombent hors cadre → le curseur s'efface, le toast raconte l'étape. */
.fx-fitbox.clip .ec-win:is(.k8,.k9,.k10):not(.k11) .mk-cur{opacity:0}


/* ======================= Scènes au scroll (communes aux deux) ======================= */
.fx-espace-client .cx{position:relative;height:452px}
.fx-espace-client .lay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  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{opacity:1;transform:none;transition-delay:.12s}
.fx-espace-client .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){background:#fff;width:34px}
.fx-espace-client .lt.mk-card{background:#fff;border-color:rgba(20,20,24,.12)}
.ec-src{font-family:'Spline Sans Mono';font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.ec-thr{display:flex;flex-direction:column;gap:9px}
.ec-thr .ec-msg{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .55s var(--ez-b)}
@keyframes ecWire{to{stroke-dashoffset:0}}
@keyframes ecPress{50%{transform:scale(.94);box-shadow:0 0 0 4px rgba(20,20,24,.12)}}

/* ======================= Scène 1 : le parcours du client ======================= */
/* 0 — accès sécurisé : l'e-mail et la page de remerciement mènent au lien, puis au mot de passe */
.ec-door{position:relative;width:540px;height:446px}
.ec-d1,.ec-d2,.ec-welc{position:absolute;transition:opacity .55s var(--ez),transform .8s var(--ez)}
.ec-d1{left:0;top:0;width:292px;padding:13px 14px;opacity:0;transform:translateX(-14px)}
.ec-d2{right:0;top:22px;width:230px;padding:12px 13px;opacity:0;transform:translateX(14px)}
.ec-mh{display:flex;align-items:center;gap:10px}
.ec-mh>.ico{width:30px;height:30px;padding:7px;border-radius:9px;border:1px solid var(--bd-2);color:var(--tx);flex:none}
.ec-mh b{display:block;font-size:12.5px;color:var(--tx)}
.ec-mh small{font-size:10.5px;color:var(--tx-3)}
.ec-d1 p{font-size:11px;line-height:1.5;color:var(--tx-2);margin-top:9px}
.ec-mbtn{display:inline-flex;margin-top:10px;padding:7px 12px;border-radius:7px;background:var(--tx);color:#fff;font-size:11.5px;font-weight:600}
.ec-thx{display:flex;gap:8px;margin-top:8px;padding:9px 10px;border-radius:9px;background:var(--bg-2);border:1px solid var(--bd);font-size:11px;line-height:1.45;color:var(--tx-2)}
.ec-thx b{color:var(--tx);font-weight:600}
.ec-thx>.ico{width:14px;height:14px;flex:none;margin-top:1px;color:var(--tx);stroke-width:2.2}
.ec-dw{position:absolute;left:10px;top:150px;width:520px;height:38px;overflow:visible}
.ec-dw path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5;stroke-dasharray:4 5;stroke-dashoffset:40;opacity:0;transition:opacity .4s}
.ec-acc-l{position:absolute;left:50%;top:190px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;opacity:0;transition:opacity .5s}
.ec-acc-l span{display:inline-flex;align-items:center;gap:6px;font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx);background:var(--bg-3);border:1px solid var(--bd-2);border-radius:999px;padding:4px 10px}
.ec-acc-l span .ico{width:11px;height:11px}
.ec-acc-l em{font-style:normal;font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-2)}
.ec-welc{left:50%;top:226px;width:380px;margin-left:-190px;padding:14px 16px;opacity:0;transform:translateY(16px)}
.ec-wt{display:block;font-size:14.5px;font-weight:700;color:var(--tx)}
.ec-wp{font-size:10.5px;line-height:1.45;color:var(--tx-2);margin-top:3px}
.ec-pw{margin-top:9px;border:1px solid var(--bd);border-radius:10px;padding:10px 11px}
.ec-pw>b{display:block;font-size:12px;color:var(--tx)}
.ec-pwl{display:block;font-size:10px;color:var(--tx-2);margin-top:6px}
.ec-pwr{display:flex;align-items:center;gap:8px;margin-top:4px}
.ec-pwr .ec-inp{justify-content:flex-start;padding:0 10px;font-family:'Spline Sans Mono';font-size:12px;font-weight:500;letter-spacing:.02em;flex:1}
.ec-lnk{font-size:11px;color:var(--tx-2)}
.ec-pwb{display:flex;gap:6px;margin-top:8px}
.ec-pws{margin-left:auto}
.ec-later{display:block;text-align:center;margin-top:8px;font-size:11px;color:var(--tx-2)}
.ec-s1.a0[data-active="0"] .ec-d1{opacity:1;transform:none;transition-delay:.15s}
.ec-s1.a0[data-active="0"] .ec-d2{opacity:1;transform:none;transition-delay:.35s}
.ec-s1.a0[data-active="0"] .ec-dw path{opacity:1;animation:ecWire 1.2s linear infinite;transition-delay:.7s}
.ec-s1.a0[data-active="0"] .ec-acc-l{opacity:1;transition-delay:1s}
.ec-s1.a0[data-active="0"] .ec-welc{opacity:1;transform:none;transition-delay:1.25s}

/* 1 — valider un BAT : le dernier produit, puis « BAT validé » */
.ec-bat{width:530px;padding:14px 16px}
.ec-bh{display:flex;align-items:center;gap:10px}
.ec-bh>b{font-family:'Schibsted Grotesk';font-size:16px;font-weight:700;color:var(--tx)}
.ec-ns{display:grid;margin-top:10px;padding:9px 10px;border-radius:10px;background:var(--bg-2);border:1px solid var(--bd)}
.ec-ns>div{grid-area:1/1;display:flex;align-items:center;gap:7px;min-height:30px;transition:opacity .4s,transform .5s var(--ez)}
.ec-ns .n1{opacity:0;transform:translateY(6px)}
.ec-ns .t{flex:1;min-width:0}
.ec-ns b{display:block;font-size:12px;color:var(--tx)}
.ec-ns small{display:block;font-size:10px;color:var(--tx-2);margin-top:1px}
.ec-bg{display:grid;grid-template-columns:minmax(0,1fr) 196px;gap:14px;margin-top:12px}
.ec-thumbs{display:flex;gap:7px}
.ec-thumbs>span{position:relative;width:40px;height:40px;border-radius:8px;border:1px solid var(--bd);background:var(--bg-2);display:grid;place-items:center}
.ec-thumbs>span.cur{border:1.5px solid var(--tx)}
.ec-thumbs .ec-pr{width:26px;height:26px}
.ec-thumbs i{position:absolute;right:-5px;top:-5px;width:15px;height:15px;border-radius:50%;background:var(--tx);color:#fff;display:grid;place-items:center;transition:transform .45s var(--ez-b)}
.ec-thumbs i .ico{width:9px;height:9px;stroke-width:3}
.ec-thumbs .cur i{transform:scale(0)}
.ec-art{margin-top:8px;border-radius:10px;background:var(--bg-2);border:1px solid var(--bd);height:172px;display:grid;place-items:center}
.ec-art svg{width:220px;height:160px}
.ec-art .hel{fill:#EEEDE6;stroke:#CFCDC4;stroke-width:1.5;stroke-linejoin:round}
.ec-art .rib{fill:none;stroke:#CFCDC4;stroke-width:1.5;stroke-linecap:round}
.ec-art .zone{fill:none;stroke:#8E9199;stroke-width:1;stroke-dasharray:3 3}
.ec-art .logo circle,.ec-art .logo path{fill:none;stroke:#141418;stroke-width:2;stroke-linecap:round}
.ec-art .logo text{font-family:'Spline Sans Mono';font-size:6.4px;letter-spacing:.14em;fill:#141418;text-anchor:middle}
.ec-cap{font-size:11px;color:var(--tx-2);margin-top:7px}
.ec-cap b{color:var(--tx);font-weight:600}
.ec-bd{display:grid;border-radius:12px;border:1px solid var(--bd-2);background:var(--bg-2);padding:13px}
.ec-bd>div{grid-area:1/1;display:flex;flex-direction:column;gap:7px;transition:opacity .4s,transform .55s var(--ez)}
.ec-bd .h{font-family:'Schibsted Grotesk';font-size:17px;font-weight:700;color:var(--tx)}
.ec-bd p{font-size:11px;color:var(--tx-2);line-height:1.45}
.ec-seg{display:flex;gap:4px;margin:3px 0 4px}
.ec-seg i{flex:1;height:5px;border-radius:3px;background:var(--bd-2);transition:background .4s}
.ec-seg i.v{background:var(--tx)}
.ec-bd .ec-btn{width:100%;height:32px;font-size:12px}
.ec-bd .s1{opacity:0;transform:translateY(10px)}
.ec-bd .s1 .ec-btn:first-of-type{margin-top:auto}
.okc{width:28px;height:28px;border-radius:50%;background:var(--tx);color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .55s var(--ez-b)}
.okc .ico{width:15px;height:15px;stroke-width:2.6}
.ec-bst{display:inline-flex}
.ec-bst>span{display:inline-block;overflow:hidden;white-space:nowrap;transition:max-width .6s var(--ez),opacity .35s}
.ec-bst .p{max-width:220px}
.ec-bst .d{max-width:0;opacity:0}
.ec-s1[data-active="1"] .ec-vp{transform:scale(.97);box-shadow:0 0 0 4px rgba(20,20,24,.1);transition-delay:1.9s}
.ec-s1[data-active="1"] .ec-seg .n{background:var(--tx);transition-delay:2.2s}
.ec-s1[data-active="1"] .ec-thumbs .cur i{transform:none;transition-delay:2.3s}
.ec-s1[data-active="1"] .ec-bd .s0{opacity:0;transform:translateY(-8px);transition-delay:2.7s}
.ec-s1[data-active="1"] .ec-bd .s1{opacity:1;transform:none;transition-delay:2.9s}
.ec-s1[data-active="1"] .ec-bd .okc{transform:none;transition-delay:3.1s}
.ec-s1[data-active="1"] .ec-bst{background:var(--tx);border-color:var(--tx);color:#fff;transition-delay:2.9s}
.ec-s1[data-active="1"] .ec-bst .p{opacity:0;max-width:0;transition-delay:2.9s}
.ec-s1[data-active="1"] .ec-bst .d{opacity:1;max-width:120px;transition-delay:3s}
.ec-s1[data-active="1"] .ec-ns .n0{opacity:0;transform:translateY(-6px);transition-delay:2.9s}
.ec-s1[data-active="1"] .ec-ns .n1{opacity:1;transform:none;transition-delay:3.05s}

/* 2 — suivre sa commande : la frise s'allume, le suivi du colis arrive */
.ec-ord{width:520px;padding:15px 16px}
.ec-fr{margin-top:16px}
.ec-fr-l{display:flex;align-items:center;padding:0 30px}
.ec-fr-l .dt{width:11px;height:11px;border-radius:50%;flex:none;border:2px solid var(--bd-2);background:#fff;transition:background .35s,border-color .35s,box-shadow .5s}
.ec-fr-l .dt.cur{width:15px;height:15px}
.ec-fr-l .ln{flex:1;height:2px;background:var(--bd);position:relative;overflow:hidden}
.ec-fr-l .ln::after{content:"";position:absolute;inset:0;background:var(--tx);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ez)}
.ec-fr-t{display:grid;grid-template-columns:repeat(5,1fr);margin-top:8px}
.ec-fr-t span{font-size:10.5px;color:var(--tx-3);text-align:center;line-height:1.3}
.ec-fr-t small{display:block;font-size:9.5px;color:var(--tx-3);font-variant-numeric:tabular-nums;margin-top:1px}
.ec-fr-t .on{color:var(--tx);font-weight:600}
.ec-fr-t .cur{color:var(--tx);font-weight:700}
.ec-trk{margin-top:16px;padding-top:12px;border-top:1px solid var(--bd)}
.ec-trk-t{font-family:'Schibsted Grotesk';font-size:14px;font-weight:700;color:var(--tx)}
.ec-trk-b{margin-top:9px;background:var(--bg-2);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:9px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .6s var(--ez)}
.ec-trk-b .r{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ec-trk-b .r b{font-size:12.5px;font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums}
.ec-follow{width:100%;height:32px;font-size:12px}
.ec-hist{margin-top:10px;padding-top:8px;border-top:1px solid var(--bd);display:flex;flex-direction:column;gap:6px}
.ec-hist .sm{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--tx-2)}
.ec-hist .sm .ico{width:12px;height:12px}
.ec-hist .hr{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tx);opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .55s var(--ez);transition-delay:calc(var(--i) * 130ms + 1.5s)}
.ec-hist .hr i{width:6px;height:6px;border-radius:50%;background:var(--tx)}
.ec-hist .hr em{font-style:normal;color:var(--tx-3)}
.ec-hist .hr .g{color:var(--tx-2);font-variant-numeric:tabular-nums}
.ec-s1[data-active="2"] .ec-fr-l .dt.on,.ec-s1[data-active="2"] .ec-fr-l .dt.cur{background:var(--tx);border-color:var(--tx)}
.ec-s1[data-active="2"] .ec-fr-l .d2{transition-delay:.45s}
.ec-s1[data-active="2"] .ec-fr-l .d3{transition-delay:.75s}
.ec-s1[data-active="2"] .ec-fr-l .d4{transition-delay:1.05s;box-shadow:0 0 0 5px rgba(20,20,24,.1)}
.ec-s1[data-active="2"] .ec-fr-l .l1::after{transform:none;transition-delay:.2s}
.ec-s1[data-active="2"] .ec-fr-l .l2::after{transform:none;transition-delay:.5s}
.ec-s1[data-active="2"] .ec-fr-l .l3::after{transform:none;transition-delay:.8s}
.ec-s1[data-active="2"] .ec-trk-b{opacity:1;transform:none;transition-delay:1.2s}
.ec-s1[data-active="2"] .ec-hist .hr{opacity:1;transform:none}

/* 3 — échanger : le fil du devis, une pièce jointe prévisualisée */
.ec-chat{width:470px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ec-tabs{display:inline-flex;gap:3px;padding:3px;border-radius:9px;background:var(--bg-4);align-self:flex-start}
.ec-tabs span{font-size:11.5px;padding:4px 10px;border-radius:7px;color:var(--tx-2)}
.ec-tabs .on{background:#fff;color:var(--tx);font-weight:600;box-shadow:0 1px 2px rgba(20,20,24,.1)}
.ec-dsc{display:flex;align-items:center;gap:7px;font-size:12.5px;padding-bottom:9px;border-bottom:1px solid var(--bd);color:var(--tx)}
.ec-dsc .ico{width:15px;height:15px}
.ec-dsc b{font-weight:600}
.ec-dsc span{font-size:10.5px;color:var(--tx-2);background:var(--bg-4);padding:1px 8px;border-radius:999px}
.ec-chat .ec-av{width:26px;height:26px;background:var(--bg-4);color:var(--tx-2);border-color:var(--bd)}
.ec-chat .ec-msg.me .ec-av{background:var(--tx);color:#fff;border-color:var(--tx)}
.ec-chat .ec-msg .bd{max-width:80%}
.ec-chat .ec-msg small{font-size:10px;font-weight:500;color:var(--tx-3);padding:0 3px;margin-bottom:3px}
.ec-chat .ec-msg .tm{font-weight:400;margin:3px 0 0}
.ec-chat .ec-msg .bb{font-size:12px;padding:7px 11px}
.ec-pdf{display:block;margin-top:6px;padding:5px;border-radius:9px;border:1px solid var(--bd);background:#fff}
.ec-pdf .pg{width:58px;height:74px;border-radius:3px;border:1px solid var(--bd-2);background:#fff;padding:7px 6px;display:flex;flex-direction:column;gap:4px}
.ec-pdf .pg em{position:relative;height:24px;border:1.5px solid var(--tx);border-radius:1px;margin-bottom:4px}
.ec-pdf .pg em::before{content:"";position:absolute;left:38%;top:0;bottom:35%;border-left:1.5px solid var(--tx)}
.ec-pdf .pg em::after{content:"";position:absolute;left:38%;right:0;top:50%;border-top:1.5px solid var(--tx)}
.ec-pdf .pg i{height:2px;border-radius:2px;background:#D5D5D0}
.ec-pdf .pg i.s{width:60%}
.ec-cmp{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--bd)}
.ec-cmp .cl,.ec-cmp .sd{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.ec-cmp .cl{border:1px solid var(--bd);color:var(--tx-2)}
.ec-cmp .sd{background:var(--tx);color:#fff}
.ec-cmp .ico{width:15px;height:15px}
.ec-cmp .tx{flex:1;height:34px;border:1px solid var(--bd);border-radius:9px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:var(--tx-3)}
.ec-hint{font-size:9.5px;color:var(--tx-3);text-align:center}
.ec-s1[data-active="3"] .ec-chat .m1{opacity:1;transform:none;transition-delay:.25s}
.ec-s1[data-active="3"] .ec-chat .m2{opacity:1;transform:none;transition-delay:1s}
.ec-s1[data-active="3"] .ec-chat .m3{opacity:1;transform:none;transition-delay:2.1s}

/* ======================= Scène 2 : chaque geste remonte chez vous ======================= */
/* Le couple « chez le client » (clair) → « chez vous » (sombre) */
.ec-two{position:relative;width:540px;display:flex;align-items:center}
.ec-cl{position:relative;z-index:2;width:298px;flex:none;padding:13px 14px;opacity:0;transform:translateX(-12px);transition:opacity .55s var(--ez),transform .8s var(--ez)}
.ec-bo{position:relative;z-index:2;width:212px;flex:none;padding:12px 13px;display:flex;flex-direction:column;opacity:0;transform:translateY(34px);transition:opacity .55s var(--ez),transform .8s var(--ez)}
.ec-wire{width:30px;height:20px;flex:none;overflow:visible}
.ec-wire path{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.5;stroke-dasharray:4 5;stroke-dashoffset:40;opacity:0;transition:opacity .4s}
.ec-bo-r{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.ec-bo-r b,.ec-bo-n{font-family:'Schibsted Grotesk';font-size:14px;font-weight:700;color:var(--tx)}
.ec-bo-n{display:block;margin-top:8px;font-size:13px}
.ec-bo-n.mono{font-family:'Spline Sans Mono';font-weight:500;font-size:12.5px;letter-spacing:.01em}
.ec-bo-s{display:block;font-size:10.5px;color:var(--tx-3);margin-top:3px}
.ec-bo-p{margin-top:9px;padding-left:8px;border-left:2px solid var(--bd-2);font-family:'Spline Sans Mono';font-size:9.5px;line-height:1.55;color:var(--tx-2)}
.ec-bo-f{display:block;margin-top:9px;font-size:9.5px;line-height:1.45;color:var(--tx-3)}
.ec-bo .mk-chip{font-size:9.5px}
.ec-bo .mk-chip .ico{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8}
/* Champs du côté client (modale) */
.ec-fl{display:block;font-size:10px;font-weight:600;color:var(--tx);margin:9px 0 4px}
.ec-cl .ec-sel{height:28px;font-size:11px}

/* 0 — la demande : AVA sur le site, le devis « Nouveau » chez vous */
.ec-wh{display:flex;align-items:center;gap:8px;margin-top:7px;padding-bottom:9px;border-bottom:1px solid var(--bd)}
.ec-wh b{font-family:'Schibsted Grotesk';font-size:13px;font-weight:700;color:var(--tx)}
.ec-avd{position:relative;width:20px;height:20px;border-radius:50%;background:var(--tx)}
.ec-avd::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.ec-ava .ec-thr{margin-top:10px}
.ec-wi{display:flex;align-items:center;justify-content:space-between;height:32px;margin-top:11px;padding:0 4px 0 11px;border:1px solid var(--bd-2);border-radius:9px;font-size:11px;color:var(--tx-3)}
.ec-wi i{width:24px;height:24px;border-radius:7px;background:var(--tx);color:#fff;display:grid;place-items:center}
.ec-wi .ico{width:12px;height:12px}
.ec-bo-c{transition:all .45s var(--ez-b)}
.ec-s2.a0[data-active="0"] .lay0 .ec-cl{opacity:1;transform:none;transition-delay:.15s}
.ec-s2.a0[data-active="0"] .lay0 .m1{opacity:1;transform:none;transition-delay:.45s}
.ec-s2.a0[data-active="0"] .lay0 .m2{opacity:1;transform:none;transition-delay:1.25s}
.ec-s2.a0[data-active="0"] .lay0 .ec-wire path{opacity:1;animation:ecWire 1.2s linear infinite;transition-delay:1.8s}
.ec-s2.a0[data-active="0"] .lay0 .ec-bo{opacity:1;transform:translateY(18px);transition-delay:2s}
.ec-s2.a0[data-active="0"] .lay0 .ec-bo-c{background:var(--tx);border-color:var(--tx);color:var(--bg);transition-delay:2.5s}

/* 1 — demander une modification : la modale, puis « Modification demandée » */
.ec-mt{display:block;font-family:'Schibsted Grotesk';font-size:14px;font-weight:700;color:var(--tx)}
.ec-md{font-size:10.5px;color:var(--tx-2);margin-top:2px}
.ec-ck{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--tx);margin-top:5px}
.ec-ck i{width:13px;height:13px;border-radius:3px;border:1px solid var(--bd-2);display:grid;place-items:center;flex:none;transition:background .3s,border-color .3s}
.ec-ck i .ico{width:9px;height:9px;stroke-width:3;opacity:0;color:#fff;transition:opacity .2s}
.ec-ta{display:block;min-height:48px;padding:6px 8px;border:1px solid var(--bd-2);border-radius:7px;font-size:11px;line-height:1.45;color:var(--tx)}
.ec-mf{display:flex;justify-content:flex-end;gap:6px;margin-top:11px}
.ec-send{opacity:.35}
.ec-sw{display:grid;justify-items:start;margin-top:8px}
.ec-sw>span{grid-area:1/1;transition:opacity .4s,transform .5s var(--ez-b)}
.ec-sw .d{opacity:0;transform:scale(.9)}
.ec-rq{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bd);opacity:0;transform:translateY(6px);transition:opacity .45s,transform .6s var(--ez)}
.ec-rq-h{display:flex;flex-wrap:wrap;gap:5px}
.ec-rq small{font-size:10px;color:var(--tx-2)}
.ec-rq small b{color:var(--tx);font-weight:600}
.ec-rq-t{font-size:9.5px;padding:2px 7px;border-radius:5px;border:1px solid var(--bd-2);color:var(--tx)}
.ec-rq-c{font-size:10px;line-height:1.45;color:var(--tx-2);padding-left:8px;border-left:2px solid var(--tx-2)}
.ec-s2[data-active="1"] .lay1 .ec-cl{opacity:1;transform:none;transition-delay:.15s}
.ec-s2[data-active="1"] .lay1 .c1 i{background:var(--tx);border-color:var(--tx);transition-delay:.6s}
.ec-s2[data-active="1"] .lay1 .c1 i .ico{opacity:1;transition-delay:.6s}
.ec-s2[data-active="1"] .lay1 .ec-send{opacity:1;transition-delay:1.2s;animation:ecPress .5s var(--ez) 2.7s both}
.ec-s2[data-active="1"] .lay1 .ec-wire path{opacity:1;animation:ecWire 1.2s linear infinite;transition-delay:3s}
.ec-s2[data-active="1"] .lay1 .ec-bo{opacity:1;transform:translateY(18px);transition-delay:3.1s}
.ec-s2[data-active="1"] .lay1 .ec-sw .p{opacity:0;transform:scale(.9);transition-delay:3.6s}
.ec-s2[data-active="1"] .lay1 .ec-sw .d{opacity:1;transform:none;transition-delay:3.7s}
.ec-s2[data-active="1"] .lay1 .ec-rq{opacity:1;transform:none;transition-delay:3.9s}

/* 2 — l'accord : « Devis accepté ! », la commande s'ouvre chez vous */
.ec-okh{display:flex;align-items:center;gap:9px}
.ec-okh b{font-family:'Schibsted Grotesk';font-size:15px;font-weight:700;color:var(--tx)}
.ec-ok .k{display:block;font-size:10.5px;color:var(--tx-2);margin-top:12px}
.ec-ok .big{display:block;font-family:var(--disp);font-size:27px;font-weight:600;letter-spacing:-.013em;line-height:1;margin-top:5px;color:var(--tx);font-variant-numeric:tabular-nums}
.ec-ok .ec-tva{font-size:10.5px;margin-top:7px}
.ec-ok .ec-btn{width:100%;height:32px;font-size:12px}
.ec-okgo{margin-top:12px}
.ec-ok .ec-o{margin-top:6px}
.ec-okt{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:9px;border:1px solid var(--bd-2);background:#fff;font-size:10.5px;line-height:1.4;color:var(--tx);
  box-shadow:0 14px 30px -14px rgba(20,20,24,.35);opacity:0;transform:translateY(8px) scale(.97);transition:opacity .45s var(--ez),transform .55s var(--ez-b)}
.ec-okt b{font-weight:600}
.ec-okt .ok{width:18px;height:18px;border-radius:50%;background:var(--tx);color:#fff;display:grid;place-items:center;font-size:10px;flex:none}
.ec-kv{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--bd);font-size:10.5px;color:var(--tx-3)}
.ec-kv:first-of-type{margin-top:8px}
.ec-kv b{color:var(--tx);font-size:11px;font-weight:600}
.ec-cmd{opacity:.3}
.ec-s2[data-active="2"] .lay2 .ec-cl{opacity:1;transform:none;transition-delay:.15s}
.ec-s2[data-active="2"] .lay2 .ec-okgo{animation:ecPress .5s var(--ez) .9s both}
.ec-s2[data-active="2"] .lay2 .ec-okt{opacity:1;transform:none;transition-delay:1.3s}
.ec-s2[data-active="2"] .lay2 .ec-okb{background:var(--tx);border-color:var(--tx);color:#fff;transition-delay:1.4s}
.ec-s2[data-active="2"] .lay2 .ec-okb .p{opacity:0;transition-delay:1.4s}
.ec-s2[data-active="2"] .lay2 .ec-okb .d{opacity:1;transition-delay:1.4s}
.ec-s2[data-active="2"] .lay2 .ec-wire path{opacity:1;animation:ecWire 1.2s linear infinite;transition-delay:1.8s}
.ec-s2[data-active="2"] .lay2 .ec-bo{opacity:1;transform:translateY(18px);transition-delay:1.9s}
.ec-s2[data-active="2"] .lay2 .ec-cmd{opacity:1;transition-delay:2.5s}

/* ======================= L'accueil + la recherche ======================= */
.ec-row1,.ec-row2{display:grid;gap:56px;align-items:center}
.ec-row1{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
.ec-row2{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);margin-top:96px}
.ec-h3{font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.9vw,38px);letter-spacing:-.016em;line-height:1.04}
.ec-h3 .dim{color:var(--tx-3)}
.ec-cap-l{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:14px}
.ec-cap-l li{font-size:15px;color:var(--tx-2);line-height:1.55;padding-left:18px;position:relative}
.ec-cap-l li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--tx);transform:rotate(45deg)}
.ec-cap-l b{color:var(--tx)}
.ec-fitw{display:flex;justify-content:center}
.ec-dash{width:760px}
.ec-db{padding:18px 20px 20px}
.ec-hello{display:block;font-family:'Schibsted Grotesk';font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--tx)}
.ec-dg{display:grid;grid-template-columns:minmax(0,1fr) 214px;gap:22px;margin-top:12px;align-items:start}
.ec-tr{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--bd);
  opacity:0;transform:translateY(8px);transition:opacity .45s var(--ez),transform .6s var(--ez);transition-delay:calc(var(--i) * 120ms)}
.ec-tr:last-child{border-bottom:none}
.ec-tr .th{width:38px;height:38px;border-radius:8px;background:var(--bg-2);display:grid;place-items:center}
.ec-tr .th .ec-pr{width:26px;height:26px}
.ec-tr .th.ic .ico{width:17px;height:17px;color:var(--tx-3)}
.ec-tr .nm{min-width:0}
.ec-tr .nm b{display:block;font-size:12.5px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-tr .nm small{display:block;font-size:10.5px;color:var(--tx-2);margin-top:1px;line-height:1.35}
.ec-tr .pr{font-family:'Schibsted Grotesk';font-size:12.5px;font-weight:700;color:var(--tx);white-space:nowrap;font-variant-numeric:tabular-nums}
.ec-tr .ec-badge{font-size:10px;padding:2px 7px}
.ec-tr .ec-btn{height:26px;font-size:10.5px;padding:0 9px}
.ec-dash.k1 .ec-tr{opacity:1;transform:none}
.ec-asd{display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateX(10px);transition:opacity .5s var(--ez),transform .7s var(--ez)}
.ec-dash.k2 .ec-asd{opacity:1;transform:none}
.ec-dq{border:1px solid var(--bd-2);border-radius:11px;background:var(--bg-2);padding:13px;display:flex;flex-direction:column}
.ec-dq .k{font-size:10.5px;color:var(--tx-2);line-height:1.35}
.ec-dq .big{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.013em;margin-top:5px;color:var(--tx);font-variant-numeric:tabular-nums}
.ec-dq small{font-size:10px;color:var(--tx-2);margin-top:3px}
.ec-dq .ec-btn{height:30px;font-size:11.5px;margin-top:10px}
.ec-dq .ec-btn.ec-o{margin-top:6px}
.ec-dash.k3 .ec-dq>.ec-btn:not(.ec-o){box-shadow:0 0 0 4px rgba(20,20,24,.09)}
.ec-dad{border-top:1px solid var(--bd);padding-top:11px}
.ec-dad .h{display:flex;justify-content:space-between;align-items:center}
.ec-dad b{font-size:12.5px;color:var(--tx)}
.ec-dad p{font-size:11px;color:var(--tx);line-height:1.5;margin-top:6px}
.ec-best{margin-top:16px}
.ec-pc{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.ec-pc span{display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ez),transform .6s var(--ez-b);transition-delay:calc(var(--i) * 90ms)}
.ec-pc .ec-pr{width:100%;height:74px;padding:12px;border-radius:9px;background:var(--bg-2);border:1px solid var(--bd)}
.ec-pc b{font-size:10.5px;font-weight:600;color:var(--tx);line-height:1.3}
.ec-dash.k3 .ec-pc span{opacity:1;transform:none}
.ec-dash.k4 .ec-tr:first-of-type .ec-badge.hot{background:var(--tx);color:#fff}

.ec-srch{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--bd);border-radius:20px;background:var(--bg-2);padding:58px 28px 34px;min-height:400px;display:flex;align-items:flex-start;justify-content:center}
.ec-srch>.tex{z-index:0}
.ec-sfit{position:relative;z-index:2;width:100%;display:flex;justify-content:center}
.ec-sp{position:relative;width:420px;min-height:190px;color:var(--tx)}/* place réservée au volet le plus haut : rien ne saute sous la maquette quand la liste change */
.ec-sp-in{display:flex;align-items:center;gap:9px;height:44px;padding:0 14px;border-radius:12px;background:#fff;border:1px solid var(--bd-2);font-size:14px;color:var(--tx);box-shadow:0 20px 40px -18px rgba(0,0,0,.7)}
.ec-sp-in .ico{width:16px;height:16px;color:var(--tx-2)}
.ec-sp-in .qs{display:grid}
.ec-sp-in .q{grid-area:1/1;white-space:nowrap;transition:opacity .3s}
.ec-sp-in .ph{color:var(--tx-3)}
.ec-sp.k1 .ec-sp-in .ph{display:none}
.ec-sp-in .q1,.ec-sp-in .q2{opacity:0}
/* Saisie 1 « 2051 », un devis en cours (k1-k2) ; saisie 2 « casque bla » remplace le numéro (k3) ; « Blanc » complète le mot (k4) */
.ec-sp.k3 .ec-sp-in .q0{opacity:0;transition-duration:.12s}
.ec-sp.k3 .ec-sp-in .q1{opacity:1;transition-duration:.12s}
.ec-sp.k4 .ec-sp-in .q1{opacity:0;transition-delay:.85s}
.ec-sp.k4 .ec-sp-in .q2{opacity:1;transition-delay:.9s}
.ec-sp-dd{margin-top:8px;border-radius:12px;background:#fff;border:1px solid var(--bd-2);padding:8px;display:flex;flex-direction:column;
  opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .5s var(--ez)}
.ec-sp.k1 .ec-sp-dd{opacity:1;transform:none;transition-delay:.75s}
/* Deux volets repliables : le dossier (pa), puis les pastilles + produits (pb) */
.ec-pa,.ec-pb{display:grid;transition:grid-template-rows .6s var(--ez),opacity .35s}
.ec-pa>.cl-in,.ec-pb>.cl-in{overflow:hidden}
.ec-pa{grid-template-rows:1fr}
.ec-pb{grid-template-rows:0fr;opacity:0}
.ec-sp.k3 .ec-pa{grid-template-rows:0fr;opacity:0;transition-delay:.3s}
.ec-sp.k3 .ec-pb{grid-template-rows:1fr;opacity:1;transition-delay:.45s}
.ec-fac{display:flex;gap:6px;padding:2px 6px 9px;border-bottom:1px solid var(--bd)}
.ec-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:999px;border:1px solid var(--bd-2);background:var(--bg-2);color:var(--tx);transition:border-color .3s,background .3s,color .3s}
.ec-chip .ico{width:12px;height:12px;color:var(--tx-2)}
.ec-sp.k4 .ec-pick{border-color:var(--tx);background:var(--tx);color:#fff;transition-delay:.75s}
.ec-sp.k4 .ec-pick .ico{color:#fff;transition-delay:.75s}
.ec-grp{display:flex;flex-direction:column;gap:2px;padding:0 2px;opacity:0;transform:translateY(5px);transition:opacity .35s,transform .45s var(--ez)}
.ec-sp.k1 .ec-gdv{opacity:1;transform:none;transition-delay:.95s}
.ec-sp.k3 .ec-gpr{opacity:1;transform:none;transition-delay:.95s}
.ec-grp.ec-gpr{margin-top:6px}
.ec-grp .ec-gt{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-2);padding:4px 6px}
.ec-grp .ec-gt .ico{width:12px;height:12px}
.ec-grp .ec-gt em{font-style:normal;margin-left:auto;font-size:9.5px;color:var(--tx-3)}
.ec-grp .rw{display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:7px;transition:background .3s}
.ec-grp .rw .th{width:34px;height:34px;border-radius:7px;background:var(--bg-2);border:1px solid var(--bd);display:grid;place-items:center;flex:none}
.ec-grp .rw .th .ec-pr{width:24px;height:24px}
.ec-grp .rw .th.ic .ico{width:16px;height:16px;color:var(--tx-3)}
.ec-grp .rw .tx{flex:1;min-width:0}
.ec-grp .rw .tt{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ec-grp .rw b{display:block;font-size:12.5px;font-weight:500;color:var(--tx)}
.ec-grp .rw small{display:block;font-size:10.5px;color:var(--tx-2);font-variant-numeric:tabular-nums}
.ec-st2{font-size:9.5px;font-weight:600;line-height:1;padding:3px 6px;border-radius:5px;border:1px solid var(--bd-2);color:var(--tx-2)}
.ec-grp .rw .cv{display:grid;opacity:0;transition:opacity .3s}
.ec-grp .rw .cv .ico{width:14px;height:14px;color:var(--tx-2)}
/* k2 · le curseur survole le devis : la ligne s'allume, la flèche apparaît (comme à l'écran) */
.ec-sp[data-s="2"] .ec-gdv .rw{background:var(--bg-4);transition-delay:.75s}
.ec-sp[data-s="2"] .ec-gdv .rw .cv{opacity:1;transition-delay:.75s}
.ec-sp .mk-cur{--cx:340px;--cy:165px}
.ec-sp.k2 .mk-cur{--cx:190px;--cy:100px}
.ec-sp.k3 .mk-cur{--cx:372px;--cy:160px}
.ec-sp.k4 .mk-cur{--cx:44px;--cy:70px}
.ec-sp.k5 .mk-cur{--cx:250px;--cy:160px}
.ec-sp[data-s="4"] .mk-cur::after{animation:clk .55s var(--ez) .8s forwards}


/* ======================= Bento ======================= */
.fx-espace-client .viz>.tl-body{position:absolute;inset:0;padding:12px 14px}
.viz.lt{background:#fff;border-color:transparent;color:var(--tx)}
/* Mes devis */
.bz-dv .dv-top{display:flex;justify-content:space-between;align-items:center}
.bz-dv .dv-top b{font-family:'Schibsted Grotesk';font-size:13px;font-weight:700}
.bz-dv .ec-sel{height:24px;width:116px;font-size:10.5px}
.dv-dd{position:absolute;right:14px;top:38px;z-index:4;width:116px;padding:3px;border-radius:8px;border:1px solid var(--bd-2);background:#fff;display:flex;flex-direction:column;
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .3s var(--ez)}
.dv-dd span{font-size:10px;padding:2px 7px;border-radius:5px;color:var(--tx)}
.bz-dv[data-s="1"] .dv-dd{opacity:1;transform:none}
.bz-dv[data-s="1"] .dv-dd .hl{background:var(--bg-4);transition-delay:.7s}
.bz-dv.k2 .ec-sel .v0{opacity:0}.bz-dv.k2 .ec-sel .v1{opacity:1}
.dv-rw{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding:7px 9px;border-radius:9px;border:1px solid var(--bd);transition:opacity .4s,transform .5s var(--ez)}
.dv-rw>span:first-child{min-width:0}
.dv-rw b{display:block;font-size:11.5px}
.dv-rw small{display:block;font-size:9.5px;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-rw .ec-badge{font-size:9.5px;padding:2px 7px}
.bz-dv.k2 .r2{opacity:0;transform:translateY(-4px)}
.bz-dv.k3 .r1 .ec-badge{background:var(--tx);color:#fff}
/* Carnet d'adresses */
.ad-c{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:9px;border:1px solid var(--bd)}
.ad-c span{display:flex;align-items:center;gap:7px}
.ad-c b{font-size:11.5px}
.ad-c em{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:9px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--bg-4);color:var(--tx)}
.ad-c em .ico{width:9px;height:9px;fill:currentColor}
.ad-c small{font-size:9.5px;color:var(--tx-2)}
.ad-c.dflt{border-color:var(--tx)}
.ad-f{display:flex;align-items:center;gap:8px;margin-top:7px}
.ad-f .lb{font-size:9.5px;color:var(--tx-2);white-space:nowrap}
.ad-f .ec-inp{height:24px;justify-content:flex-start;padding:0 8px;font-size:11px;font-weight:500}
.bz-ad[data-s="1"] .ad-f .ec-inp{border-color:var(--tx)}
.ad-c.nw{position:absolute;left:14px;right:14px;bottom:12px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .55s var(--ez-b)}
.bz-ad.k2 .ad-c.nw{opacity:1;transform:none}
.bz-ad.k2 .ad-f{opacity:0;transition:opacity .3s}
/* Sa sélection → « Demander le devis » → « En cours de chiffrage » */
.fx-espace-client .bz-se>.tl-body{display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:12px;align-items:stretch}
.se-l{display:flex;flex-direction:column;gap:5px;min-width:0}
.se-t{font-family:'Schibsted Grotesk';font-size:12.5px;font-weight:700}
.se-r{display:flex;align-items:center;gap:8px;padding:3px 7px 3px 3px;border-radius:8px;border:1px solid var(--bd)}
.se-r .ec-pr{width:23px;height:23px;flex:none;padding:2px;border-radius:6px;background:var(--bg-2)}
.se-r>span{min-width:0}
.se-r b{display:block;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-r small{display:block;font-size:9px;line-height:1.25;color:var(--tx-2)}
.se-s{display:flex;flex-direction:column;justify-content:center;gap:7px;padding-left:12px;border-left:1px solid var(--bd)}
.se-k{font-size:9.5px;color:var(--tx-2);display:flex;justify-content:space-between}
.se-k b{color:var(--tx);font-variant-numeric:tabular-nums}
.se-go{opacity:.35;width:100%}
.se-q{display:flex;flex-direction:column;align-items:flex-start;gap:4px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez-b)}
.se-q b{font-size:10.5px}
.se-q .ec-badge{font-size:9px;padding:2px 6px}
.bz-se.k1 .se-go{opacity:1}
.bz-se[data-s="2"] .se-go{animation:ecPress .5s var(--ez) .5s both}
.bz-se.k3 .se-q{opacity:1;transform:none;transition-delay:.15s}
/* Commander à nouveau */
.ag-r{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 8px;border-radius:9px;border:1px solid var(--bd)}
.ag-r>span:first-child{min-width:0}
.ag-r b{display:block;font-size:10px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-r small{display:block;font-size:9.5px;color:var(--tx-2)}
.ag-b{flex:none}
.bz-ag.k1 .ag-b{background:var(--tx);color:#fff;border-color:var(--tx);transform:scale(.97)}
.ag-s{display:grid;margin-top:8px}
.ag-q,.ag-t{grid-area:1/1;transition:opacity .35s,transform .5s var(--ez-b)}
.ag-q{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;background:var(--bg-2);opacity:0;transform:translateY(6px)}
.ag-q b{font-size:11px}
.ag-q small{font-size:9.5px;color:var(--tx-2);margin-left:6px}
.ag-m{display:flex;align-items:center;gap:6px}
.ag-m>.ico{width:14px;height:14px;color:var(--tx-2)}
.ag-m em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;border:1px solid var(--bd-2);background:#fff;transition:background .3s,color .3s}
.ag-m em .ico{width:11px;height:11px}
.bz-ag.k2 .ag-q{opacity:1;transform:none}
.bz-ag[data-s="2"] .ag-m em{background:var(--tx);color:#fff;border-color:var(--tx);transition-delay:.6s}
.ag-t{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;padding:6px 10px;border-radius:9px;border:1px solid var(--bd-2);background:#fff;opacity:0;transform:translateY(8px)}
.ag-t .ok{width:15px;height:15px;border-radius:50%;background:var(--tx);color:#fff;display:grid;place-items:center;font-size:9px}
.bz-ag.k3 .ag-q{opacity:0;transform:translateY(-6px)}
.bz-ag.k3 .ag-t{opacity:1;transform:none;transition-delay:.15s}

/* Logos */
.lg-t{font-family:'Schibsted Grotesk';font-size:12.5px;font-weight:700}
.lg-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.lg-g>span{display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .55s var(--ez-b)}
.lg-g>span:nth-child(2){transition-delay:.1s}.lg-g>span:nth-child(3){transition-delay:.2s}
.lg-g i{height:46px;border-radius:7px;border:1px solid var(--bd);display:grid;place-items:center;position:relative;background:#fff}
.lg-g i::before{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid var(--tx)}
.lg-g .mk2::before{border-radius:4px}
.lg-g .mk3::before{border:none;background:var(--tx);width:22px;height:14px;border-radius:7px 7px 3px 3px}
.lg-g small{font-size:9px;color:var(--tx-2);font-family:'Spline Sans Mono'}
.bz-lg.k1 .lg-g>span{opacity:1;transform:none}
.lg-dl{position:absolute;right:14px;top:10px;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;border:1px solid var(--bd-2);transition:background .3s,color .3s}
.lg-dl .ico{width:11px;height:11px}
.bz-lg.k2 .lg-dl{background:var(--tx);color:#fff;border-color:var(--tx)}
.bz-lg.k2 .lg1 i{border-color:var(--tx)}
/* E-mails */
.fx-espace-client .bz-ml>.tl-body{display:flex;flex-direction:column;gap:4px;justify-content:center;padding:8px 14px}
.ml-r{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--tx-3);border:1px solid var(--bd);border-radius:7px;padding:3px 8px;transition:color .35s,border-color .35s,background .35s,transform .45s var(--ez)}
.ml-r .ico{width:12px;height:12px}
.ml-r b{font-weight:500}
.ml-r em{margin-left:auto;font-style:normal;font-family:'Spline Sans Mono';font-size:8.5px;color:var(--tx-3)}
.bz-ml[data-s="0"] .m0,.bz-ml[data-s="1"] .m1,.bz-ml[data-s="2"] .m2,.bz-ml[data-s="3"] .m3{color:var(--bg);background:var(--tx);border-color:var(--tx);transform:translateX(6px)}
.bz-ml[data-s="0"] .m0 em,.bz-ml[data-s="1"] .m1 em,.bz-ml[data-s="2"] .m2 em,.bz-ml[data-s="3"] .m3 em{color:var(--bg)}
.bz-ml.k1 .m0,.bz-ml.k2 .m1,.bz-ml.k3 .m2{color:var(--tx-2)}

/* ======================= Réactif ======================= */
@media(max-width:960px){
  .ec-row1,.ec-row2{grid-template-columns:minmax(0,1fr);gap:34px}
  .ec-row2 .ec-hm-t{order:2}
  .ec-row2{margin-top:72px}
}
@media(max-width:700px){
  .ec-srch{padding:22px 12px;min-height:0}
}