/* F—06 · IA intégrée — AVA — maquettes de templates/landing/features/ava.html.twig.
   États : .k1…k8 (timeline du hero, cumulatif) et [data-s="n"] (étape exacte) ;
   scènes : [data-active="n"] (couche affichée) et .a0…aN (étape jouée) —
   scène 1 « Son travail » (.va-l0…l4, .a0…a4), scène 2 « Sur votre site »
   (.va-ms pour les étapes 0 et 1, .va-mb pour l'étape 2).

   PAGE CLAIRE. Comme l'îlot .ava-sec de la landing, on ne peint pas les
   composants : on REDÉFINIT les tokens sur body.fx-ava (papier chaud + orange
   d'AVA) et tout ce qui passe par var(--…) suit. Le reste — ce que landing.css
   et base.css écrivent en dur pour le thème sombre (nav au défilement, menu,
   voiles, ombres, curseur…) — est rattrapé plus bas, toujours sous .fx-ava. */

/* ============================== Le monde d'AVA ============================== */
.fx-ava{
  --bg:#FAFAF8;--bg-2:#FFFFFF;--bg-3:#FFFFFF;--bg-4:#F1F0EC;
  --bd:rgba(22,19,15,.11);--bd-2:rgba(22,19,15,.20);
  --tx:#16130F;--tx-2:#5A544C;--tx-3:#77716A;
  --ac:#16130F;--ac-dim:rgba(22,19,15,.05);
  /* Les matières passent à l'orange : même partial _tex, autres tons. */
  --br-1:#FDBA74;--br-2:#F97316;--br-3:#E8590C;
  --grad:linear-gradient(100deg,var(--br-1),var(--br-2) 50%,var(--br-3));
  --av-tx:#C2410C;                     /* l'orange en petit texte : lisible sur papier */
  --av-dim:rgba(249,115,22,.08);--av-line:rgba(249,115,22,.34);
  --sh-f:0 30px 60px -26px rgba(22,19,15,.30),0 0 0 1px rgba(22,19,15,.03);
  background:var(--bg);color:var(--tx)}
