/* Accueil — accueil-hero (animations, 04/10/2026). Voir docs/LANDING.md.

   La grande maquette du héros (landing/_app_mockup.html.twig) joue un scénario
   en boucle, au niveau des héros des pages Fonctionnalités. Moteur commun :
   js/features.js (data-tl sur .appwrap → classes .k0…k10 cumulatives et
   data-s exact ; data-vals ; data-type ; remise à zéro par fondu de .tl-body).
     k0 remise à zéro · k1→k3 les lignes arrivent, les totaux glissent ·
     k3 notification #2051 · k4 clic sur « Demandez à AVA… » · k5 la demande
     est tapée · k6 carte AVA « Consultation de vos données… » · k7 réponse +
     « Oui, vas-y. » écrit (pas de bouton) · k9 relance envoyée ·
     k10 le client répond : « Échanges client » 3, 2e relance annulée ·
     k11→k22 visite (≈ 38 s en tout) : Commandes (000214 → Confirmée),
     Stock (réservation, S3 41 « Bas »), Produits (recherche IA), retour Devis.
   Règles : la taille extérieure de .app ne change JAMAIS (hero-cadre.js la
   mesure) — opacité / transform seulement, hauteurs fixes. Les états
   « cachés » ne valent que sous .tl (posée par le JS) : sans JS comme en
   mouvement réduit, on lit l'état final. Les coordonnées du curseur sont
   MESURÉES (getBoundingClientRect, relatives à .app) et ancrées comme
   leur cible : à droite (calc(100% - …)) pour la barre du haut et la carte
   AVA, en % pour le reste. */

/* ---------- Calque des fragments et du curseur : exactement sur .app ----------
   Absolu sur .appwrap, padding hérité : sa boîte de contenu = celle de .app
   (y compris quand hero-cadre resserre la scène). Au-dessus de .app (z 1). */
.ah-lay{position:absolute;inset:0;z-index:3;pointer-events:none;padding-left:inherit;padding-right:inherit}
.ah-box{position:relative;height:100%}
/* mêmes places que landing.css (gouttière de 28 px retirée), lues depuis .app */
.ah .af-bat{left:168px;bottom:-94px}
.ah .af-ava{right:6px;bottom:auto;top:calc(100% + 1px)}

/* ---------- Ouverture : les lignes arrivent, les totaux glissent ---------- */
.ah .ah-r1,.ah .ah-r2,.ah .ah-r3{transition:opacity .45s var(--ez),transform .6s var(--ez-b)}
.ah.tl .ah-r1,.ah.tl .ah-r2,.ah.tl .ah-r3{opacity:0;transform:translateY(9px)}
.ah.k1 .ah-r1,.ah.k2 .ah-r2,.ah.k3 .ah-r3{opacity:1;transform:none}
.ah .summary span,.ah .summary b{font-variant-numeric:tabular-nums}
.ah .tline{border-radius:6px;transition:opacity .5s var(--ez),background-color .5s,box-shadow .5s}
.ah.tl .tline{opacity:0}
.ah.k3 .tline{opacity:1;transition-delay:.3s,0s,0s}

/* Relances : la 1re (envoyée) a un point plein — sur papier, le blanc de
   landing.css le vidait — ; la 2e passe « Annulée — le client a répondu ». */
.ah .step.done .dot{background:var(--tx)}
.ah .step.ah-r2e .dot{background:var(--bg-4);border-color:var(--bd-2);box-shadow:none;transition:background-color .4s .9s,border-color .4s .9s,box-shadow .4s .9s}
.ah.tl:not(.k10) .step.ah-r2e .dot{background:var(--bg-2);border-color:var(--tx);box-shadow:inset 0 0 0 2px var(--bg-2),inset 0 0 0 4px var(--tx)}
.ah .ah-et{position:relative;display:block;height:17px}
.ah .ah-et span{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .4s .9s,transform .5s var(--ez) .9s}
.ah .ah-et .e0{opacity:0;transform:translateY(-6px)}
.ah .ah-et .e1{color:var(--tx-2)}
.ah.tl:not(.k10) .ah-et .e0{opacity:1;transform:none}
.ah.tl:not(.k10) .ah-et .e1{opacity:0;transform:translateY(6px)}

