/* ==========================================================================
   Accueil — « Un moteur, huit briques » : visuels vivants (04/10/2026).
   Julien : sur l'accueil, « pas de mouvement, pas de navigation » alors que les
   pages Fonctionnalités en ont. La section est une scène au scroll
   (_modules.html.twig, moteur features.js) ; ici :
     · le sommaire 01…08 : la brique active se remplit de sa couleur et
       affiche son nom ; le panneau prend un halo de cette couleur ;
     · chaque fenêtre JOUE une courte scène quand sa brique devient active
       (curseur, valeurs qui glissent, texte tapé, lignes qui arrivent).
   Principe : l'état de BASE de chaque élément = l'état FINAL (mouvement réduit,
   sans JS, brique inactive). Les animations ne sont posées que sur le visuel
   actif ([data-active="N"] .lm-lN) : elles repartent de zéro à chaque
   activation et ne tournent jamais en fond. Instants (--t, --u, --c, --p) en
   secondes après l'activation, posés dans les fragments landing/modules/*.
   Chargée après landing.css (dont elle reprend les styles .lm-*), avant
   visuels-clairs.css (papier blanc des fenêtres). Voir docs/LANDING.md.
   ========================================================================== */

/* ---------- Sommaire 01…08 ---------- */
.lm-sec .lm-nav{gap:5px}
.lm-sec .lm-pill{gap:0;padding:0 11px 0 10px;transition:color .35s,border-color .35s,background-color .35s}
.lm-sec .lm-pill i{width:6px;height:6px;border-radius:50%;margin-right:7px;transition:background-color .35s}
.lm-sec .lm-pill .lm-pn{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;vertical-align:top;
  font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;font-weight:600;
  transition:max-width .6s var(--ez),opacity .3s,margin-left .6s var(--ez)}
.lm-sec .lm-pill:focus-visible{outline:2px solid var(--fx-c);outline-offset:2px}
.lm-sec .lm-scene[data-active="0"] .lm-pill:nth-child(1),.lm-sec .lm-scene[data-active="1"] .lm-pill:nth-child(2),
.lm-sec .lm-scene[data-active="2"] .lm-pill:nth-child(3),.lm-sec .lm-scene[data-active="3"] .lm-pill:nth-child(4),
.lm-sec .lm-scene[data-active="4"] .lm-pill:nth-child(5),.lm-sec .lm-scene[data-active="5"] .lm-pill:nth-child(6),
.lm-sec .lm-scene[data-active="6"] .lm-pill:nth-child(7),.lm-sec .lm-scene[data-active="7"] .lm-pill:nth-child(8){
  color:#141418;background:var(--fx-c);border-color:var(--fx-c)}
/* nom de la brique active */
.lm-sec .lm-scene[data-active="0"] .lm-pill:nth-child(1) .lm-pn,.lm-sec .lm-scene[data-active="1"] .lm-pill:nth-child(2) .lm-pn,
.lm-sec .lm-scene[data-active="2"] .lm-pill:nth-child(3) .lm-pn,.lm-sec .lm-scene[data-active="3"] .lm-pill:nth-child(4) .lm-pn,
.lm-sec .lm-scene[data-active="4"] .lm-pill:nth-child(5) .lm-pn,.lm-sec .lm-scene[data-active="5"] .lm-pill:nth-child(6) .lm-pn,
.lm-sec .lm-scene[data-active="6"] .lm-pill:nth-child(7) .lm-pn,.lm-sec .lm-scene[data-active="7"] .lm-pill:nth-child(8) .lm-pn{
  max-width:9em;opacity:1;margin-left:7px;transition-delay:.08s,.2s,.08s}
.lm-sec .lm-scene[data-active="0"] .lm-pill:nth-child(1) i,.lm-sec .lm-scene[data-active="1"] .lm-pill:nth-child(2) i,
.lm-sec .lm-scene[data-active="2"] .lm-pill:nth-child(3) i,.lm-sec .lm-scene[data-active="3"] .lm-pill:nth-child(4) i,
.lm-sec .lm-scene[data-active="4"] .lm-pill:nth-child(5) i,.lm-sec .lm-scene[data-active="5"] .lm-pill:nth-child(6) i,
.lm-sec .lm-scene[data-active="6"] .lm-pill:nth-child(7) i,.lm-sec .lm-scene[data-active="7"] .lm-pill:nth-child(8) i{background:#141418}
/* briques déjà parcourues (classes cumulatives aN) : pastille pleine */
.lm-sec .lm-pill i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--fx-c)}
.lm-sec .lm-scene.a0 .lm-pill:nth-child(-n+1) i,.lm-sec .lm-scene.a1 .lm-pill:nth-child(-n+2) i,.lm-sec .lm-scene.a2 .lm-pill:nth-child(-n+3) i,
.lm-sec .lm-scene.a3 .lm-pill:nth-child(-n+4) i,.lm-sec .lm-scene.a4 .lm-pill:nth-child(-n+5) i,.lm-sec .lm-scene.a5 .lm-pill:nth-child(-n+6) i,
.lm-sec .lm-scene.a6 .lm-pill:nth-child(-n+7) i,.lm-sec .lm-scene.a7 .lm-pill:nth-child(-n+8) i{background:var(--fx-c)}