.fx-ava ::selection{background:var(--av);color:#fff}

/* --- Ce que le thème sombre écrit en dur --------------------------------- */
.fx-ava header.scrolled{background:rgba(250,250,248,.86);border-bottom-color:var(--bd)}
.fx-ava .btn-pri{background:var(--tx);color:#FAFAF8}
.fx-ava .btn-pri:hover{background:#2E2924}
.fx-ava .btn-gh:hover{background:rgba(22,19,15,.05)}
.fx-ava .btn-ava:hover{background:#E4640C}
.fx-ava .nmenu-inner{background:rgba(255,255,255,.97);box-shadow:0 40px 80px -30px rgba(22,19,15,.32)}
.fx-ava .nmenu-all{background:linear-gradient(160deg,#FFF6EC,#FFFFFF)}
.fx-ava .nmenu-item:hover,.fx-ava .nmenu-item.on{background:rgba(22,19,15,.05)}
.fx-ava .mnav,.fx-ava header.mopen{background:#FAFAF8}
.fx-ava .fx-hero::before{opacity:.7;
  background-image:linear-gradient(rgba(22,19,15,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(22,19,15,.07) 1px,transparent 1px)}
.fx-ava .fx-crumb{background:rgba(255,255,255,.7)}
.fx-ava .fx-crumb .pip{background:var(--av-dim)}
.fx-ava .fx-crumb .pip::before{background:var(--av);animation-name:va-pip}
@keyframes va-pip{0%{box-shadow:0 0 0 0 rgba(249,115,22,.45)}70%,100%{box-shadow:0 0 0 9px rgba(249,115,22,0)}}
.fx-ava .win{box-shadow:0 50px 100px -44px rgba(22,19,15,.40),0 0 0 1px rgba(22,19,15,.04)}
.fx-ava .win-top{background:#FCFBF9}
.fx-ava .mk-float,.fx-ava .float{box-shadow:var(--sh-f)}
.fx-ava .mk-bar{background:rgba(22,19,15,.08)}
.fx-ava .mk-tbl{background:rgba(22,19,15,.015)}
.fx-ava .mk-cur{filter:drop-shadow(0 3px 6px rgba(22,19,15,.35))}
.fx-ava .mk-cur path{fill:#16130F;stroke:#fff}
.fx-ava .mk-cur::after{border-color:var(--av)}
.fx-ava .veil{background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg-2) 42%,rgba(255,255,255,.86) 70%,rgba(255,255,255,0) 100%)}
.fx-ava .tex-grid::before{background-image:linear-gradient(rgba(22,19,15,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(22,19,15,.4) 1px,transparent 1px)}
.fx-ava .tex-grain::before{opacity:.30}
.fx-ava .fx-card[data-glow]::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(249,115,22,.08),transparent 60%)}
.fx-ava .fx-card .viz{height:132px;background:#FCFBF9}
.fx-ava .fx-node.cur .o{box-shadow:0 0 0 6px rgba(22,19,15,.05),0 0 40px -6px rgba(249,115,22,.75)}
.fx-ava .fx-step li{background:var(--bg-2)}
.fx-ava .ferr,.fx-ava .done .ic{color:var(--tx)}
.fx-ava .fcard{box-shadow:0 30px 70px -40px rgba(22,19,15,.30)}
/* Dans landing.css, « .final p » (0,1,1) l'emporte sur « .fnote » / « .ferr » (0,1,0) :
   la mention passait en 18 px. Rattrapé ici, pour cette page seulement. */
.fx-ava .final .fnote{font-size:10px;margin:14px 0 0;max-width:none}
.fx-ava .final .ferr{font-size:12.5px;margin:12px 0 0;max-width:none}
.fx-ava .fx-dots button{background:rgba(22,19,15,.15)}
.fx-ava [data-active="0"] .fx-dots button:nth-child(1),.fx-ava [data-active="1"] .fx-dots button:nth-child(2),
.fx-ava [data-active="2"] .fx-dots button:nth-child(3),.fx-ava [data-active="3"] .fx-dots button:nth-child(4),
.fx-ava [data-active="4"] .fx-dots button:nth-child(5){background:var(--tx);width:34px}

/* ============================== Hero ============================== */
/* Le logo officiel, en grand : trois anneaux qui tournent plus vite qu'en
   signature (on est chez elle), entrée en rotation quand le titre monte. */
.va-hmark{position:absolute;right:var(--gut);top:-34px;width:340px;height:340px;z-index:-1;pointer-events:none}
.va-hmark::before{content:"";position:absolute;inset:6%;border-radius:50%;filter:blur(12px);
  background:radial-gradient(circle,rgba(249,115,22,.20),rgba(249,115,22,.06) 46%,rgba(249,115,22,0) 70%)}
.avamark.va-big{position:relative;width:100%;height:100%}
.avamark.va-big>use{stroke-width:13}
.avamark.va-big .r1{animation-duration:38s}
.avamark.va-big .r2{animation-duration:52s}
.avamark.va-big .r3{animation-duration:66s}
.fx-js .va-hmark{opacity:0;transform:scale(.82) rotate(-40deg);transition:opacity 1.2s var(--ez) .25s,transform 1.8s var(--ez) .25s}
.fx-ready .va-hmark{opacity:1;transform:none}

/* Deux phrases, deux lignes, à toutes les largeurs : le logo garde sa place à droite. */
.va-hero .fx-title .dim{display:block}

/* La fenêtre : back-office (liste des devis) + widget AVA ouvert en panneau */
.va-h{width:1120px}
.va-hs{display:grid;grid-template-columns:168px minmax(0,1fr) 372px;height:540px}
.va-hs>.mk-side{background:#FCFBF9}

/* --- liste des devis --- */
/* 14 devis tiennent sur une page (50 par page) : pas de pagination, la liste file sous le bord. */
.va-list{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.va-list>*{flex-shrink:0}
.va-lh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 18px 13px;border-bottom:1px solid var(--bd)}
.va-lh .mk-h{display:flex;align-items:baseline;gap:10px;font-size:20px}
.va-cnt{font-family:'Hanken Grotesk';font-size:12px;font-weight:500;color:var(--tx-3)}
.va-n{display:inline-grid;font-variant-numeric:tabular-nums}
.va-n i{grid-area:1/1;font-style:normal;text-align:right;transition:opacity .3s,transform .4s var(--ez)}
.va-n .n3{opacity:0;transform:translateY(6px)}
.k4 .va-n .n14{opacity:0;transform:translateY(-6px);transition-delay:.9s}
.k4 .va-n .n3{opacity:1;transform:none;transition-delay:1s}
.va-la{display:flex;gap:8px;align-items:center}
.va-la .ico{width:12px;height:12px}
.va-swp{display:grid}
.va-swp>.mk-btn{grid-area:1/1;justify-self:end;transition:opacity .35s,transform .5s var(--ez-b),background .3s}
.va-sel{opacity:0;transform:scale(.9);border-color:var(--av-line);background:var(--av-dim);color:var(--av-tx)}
.k4 .va-arch{opacity:0;transition-delay:.7s}
.k4 .va-sel{opacity:1;transform:none;transition-delay:.85s}
.va-fc{display:flex;gap:6px;padding:11px 18px;border-bottom:1px solid var(--bd);transition:opacity .4s}
.va-fc span{font-size:11px;color:var(--tx-2);border:1px solid var(--bd);border-radius:999px;padding:4px 10px;white-space:nowrap}
.va-fc .on{background:var(--tx);border-color:var(--tx);color:#fff}
.k4 .va-fc{opacity:.4;transition-delay:.8s}
.va-tr{display:grid;grid-template-columns:64px minmax(0,1fr) 86px 74px 162px;gap:10px;align-items:center;padding:0 18px;height:52px;border-bottom:1px solid var(--bd);font-size:12px;color:var(--tx-2);overflow:hidden}
.va-tr .r{text-align:right;font-variant-numeric:tabular-nums}
.va-tr small{display:block;font-size:10px;color:var(--tx-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-th{height:32px;font-family:'Spline Sans Mono';font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3);background:rgba(22,19,15,.015)}
.va-tr .rf{font-family:'Spline Sans Mono';font-size:11px;color:var(--tx)}
.va-tr .rf small{font-size:9.5px}
.va-tr .cl{color:var(--tx);font-size:12.5px;font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-tr .cl small{font-weight:400}
.va-tr .mg{color:var(--tx)}
.va-pill{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}
.va-pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.va-pill.solid{background:var(--tx);border-color:var(--tx);color:#fff}
.va-rows{position:relative}
/* La sélection d'AVA : les autres lignes s'effacent, les siennes prennent son trait. */
.va-tr.va-x,.va-tr.va-t{transition:height .7s var(--ez),opacity .4s,border-color .4s,background .5s,box-shadow .5s}
.k4 .va-x{height:0;opacity:0;border-bottom-color:transparent;transition-delay:.85s,.75s,.75s,0s,0s}
.k4 .va-t{box-shadow:inset 3px 0 0 var(--av);transition-delay:0s,0s,0s,0s,1.5s}
.k8 .va-t1{animation:va-flash 1.6s var(--ez) .25s both}
.k8 .va-t2{animation:va-flash 1.6s var(--ez) .5s both}
.k8 .va-t3{animation:va-flash 1.6s var(--ez) .75s both}
@keyframes va-flash{0%{background:transparent}30%{background:rgba(249,115,22,.14)}100%{background:rgba(249,115,22,.04)}}

/* --- le widget AVA (public/js/ava-embed.js) --- */
.va-w{position:relative;display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--bd);overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFCF8 60%,#FFF7EF 100%)}
.va-w::before{content:"";position:absolute;right:-70px;top:-90px;width:300px;height:240px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(249,115,22,.15),rgba(249,115,22,0))}
.va-wh{position:relative;display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--bd)}
.va-wav{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--av-dim);border:1px solid var(--av-line)}
.va-wav .avamark{width:20px;height:20px}
.va-wav::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--av);opacity:0}
.va-h[data-s="3"] .va-wh .va-wav::after,.va-h[data-s="7"] .va-wh .va-wav::after{animation:va-ring 1.3s ease-out 1s infinite}
@keyframes va-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.va-wt{min-width:0;line-height:1.25}
.va-wt b{display:block;font-family:'Schibsted Grotesk';font-size:14px;font-weight:600;color:var(--tx)}
.va-wt small{font-size:11px;color:var(--tx-3);font-weight:500}
.va-wi{margin-left:auto;display:flex;gap:12px;color:var(--tx-3)}
.va-wi svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.va-tabs{position:relative;display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--bd)}
.va-tabs span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--tx-3);padding:5px 11px;border-radius:999px;white-space:nowrap}
.va-tabs .on{background:var(--tx);color:#fff}
.va-tabs .ico{width:12px;height:12px}
.va-msgs{position:relative;flex:1;min-height:0;overflow:hidden}
.va-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 26px 60px;
  transition:opacity .4s,transform .6s var(--ez)}
.va-eav{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--av-dim);border:1px solid var(--av-line)}
.va-eav .avamark{width:32px;height:32px}
.va-empty>b{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.02em;margin-top:12px}
.va-empty>p{font-size:12.5px;color:var(--tx-2);margin-top:4px;max-width:30ch;line-height:1.5}
.va-sugg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.va-sugg span{font-size:11.5px;color:var(--tx);padding:6px 11px;border-radius:999px;border:1px solid var(--av-line);background:rgba(255,255,255,.75)}
.k3 .va-empty{opacity:0;transform:translateY(-12px) scale(.98);transition-delay:.9s}

.va-thread{position:absolute;left:0;right:0;top:0;padding:14px;display:flex;flex-direction:column;gap:10px;transition:transform .9s var(--ez)}
.va-u{align-self:flex-end;max-width:86%;background:#18181B;color:#fff;font-size:12.5px;font-weight:500;line-height:1.4;padding:8px 13px;border-radius:15px 15px 4px 15px}
.va-a{align-self:flex-start;max-width:100%;background:#fff;border:1px solid var(--bd);border-radius:15px 15px 15px 4px;padding:10px 12px;
  font-size:12px;line-height:1.5;color:var(--tx);box-shadow:0 1px 2px rgba(22,19,15,.04)}
.va-a p+p,.va-a p+.va-tbl,.va-tbl+p{margin-top:7px}
.va-a b{font-weight:600}
.va-thread>*{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ez),transform .6s var(--ez-b)}
.k3 .va-thread>.va-u1{opacity:1;transform:none;transition-delay:1s}
.k4 .va-thread>.va-a1{opacity:1;transform:none;transition-delay:.35s}
.k5 .va-thread>.va-a2{opacity:1;transform:none;transition-delay:.45s}
.k5 .va-thread{transform:translateY(-118px)}
/* Le « oui » écrit part (k7) sous sa question, l'action tourne, puis le compte rendu (k8)
   remonte le fil juste assez pour passer au-dessus de la carte d'activité (mesuré). */
.k7 .va-thread>.va-u2{opacity:1;transform:none;transition-delay:1.05s}
.k8 .va-thread>.va-a3{opacity:1;transform:none;transition-delay:1.15s}
.k8 .va-thread{transform:translateY(-165px);transition-delay:.85s}
.va-a3{display:flex;align-items:flex-start;gap:7px}
.va-a3 .ico{width:13px;height:13px;stroke-width:2.6;color:var(--av);flex:none;margin-top:2px}
.va-tbl{border:1px solid var(--bd);border-radius:9px;overflow:hidden;background:#fff}
.va-r{display:grid;grid-template-columns:44px minmax(0,1fr) 68px 72px;gap:6px;padding:5px 9px;border-bottom:1px solid var(--bd);font-size:11px;color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.va-r:last-child{border-bottom:none}
.va-r>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.va-r .r{text-align:right}
.va-rh{background:#FAF8F5;font-weight:600;font-size:10px;color:var(--tx-2)}
.va-r:not(.va-rh){opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .45s var(--ez)}
.k4 .va-r:not(.va-rh){opacity:1;transform:none;transition-delay:.7s}
.k4 .va-r:nth-child(3){transition-delay:.82s}
.k4 .va-r:nth-child(4){transition-delay:.94s}
.va-note{font-size:11.5px;color:var(--tx-2)}
.va-q{font-size:11.5px;color:var(--tx-2);border-left:2px solid var(--av-line);padding-left:9px;font-style:italic}

/* Le calque d'activité : ⟳ en cours → ✓ faite (cartes de verre, en bas à droite). */
.va-act{position:absolute;right:12px;bottom:66px;z-index:6;display:grid;justify-items:end;pointer-events:none}
.va-act>.va-ac{grid-area:1/1}
.va-ac{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:7px 11px;border-radius:13px;font-size:11.5px;font-weight:500;color:var(--tx);white-space:nowrap;
  background:rgba(255,255,255,.86);border:1px solid rgba(22,19,15,.08);box-shadow:0 8px 24px -10px rgba(22,19,15,.32),inset 0 1px 0 #fff;backdrop-filter:blur(8px);
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity .35s,transform .5s var(--ez-b)}
.va-aci{display:grid;color:var(--av)}
.va-aci .ico{width:13px;height:13px}
.va-acl{overflow:hidden;text-overflow:ellipsis}
.va-acs{position:relative;width:14px;height:14px;flex:none}
.va-acs .spin,.va-okl .spin{position:absolute;inset:1px;border-radius:50%;border:1.6px solid rgba(249,115,22,.25);border-top-color:var(--av);animation:va-spin .8s linear infinite;transition:opacity .2s}
.va-acs .ico{position:absolute;inset:0;width:14px;height:14px;stroke-width:2.6;color:var(--tx);opacity:0;transform:scale(.4);transition:opacity .25s,transform .45s var(--ez-b)}
@keyframes va-spin{to{transform:rotate(360deg)}}
.k3 .va-ac1{opacity:1;transform:none;transition-delay:1.25s}
.k4 .va-ac1 .spin{opacity:0}
.k4 .va-ac1 .va-acs .ico{opacity:1;transform:none}
.k5 .va-ac1{opacity:0;transform:translateY(-4px);transition-delay:.2s}
.k7 .va-ac2{opacity:1;transform:none;transition-delay:1.5s}
.k8 .va-ac2 .spin{opacity:0;transition-delay:.3s}
.k8 .va-ac2 .va-acs .ico{opacity:1;transform:none;transition-delay:.35s}
.k8 .va-ac2{opacity:0;transform:translateY(-4px);transition-delay:2.3s}

/* Le champ : « Posez votre question… », la question tapée, l'envoi. */
.va-in{position:relative;display:flex;align-items:center;gap:2px;padding:10px 12px;border-top:1px solid var(--bd);background:rgba(255,255,255,.75)}
.va-tool{width:26px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--tx-3);flex:none}
.va-tool svg,.va-tool .ico{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.va-field{position:relative;flex:1;min-width:0;height:34px;margin:0 6px 0 4px;border-radius:10px;border:1px solid var(--bd);background:#fff;display:flex;align-items:center;padding:0 10px;
  font-size:11.5px;color:var(--tx);white-space:nowrap;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.va-field .ph{position:absolute;left:10px;color:var(--tx-3);transition:opacity .2s}
.va-typed{position:relative}
.va-ty2{position:absolute;left:10px}
.k1 .va-field{border-color:var(--av-line);box-shadow:0 0 0 3px rgba(249,115,22,.10);transition-delay:.85s}
.k2 .va-field .ph{opacity:0}
.k3 .va-ty1{opacity:0;transition:opacity .15s .95s}
.k3 .va-field .ph{opacity:1;transition-delay:1.05s}
.k3 .va-field{border-color:var(--bd);box-shadow:none;transition-delay:1s}
/* Votre réponse : « Oui, vas-y. » tapé dans le même champ (k5 clic, k6 frappe, k7 envoi). */
.k5 .va-field{border-color:var(--av-line);box-shadow:0 0 0 3px rgba(249,115,22,.10);transition-delay:2.15s}
.k6 .va-field .ph{opacity:0;transition-delay:0s}
.k7 .va-ty2{opacity:0;transition:opacity .15s .95s}
.k7 .va-field .ph{opacity:1;transition-delay:1.05s}
.k7 .va-field{border-color:var(--bd);box-shadow:none;transition-delay:1s}
.va-send{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--av);color:#fff;box-shadow:0 6px 16px -6px rgba(249,115,22,.85),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .2s}
.va-send .ico{width:14px;height:14px;stroke-width:2}
.va-h[data-s="3"] .va-send,.va-h[data-s="7"] .va-send{transform:scale(.9);transition-delay:.8s}

/* Curseur : une position par étape (coordonnées dans la fenêtre, 1120 px de large) */
.va-h .mk-cur{--cx:560px;--cy:470px}
.va-h.k1 .mk-cur{--cx:900px;--cy:563px}
.va-h.k3 .mk-cur{--cx:1081px;--cy:563px}
.va-h.k4 .mk-cur{--cx:640px;--cy:300px}
/* k5 : on lit sa question, puis on va au champ (départ retardé) ; k7 : envoi ; k8 : repos. */
.va-h.k5 .mk-cur{--cx:900px;--cy:563px;transition-delay:1.1s}
.va-h.k6 .mk-cur{transition-delay:0s}
.va-h.k7 .mk-cur{--cx:1081px;--cy:563px}
.va-h.k8 .mk-cur{--cx:690px;--cy:500px}
.va-h[data-s="1"] .mk-cur::after,.va-h[data-s="3"] .mk-cur::after,.va-h[data-s="7"] .mk-cur::after{animation:clk .55s var(--ez) .55s forwards}
.va-h[data-s="5"] .mk-cur::after{animation:clk .55s var(--ez) 2.05s forwards}

/* ============================== Scène ============================== */
.va-cx{position:relative;height:452px}
.va-lay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  opacity:0;transform:translateY(18px) scale(.975);transition:opacity .55s var(--ez),transform .8s var(--ez);pointer-events:none}
[data-active="0"] .va-l0,[data-active="1"] .va-l1,[data-active="2"] .va-l2,[data-active="3"] .va-l3,[data-active="4"] .va-l4,
[data-active="0"] .va-ms,[data-active="1"] .va-ms,[data-active="2"] .va-mb{opacity:1;transform:none;transition-delay:.12s}

/* Mention « activé à la mise en route » (composant .fx-onb de base.css) : ici seulement
   sa place, la même sur toutes les pages — étape : juste sous la ligne .n, avant le h3 ;
   carte du bento : juste sous le h4. */
.fx-ava .fx-step>.fx-onb{align-self:flex-start;margin:14px 0 -4px}
.fx-ava .fx-card>.fx-onb{align-self:flex-start;margin-top:10px}

/* Pastille « AVA veille… » / « Relue par AVA… » (comme av-presence du back-office) */
.va-pres{display:inline-flex;align-items:center;gap:6px;font-family:'Spline Sans Mono';font-size:9px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  color:var(--av-tx);border:1px solid var(--av-line);background:var(--av-dim);border-radius:999px;padding:4px 10px 4px 6px}
.va-pres .avamark{width:14px;height:14px}

/* 0 — Aujourd'hui */
.va-aj{width:508px;padding:15px 16px 14px}
.va-ajh{display:flex;align-items:center;gap:10px}
.va-ajh>b{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.02em}
.va-ajh .dt{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-3)}
.va-ajh .va-pres{margin-left:auto}
.va-strip{display:flex;gap:6px;margin:12px 0 2px}
.va-chip{font-size:11px;color:var(--tx-2);border:1px solid var(--bd);border-radius:999px;padding:3px 10px;background:#fff;white-space:nowrap;
  opacity:0;transform:scale(.7);transition:opacity .3s,transform .5s var(--ez-b);transition-delay:calc(var(--i) * 90ms + .3s)}
.va-chip b{color:var(--tx);font-weight:700}
.va-chip.hot{border-color:rgba(22,19,15,.38);color:var(--tx)}
.va-chip.ava{border-color:var(--av-line);color:var(--av-tx);background:var(--av-dim)}
.va-chip.ava b{color:var(--av-tx)}
.a0 .va-chip{opacity:1;transform:none}
.va-band{margin-top:10px;padding-top:10px;border-top:1px solid var(--bd);opacity:0;transform:translateY(10px);transition:opacity .5s,transform .7s var(--ez);transition-delay:calc(var(--i) * 160ms + .55s)}
.a0 .va-band{opacity:1;transform:none}
.va-bh{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.va-bh .kk{font-family:'Spline Sans Mono';font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.va-bh .kk.ava{color:var(--av-tx)}
.va-bh>b{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:-.01em}
.va-bh>b i{font-style:normal;font-family:'Spline Sans Mono';font-size:10px;font-weight:500;color:var(--tx-3);margin-left:4px}
.va-ent{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--bd);border-radius:9px;background:#fff;font-size:12px;transition:opacity .5s}
.va-ent.hot{border-left:3px solid var(--tx)}
.va-ent.info{border-left:3px solid var(--av-line)}
.va-ent .kd{flex:none;font-family:'Spline Sans Mono';font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);border:1px solid var(--bd);border-radius:4px;padding:1px 5px}
.va-ent .qq{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx);font-weight:500}
.va-ent .wh{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.va-g{display:flex;gap:5px;margin-top:6px;transition:opacity .5s}
.va-g i{font-style:normal;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:500;color:var(--tx-2);border:1px solid var(--bd);border-radius:7px;padding:3px 8px;background:#fff;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.va-g i.ava{border-color:var(--av-line);color:var(--tx)}
.va-g i.ava .avamark{width:11px;height:11px}
/* « Traité » : le constat s'efface (comme .aj-carte.gone) */
.a0 .va-tt{background:var(--tx);border-color:var(--tx);color:#fff;transition-delay:2.6s}
.va-rep .va-g i{transition:background .3s,color .3s,border-color .3s,opacity .5s}
.a0 .va-rep .va-ent,.a0 .va-rep .va-g i:not(.va-tt){opacity:.38;transition-delay:3s}

/* 1 — 74 actions, 12 familles */
.va-reg{width:500px;padding:16px 18px}
.va-regh{display:flex;justify-content:space-between;align-items:baseline}
.va-tot{font-size:12px;color:var(--tx-2)}
.va-tot b{font-family:var(--disp);font-weight:600;font-size:34px;letter-spacing:-.013em;color:var(--tx);margin-right:4px}
.va-fam{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.va-fam span{display:flex;flex-direction:column;gap:1px;padding:8px 10px 9px;border-radius:9px;border:1px solid var(--bd);background:#fff;font-size:10.5px;line-height:1.25;color:var(--tx-3);
  transition:background .45s,border-color .45s,color .45s,transform .5s var(--ez-b);transition-delay:calc(var(--i) * 120ms + .25s)}
.va-fam b{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.02em;color:var(--tx-3);transition:color .45s;transition-delay:inherit}
.a1 .va-fam span{border-color:var(--av-line);background:var(--av-dim);color:var(--tx)}
.a1 .va-fam b{color:var(--av-tx)}
.va-route{display:flex;align-items:center;gap:9px;margin-top:14px;padding:9px 11px;border-radius:9px;background:var(--bg);border:1px dashed var(--bd-2);
  font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx-2);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .6s var(--ez);transition-delay:1.9s}
.va-route .nm{color:var(--av-tx)}
.va-route .ar{display:grid;color:var(--tx-3)}
.va-route .ar .ico{width:13px;height:13px}
.va-route b{font-weight:500;color:var(--tx);margin-right:4px}
.a1 .va-route{opacity:1;transform:none}
.va-rsub{font-size:11px;color:var(--tx-3);margin-top:8px;line-height:1.5;opacity:0;transition:opacity .5s 2.3s}
.a1 .va-rsub{opacity:1}

/* Scène 2, étapes 0 et 1 — sur le site de l'espace : le widget face au visiteur,
   puis la demande enregistrée dans l'espace (AvaApiController::demandeChat). */
.va-site{width:476px;padding:0;overflow:hidden}
/* Le site + la carte « arrivée » dépassent un peu les 452 px du canevas : ils ne se tassent pas
   (sinon la dernière bulle est rognée), le surplus déborde à parts égales dans la marge du panneau. */
.va-ms>.va-site,.va-ms>.va-lead{flex-shrink:0}
.va-sbar{display:flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-bottom:1px solid var(--bd);background:#FCFBF9}
.va-sbar>i{width:7px;height:7px;border-radius:50%;background:rgba(22,19,15,.13)}
.va-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}
.va-surl .ico{width:10px;height:10px}
.va-swh{display:flex;align-items:baseline;gap:8px;padding:8px 12px;border-bottom:1px solid var(--bd);background:#fff}
.va-swh .va-wav{align-self:center;width:24px;height:24px}
.va-swh .va-wav .avamark{width:15px;height:15px}
.va-swh b{font-family:'Schibsted Grotesk';font-size:13px;font-weight:600}
.va-swh small{font-size:10.5px;color:var(--tx-3);font-weight:500}
.va-sth{display:flex;flex-direction:column;gap:8px;padding:11px 12px 12px;background:linear-gradient(180deg,#FFFFFF 0%,#FFFAF4 100%)}
.va-sth .va-u,.va-sth .va-a{font-size:11.5px}
.va-sth .va-a{max-width:100%}
.va-pc{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
/* La carte produit du widget (renderProductWidget) : vignette, nom, « À partir de … HT », « Voir la fiche ». */
.va-pw{display:flex;flex-direction:column;gap:7px;min-width:0;padding:7px;border:1px solid var(--bd);border-radius:11px;background:#fff}
.va-pw .hd{display:flex;align-items:center;gap:8px;min-width:0}
.va-pw .im{width:44px;height:44px;border-radius:8px;flex:none;display:grid;place-items:center;background:#F3F1EC}
.va-pw svg{width:38px;height:38px;fill:none;stroke:#16130F;stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round}
.va-pw svg .fr,.va-pw svg .bx{fill:#FFFFFF}
.va-pw svg .sd{fill:#E4E0D8}
.va-pw svg .lt{fill:#FFE4C2;stroke:#C2410C;stroke-width:.8}
.va-pw svg .gl{fill:#FFFFFF;stroke:none;opacity:.75}
.va-pw svg .ray{stroke:var(--av);stroke-width:1.3}
.va-pw svg .br{stroke-width:1.4}
.va-pw svg .fn{stroke-width:1.05}
.va-pw svg .bt{fill:#FFFFFF;stroke-width:1.2}
.va-pw .bd{display:flex;flex-direction:column;gap:2px;min-width:0}
.va-pw .nm{font-size:10.5px;font-weight:600;line-height:1.3;color:var(--tx)}
.va-pw .pr{font-size:9.5px;color:var(--tx-2);white-space:nowrap}
.va-pw .pr b{color:var(--tx);font-weight:600}
.va-pw .cta{display:block;text-align:center;font-size:10px;font-weight:600;padding:5px 0;border-radius:7px;background:var(--tx);color:#fff}
.va-s4{display:flex;align-items:center;gap:7px}
.va-s4 .ico{width:13px;height:13px;stroke-width:2.6;color:var(--av)}
.va-s1,.va-s2,.va-s3,.va-s4,.va-pw,.va-lead{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .55s var(--ez-b)}
.va-pw{transform:translateY(8px) scale(.96)}
.a0 .va-s1{opacity:1;transform:none;transition-delay:.3s}
.a0 .va-s2{opacity:1;transform:none;transition-delay:1.1s}
.a0 .va-pw{opacity:1;transform:none;transition-delay:calc(var(--i) * 180ms + 1.5s)}
.a1 .va-s3{opacity:1;transform:none;transition-delay:.35s}
.a1 .va-s4{opacity:1;transform:none;transition-delay:1.1s}
.va-lead{width:476px;transform:translateY(12px) scale(.97)}
.va-lead .tx{flex:1;min-width:0}
.va-lead em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-lead .va-pill{align-self:center;flex:none}
.a1 .va-lead{opacity:1;transform:none;transition-delay:1.8s}

/* 2 — garde-fous */
.va-sens,.va-ok,.va-blk{width:440px}
.va-sens{padding:12px 14px}
.va-sg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.va-sg span{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:8px;border:1px solid var(--bd);background:#fff}
.va-sg b{font-size:12px;font-weight:600}
.va-sg small{font-family:'Spline Sans Mono';font-size:8.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-sg .hi{border-color:var(--av-line);background:var(--av-dim)}
.va-sg .hi b{color:var(--av-tx)}
.va-ok{padding:11px 12px;display:flex;flex-direction:column;gap:8px}
.va-ok .va-a,.va-ok .va-u{font-size:12px}
.va-ok .va-a{max-width:92%;box-shadow:none}
.va-oku{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .55s var(--ez-b)}
.a2 .va-oku{opacity:1;transform:none;transition-delay:1.5s}
.va-okls{position:relative;height:36px;margin-top:2px;border-top:1px solid var(--bd)}
.va-okl{position:absolute;left:0;right:0;top:10px;display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--tx-2);transition:opacity .35s,transform .45s var(--ez)}
.va-okl .spin{position:relative;inset:auto;width:12px;height:12px;flex:none}
.va-okl .ico{width:13px;height:13px;stroke-width:2.6;color:var(--tx)}
.va-okl.va-wait{font-family:'Spline Sans Mono';font-size:10.5px;opacity:0}
.va-done{color:var(--tx);font-weight:600;opacity:0;transform:translateY(6px)}
/* Après le « oui » : la carte d'activité tourne (nom de l'action), puis la relecture. */
.a2 .va-wait{animation:va-wl 1.5s var(--ez) 2s both}
@keyframes va-wl{0%{opacity:0;transform:translateY(6px)}18%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.a2 .va-done{opacity:1;transform:none;transition-delay:3.45s}
.va-blk{display:flex;align-items:center;gap:11px;padding:10px 12px}
.va-blk>.ico{width:30px;height:30px;padding:7px;border-radius:9px;border:1px solid var(--bd-2);color:var(--tx-2);flex:none}
.va-blk b{display:block;font-family:'Spline Sans Mono';font-size:11px;font-weight:500;color:var(--tx)}
.va-blk small{font-size:11.5px;color:var(--tx-2)}
.va-l2>*{opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s var(--ez)}
.a2 .va-l2>*{opacity:1;transform:none}
.a2 .va-l2>.va-ok{transition-delay:.35s}
.a2 .va-l2>.va-blk{transition-delay:.7s}

/* Carte « arrivée » (demande enregistrée, couche 1) */
.va-ntf{display:flex;gap:11px;align-items:flex-start;padding:11px 13px}
.va-nb{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--av);color:#fff}
.va-nb .ico{width:15px;height:15px}
.va-ntf small{display:block;font-family:'Spline Sans Mono';font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--av-tx)}
.va-ntf b{display:block;font-size:12.5px;font-weight:600;margin-top:2px}
.va-ntf em{display:block;font-style:normal;font-size:11px;color:var(--tx-3);margin-top:1px}
.va-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 3 — travail de fond */
.va-bg{width:420px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:9px}
.va-bgh{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid var(--bd)}
.va-bgh .va-wav{width:26px;height:26px}
.va-bgh .va-wav .avamark{width:16px;height:16px}
.va-bgh>b{font-family:'Schibsted Grotesk';font-size:13px;white-space:nowrap}
.va-tabs.va-mt{margin-left:auto;padding:0;border:none}
.va-tabs.va-mt span{font-size:10.5px;padding:4px 9px}
.va-tabs.va-mt .en i{font-style:normal;font-size:9px;font-weight:700;color:#fff;background:var(--av);border-radius:999px;padding:1px 6px;margin-left:2px;
  opacity:0;transform:scale(.3);transition:opacity .3s,transform .5s var(--ez-b)}
.va-bg .va-a,.va-bg .va-u{font-size:12px;max-width:92%}
.va-bg .va-ac{align-self:flex-start;position:relative}
.va-b1,.va-b2,.va-b3,.va-prog{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .55s var(--ez-b)}
.a3 .va-b1{opacity:1;transform:none;transition-delay:.25s}
.a3 .va-b2{opacity:1;transform:none;transition-delay:1.05s}
.a3 .va-b3{opacity:1;transform:none;transition-delay:1.6s}
.a3 .va-prog{opacity:1;transform:none;transition-delay:1.9s}
.a3 .va-b3 .spin{opacity:0;transition-delay:5.3s}
.a3 .va-b3 .va-acs .ico{opacity:1;transform:none;transition-delay:5.35s}
.va-prog{padding:10px 11px;border-radius:10px;border:1px solid var(--bd);background:#fff}
.va-pl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11px;color:var(--tx-2);margin-bottom:8px}
.va-pl b{font-family:'Spline Sans Mono';font-size:11px;font-weight:500;color:var(--tx);white-space:nowrap;font-variant-numeric:tabular-nums}
.va-prog .mk-bar i{--v:0;transition:transform 3.2s cubic-bezier(.45,.05,.35,1) 2.1s}
.a3 .va-prog .mk-bar i{--v:1}
/* Le compteur suit la barre (propriété animable : un entier qui glisse). */
@property --va-n{syntax:'<integer>';inherits:false;initial-value:312}
.va-pn{--va-n:312;counter-reset:va-n var(--va-n)}
.va-pn::before{content:counter(va-n)}
.fx-js [data-scene]:not(.a3) .va-pn{--va-n:0}
.a3 .va-pn{transition:--va-n 3.2s cubic-bezier(.45,.05,.35,1) 2.1s}
.va-bgn{width:420px;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .45s,transform .6s var(--ez-b)}
.a3 .va-bgn{opacity:1;transform:none;transition-delay:5.5s}
.a3 .va-tabs.va-mt .en i{opacity:1;transform:none;transition-delay:5.6s}

/* Scène 2, étape 2 — « Ma boutique » (templates/tenant_shop) : on synchronise, les chiffres suivent. */
.va-bq{width:476px;padding:14px 15px 14px}
.va-bqh{display:flex;align-items:center;gap:10px}
.va-bqh>b{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.02em}
.va-bqh .va-pill{margin-left:auto}
.va-bqs{font-size:11px;color:var(--tx-3);margin-top:2px}
.va-bqc{display:flex;align-items:center;gap:9px;margin-top:11px;padding:8px 8px 8px 11px;border:1px solid var(--bd);border-radius:10px;background:#fff}
.va-bst{display:flex;flex-direction:column;gap:1px;line-height:1.2}
.va-bst b{font-size:12px;font-weight:600}
.va-bqc .tg{font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-2);border:1px solid var(--bd-2);border-radius:5px;padding:1px 6px}
.va-sync{margin-left:auto;transition:transform .2s,background .3s}
.va-sync .ico{width:12px;height:12px}
.a2 .va-sync{transform:scale(.94);background:#2E2924;transition-delay:.5s}
.a2 .va-sync .ico{animation:va-spin .7s linear .55s 3}
/* Le message flash du vrai écran, puis les chiffres « après rechargement » */
.va-fl{display:flex;align-items:center;gap:7px;height:0;margin-top:0;padding:0 10px;overflow:hidden;border-radius:8px;background:var(--av-dim);border:1px solid transparent;
  font-size:10.5px;color:var(--tx);opacity:0;transition:height .5s var(--ez),margin .5s var(--ez),opacity .35s,border-color .35s}
.va-fl .ico{width:12px;height:12px;stroke-width:2.6;color:var(--av-tx);flex:none}
.a2 .va-fl{height:28px;margin-top:8px;opacity:1;border-color:var(--av-line);transition-delay:1.1s}
.va-kh{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:-.01em;margin:12px 0 7px}
.va-kpis{display:grid;grid-template-columns:1fr 1.25fr 1.1fr;gap:6px}
.va-kpis>div{min-width:0;border:1px solid var(--bd);border-radius:9px;padding:8px 10px;background:#fff;transition:border-color .45s,background .45s}
.va-kpis b{display:block;font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.va-kpis small{display:block;font-size:9.5px;line-height:1.35;color:var(--tx-3);margin-top:2px}
.va-kpis .mk-lbl{display:block;font-size:8.5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-k2 b{font-size:16px;padding-top:4px}
.a2 .va-k1,.a2 .va-k2{border-color:var(--av-line);background:var(--av-dim);transition-delay:1.7s}
/* Ancien → nouveau, l'un glisse sous l'autre (comme le compteur de la liste du hero). */
.va-x2,.va-kpis .va-x2{display:grid}
.va-x2>span{grid-area:1/1;transition:opacity .3s,transform .45s var(--ez)}
.va-x2 .o{opacity:0;transform:translateY(-5px)}
.fx-js [data-scene]:not(.a2) .va-x2 .o{opacity:1;transform:none}
.fx-js [data-scene]:not(.a2) .va-x2 .n{opacity:0;transform:translateY(5px)}
.a2 .va-x2 .o{transition-delay:1.8s}
.a2 .va-x2 .n{transition-delay:1.9s}
/* Le catalogue : 4 775 → 4 812 (on ne fait glisser que les trois derniers chiffres). */
@property --va-c{syntax:'<integer>';inherits:false;initial-value:812}
.va-cn{--va-c:812;counter-reset:va-c var(--va-c)}
.va-cn::before{content:counter(va-c)}
.fx-js [data-scene]:not(.a2) .va-cn{--va-c:812}
.a2 .va-cn{transition:--va-c 1.4s cubic-bezier(.45,.05,.35,1) 1.8s}
.va-cmp{width:476px;padding:11px 14px 12px;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .45s,transform .6s var(--ez-b)}
.a2 .va-cmp{opacity:1;transform:none;transition-delay:2.9s}
.va-cmph{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.va-cmph .tk{font-family:'Spline Sans Mono';font-size:8.5px;color:var(--av-tx);border:1px solid var(--av-line);background:var(--av-dim);border-radius:5px;padding:1px 6px;white-space:nowrap}
.va-cmp p{font-size:11.5px;line-height:1.5;color:var(--tx);margin-top:6px}

/* 4 — visibilité IA */
.va-geo{width:500px;padding:14px 16px}
.va-kp{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:6px}
.va-kp>div{border:1px solid var(--bd);border-radius:9px;padding:8px 10px;background:#fff}
.va-kp b{display:block;font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.va-kp .big{border-color:var(--av-line);background:var(--av-dim)}
.va-kp .big b{font-size:26px}
.va-kp small{display:block;font-family:'Spline Sans Mono';font-size:8.5px;color:var(--av-tx);margin-top:1px}
.va-kp small.g{color:var(--tx-3)}
.va-wk{margin-top:12px}
.va-bars{display:flex;align-items:flex-end;gap:10px;height:112px;margin-top:6px;padding:0 6px;border-bottom:1px solid var(--bd)}
.va-bars>span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.va-bars em{font-style:normal;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-2);opacity:0;transition:opacity .4s;transition-delay:calc(var(--i) * 110ms + .7s)}
.va-bars i{display:block;width:100%;height:calc(var(--h) * 170px);border-radius:4px 4px 0 0;background:rgba(22,19,15,.16);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .8s var(--ez);transition-delay:calc(var(--i) * 110ms + .2s)}
.va-bars .cur i{background:var(--tx)}
.va-bars .cur em{color:var(--tx);font-weight:500}
.va-bars u{text-decoration:none;font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3);margin-bottom:-18px}
.a4 .va-bars i{transform:none}
.a4 .va-bars em{opacity:1}
.va-abs{margin-top:24px}
.va-absh{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:600;padding-bottom:6px;border-bottom:1px solid var(--bd)}
.va-absh .cit{font-weight:500;color:var(--tx-3)}
.va-qr{display:flex;justify-content:space-between;align-items:baseline;gap:10px;height:30px;padding-top:8px;border-bottom:1px solid var(--bd);font-size:11.5px;color:var(--tx-2);white-space:nowrap;overflow:hidden;
  transition:height .6s var(--ez),opacity .45s,padding .6s}
.va-qr span{font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
.a4 .va-qr.gone{height:0;padding-top:0;opacity:0;border-bottom-color:transparent;transition-delay:1.7s}

/* ============================== Le registre ============================== */
.va-rg{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:60px;align-items:center}
.va-rl{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:14px}
.va-rl li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.55;color:var(--tx-2)}
.va-rl li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--av);transform:rotate(45deg)}
.va-rl b{color:var(--tx)}
.va-led{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--bd);border-radius:20px;background:var(--bg-2);padding:34px 28px}
.va-led>.tex{z-index:0}
.va-ledi{position:relative;z-index:2;border:1px solid var(--bd-2);border-radius:14px;background:#fff;overflow:hidden;box-shadow:var(--sh-f)}
.va-lrh,.va-lr{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 64px;gap:14px;align-items:center;padding:0 16px}
.va-lrh{height:34px;border-bottom:1px solid var(--bd);background:#FAF8F5;font-family:'Spline Sans Mono';font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.va-lr{position:relative;min-height:56px;padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--bd);transition:background .5s}
.va-lr:last-child{border-bottom:none}
.va-lr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--av);transform:scaleY(0);transition:transform .5s var(--ez)}
.va-lr .say{font-size:13px;color:var(--tx);line-height:1.4}
.va-lr .act{font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx-2);min-width:0;overflow:hidden;text-overflow:ellipsis;transition:color .4s}
.va-lr .act small{display:block;font-size:9px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.va-lr .sn{justify-self:start;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-2);border:1px solid var(--bd-2);border-radius:999px;padding:2px 8px}
.va-lr .sn.hi{color:var(--av-tx);border-color:var(--av-line);background:var(--av-dim)}
.va-ledi[data-s="0"] .va-lr0,.va-ledi[data-s="1"] .va-lr1,.va-ledi[data-s="2"] .va-lr2,
.va-ledi[data-s="3"] .va-lr3,.va-ledi[data-s="4"] .va-lr4,.va-ledi[data-s="5"] .va-lr5{background:rgba(249,115,22,.06)}
.va-ledi[data-s="0"] .va-lr0::before,.va-ledi[data-s="1"] .va-lr1::before,.va-ledi[data-s="2"] .va-lr2::before,
.va-ledi[data-s="3"] .va-lr3::before,.va-ledi[data-s="4"] .va-lr4::before,.va-ledi[data-s="5"] .va-lr5::before{transform:none}
.va-ledi[data-s="0"] .va-lr0 .act,.va-ledi[data-s="1"] .va-lr1 .act,.va-ledi[data-s="2"] .va-lr2 .act,
.va-ledi[data-s="3"] .va-lr3 .act,.va-ledi[data-s="4"] .va-lr4 .act,.va-ledi[data-s="5"] .va-lr5 .act{color:var(--av-tx)}
@media(max-width:900px){
  .va-rg{grid-template-columns:1fr;gap:36px}
  .va-led{padding:18px 14px}
  .va-lrh{display:none}
  .va-lr{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .va-lr .say{grid-column:1 / -1}
}

/* ============================== Bento ============================== */
.viz>.tl-body{position:absolute;inset:0;padding:13px}
/* Mes mails (templates/mes_mails) */
.bz-mm .tl-body{display:flex;flex-direction:column;gap:8px}
.bz-mm .va-pres{align-self:flex-start;font-size:8.5px}
.mm-c{display:flex;gap:6px}
.mm-c span{font-size:10.5px;color:var(--tx-2);border:1px solid var(--bd);border-radius:999px;padding:2px 9px;background:#fff;opacity:0;transform:scale(.7);transition:opacity .3s,transform .5s var(--ez-b)}
.mm-c span b{color:var(--tx)}
.mm-c .ava{color:var(--av-tx);border-color:var(--av-line);background:var(--av-dim)}
.mm-c .ava b{color:var(--av-tx)}
.k1 .mm-c span{opacity:1;transform:none}
.k1 .mm-c span:nth-child(2){transition-delay:.12s}
.mm-m{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;border:1px solid var(--bd);background:#fff;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .5s var(--ez)}
.k1 .mm-m{opacity:1;transform:none;transition-delay:.3s}
.mm-m .t{flex:1;min-width:0;font-size:11px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-m .t small{display:block;font-weight:400;font-size:9.5px;color:var(--tx-3)}
.mm-b{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;color:var(--tx);border:1px solid var(--av-line);border-radius:7px;padding:4px 7px;transition:background .3s}
.mm-b .avamark{width:11px;height:11px}
.k2 .mm-b{background:var(--av-dim);box-shadow:0 0 0 3px rgba(249,115,22,.10)}
/* Posée sur votre site (templates/tenant_shop/_installer) : trois portes, une à la fois */
.in-t{display:flex;gap:5px}
.in-t span{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--tx-3);border:1px solid var(--bd);border-radius:999px;padding:4px 9px 4px 7px;background:#fff;white-space:nowrap;transition:all .35s var(--ez)}
.in-t .ico{width:11px;height:11px}
.bz-in[data-s="0"] .t0,.bz-in[data-s="1"] .t1,.bz-in[data-s="2"] .t2{color:var(--tx);border-color:var(--av-line);background:var(--av-dim)}
.bz-in[data-s="0"] .t0 .ico,.bz-in[data-s="1"] .t1 .ico,.bz-in[data-s="2"] .t2 .ico{color:var(--av)}
.in-c{position:absolute;left:13px;right:13px;top:50px;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .45s var(--ez)}
.in-c .pth,.in-c code{align-self:flex-start;max-width:100%;font-size:10.5px;color:var(--tx);border:1px solid var(--bd-2);border-radius:8px;padding:6px 9px;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.in-c code{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--av-tx)}
.in-c small{font-size:10px;color:var(--tx-3)}
.bz-in[data-s="0"] .in-c0,.bz-in[data-s="1"] .in-c1,.bz-in[data-s="2"] .in-c2{opacity:1;transform:none;transition-delay:.15s}
/* Paramétrage */
.bz-pa .tl-body{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:14px;align-items:center}
.pa-l{display:flex;flex-direction:column;gap:5px}
.pa-l span{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--tx-2);border:1px solid var(--bd);border-radius:8px;padding:5px 8px;background:#fff;white-space:nowrap;transition:all .35s var(--ez)}
.pa-l i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--bd-2);flex:none;transition:all .3s}
.bz-pa[data-s="0"] .t0,.bz-pa[data-s="1"] .t1,.bz-pa[data-s="2"] .t2,.bz-pa[data-s="3"] .t0{border-color:var(--tx);color:var(--tx);font-weight:600;background:#FAF8F5}
.bz-pa[data-s="0"] .t0 i,.bz-pa[data-s="1"] .t1 i,.bz-pa[data-s="2"] .t2 i,.bz-pa[data-s="3"] .t0 i{border:3px solid var(--tx)}
.pa-o{display:flex;flex-direction:column;gap:8px}
.pa-o span{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--tx);padding-bottom:7px;border-bottom:1px solid var(--bd)}
.pa-o span:last-child{border-bottom:none;padding-bottom:0}
.pa-sw{position:relative;width:26px;height:15px;border-radius:8px;background:rgba(22,19,15,.16);flex:none;font-style:normal;transition:background .3s}
.pa-sw::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(22,19,15,.3);transition:transform .35s var(--ez-b)}
.pa-sw.on,.k1 .pa-sw{background:var(--av)}
.pa-sw.on::after,.k1 .pa-sw::after{transform:translateX(11px)}
/* Document, voix, photo */
.jd-f{height:34px;display:flex;align-items:center}
.jd-f .fi{display:inline-flex;align-items:center;gap:6px;font-family:'Spline Sans Mono';font-size:10px;color:var(--tx);border:1px solid var(--bd-2);border-radius:8px;padding:5px 9px;background:#fff;
  opacity:0;transform:translateY(-8px) scale(.94);transition:opacity .35s,transform .5s var(--ez-b)}
.jd-f .ico{width:12px;height:12px;color:var(--av)}
.k1 .jd-f .fi{opacity:1;transform:none}
.jd-in{display:flex;align-items:center;gap:2px;margin-top:10px;padding:5px 6px;border-radius:11px;border:1px solid var(--bd);background:#fff}
.jd-in .va-tool{width:26px;height:26px}
.jd-in .clip{color:var(--av)}
.jd-t{flex:1;min-width:0;margin-left:4px;font-size:10.5px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jd-in .mic{position:relative}
.jd-in .mic::after{content:"";position:absolute;inset:2px;border-radius:50%;border:1.5px solid var(--av);opacity:0}
.k2 .jd-in .mic{color:var(--av)}
.k2 .jd-in .mic::after{animation:va-ring 1.2s ease-out infinite}
/* Suggestions selon la page */
.sg-p{position:relative;height:20px}
.sg-p span{position:absolute;left:0;top:0;font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-2);border:1px solid var(--bd);border-radius:6px;padding:2px 7px;background:#fff;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .4s var(--ez)}
.sg-c{position:absolute;left:13px;right:13px;top:44px;display:flex;flex-wrap:wrap;gap:5px}
.sg-c span{font-size:10.5px;color:var(--tx);border:1px solid var(--av-line);border-radius:999px;padding:4px 9px;background:rgba(255,255,255,.85);white-space:nowrap;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .45s var(--ez-b)}
.sg-c span:nth-child(2){transition-delay:.08s}.sg-c span:nth-child(3){transition-delay:.16s}
.bz-sg[data-s="0"] .p0,.bz-sg[data-s="1"] .p1,.bz-sg[data-s="2"] .p2{opacity:1;transform:none}
.bz-sg[data-s="0"] .sg-c0 span,.bz-sg[data-s="1"] .sg-c1 span,.bz-sg[data-s="2"] .sg-c2 span{opacity:1;transform:none}
/* AVA sur vos surfaces · 7 jours (bande de « Aujourd'hui ») */
.bz-sf .tl-body{display:flex;flex-direction:column;gap:7px;padding-top:11px}
.sf-h{display:flex;align-items:baseline;gap:8px}
.sf-h b{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:-.01em}
.sf-h span{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.sf-g{display:grid;grid-template-columns:.9fr 1fr 1fr;grid-template-rows:auto auto;gap:5px}
.sf-g>div:first-child{grid-row:1 / 3;display:flex;flex-direction:column;justify-content:space-between}
.sf-g>div:first-child b{font-size:26px}
.sf-g>div{min-width:0;border:1px solid var(--bd);border-radius:8px;padding:4px 8px 5px;background:#fff;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .5s var(--ez-b)}
.sf-g span{display:block;font-family:'Spline Sans Mono';font-size:7.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-g b{display:block;font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.15;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sf-g b span{display:inline;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
.sf-g>div:first-child{border-color:var(--av-line);background:var(--av-dim)}
.sf-g>div:first-child b{color:var(--av-tx)}
.k1 .sf-g>div{opacity:1;transform:none}
.k1 .sf-g>div:nth-child(2){transition-delay:.08s}.k1 .sf-g>div:nth-child(3){transition-delay:.16s}
.k1 .sf-g>div:nth-child(4){transition-delay:.24s}.k1 .sf-g>div:nth-child(5){transition-delay:.32s}

/* ============================== La maison ============================== */
.va-house-sec{padding-top:24px}
.va-house{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center;padding:26px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.va-house .avamark{width:28px;height:28px}
.va-house p{font-size:15px;color:var(--tx-2);line-height:1.55}

/* ============================== Mobile ============================== */
@media(max-width:900px){
  .va-hmark{width:220px;height:220px;top:-6px}
}
@media(max-width:600px){
  /* Sur téléphone, le logo passe au-dessus du fil d'Ariane : derrière le titre, il le brouillait. */
  .va-hmark{position:relative;top:auto;right:auto;width:76px;height:76px;margin:-34px 0 16px -4px}
  .va-hmark::before{inset:-10%}
  .avamark.va-big>use{stroke-width:20}
  .fx-ava .va-hero .fx-hrow .fx-cta{flex:0 1 auto}
  .va-house{flex-direction:column;gap:12px}
}