/* AVA lit le devis (k6–k7) : le bloc Relances s'éclaire à la couleur AVA */
.ah[data-s="6"] .tline,.ah[data-s="7"] .tline{background:color-mix(in oklab,var(--c-ava) 7%,transparent);box-shadow:0 0 0 8px color-mix(in oklab,var(--c-ava) 7%,transparent)}

/* ---------- Barre du haut : cloche et lanceur AVA ---------- */
.ah .app .topbar .bell::after{background:var(--tx);transition:transform .45s var(--ez-b)}
.ah.tl:not(.k3) .app .topbar .bell::after{transform:scale(0)}
.ah.k3 .app .topbar .bell::after{transition-delay:.6s}
.ah .app .topbar .bell svg{display:block;transform-origin:50% 2px}
.ah[data-s="3"] .app .topbar .bell svg{animation:ah-ring .9s ease-in-out .55s}
.ah[data-s="10"] .app .topbar .bell svg{animation:ah-ring .9s ease-in-out .45s}
@keyframes ah-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(15deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}78%{transform:rotate(2deg)}}

.ah .app .topbar .search{transition:min-width .55s var(--ez),border-color .3s,box-shadow .35s,background-color .3s}
/* le clic (k4, à .8 s) donne le focus ; l'envoi (k6) le rend */
.ah.k4:not(.k6) .app .topbar .search{border-color:var(--c-ava);background:var(--bg);box-shadow:0 0 0 3px color-mix(in oklab,var(--c-ava) 16%,transparent);transition-delay:.8s}
@media(min-width:741px){.ah.k4:not(.k6) .app .topbar .search{min-width:300px}}
.ah .ah-q{display:none;color:var(--tx)}
/* aligné à droite : quand la pastille est étroite (téléphone), on lit la fin de la frappe */
.ah[data-s="5"] .ah-q{display:flex;justify-content:flex-end;min-width:0;overflow:hidden;white-space:nowrap}
.ah[data-s="5"] .ah-ph{display:none}

/* ---------- Fragments : entrent au bon moment ---------- */
.ah .afloat{transition:opacity .5s var(--ez),transform .75s var(--ez-b)}
.ah.tl .af-bat,.ah.tl .af-ava{opacity:0;transform:translateY(-12px) scale(.97)}
.ah.k3 .af-bat{opacity:1;transform:none;transition-delay:.75s}
.ah.k6 .af-ava{opacity:1;transform:none;transition-delay:.12s}

/* Carte AVA : activité ⟳, réponse en deux lignes, confirmation. Hauteurs fixes. */
.ah .ah-fa{position:relative;display:block;min-height:35px}
.ah .ah-a1,.ah .ah-a2{display:block;transition:opacity .45s}
.ah .ah-act{position:absolute;left:0;top:1px;display:flex;align-items:center;gap:8px;font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx-3);
  opacity:0;transition:opacity .3s}