/* ---------- Panneau : halo de la couleur de la brique active ---------- */
@property --lm-c{syntax:'<color>';inherits:true;initial-value:#8FB8FF}
.lm-sec .lm-panel{--lm-c:var(--c-catalogue);transition:--lm-c .9s var(--ez)}
.lm-sec .lm-scene[data-active="1"] .lm-panel{--lm-c:var(--c-devis)}
.lm-sec .lm-scene[data-active="2"] .lm-panel{--lm-c:var(--c-espace-client)}
.lm-sec .lm-scene[data-active="3"] .lm-panel{--lm-c:var(--c-commandes)}
.lm-sec .lm-scene[data-active="4"] .lm-panel{--lm-c:var(--c-boutiques)}
.lm-sec .lm-scene[data-active="5"] .lm-panel{--lm-c:var(--c-ava)}
.lm-sec .lm-scene[data-active="6"] .lm-panel{--lm-c:var(--c-branchements)}
.lm-sec .lm-scene[data-active="7"] .lm-panel{--lm-c:var(--c-maquettes)}
.lm-sec .lm-panel::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-38%;height:78%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in oklab,var(--lm-c) 26%,transparent),transparent 72%)}
.lm-sec .lm-stack{z-index:1}

/* ---------- Fenêtres : dessinées à 500 px, zoomées pour tenir (data-fit) ---------- */
.lm-sec .lm-fit{width:100%;display:flex;justify-content:center}
.lm-sec .lm-win{max-width:none}
.lm-sec .lm-body{padding:16px 18px 18px}
.lm-sec .lm-f{margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.lm-sec .lm-win .mk-cur{opacity:0}

/* ==========================================================================
   Primitives (état de base = final) — animées dans le bloc « Lecture »
   ========================================================================== */
/* valeur qui glisse (macro sl) */
.lm-sec .lm-sl{display:inline-grid;vertical-align:baseline;clip-path:inset(0 -8px);border-radius:3px}
.lm-sec .lm-sl>span{grid-area:1/1;white-space:nowrap}
.lm-sec .lm-sl>span:not(:last-child){opacity:0}
/* texte tapé (macro ty) */
.lm-sec .lm-ty>span{white-space:pre-wrap}
/* repères */
.lm-sec .lm-hit,.lm-sec .lm-pulse{position:relative}
.lm-sec .lm-hit::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  border:1.5px solid var(--fx-c);box-shadow:0 0 0 4px color-mix(in oklab,var(--fx-c) 14%,transparent)}
.lm-sec .lm-pulse{isolation:isolate}
.lm-sec .lm-pulse::before{content:"";position:absolute;inset:-5px -8px;border-radius:9px;z-index:-1;pointer-events:none;
  background:color-mix(in oklab,var(--fx-c) 13%,transparent);opacity:0}
.lm-sec .lm-dim{opacity:.32;filter:grayscale(1)}
.lm-sec .lm-tmp{opacity:0;pointer-events:none}

/* ==========================================================================
   Lecture : uniquement sur le visuel de la brique active
   ========================================================================== */
:is(.lm-scene[data-active="0"] .lm-l0,.lm-scene[data-active="1"] .lm-l1,.lm-scene[data-active="2"] .lm-l2,.lm-scene[data-active="3"] .lm-l3,
    .lm-scene[data-active="4"] .lm-l4,.lm-scene[data-active="5"] .lm-l5,.lm-scene[data-active="6"] .lm-l6,.lm-scene[data-active="7"] .lm-l7){
  & .lm-sl[style]{animation:lm-hl 1.3s var(--ez) var(--tl) both}
  & .lm-sl>span:first-child:not(:last-child){animation:lm-slo .45s var(--ez) var(--u) both}
  & .lm-sl>span:not(:first-child):not(:last-child){animation:lm-sli .45s var(--ez) var(--t) both,lm-slo .45s var(--ez) var(--u) forwards}
  & .lm-sl>span:last-child:not(:first-child){animation:lm-sli .5s var(--ez) var(--t) both}
  & .lm-ty>span{animation:lm-ch .01s linear calc(var(--t0) + var(--i) * var(--sp)) backwards}
  & .lm-pop{animation:lm-pop .5s var(--ez-b) var(--t) both}
  & .lm-in{animation:lm-in .6s var(--ez) var(--t) both}
  & .lm-dim{animation:lm-dim .6s var(--ez) var(--t) both}
  & .lm-tmp{animation:lm-tin .4s var(--ez-b) var(--t) both,lm-tout .3s var(--ez) var(--u) forwards}
  & .lm-press{animation:lm-press .36s var(--ez) var(--c) both}
  & .lm-hit::after{animation:lm-ring .55s var(--ez) var(--t) both}
  & .lm-pulse::before{animation:lm-glow 1.7s var(--ez) var(--p) both}
}
/* La brique 01 est affichée d'emblée mais ne joue qu'une fois atteinte (.a0). */
.lm-scene:not(.a0) .lm-l0 *,.lm-scene:not(.a0) .lm-l0 *::before,.lm-scene:not(.a0) .lm-l0 *::after{animation-play-state:paused!important}