.ah .ah-spin{display:block;width:11px;height:11px;border-radius:50%;border:1.5px solid color-mix(in oklab,var(--c-ava) 28%,transparent);border-top-color:var(--c-ava);animation:ava-spin .8s linear infinite}
.ah[data-s="6"] .ah-act{opacity:1;transition-delay:.5s}
.ah.tl:not(.k7) .ah-a2{opacity:0}
.ah.k7 .ah-a2{transition-delay:1.15s}
.ah .ah-do{position:relative;display:block;height:26px}
.ah .ah-btns,.ah .ah-done{position:absolute;left:0;top:0;height:26px;display:flex;align-items:center;transition:opacity .35s,transform .45s var(--ez)}
.ah .ah-btns{gap:6px;opacity:0;left:auto;right:0}
.ah .ah-yes{padding:4px 11px;border-radius:10px 10px 3px 10px;background:#141418;color:#fff;font-size:11.5px;font-weight:500}
.ah .ah-btns .mini{font-size:11.5px;padding:4px 11px;transition:transform .2s,background-color .2s}
.ah .ah-done{gap:7px;font-size:11.5px;font-weight:600;color:var(--tx)}
.ah .ah-done .ico{width:14px;height:14px;stroke-width:2.2;color:var(--tx)}
.ah.tl .ah-done{opacity:0;transform:translateY(5px)}
.ah.k7 .ah-btns{opacity:1;transition-delay:1.75s}
.ah.k9 .ah-btns{opacity:0;transform:translateY(-5px);transition-delay:0s}
.ah.k9 .ah-done{opacity:1;transform:none;transition-delay:.25s}
@keyframes ah-press{40%{transform:scale(.93)}100%{transform:none}}

/* ---------- k10 : le client répond ---------- */
.ah .app .tabs .tbn{display:inline-block;transition:background-color .35s .5s,color .35s .5s}
.ah.k10 .app .tabs .tbn{background:var(--tx);color:var(--bg)}
.ah[data-s="10"] .app .tabs .tbn{animation:ah-pop .6s var(--ez-b) .5s}
@keyframes ah-pop{40%{transform:scale(1.35)}100%{transform:none}}

/* ---------- Curseur fantôme (déplacé en left/top : ancrages en % ou depuis la droite) ---------- */
.ah .mk-cur{transform:none;left:47%;top:93%;transition:left .9s cubic-bezier(.55,.05,.25,1),top .9s cubic-bezier(.55,.05,.25,1),opacity .4s}
.ah .mk-cur::after{border-color:rgba(20,20,24,.7)}
.ah:not(.tl) .mk-cur,.fx-reduce .ah .mk-cur{display:none}
/* k4 → « Demandez à AVA… » (pastille ancrée à droite de la barre) */
.ah.k4 .mk-cur{left:calc(100% - 262px);top:24px}
/* k5 → on s'écarte à gauche de la pastille, pour laisser lire la frappe */
.ah.k5 .mk-cur{left:calc(100% - 418px);top:32px}
/* k9 → on se retire, regard sur les relances */
.ah.k9 .mk-cur{left:calc(100% - 296px);top:calc(100% - 72px)}
.ah[data-s="4"] .mk-cur::after{animation:clk .55s var(--ez) .8s forwards}

/* ---------- Téléphone (≤ 740 px) : la pastille AVA est à gauche (flex:1) ----------
   Ce bloc précède le suivant : .k5 est cumulative, les clics k8/k9 doivent passer après. */
@media(max-width:740px){
  /* la barre « N ligne(s) · N unités » passe sur deux lignes selon les chiffres :
     hauteur fixe, sinon la fenêtre grandirait pendant la boucle */
  .ah .app .lines .lbar{height:46px;margin-bottom:8px}
  .ah .mk-cur{left:50%;top:420px}
  .ah.k4 .mk-cur{left:127px;top:24px}
  .ah.k5 .mk-cur{left:214px;top:70px}
}

/* ---------- Sous 1080 px : pas de débord, la carte AVA s'ouvre DANS la fenêtre ----------
   (landing.css masque les .afloat). Elle descend sous la barre du haut le temps
   du geste (k6 → k9) puis se referme : l'état final reste la fiche du devis. */
@media(max-width:1080px){
  .ah.tl .af-ava{display:block;top:58px;right:8px;bottom:auto;width:min(300px,calc(100% - 16px))}
  .ah.tl .af-ava .fq{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ah.tl .af-ava .ah-fa{height:52px}
  .ah.k10 .af-ava{opacity:0;transform:translateY(-8px) scale(.98);transition-delay:.2s}
  .ah.k9 .mk-cur{left:46%;top:330px}
}

/* ---------- Remise à zéro : les fragments et le curseur s'effacent avec la fenêtre ---------- */
.ah.tl-out .af-bat,.ah.tl-out .af-ava,.ah.tl-out .mk-cur{opacity:0;transition-delay:0s}

/* ==========================================================================
   Visite du back-office (k11 → k22) : Commandes → Stock → Produits → Devis.
   Les écrans se posent DANS la zone de contenu (absolus, opaques, inset 0) :
   la fiche, dessous, dicte la hauteur — la fenêtre ne bouge pas. Par défaut
   (sans JS, mouvement réduit = k22) ils sont cachés : on lit la fiche.
   Surbrillances aux jetons (--tx, --bd-2, --ac-dim), jamais de blanc en dur.
   ========================================================================== */
.ah .app .content{position:relative;overflow:hidden;isolation:isolate}
.ah .ah-sc{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background:var(--bg);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ez) 1.35s,visibility 0s 1.65s}
/* l'écran suivant entre après le clic (.8 s) ; le précédent part quand il est couvert */
.ah.k11:not(.k16) .sc-cm,.ah.k16:not(.k18) .sc-sk,.ah.k18:not(.k22) .sc-pr{opacity:1;visibility:visible;transition:opacity .45s var(--ez) .9s,visibility 0s .9s}
.ah.k22 .sc-pr{transition:opacity .45s var(--ez) .9s,visibility 0s 1.35s}
.ah .ah-sc .chead{flex:none}

/* Barre latérale : l'entrée active suit l'écran (au clic, .8 s) */
.ah .app .sidebar .navi{transition:background-color .3s .8s,color .3s .8s}
.ah.k11:not(.k22) .app .sidebar .navi.n-dv{background:transparent;color:var(--tx-2)}
.ah.k11:not(.k16) .app .sidebar .n-cm,.ah.k16:not(.k18) .app .sidebar .n-sk,.ah.k18:not(.k22) .app .sidebar .n-pr{background:var(--ac-dim);color:var(--tx)}
/* Fil d'Ariane : les libellés se superposent (largeur = la plus longue, rien ne bouge) */
.ah .ah-bc{display:inline-grid}
.ah .ah-bc>span{grid-area:1/1;white-space:nowrap;transition:opacity .3s .85s}
.ah .ah-bc>.b1,.ah .ah-bc>.b2,.ah .ah-bc>.b3{opacity:0}
.ah.k11:not(.k22) .ah-bc>.b0{opacity:0}
.ah.k11:not(.k16) .ah-bc>.b1,.ah.k16:not(.k18) .ah-bc>.b2,.ah.k18:not(.k22) .ah-bc>.b3{opacity:1}

/* Pièces communes : barre de filtres, tableau, indicateurs */
.ah .sc-tool{flex:none;display:flex;align-items:center;gap:6px;padding:11px 22px;border-bottom:1px solid var(--bd);white-space:nowrap;overflow:hidden}
.ah .sc-fc{flex:none;font-size:11.5px;color:var(--tx-2);border:1px solid var(--bd);border-radius:999px;padding:4px 10px}
.ah .sc-fc.on{background:var(--tx);border-color:var(--tx);color:var(--bg)}
.ah .sc-cnt{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;font-family:'Spline Sans Mono';font-size:11px;color:var(--tx-2);border:1px solid var(--bd);border-radius:6px;padding:3px 8px}
.ah .sc-cnt .ico{width:12px;height:12px}
.ah .sc-tbl{flex:none;margin:14px 18px 0;border:1px solid var(--bd);border-radius:8px;background:var(--bg)}
.ah .sc-tr{display:grid;gap:12px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--bd);font-size:12.5px;color:var(--tx);
  transition:opacity .4s var(--ez),transform .5s var(--ez),background-color .5s}