@keyframes lm-slo{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-80%)}}
@keyframes lm-sli{from{opacity:0;transform:translateY(80%)}to{opacity:1;transform:none}}
@keyframes lm-hl{0%,100%{background-color:transparent}22%{background-color:color-mix(in oklab,var(--fx-c) 20%,transparent)}}
@keyframes lm-ch{from,to{opacity:0}}
@keyframes lm-pop{from{opacity:0;transform:translateY(6px) scale(.9)}}
@keyframes lm-in{from{opacity:0;transform:translateY(10px)}}
@keyframes lm-dim{from{opacity:1;filter:grayscale(0)}}
@keyframes lm-tin{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lm-tout{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes lm-press{0%,100%{transform:none}38%{transform:scale(.93)}}
@keyframes lm-ring{from{opacity:0;transform:scale(1.07)}}
@keyframes lm-glow{0%,100%{opacity:0}24%{opacity:1}}

/* ==========================================================================
   01 · Catalogue — filtres Protekto puis Chaussures de sécurité
   ========================================================================== */
.lm-sec .lm-cat .filter{margin-bottom:10px;gap:12px}
.lm-sec .lm-cat .srx{margin-left:-4px;white-space:nowrap}
.lm-sec .lm-cat .lm-tot{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none}
.lm-sec .lm-cat .lm-tot small{font-family:'Spline Sans Mono',monospace;font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3)}
.lm-sec .lm-cat .lm-tot b{font-family:'Schibsted Grotesk',sans-serif;font-size:17px;font-weight:600;line-height:1.15;color:var(--tx)}
.lm-sec .lm-cat .lm-tot .lm-sl{justify-items:end}
.lm-sec .lm-fc{display:flex;gap:7px;margin-bottom:11px}
.lm-sec .lm-fc .fc{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:4px 9px;border-radius:7px;color:var(--tx);
  border:1px solid color-mix(in oklab,var(--fx-c) 45%,transparent);background:color-mix(in oklab,var(--fx-c) 8%,#fff)}
.lm-sec .lm-fc .fc em{font-style:normal;font-family:'Spline Sans Mono',monospace;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.lm-sec .lm-cat .ptile.lm-hit{border-color:transparent}
.lm-sec .lm-cat .ptile{padding:8px 9px}
.lm-sec .lm-cat .ptile .thumb{height:44px;margin-bottom:7px}
.lm-sec .lm-cat .ptile .meta{margin-top:5px}
.lm-sec .lm-cat .lm-res{margin:11px 0 0;padding:8px 10px;border:1px solid color-mix(in oklab,var(--fx-c) 40%,transparent);border-radius:8px;
  background:color-mix(in oklab,var(--fx-c) 6%,#fff);gap:8px}
.lm-sec .lm-cat .lm-res .vv{font-size:9.5px;letter-spacing:-.01em}

/* ==========================================================================
   02 · Devis — le coef de la ligne 2 saisi et figé (#2051)
   ========================================================================== */
.lm-sec .lm-dv{display:flex;flex-direction:column;gap:9px}
.lm-sec .lm-dv-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--bd)}
.lm-sec .lm-dv-h .t b{display:block;font-family:'Schibsted Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--tx)}
.lm-sec .lm-dv-h .t small{font-size:11.5px;color:var(--tx-3)}
.lm-sec .lm-dv-l{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:#fff}
.lm-sec .lm-dv-l.on{border-color:color-mix(in oklab,var(--fx-c) 50%,transparent);box-shadow:0 0 0 3px color-mix(in oklab,var(--fx-c) 9%,transparent)}
.lm-sec .lm-dv-l .t b{display:block;font-size:12.5px;font-weight:600;color:var(--tx)}
.lm-sec .lm-dv-l .t small{font-family:'Spline Sans Mono',monospace;font-size:9.5px;color:var(--tx-3)}
.lm-sec .lm-dv-l .r{display:flex;flex-direction:column;align-items:flex-end}
.lm-sec .lm-dv-l .r small{font-family:'Spline Sans Mono',monospace;font-size:9px;color:var(--tx-3)}
.lm-sec .lm-dv-l .r b{font-size:13.5px;font-weight:600;color:var(--tx)}
.lm-sec .lm-dv-l .r .lm-sl{justify-items:end}
.lm-sec .lm-dv-l .g{grid-column:1/-1;display:grid;grid-template-columns:.8fr 1fr 1.25fr 1fr .9fr;gap:8px;margin-top:8px;padding-top:9px;border-top:1px dashed var(--bd-2)}
.lm-sec .lm-dv-l .g>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.lm-sec .lm-dv-l .g b{font-size:12.5px;font-weight:600;color:var(--tx)}
.lm-sec .lm-dv .cf .rw{display:flex;align-items:center;gap:5px}
.lm-sec .lm-dv .cf .in{padding:1px 7px;border:1px solid var(--bd-2);border-radius:6px;background:#fff}
.lm-sec .lm-dv .cf .fige{font-family:'Spline Sans Mono',monospace;font-size:9px;color:var(--fx-c);border:1px solid color-mix(in oklab,var(--fx-c) 45%,transparent);border-radius:5px;padding:1px 5px;white-space:nowrap}
.lm-sec .lm-dv-s{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:10px;background:var(--bg-2)}
.lm-sec .lm-dv-s .sl{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;color:var(--tx-2)}
.lm-sec .lm-dv-s .sl b{font-size:13px;font-weight:600;color:var(--tx)}
.lm-sec .lm-dv-s .sl.tot b{font-family:'Schibsted Grotesk',sans-serif;font-size:17px}
.lm-sec .lm-dv-s .lm-sl{justify-items:end}

/* ==========================================================================
   03 · Espace client — l'invitation d'Atelier Bréval devient « Espace app activé »
   ========================================================================== */
.lm-sec .lm-acc{display:flex;flex-direction:column;gap:12px;padding:2px 0}
.lm-sec .lm-acc .ac-row{gap:11px}
.lm-sec .lm-acc .nm small{display:block;font-family:'Spline Sans Mono',monospace;font-size:9.5px;color:var(--tx-3);margin-top:1px}
.lm-sec .lm-acc :is(.lm-ch,.lm-ac){margin-left:auto}
.lm-sec .lm-acc .lm-ch,.lm-sec .lm-acc .lm-ac .lm-sl>span{font-family:'Spline Sans Mono',monospace;font-size:10.5px;border-radius:6px;padding:3px 8px;
  border:1px solid var(--bd-2);color:var(--tx-2);background:#fff}
.lm-sec .lm-acc .lm-ch.on,.lm-sec .lm-acc .lm-ac .lm-sl>span:last-child{color:var(--fx-c);border-color:color-mix(in oklab,var(--fx-c) 50%,transparent);background:color-mix(in oklab,var(--fx-c) 8%,#fff)}
.lm-sec .lm-acc .lm-ac .lm-sl>span:first-child{border-style:dashed;color:var(--tx-3)}
.lm-sec .lm-acc .lm-ac .lm-sl{justify-items:end;clip-path:inset(-2px -8px)}

/* ==========================================================================
   04 · Commandes — 000214 passe « Confirmée » (stock réservé)
   ========================================================================== */
.lm-sec .lm-cmd{position:relative}
.lm-sec .lm-cmd .orows{margin-bottom:14px}
.lm-sec .lm-cmd .lm-os{justify-self:end;display:inline-flex;font-family:'Spline Sans Mono',monospace;font-size:9.5px;border:1px solid var(--bd-2);border-radius:5px;padding:3px 7px;color:var(--tx-2);background:#fff}
.lm-sec .lm-cmd .lm-os.sol{background:#141418;border-color:#141418;color:#fff}
.lm-sec .lm-cmd .orow:first-child .lm-os{color:var(--fx-c);border-color:color-mix(in oklab,var(--fx-c) 55%,transparent);background:color-mix(in oklab,var(--fx-c) 8%,#fff)}
.lm-sec .lm-cmd .lm-os .lm-sl{justify-items:end}
.lm-sec .lm-cmd .stg{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid var(--bd);font-size:11px}
.lm-sec .lm-cmd .stg .s{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--tx-3);flex:1}
.lm-sec .lm-cmd .stg .s b{color:var(--tx);font-family:'Schibsted Grotesk',sans-serif;font-size:16px;font-weight:600}
.lm-sec .lm-cmd .stg .s:nth-child(-n+2) b{color:var(--fx-c)}
.lm-sec .lm-cf{position:absolute;left:34px;right:34px;top:30px;z-index:4;display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 11px;padding:14px 14px 12px;border-radius:12px;
  background:#fff;border:1px solid var(--bd-2);box-shadow:0 22px 44px -18px rgba(20,20,24,.45)}
.lm-sec .lm-cf .x{flex:none;color:var(--fx-c)}
.lm-sec .lm-cf .x .ico{width:18px;height:18px}
.lm-sec .lm-cf .q{flex:1;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--tx)}
.lm-sec .lm-cf .q small{font-size:11px;color:var(--tx-2)}
.lm-sec .lm-cf .bt{flex-basis:100%;display:flex;justify-content:flex-end;gap:7px}
.lm-sec .lm-cf .mk-btn{justify-content:center;padding:6px 12px;font-size:11.5px}

/* ==========================================================================
   05 · Boutiques B2B — + 40 casques, 1 979,00 € HT, envoyé pour validation
   ========================================================================== */
.lm-sec .lm-shop-g .it{position:relative}
.lm-sec .lm-shop-g .ph{display:grid;place-items:center;height:60px}
.lm-sec .lm-shop-g .pp{width:84px;height:50px;fill:none;stroke:rgba(20,20,24,.46);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 5px rgba(20,20,24,.16))}
.lm-sec .lm-shop-g .pp .f1{fill:rgba(20,20,24,.06)}
.lm-sec .lm-shop-g .pp .f2{fill:rgba(20,20,24,.13)}
.lm-sec .lm-shop-g .pp .th{stroke-width:.8;opacity:.7}
.lm-sec .lm-shop-g .it.lm-hit{--fx-c:#1F2A44}
.lm-sec .lm-shop-g .add{position:absolute;top:6px;right:6px;font-family:'Spline Sans Mono',monospace;font-size:10px;font-weight:500;color:#fff;background:#1F2A44;border-radius:999px;padding:2px 7px}
.lm-sec .lm-shop-c{gap:8px}
.lm-sec .lm-shop-c .ic{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--bg-2);color:var(--tx)}
.lm-sec .lm-shop-c .ic .ico{width:14px;height:14px}
.lm-sec .lm-shop-c .tot{font-size:13px;color:var(--tx)}
.lm-sec .lm-shop-c .tot .lm-sl{justify-items:end}
.lm-sec .lm-shop-n{display:flex;align-items:center;gap:8px;margin-top:11px;padding:8px 11px;border-radius:9px;background:var(--bg-2);font-size:11.5px;color:var(--tx-2)}
.lm-sec .lm-shop-n .ico{width:14px;height:14px;color:#1F2A44}

/* ==========================================================================
   06 · AVA — question tapée, réponse, « Oui, vas-y. », relance envoyée
   ========================================================================== */
.lm-sec .lm-ava{gap:9px}
.lm-sec .lm-ava .q{max-width:78%}
.lm-sec .lm-ava .aw{position:relative;align-self:stretch;display:flex}
.lm-sec .lm-ava .dots{position:absolute;left:0;top:0;display:flex;gap:4px;padding:12px 13px;border-radius:12px 12px 12px 3px;border:1px solid var(--bd);background:#fff}
.lm-sec .lm-ava .dots i{width:6px;height:6px;border-radius:50%;background:var(--c-ava-ink)}
.lm-sec .lm-ava .a.fin{display:flex;align-items:center;gap:8px;max-width:none;align-self:flex-start;padding:8px 12px;font-size:12.5px}
.lm-sec .lm-ava .a.fin .ico{width:15px;height:15px;color:var(--c-ava-ink);stroke-width:2.2}
.lm-sec .lm-ava .nt{align-self:center;font-size:11px;color:var(--tx-3);margin-top:2px}
.lm-scene[data-active="5"] .lm-l5 .lm-ava .dots i{animation:lm-dot .9s var(--ez) infinite}
.lm-scene[data-active="5"] .lm-l5 .lm-ava .dots i:nth-child(2){animation-delay:.15s}
.lm-scene[data-active="5"] .lm-l5 .lm-ava .dots i:nth-child(3){animation-delay:.3s}
@keyframes lm-dot{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-3px);opacity:1}}

/* ==========================================================================
   07 · Branchements — le journal se remplit, les automatisations s'allument
   ========================================================================== */
.lm-sec .lm-api .cli{border:1px solid var(--bd);border-radius:9px;padding:10px 12px;font-family:'Spline Sans Mono',monospace;font-size:11px;line-height:1.85;background:var(--bg-2);color:var(--tx-2)}
.lm-sec .lm-api .lm-ln{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.lm-sec .lm-api .verb{color:var(--tx);font-weight:500}
.lm-sec .lm-api .ok{margin-left:auto;color:var(--fx-c);font-weight:500}
.lm-sec .lm-api .ok .lm-sl{justify-items:end}
.lm-sec .lm-api .cr i{display:inline-block;width:6px;height:12px;vertical-align:-2px;background:var(--tx-3)}
.lm-scene[data-active="6"] .lm-l6 .lm-api .cr i{animation:caret .9s steps(1) infinite}
.lm-sec .lm-api .toggles{display:flex;gap:8px;margin-top:10px}
.lm-sec .lm-api .tg{flex:1;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--bd);border-radius:7px;padding:8px 10px;font-size:11.5px;color:var(--tx)}
.lm-sec .lm-api .sw{position:relative;width:26px;height:15px;border-radius:8px;background:var(--fx-c);flex:none}
.lm-sec .lm-api .sw::after{content:"";position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.lm-scene[data-active="6"] .lm-l6 .lm-api .lm-on{animation:lm-swt .35s var(--ez) var(--t) both}
.lm-scene[data-active="6"] .lm-l6 .lm-api .lm-on::after{animation:lm-swk .35s var(--ez) var(--t) both}
@keyframes lm-swt{from{background:var(--bd-2)}}
@keyframes lm-swk{from{transform:translateX(-11px)}}

/* ==========================================================================
   08 · Maquettes — BAT #324 validé produit par produit
   ========================================================================== */
.lm-sec .lm-bat .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:11px;border-bottom:1px solid var(--bd)}
.lm-sec .lm-bat .hd .t b{display:block;font-family:'Schibsted Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--tx)}
.lm-sec .lm-bat .hd .t small{font-family:'Spline Sans Mono',monospace;font-size:9.5px;color:var(--tx-3)}
.lm-sec .lm-bat .bg .lm-sl{justify-items:end;clip-path:inset(-2px -8px)}
.lm-sec .lm-bat .bg .lm-sl>span{font-family:'Spline Sans Mono',monospace;font-size:10px;border-radius:6px;padding:3px 8px}
.lm-sec .lm-bat .bg .lm-sl>span:first-child{border:1px dashed var(--bd-2);color:var(--tx-2)}
.lm-sec .lm-bat .bg .lm-sl>span:last-child{background:var(--fx-c);color:#fff;border:1px solid var(--fx-c)}
.lm-sec .lm-bat .bd{display:flex;gap:14px;margin-top:12px}
.lm-sec .lm-bat .vis{flex:none;width:112px;display:flex;flex-direction:column;align-items:center;gap:7px}
.lm-sec .lm-bat .doc{position:relative;width:112px;height:112px;border-radius:10px;background:radial-gradient(120% 95% at 50% 18%,#FFFFFF,#E9E9E4 78%);display:grid;place-items:center}
.lm-sec .lm-bat .doc .box{width:60px;height:72px;fill:none;stroke:rgba(20,20,24,.42);stroke-width:1;stroke-linejoin:round;filter:drop-shadow(0 6px 6px rgba(20,20,24,.18))}
.lm-sec .lm-bat .doc .box .f1{fill:#E6D2AF}.lm-sec .lm-bat .doc .box .f0{fill:#CDB18A}.lm-sec .lm-bat .doc .box .f2{fill:#EFE1C6}
.lm-sec .lm-bat .doc .box .th{stroke-width:.8;opacity:.55}
.lm-sec .lm-bat .doc .zone{position:absolute;left:calc(50% - 30px + 11.4px);top:calc(50% - 36px + 34px);width:27.2px;height:22px;border:1px dashed var(--tx);border-radius:2px}
.lm-sec .lm-bat .doc .zone i{position:absolute;inset:4px;border-radius:2px;background:color-mix(in oklab,var(--fx-c) 70%,transparent)}
.lm-sec .lm-bat .vis small{font-family:'Spline Sans Mono',monospace;font-size:8.5px;color:var(--tx-3);text-align:center;line-height:1.4}
.lm-sec .lm-bat .ps{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.lm-sec .lm-bat .p{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--bd);border-radius:9px;background:#fff}
.lm-sec .lm-bat .p b{display:block;font-size:12px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm-sec .lm-bat .p small{font-family:'Spline Sans Mono',monospace;font-size:9.5px;color:var(--tx-3)}
.lm-sec .lm-bat .p>span{min-width:0}
.lm-sec .lm-bat .ck{position:relative;flex:none;width:18px;height:18px;border-radius:50%;background:var(--fx-c);border:1.5px solid var(--fx-c)}
.lm-sec .lm-bat .ck::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.lm-sec .lm-bat .ft{display:flex;align-items:center;gap:12px;margin-top:12px}
.lm-sec .lm-bat .seg{flex:1;display:flex;gap:4px}
.lm-sec .lm-bat .seg i{position:relative;flex:1;height:5px;border-radius:3px;background:var(--bg-4);overflow:hidden}
.lm-sec .lm-bat .seg i::after{content:"";position:absolute;inset:0;background:var(--fx-c);transform-origin:0 50%}
.lm-sec .lm-bat .ft b{font-size:12px;font-weight:600;color:var(--tx)}
.lm-sec .lm-bat .ft .lm-sl{justify-items:end}
.lm-sec .lm-bat .who{margin-top:10px;font-size:11px;color:var(--tx-3)}
.lm-scene[data-active="7"] .lm-l7 .lm-bat{
  & .lm-ok{animation:lm-okr .45s var(--ez) var(--t) both}
  & .lm-ok .ck{animation:lm-ckb .45s var(--ez-b) var(--t) both}
  & .lm-ok .ck::after{animation:lm-pop .4s var(--ez-b) calc(var(--t) + .1s) both}
  & .lm-fill::after{animation:lm-fill .55s var(--ez) var(--t) both}
}
@keyframes lm-okr{from{opacity:.42}}
@keyframes lm-ckb{from{background:transparent;border-color:var(--bd-2);transform:scale(.85)}}
@keyframes lm-fill{from{transform:scaleX(0)}}

/* ==========================================================================
   Curseur fantôme (02, 04, 05) — coordonnées mesurées dans la fenêtre de 500 px
   (getBoundingClientRect, brique active) ; pointe de la flèche = (3, 2).
   ========================================================================== */
.lm-scene[data-active="1"] .lm-l1 .mk-cur{animation:lm-cur1 3.4s linear both}
.lm-scene[data-active="1"] .lm-l1 .mk-cur::after{animation:clk .55s var(--ez) 1.45s forwards}
@keyframes lm-cur1{
  0%{transform:translate(440px,400px);opacity:0;animation-timing-function:linear}
  11.8%{transform:translate(440px,400px);opacity:1;animation-timing-function:cubic-bezier(.55,.05,.25,1)}
  39.7%,64.7%{transform:translate(212px,310px);opacity:1;animation-timing-function:cubic-bezier(.55,.05,.25,1)}
  88%{transform:translate(290px,372px);opacity:1}
  100%{transform:translate(290px,372px);opacity:0}}
.lm-scene[data-active="3"] .lm-l3 .mk-cur{animation:lm-cur3 3.9s linear both}
.lm-scene[data-active="3"] .lm-l3 .mk-cur::after{animation:clk .55s var(--ez) 1.4s forwards,clk .55s var(--ez) 2.55s forwards}
@keyframes lm-cur3{
  0%{transform:translate(300px,290px);opacity:0}
  10.3%{transform:translate(300px,290px);opacity:1;animation-timing-function:cubic-bezier(.55,.05,.25,1)}
  33.3%,41%{transform:translate(383px,86px);opacity:1;animation-timing-function:cubic-bezier(.55,.05,.25,1)}
  62.8%,74%{transform:translate(408px,171px);opacity:1;animation-timing-function:cubic-bezier(.55,.05,.25,1)}
  92%{transform:translate(452px,246px);opacity:1}
  100%{transform:translate(452px,246px);opacity:0}}
.lm-scene[data-active="4"] .lm-l4 .mk-cur{animation:lm-cur4 4s linear both}
.lm-scene[data-active="4"] .lm-l4 .mk-cur::after{animation:clk .55s var(--ez) 1.25s forwards,clk .55s var(--ez) 2.95s forwards}
@keyframes lm-cur4{
  0%{transform:translate(120px,330px);opacity:0}
  7.5%{transform:translate(120px,330px);opacity:1;animation-timing-function:cubic-bezier(.55,.05,.25,1)}
  28.75%,45%{transform:translate(247px,148px);opacity:1;animation-timing-function:cubic-bezier(.55,.05,.25,1)}
  71.25%,85%{transform:translate(402px,290px);opacity:1}
  100%{transform:translate(402px,290px);opacity:0}}

/* ---------- Mobile : sommaire compact (les 8 pastilles tiennent sans défiler), panneau ajusté ---------- */
@media (max-width:900px){
  /* fenêtres zoomées (~0,6) : un panneau moins haut laisse la place au texte */
  .lm-sec .lm-vis{--vh:min(24vh,190px)}
  .lm-sec .lm-nav{gap:4px;padding:12px 12px 0;justify-content:space-between}
  .lm-sec .lm-pill{height:28px;padding:0 8px;font-size:11px}
  .lm-sec .lm-pill i{display:none}
  .lm-sec .lm-pill .lm-pn{display:none}
}