.ah .sc-tr:last-child{border-bottom:none;border-radius:0 0 8px 8px}
.ah .sc-tr.h{padding-top:9px;padding-bottom:9px;border-radius:8px 8px 0 0;font-family:'Spline Sans Mono';font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);background:color-mix(in oklab,var(--tx) 1.5%,transparent)}
.ah .sc-tr>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah .sc-tr small{display:block;font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.ah .sc-tr .r{text-align:right;font-variant-numeric:tabular-nums}
.ah .sc-tr>.cs{overflow:visible}
.ah .sc-kpis{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 18px 0}
.ah .sc-kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ah .sc-kpis .kp{min-width:0;border:1px solid var(--bd);border-radius:8px;padding:9px 12px 10px;background:color-mix(in oklab,var(--tx) 1.5%,transparent);transition:border-color .4s}
.ah .sc-kpis small{display:block;font-family:'Spline Sans Mono';font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah .sc-kpis b{display:block;width:max-content;margin-top:5px;font-family:'Schibsted Grotesk';font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap;transform-origin:0 60%}
.ah .sc-kpis b span{font-size:13px;font-weight:500;color:var(--tx-3)}
.ah .sc-kpis b.lk{font-size:14px;margin-top:9px}
.ah .sc-kpis em{display:block;font-style:normal;font-size:10.5px;color:var(--tx-3);margin-top:2px;white-space:nowrap}
/* lignes et tuiles : entrée en cascade avec leur écran */
.ah.tl .ah-sc .sc-tr:not(.h),.ah.tl .sc-pr .sc-grid .ptile{opacity:0;transform:translateY(6px)}
.ah.k11 .sc-cm .sc-tr:not(.h),.ah.k16 .sc-sk .sc-tr:not(.h),.ah.k18 .sc-pr .sc-grid .ptile{opacity:1;transform:none;transition-delay:calc(1s + var(--i,0) * 70ms)}

/* ---------- Commandes (k11 → k15) ---------- */
.ah .sc-cm .sc-tr{grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) 92px 92px 74px 104px}
.ah .sc-cm .sc-tr:not(.h) .rf{font-family:'Spline Sans Mono';font-size:11.5px}
.ah .sc-cm .ht,.ah .sc-cm .ttc{color:var(--tx-2)}
.ah .sc-cm .cm-r1{position:relative;z-index:2}
.ah .sc-cm .cs{position:relative;display:flex}
.ah .sc-pill{transition:border-color .3s .1s,color .3s .1s}
.ah .sc-pill .d{transition:background-color .3s .1s}
.ah .sc-pill .pl{display:inline-grid}
.ah .sc-pill .pl>span{grid-area:1/1;transition:opacity .3s .1s,transform .4s var(--ez) .1s}
.ah .sc-pill .p0{opacity:0;transform:translateY(-5px)}
.ah.tl:not(.k15) .sc-pill .p0{opacity:1;transform:none}
.ah.tl:not(.k15) .sc-pill .p1{opacity:0;transform:translateY(5px)}
.ah.k15 .sc-pill{border-color:var(--tx);color:var(--tx)}
.ah.k15 .sc-pill .d{background:var(--tx)}
.ah[data-s="15"] .sc-pill{animation:ah-pop .6s var(--ez-b) .15s}
.ah[data-s="15"] .sc-cm .sc-tr.cm-r1{background:color-mix(in oklab,var(--tx) 4%,transparent);transition-delay:.15s}
/* le menu de la pastille (posé sous elle, aligné à droite) et l'effet annoncé */
.ah .sc-menu{position:absolute;z-index:3;right:0;top:calc(100% + 6px);width:216px;padding:5px;display:flex;flex-direction:column;
  border:1px solid var(--bd-2);border-radius:9px;background:var(--bg);box-shadow:0 18px 40px -16px rgba(20,20,24,.32);
  opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .25s var(--ez)}
.ah .sc-menu .mi{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 9px;border-radius:6px;font-size:12px;color:var(--tx-2);white-space:nowrap;transition:background-color .2s,color .2s}
.ah .sc-menu .mi>.ico{width:13px;height:13px;opacity:.5}
.ah[data-s="12"] .sc-menu,.ah[data-s="13"] .sc-menu{opacity:1;transform:none}
.ah[data-s="12"] .sc-menu{transition-delay:.9s}
.ah[data-s="13"] .sc-menu .m-conf{background:var(--ac-dim);color:var(--tx);transition-delay:.7s}
.ah .sc-tip{position:absolute;right:calc(100% + 14px);top:50%;padding:5px 9px;border-radius:6px;background:var(--tx);color:var(--bg);
  font-size:11px;white-space:nowrap;opacity:0;transform:translate(6px,-50%);transition:opacity .25s,transform .35s var(--ez)}
.ah[data-s="13"] .sc-tip{opacity:1;transform:translate(0,-50%);transition-delay:.85s}
/* la question du confirm() réel, puis OK */
.ah .sc-veil{position:absolute;inset:0;z-index:6;background:color-mix(in oklab,var(--tx) 12%,transparent);opacity:0;transition:opacity .25s}
.ah .sc-cf{position:absolute;z-index:7;left:50%;top:64px;width:min(360px,calc(100% - 32px));display:flex;flex-direction:column;gap:5px;padding:16px 16px 14px;
  border:1px solid var(--bd-2);border-radius:11px;background:var(--bg);box-shadow:0 24px 50px -20px rgba(20,20,24,.38);
  opacity:0;transform:translate(-50%,-8px) scale(.98);transition:opacity .25s,transform .35s var(--ez)}
.ah .sc-cf b{font-size:13px;font-weight:600;color:var(--tx)}
.ah .sc-cf small{font-size:12px;color:var(--tx-2);line-height:1.45}
.ah .sc-cf .bt{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.ah .sc-cf .mini{padding:5px 13px}
.ah[data-s="14"] .sc-veil{opacity:1}
.ah[data-s="14"] .sc-cf{opacity:1;transform:translate(-50%,0)}
.ah[data-s="14"] .sc-cf .solid{animation:ah-press .35s var(--ez) 1s}

/* ---------- Stock (k16 → k17) ---------- */
.ah .sc-sk .sc-tr{grid-template-columns:minmax(0,1fr) 56px 66px 56px 50px 92px}
.ah .sc-sk .tt,.ah .sc-sk .se{color:var(--tx-3)}
.ah .sc-sk .sc-tr b{font-weight:500}
.ah .sc-sk .rs b{display:inline-block;padding:1px 5px;margin-right:-5px;border-radius:4px;transition:background-color .4s}
.ah[data-s="16"] .sc-sk .rs b{background:color-mix(in oklab,var(--tx) 8%,transparent);transition-delay:1s}
.ah .chip.sk{gap:5px;padding:3px 8px}
.ah .chip.sk .ico{width:11px;height:11px;stroke-width:2}
.ah .chip.sk.ok{color:var(--tx-3);border-color:var(--bd)}
.ah .chip.sk.low{color:var(--tx);border-color:var(--tx)}
.ah .chip.sk.out{background:var(--tx);border-color:var(--tx);color:var(--bg)}
.ah .sk-flip{display:inline-grid}
.ah .sk-flip>.chip{grid-area:1/1;justify-self:start;transition:opacity .3s .25s,transform .5s var(--ez-b) .25s}
.ah .sk-flip>.s0{opacity:0}
.ah.tl:not(.k17) .sk-flip>.s0{opacity:1}
.ah.tl:not(.k17) .sk-flip>.s1{opacity:0;transform:scale(.8)}
.ah[data-s="17"] .sc-sk .sc-tr.sk-r3{background:color-mix(in oklab,var(--tx) 4%,transparent);transition-delay:.2s}
.ah[data-s="17"] .sc-sk .kp.warn{border-color:var(--tx);transition-delay:.25s}
.ah[data-s="17"] .sc-sk .kp.warn b{animation:ah-pop .6s var(--ez-b) .25s}
/* la cloche : notification réelle « Stock bas » */
.ah[data-s="17"] .app .topbar .bell svg{animation:ah-ring .9s ease-in-out .6s}

/* ---------- Produits (k18 → k21) ---------- */
.ah .sc-view{display:inline-flex;border:1px solid var(--bd-2);border-radius:7px;overflow:hidden}
.ah .sc-view i{display:flex;align-items:center;justify-content:center;width:30px;height:28px;color:var(--tx-3)}
.ah .sc-view i.on{background:var(--ac-dim);color:var(--tx)}
.ah .sc-view svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ah .sc-srch{flex:none;display:flex;align-items:center;gap:8px;margin:12px 18px 0;padding:7px 11px;border:1px solid var(--bd);border-radius:7px;
  font-size:12px;color:var(--tx-3);white-space:nowrap;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.ah .sc-srch .ico{width:13px;height:13px}
.ah .sc-srch .q{display:none;color:var(--tx)}
.ah.k20 .sc-srch .q{display:inline}
.ah.k20 .sc-srch .ph{display:none}
.ah.k19:not(.k22) .sc-srch{border-color:var(--tx);box-shadow:0 0 0 3px color-mix(in oklab,var(--tx) 9%,transparent);transition-delay:.8s}
.ah .sc-grid{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 18px 0}
.ah .sc-grid .ptile{transition:opacity .4s var(--ez),transform .5s var(--ez),border-color .4s,box-shadow .4s}
.ah .sc-grid .pn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah.k21 .sc-grid .ptile:not(.hit){opacity:.3;transition-delay:.1s}
.ah.k21 .sc-grid .ptile.hit{border-color:var(--tx);box-shadow:0 14px 28px -16px rgba(20,20,24,.4);transform:translateY(-3px);transition-delay:.1s}
.ah .sc-res{flex:none;display:flex;gap:10px;align-items:baseline;margin:12px 18px 0;padding-top:10px;border-top:1px solid var(--bd);
  opacity:0;transform:translateY(5px);transition:opacity .4s,transform .5s var(--ez)}
.ah .sc-res b{flex:none;font-size:12px;font-weight:600;color:var(--tx)}
.ah .sc-res span{min-width:0;font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah.k21 .sc-res{opacity:1;transform:none;transition-delay:.5s}

/* ---------- Tablette (741–1080 px) : Total HT tombe, comme col-opt dans le vrai écran ---------- */
@media(max-width:1080px){
  .ah .sc-cm .sc-tr{grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) 92px 70px 104px}
  .ah .sc-cm .ht{display:none}
}
/* ---------- Fenêtre étroite (≤ 900 px) : réf et compte sur deux lignes, chiffres essentiels ---------- */
@media(max-width:900px){
  .ah .sc-cm .sc-tr{grid-template-columns:minmax(0,1fr) 92px 104px;grid-template-areas:"rf ttc st" "cl ttc st";row-gap:1px}
  .ah .sc-cm .sc-tr .rf{grid-area:rf}.ah .sc-cm .sc-tr .cl{grid-area:cl}.ah .sc-cm .sc-tr .ttc{grid-area:ttc}.ah .sc-cm .sc-tr .cs{grid-area:st}
  .ah .sc-cm .sc-tr .rf small,.ah .sc-cm .sc-tr .cl small,.ah .sc-cm .ht,.ah .sc-cm .mg,.ah .sc-cm .sc-tr.h .cl{display:none}
  .ah .sc-cm .sc-tr.h{grid-template-areas:"rf ttc st"}
  .ah .sc-cm .sc-tr:not(.h) .cl{color:var(--tx-2);font-size:12px}
  .ah .sc-sk .sc-tr{grid-template-columns:minmax(0,1fr) 62px 56px 92px}
  .ah .sc-sk .tt,.ah .sc-sk .se{display:none}
}
/* ---------- Téléphone (≤ 740 px) : pas de barre latérale, écrans resserrés ---------- */
@media(max-width:740px){
  .ah .sc-tool{padding:10px 14px}
  .ah .sc-tbl,.ah .sc-kpis,.ah .sc-srch,.ah .sc-grid,.ah .sc-res{margin-left:12px;margin-right:12px}
  .ah .sc-tr{padding:8px 11px;gap:8px}
  .ah .sc-cm .sc-tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"rf st" "cl st"}
  .ah .sc-cm .ttc{display:none}
  .ah .sc-cm .sc-tr.h{grid-template-areas:"rf st"}
  .ah .sc-tip{display:none}
  .ah .sc-kpis{gap:6px}
  .ah .sc-kpis .kp{padding:8px 9px}
  .ah .sc-kpis b{font-size:16px}
  .ah .sc-kpis.k4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ah .sc-sk .sc-tr{grid-template-columns:minmax(0,1fr) 44px 32px auto}
  .ah .sc-sk .sc-tr.h{letter-spacing:.02em}
  .ah .sc-kpis small{white-space:normal;line-height:1.3;letter-spacing:.03em}
  .ah .chip.sk{font-size:10px;padding:3px 7px}
  .ah .sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ah .sc-res{flex-direction:column;gap:3px}
}

/* ---------- Curseur de la visite (après les blocs ci-dessus : .kN cumulatives) ---------- */
/* Mesurés (getBoundingClientRect relatif à .app, 1440 / 1280 / 1024) : barre latérale
   en px depuis la gauche ; pastille, menu, OK et tuiles ancrés comme leur cible. */
.ah.k11 .mk-cur{left:96px;top:344px}                     /* Commandes (barre latérale) */
.ah.k12 .mk-cur{left:calc(100% - 94px);top:246px}        /* pastille « Importée » de 000214 */
.ah.k13 .mk-cur{left:calc(100% - 204px);top:287px}       /* « Confirmée » dans le menu */
.ah.k14 .mk-cur{left:calc(50% + 241px);top:205px}        /* OK du confirm() */
.ah.k15 .mk-cur{left:calc(100% - 150px);top:285px}       /* on s'écarte : la pastille se lit */
.ah.k16 .mk-cur{left:96px;top:382px}                     /* Stock */
.ah.k17 .mk-cur{left:calc(100% - 76px);top:390px}        /* la pastille « Bas » */
.ah.k18 .mk-cur{left:96px;top:196px}                     /* Produits */
.ah.k19 .mk-cur{left:460px;top:247px}                    /* recherche (IA), à droite du texte tapé */
.ah.k20 .mk-cur{left:482px;top:262px}
.ah.k21 .mk-cur{left:calc(37.5% + 150px);top:330px}      /* la tuile Chaussures S3 */
.ah.k22 .mk-cur{left:96px;top:158px}                     /* retour sur Devis */
.ah[data-s="11"] .mk-cur::after,.ah[data-s="12"] .mk-cur::after,.ah[data-s="16"] .mk-cur::after,
.ah[data-s="18"] .mk-cur::after,.ah[data-s="19"] .mk-cur::after,.ah[data-s="22"] .mk-cur::after{animation:clk .55s var(--ez) .8s forwards}
.ah[data-s="13"] .mk-cur::after{animation:clk .55s var(--ez) 1.25s forwards}
.ah[data-s="14"] .mk-cur::after{animation:clk .55s var(--ez) 1s forwards}
/* Téléphone : pas de barre latérale — le curseur s'efface pendant les changements d'écran */
@media(max-width:740px){
  .ah[data-s="11"] .mk-cur,.ah[data-s="16"] .mk-cur,.ah[data-s="18"] .mk-cur,.ah[data-s="22"] .mk-cur{opacity:0}
  .ah.k12 .mk-cur{left:calc(100% - 70px);top:288px}
  .ah.k13 .mk-cur{left:calc(100% - 201px);top:328px}
  .ah.k14 .mk-cur{left:calc(100% - 57px);top:222px}
  .ah.k15 .mk-cur{left:calc(100% - 140px);top:325px}
  .ah.k17 .mk-cur{left:calc(100% - 36px);top:380px}
  .ah.k19 .mk-cur{left:calc(100% - 70px);top:326px}
  .ah.k20 .mk-cur{left:calc(100% - 60px);top:340px}
  .ah.k21 .mk-cur{left:calc(100% - 82px);top:400px}
}