/* ==========================================================================
   LOGICIELS MÉTIER : une idée par écran, un visuel qui raconte.
   en-tête : des fichiers éparpillés qui se rangent dans UN outil (à la place
             du décor photo, rejoué en boucle tant qu'il est à l'écran)
   01 pour votre métier : quatre engagements, une icône chacun
   02 la gestion : un écran de démonstration qui se monte, à onglets
   03 les interventions : le planning qui se remplit + le bon signé
   04 l'outil réel livré à un client : balayage + zone cernée
   Mouvements : assets/js/modules/logiciels.js. Sans JS, en animations
   réduites, en ?calage et dans l'éditeur, tout est dessiné, immobile.
   ========================================================================== */
.lm-blk{padding-top:0}

/* --------------------------------------------------------------------------
   EN-TÊTE : le texte à gauche, l'animation à droite. Sur ordinateur, l'en-tête
   occupe l'écran : la section 01 commence à l'écran suivant. --show-h =
   hauteur utile sous les onglets (même calcul que identite-visuelle.css).
   -------------------------------------------------------------------------- */
.phero__show{position:relative;z-index:3}
html.js .phero__show{animation:hPlanet 1.6s var(--ease-out) .15s both}
/* ?calage : l'en-tête d'origine (décor photo), sans l'animation ; ailleurs,
   l'animation remplace le décor (même règle que sites-web et réalisations) */
html:not(.calage) .phero--show .phero__scene{display:none}
html.calage .phero__show{display:none}
/* la hauteur de l'en-tête (un écran, plafonné en 4:3) vient de pages.css */
@media (min-width:1024px){
  html:not(.calage) .phero.phero--show{--show-h:calc(min(100svh,75vw) - 112px - 62 * var(--m));display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:calc(34 * var(--m));padding-right:calc(52 * var(--m))}
  html:not(.calage) .phero.phero--show > .ptabs{grid-column:1 / -1;margin-right:0}
  html:not(.calage) .phero.phero--show > .phero__content{grid-column:1;grid-row:2;align-self:center;margin-block:0}
  html:not(.calage) .phero.phero--show > .phero__show{grid-column:2;grid-row:2;align-self:center;justify-self:center;margin:0}
}
@media (max-width:1023px){
  .phero__show{margin:34px 24px 0}
}

/* --------------------------------------------------------------------------
   01 · DES FICHIERS À L'OUTIL
   -------------------------------------------------------------------------- */
.lm-flow{
  position:relative;aspect-ratio:2.3/1;container-type:inline-size;overflow:hidden;isolation:isolate;
  perspective:1400px;border:1px solid var(--line);border-radius:6px;
  background:
    radial-gradient(60% 70% at 50% 54%,rgba(160,14,28,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/4cqw 4cqw,
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px) 0 0/4cqw 4cqw,
    #08080a;
}
.lm-flow__files{position:absolute;inset:0;transform-style:preserve-3d;z-index:2;pointer-events:none}

/* un fichier de tableur */
.lm-file{
  --n:0;position:absolute;left:var(--x);top:var(--y);width:17cqw;aspect-ratio:1.5;
  display:flex;flex-direction:column;border-radius:.45cqw;overflow:hidden;
  background:#ece9e2;box-shadow:0 2cqw 4cqw -1.4cqw rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.18);
  transform:translate3d(var(--tx,0px),var(--ty,0px),var(--tz,0px)) translate(-50%,-50%) rotate(var(--rr,var(--r))) scale(var(--ss,var(--s,1)));
  opacity:0;                                                  /* état final : rangés dans l'outil */
}
.lm-file b{
  display:flex;align-items:center;gap:.6cqw;flex:none;height:2.3cqw;padding:0 .9cqw;
  font-family:var(--f-mono);font-weight:500;font-size:.92cqw;letter-spacing:.02em;color:#2a2b30;
  background:#dcd8cf;border-bottom:1px solid rgba(0,0,0,.14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.lm-file b::before{content:"";flex:none;width:.85cqw;height:.85cqw;border-radius:.15cqw;background:#5b5d66}
.lm-file i{
  position:relative;flex:1;
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),rgba(0,0,0,.13) calc(20% - 1px) 20%),
    repeating-linear-gradient(180deg,transparent 0 calc(20% - 1px),rgba(0,0,0,.13) calc(20% - 1px) 20%);
}
/* des cellules remplies, une recopie en rouge, un point jaune */
.lm-file i::before{content:"";position:absolute;left:3%;top:24%;width:34%;height:9%;border-radius:1px;background:#8d8f97;
  box-shadow:0 2.7cqw 0 #a8aab1,0 5.4cqw 0 #a8aab1,13cqw 0 0 -.1cqw #b9bbc1,6.4cqw 2.7cqw 0 #b9bbc1}
.lm-file i::after{content:"";position:absolute;left:61%;top:43%;width:17%;height:13%;border:1.5px solid var(--red);background:rgba(246,43,62,.14)}
.lm-file:nth-child(1){--x:13%;--y:28%;--r:-8deg;--n:0}
.lm-file:nth-child(2){--x:29%;--y:73%;--r:6deg;--n:1;--s:.94}
.lm-file:nth-child(3){--x:46%;--y:25%;--r:-3deg;--n:2;--s:1.04}
.lm-file:nth-child(4){--x:63%;--y:71%;--r:7deg;--n:3}
.lm-file:nth-child(5){--x:79%;--y:28%;--r:-5deg;--n:4;--s:.96}
.lm-file:nth-child(6){--x:88%;--y:73%;--r:4deg;--n:5;--s:.92}
.lm-file:nth-child(2) i::after{left:21%;top:63%}
.lm-file:nth-child(3) i::after{left:41%;top:23%;width:37%;border-color:rgba(0,0,0,.25);background:#c9d7c9}
.lm-file:nth-child(4) i::after{left:81%;top:83%;width:15%}
.lm-file:nth-child(5) i::after{left:1%;top:63%;width:37%;border-color:transparent;background:rgba(246,43,62,.22)}
.lm-file:nth-child(6) i::after{left:61%;top:3%;width:6px;height:6px;border:0;border-radius:50%;background:var(--yellow)}

/* l'outil */
.lm-app{
  position:absolute;z-index:1;left:50%;top:51%;width:66cqw;height:84%;display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.16);border-radius:.6cqw;overflow:hidden;background:#0d0d0f;
  box-shadow:0 3cqw 6cqw -2cqw rgba(0,0,0,.9);transform:translate(-50%,-50%)
}
.lm-app::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px rgba(246,43,62,.55),0 0 4cqw -.6cqw rgba(246,43,62,.55);opacity:.55}
.lm-app__bar{display:flex;align-items:center;gap:.55cqw;flex:none;height:2.6cqw;padding:0 1.1cqw;background:#141416;border-bottom:1px solid var(--line)}
.lm-app__bar i{width:.65cqw;height:.65cqw;border-radius:50%;background:#34343a}
.lm-app__bar i:first-child{background:var(--red)}
.lm-app__bar span{margin-left:.8cqw;font-family:var(--f-mono);font-weight:500;font-size:max(9px,.9cqw);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.lm-app__body{flex:1;display:grid;grid-template-columns:14.5cqw minmax(0,1fr);min-height:0}
.lm-app__side{padding:1.3cqw 0;border-right:1px solid var(--line);background:#0a0a0b}
.lm-app__side li{
  --n:0;position:relative;display:flex;align-items:center;gap:.8cqw;padding:.72cqw 1.3cqw;
  font-size:max(10px,1.12cqw);line-height:1.2;color:var(--ink-2);white-space:nowrap
}
.lm-app__side li::before{content:"";flex:none;width:.7cqw;height:.7cqw;border:1px solid rgba(246,43,62,.8);border-radius:.15cqw}
.lm-app__side li:first-child{color:var(--ink);background:linear-gradient(90deg,rgba(246,43,62,.2),transparent)}
.lm-app__side li:first-child::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red)}
.lm-app__side li:nth-child(2){--n:1}.lm-app__side li:nth-child(3){--n:2}.lm-app__side li:nth-child(4){--n:3}
.lm-app__side li:nth-child(5){--n:4}.lm-app__side li:nth-child(6){--n:5}
.lm-app__main{display:flex;flex-direction:column;gap:1.3cqw;padding:1.6cqw 1.8cqw;min-width:0}
.lm-app__h{font-family:var(--f-title);font-weight:700;font-size:max(12px,1.9cqw);line-height:1;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.lm-app__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1cqw}
.lm-app__tiles div,.lm-app__chart{border:1px solid var(--line-2);border-radius:.35cqw;background:rgba(255,255,255,.025)}
.lm-app__tiles div{display:flex;flex-direction:column;gap:1cqw;padding:1cqw 1.1cqw 1.2cqw}
.lm-app small{font-family:var(--f-mono);font-weight:500;font-size:max(8px,.82cqw);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm-app__tiles i{display:block;width:calc(var(--v) * 100%);height:.75cqw;border-radius:1px;background:linear-gradient(90deg,var(--red),rgba(246,43,62,.55));transform-origin:left center}
.lm-app__chart{flex:1;display:flex;flex-direction:column;gap:1cqw;padding:1.1cqw 1.2cqw;min-height:0}
.lm-app__bars{flex:1;display:flex;align-items:flex-end;gap:1.1cqw;min-height:0;border-bottom:1px solid var(--line-2)}
.lm-app__bars i{--n:0;flex:1;height:calc(var(--v) * 100%);border-radius:.2cqw .2cqw 0 0;background:linear-gradient(180deg,#ff5a69,var(--red) 45%,#a80f20);transform-origin:center bottom}
.lm-app__bars i:nth-child(2){--n:1}.lm-app__bars i:nth-child(3){--n:2}.lm-app__bars i:nth-child(4){--n:3}
.lm-app__bars i:nth-child(5){--n:4}.lm-app__bars i:nth-child(6){--n:5}.lm-app__bars i:nth-child(7){--n:6}.lm-app__bars i:nth-child(8){--n:7}

/* légende : avant / après (elle explique l'animation : lisible, police des titres) */
.lm-flow__tag{position:absolute;z-index:3;left:2cqw;bottom:1.6cqw;display:grid;font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 17px),calc(9.6 * var(--m)));line-height:1.1;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);transition:opacity .6s var(--e-io)}
.lm-flow__tag span{grid-area:1/1;display:flex;align-items:center;gap:.8em}
.lm-flow__tag span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px rgba(246,43,62,.7)}
.lm-flow__before{opacity:0}

/* --- le récit (seulement si logiciels.js l'a armé) --- */
.lm-flow.is-armed .lm-file{opacity:0;--ty:var(--ty0,4cqw);--tz:-420px;--rr:calc(var(--r) * 2.2)}
.lm-flow.is-armed .lm-app{opacity:0;transform:translate(-50%,-47%) rotateX(16deg) scale(.94)}
.lm-flow.is-armed .lm-app::after{opacity:0}
.lm-flow.is-armed .lm-app__side li{color:transparent}
.lm-flow.is-armed .lm-app__side li::before{opacity:0;transform:scale(.4)}
.lm-flow.is-armed .lm-app__side li:first-child{background:none}
.lm-flow.is-armed .lm-app__side li:first-child::after{transform:scaleY(0)}
.lm-flow.is-armed .lm-app__h,.lm-flow.is-armed .lm-app__tiles div,.lm-flow.is-armed .lm-app__chart{opacity:0;transform:translate3d(0,1.2cqw,0)}
.lm-flow.is-armed .lm-app__tiles i{transform:scaleX(0)}
.lm-flow.is-armed .lm-app__bars i{transform:scaleY(0)}
.lm-flow.is-armed .lm-flow__before{opacity:1}
.lm-flow.is-armed .lm-flow__after{opacity:0;transform:translate3d(0,8px,0)}

/* 1. les fichiers arrivent de la profondeur, en désordre */
.lm-flow.is-play .lm-file{opacity:1;--ty:0px;--tz:0px;--rr:var(--r);
  transition:opacity .5s linear calc(var(--n) * 110ms),transform 1.1s var(--e-out) calc(var(--n) * 110ms)}
/* 2. l'outil s'allume au centre */
.lm-flow.is-app .lm-app{opacity:1;transform:translate(-50%,-50%);transition:opacity .7s var(--e-out),transform 1.1s var(--e-out)}
.lm-flow.is-app .lm-app::after{opacity:.55;transition:opacity 1.2s var(--e-io) .2s}
/* 3. chaque fichier rejoint son entrée de menu */
.lm-flow.is-merge .lm-file{opacity:0;--tx:var(--mx);--ty:var(--my);--rr:0deg;--ss:var(--ms);
  transition:transform .95s var(--e-io) calc(var(--n) * 150ms),opacity .28s linear calc(var(--n) * 150ms + 720ms)}
.lm-flow.is-merge .lm-app__side li{color:var(--ink-2);transition:color .4s var(--e-out) calc(var(--n) * 150ms + 760ms)}
.lm-flow.is-merge .lm-app__side li:first-child{color:var(--ink);background:linear-gradient(90deg,rgba(246,43,62,.2),transparent);transition:color .4s var(--e-out) .76s,background-color .4s .76s}
.lm-flow.is-merge .lm-app__side li::before{opacity:1;transform:none;transition:opacity .3s calc(var(--n) * 150ms + 700ms),transform .5s var(--e-pop) calc(var(--n) * 150ms + 700ms)}
.lm-flow.is-merge .lm-app__side li:first-child::after{transform:none;transition:transform .5s var(--e-out) .8s}
.lm-flow.is-merge .lm-flow__before{opacity:0;transition:opacity .4s}
.lm-flow.is-merge .lm-flow__after{opacity:1;transform:none;transition:opacity .6s var(--e-out) 1.2s,transform .8s var(--e-out) 1.2s}
/* 4. le tableau de bord se remplit */
.lm-flow.is-live .lm-app__h,.lm-flow.is-live .lm-app__tiles div,.lm-flow.is-live .lm-app__chart{opacity:1;transform:none;transition:opacity .6s var(--e-out),transform .9s var(--e-out)}
.lm-flow.is-live .lm-app__tiles div:nth-child(1){transition-delay:90ms}
.lm-flow.is-live .lm-app__tiles div:nth-child(2){transition-delay:180ms}
.lm-flow.is-live .lm-app__tiles div:nth-child(3){transition-delay:270ms}
.lm-flow.is-live .lm-app__chart{transition-delay:360ms}
.lm-flow.is-live .lm-app__tiles i{transform:none;transition:transform 1s var(--e-out) .55s}
.lm-flow.is-live .lm-app__bars i{transform:none;transition:transform .9s var(--e-out) calc(560ms + var(--n) * 80ms)}

/* 5. boucle (en-tête) : tout s'efface, puis le récit repart du désordre */
.lm-flow.is-out .lm-app,.lm-flow.is-out .lm-flow__tag{opacity:0;transition:opacity .6s var(--e-io)}
.lm-flow.is-reset *,.lm-flow.is-reset *::before,.lm-flow.is-reset *::after{transition:none!important}

/* dans l'en-tête, sur ordinateur : une planche carrée, les fichiers en haut et
   en bas, l'outil au milieu */
@media (min-width:1024px){
  .lm-flow--hero{--fr:1;width:min(100%,calc(500 * var(--m)),calc(var(--show-h) * var(--fr)));aspect-ratio:var(--fr)}
  .lm-flow--hero .lm-file{width:27cqw}
  .lm-flow--hero .lm-file b{height:3.7cqw;gap:1cqw;padding:0 1.4cqw;font-size:1.6cqw}
  .lm-flow--hero .lm-file b::before{width:1.3cqw;height:1.3cqw}
  .lm-flow--hero .lm-file i::before{box-shadow:0 4.3cqw 0 #a8aab1,0 8.6cqw 0 #a8aab1,20.6cqw 0 0 -.15cqw #b9bbc1,10.2cqw 4.3cqw 0 #b9bbc1}
  .lm-flow--hero .lm-file:nth-child(1){--x:19%;--y:15%;--r:-8deg}
  .lm-flow--hero .lm-file:nth-child(2){--x:51%;--y:11%;--r:5deg}
  .lm-flow--hero .lm-file:nth-child(3){--x:82%;--y:16%;--r:-4deg}
  .lm-flow--hero .lm-file:nth-child(4){--x:19%;--y:80%;--r:7deg}
  .lm-flow--hero .lm-file:nth-child(5){--x:51%;--y:84%;--r:-5deg}
  .lm-flow--hero .lm-file:nth-child(6){--x:82%;--y:79%;--r:4deg}
  .lm-flow--hero .lm-app{top:48%;width:84cqw;height:66%;border-radius:1cqw}
  .lm-flow--hero .lm-app__bar{height:4.4cqw;gap:1cqw;padding:0 2cqw}
  .lm-flow--hero .lm-app__bar i{width:1.2cqw;height:1.2cqw}
  .lm-flow--hero .lm-app__bar span{margin-left:1.2cqw;font-size:max(9px,1.7cqw)}
  .lm-flow--hero .lm-app__body{grid-template-columns:23cqw minmax(0,1fr)}
  .lm-flow--hero .lm-app__side{padding:1.8cqw 0}
  .lm-flow--hero .lm-app__side li{gap:1.4cqw;padding:1.5cqw 2cqw;font-size:max(10px,2.2cqw)}
  .lm-flow--hero .lm-app__side li::before{width:1.2cqw;height:1.2cqw}
  .lm-flow--hero .lm-app__main{gap:2cqw;padding:2.6cqw 2.8cqw}
  .lm-flow--hero .lm-app__h{font-size:max(12px,3.2cqw)}
  .lm-flow--hero .lm-app__tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6cqw}
  .lm-flow--hero .lm-app__tiles div{gap:1.6cqw;padding:1.6cqw 1.8cqw}
  .lm-flow--hero .lm-app__tiles div:nth-child(3){display:none}
  .lm-flow--hero .lm-app small{font-size:max(8px,1.45cqw)}
  .lm-flow--hero .lm-app__tiles i{height:1.2cqw}
  .lm-flow--hero .lm-app__chart{gap:1.6cqw;padding:1.8cqw 2cqw}
  .lm-flow--hero .lm-app__bars{gap:1.5cqw}
  .lm-flow--hero .lm-flow__tag{left:3.4cqw;bottom:2.6cqw}
}

/* --------------------------------------------------------------------------
   LISTES D'ICÔNES (composant commun .icos de pages.css) : ici, sous le visuel
   -------------------------------------------------------------------------- */
.lm-icos{margin-top:max(calc(var(--mins) * 44px),calc(32 * var(--m)))}
#votre-metier .lm-icos{margin-top:max(calc(var(--mins) * 8px),calc(4 * var(--m)))}
.lm-icos--day{margin-top:max(calc(var(--mins) * 70px),calc(46 * var(--m)))}
.lm-icos .ico-item p{color:var(--ink-3)}

/* les visuels principaux arrivent de la profondeur (comme .frame.rv de pages.css) */
html.js .rv:is(.lm-flow,.lm-panel,.lm-field__plan):not(.is-in){transform:perspective(1400px) translate3d(0,46px,0) rotateX(7deg);transform-origin:50% 100%}

/* --------------------------------------------------------------------------
   ÉCRANS À ONGLETS
   -------------------------------------------------------------------------- */
/* un écran entier tient dans la fenêtre, onglets compris */
@media (min-width:1024px){.lm-demo:not(.lm-field__plan){max-width:max(900px,calc((100vh - 240px) * 1.78))}}
.lm-tabs{display:flex;align-items:stretch;border-bottom:1px solid var(--line-2);margin-bottom:max(calc(var(--mins) * 18px),calc(12 * var(--m)))}
html:not(.js) .lm-tabs{display:none}
.lm-tab{
  position:relative;display:flex;align-items:center;gap:max(calc(var(--mins) * 12px),calc(7 * var(--m)));
  padding:max(calc(var(--mins) * 14px),calc(9 * var(--m))) max(calc(var(--mins) * 20px),calc(13 * var(--m))) max(calc(var(--mins) * 14px),calc(9 * var(--m))) max(calc(var(--mins) * 6px),calc(4 * var(--m)));
  margin-right:max(calc(var(--mins) * 10px),calc(8 * var(--m)));
  font-family:var(--f-mono);font-weight:500;font-size:max(calc(var(--mins) * 12px),calc(6 * var(--m)));letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  transition:color .3s var(--ease)
}
.lm-tab .ico{--ico-size:clamp(48px,calc(30 * var(--m)),56px);opacity:.8;transition:opacity .3s var(--ease)}
.lm-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.lm-tab:hover,.lm-tab:focus-visible{color:var(--ink)}
.lm-tab:hover .ico,.lm-tab[aria-selected="true"] .ico{opacity:1}
.lm-tab:hover::after{transform:scaleX(.3)}
.lm-tab[aria-selected="true"]{color:var(--ink)}
.lm-tab[aria-selected="true"]::after{transform:none;box-shadow:0 0 12px rgba(246,43,62,.7)}

.lm-note{display:flex;align-items:baseline;gap:12px;margin-top:max(calc(var(--mins) * 18px),calc(12 * var(--m)));font-size:max(calc(var(--mins) * 16px),calc(8 * var(--m)));line-height:1.5;color:var(--ink-2)}
.lm-note::before{content:"";flex:none;width:22px;height:1.5px;background:var(--red);transform:translateY(-.3em)}
.lm-demo + .cap,.lm-icos + .cap{margin-top:max(calc(var(--mins) * 22px),calc(14 * var(--m)))}

/* écran cliquable : le bouton de la visionneuse commune prend la forme de la capture */
.frame > .proj__shot{display:block;width:100%;height:auto;border:0;background:none;border-radius:0}
.frame > .proj__shot::after{content:none}
.lm-screen{position:relative;display:block;aspect-ratio:var(--ar);overflow:hidden;background:var(--lm-bg,#0c0c0d);perspective:1600px}
.lm-demo[data-lm-demo="build"] .lm-screen{--lm-bg:#f3f5f9}
.lm-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:none;transform:none}
.lm-screen.is-armed img,.lm-screen.is-building img{opacity:0}
.lm-screen.is-swap img{opacity:0;transition:opacity .18s linear}
.frame > .proj__shot:hover .lm-screen img{filter:none;transform:none}

/* les pièces de l'écran (découpes de la capture, créées par logiciels.js) */
.lm-pc{position:absolute;display:block;background-repeat:no-repeat;backface-visibility:hidden}
.lm-screen.is-run .lm-pc{animation:lmCard .82s var(--e-out) var(--dl) both}
.lm-screen.is-run .lm-pc--side{animation:lmSide .76s var(--e-out) var(--dl) both}
.lm-screen.is-run .lm-pc--top{animation:lmTop .64s var(--e-out) var(--dl) both}
.lm-screen.is-run .lm-pc--row{animation:lmRow .52s var(--e-out) var(--dl) both}
.lm-screen.is-run .lm-pc--bar{transform-origin:50% 100%;animation:lmBar .76s var(--e-out) var(--dl) both}
.lm-screen.is-run .lm-pc--drop{animation:lmDrop .56s var(--e-pop) var(--dl) both}
.lm-screen.is-run .lm-pc--cover{animation:none}
.lm-pc--grid{
  background-color:#fff;
  background-image:linear-gradient(90deg,transparent calc(100% - 1px),rgba(20,24,40,.05) calc(100% - 1px)),linear-gradient(180deg,transparent calc(100% - 1px),rgba(20,24,40,.045) calc(100% - 1px));
  background-size:25% 100%,100% calc(100% * 45 / 448);background-position:0 0,0 -1px
}
@keyframes lmSide{from{transform:translate3d(-100%,0,0)}}
@keyframes lmTop{from{opacity:0;transform:translate3d(0,-100%,0)}}
@keyframes lmCard{from{opacity:0;transform:translate3d(0,26px,-90px) rotateX(12deg)}60%{opacity:1}}
@keyframes lmRow{from{opacity:0;transform:translate3d(0,-40%,0)}}
@keyframes lmBar{from{transform:scaleY(0)}}
@keyframes lmDrop{from{opacity:0;transform:translate3d(0,-16px,0) scale(.94)}}

/* console réelle : balayage de haut en bas, puis la zone est cernée */
.lm-screen--scan{--lm-bg:#0a1020}
.lm-screen--scan.is-armed img{opacity:1;clip-path:inset(0 0 100% 0)}
.lm-screen--scan.is-scan img{animation:lmScan 1.25s var(--e-io) both}
.lm-scanline{position:absolute;inset:0;pointer-events:none;opacity:0}
.lm-scanline::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--red) 18%,#ffd9dc 50%,var(--red) 82%,transparent);box-shadow:0 0 16px 2px rgba(246,43,62,.55)}
.lm-screen--scan.is-scan .lm-scanline{animation:lmLine 1.25s var(--e-io) both}
@keyframes lmScan{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lmLine{0%{opacity:1;transform:translate3d(0,0,0)}88%{opacity:1}100%{opacity:0;transform:translate3d(0,100%,0)}}
.lm-focus{position:absolute;display:none;pointer-events:none}
.lm-screen--scan.is-scan .lm-focus{display:block}
.lm-focus i{position:absolute;background:var(--red);box-shadow:0 0 10px rgba(246,43,62,.75)}
.lm-focus i:nth-child(1){left:0;right:0;top:0;height:2px;transform-origin:0 50%}
.lm-focus i:nth-child(2){top:0;bottom:0;right:0;width:2px;transform-origin:50% 0}
.lm-focus i:nth-child(3){left:0;right:0;bottom:0;height:2px;transform-origin:100% 50%}
.lm-focus i:nth-child(4){top:0;bottom:0;left:0;width:2px;transform-origin:50% 100%}
.lm-screen--scan.is-scan .lm-focus i:nth-child(odd){animation:lmEdgeX .42s var(--e-io) both}
.lm-screen--scan.is-scan .lm-focus i:nth-child(even){animation:lmEdgeY .3s var(--e-io) both}
.lm-focus i:nth-child(1){animation-delay:1.25s!important}
.lm-focus i:nth-child(2){animation-delay:1.67s!important}
.lm-focus i:nth-child(3){animation-delay:1.97s!important}
.lm-focus i:nth-child(4){animation-delay:2.39s!important}
@keyframes lmEdgeX{from{transform:scaleX(0)}}
@keyframes lmEdgeY{from{transform:scaleY(0)}}

/* --------------------------------------------------------------------------
   03 · LE PLANNING + LE TÉLÉPHONE
   -------------------------------------------------------------------------- */
.lm-field{position:relative;padding-right:15%}
.lm-phone{position:absolute;z-index:3;right:0;bottom:-8%;width:20%;container-type:inline-size}
.lm-phone__in{
  aspect-ratio:9/19;display:flex;flex-direction:column;
  padding:20cqw 7cqw 7cqw;background:#f5f7f9;color:#17181c;font-family:var(--f-text);overflow:hidden
}
.lm-phone__app{display:flex;align-items:center;gap:2.4cqw;font-family:var(--f-mono);font-weight:500;font-size:3.6cqw;letter-spacing:.14em;text-transform:uppercase;color:#7a7d86}
.lm-phone__app::before{content:"";width:2.6cqw;height:2.6cqw;border-radius:.6cqw;background:var(--red)}
.lm-phone__h{margin-top:4cqw;font-weight:600;font-size:7.4cqw;line-height:1.15;color:#121317}
.lm-phone__sub{margin-top:1.4cqw;font-size:4.3cqw;color:#71747d}
.lm-phone__list{margin-top:5cqw;border-top:1px solid #e3e6eb}
.lm-phone__list li{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:3cqw 0;border-bottom:1px solid #e3e6eb;font-size:4.3cqw;line-height:1.25;color:#2b2d33}
.lm-phone__list b{display:inline-flex;align-items:center;gap:1.6cqw;font-family:var(--f-mono);font-weight:600;font-size:3.8cqw;color:#178a4c}
.lm-phone__list b::before{content:"";width:2.6cqw;height:1.4cqw;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.5cqw) rotate(-45deg)}
.lm-phone__k{margin-top:5cqw;font-family:var(--f-mono);font-weight:500;font-size:3.3cqw;letter-spacing:.14em;text-transform:uppercase;color:#8a8d95}
.lm-phone__sign{margin-top:2.4cqw;border:1.5px dashed #c9ced6;border-radius:2.4cqw;background:#fff;padding:2cqw 3cqw}
.lm-phone__sign svg{width:100%;height:auto}
.lm-sig{stroke:#16171b;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.lm-sig--2{stroke-width:1.4;stroke:#3a3c44}
.lm-phone__ok{display:inline-flex;align-self:flex-start;align-items:center;gap:2cqw;margin-top:4cqw;padding:1.6cqw 3.4cqw;border-radius:9cqw;background:#e4f5ea;color:#167a42;font-weight:600;font-size:3.9cqw}
.lm-phone__ok i{width:3.6cqw;height:3.6cqw;border-radius:50%;background:#1d9a54;position:relative}
.lm-phone__ok i::after{content:"";position:absolute;left:28%;top:24%;width:42%;height:24%;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
.lm-phone__sum{display:flex;align-items:baseline;justify-content:space-between;margin-top:auto;padding-top:4cqw;border-top:1px solid #e3e6eb;font-size:4cqw;color:#71747d}
.lm-phone__sum b{font-weight:600;font-size:9cqw;letter-spacing:-.01em;color:#121317}
.lm-phone__bill{display:flex;align-items:center;justify-content:space-between;gap:3cqw;margin-top:3cqw;padding:2.6cqw 3.4cqw;border-radius:2cqw;background:#fff;box-shadow:0 0 0 1px #e3e6eb;font-size:4cqw;color:#2b2d33}
.lm-phone__bill b{font-weight:600;color:var(--red)}

/* le récit du bon (armé par logiciels.js) */
.lm-phone.is-armed .lm-phone__list b{opacity:0;transform:scale(.6)}
.lm-phone.is-armed .lm-sig{stroke-dashoffset:1}
.lm-phone.is-armed .lm-phone__ok{opacity:0;transform:scale(.85)}
.lm-phone.is-armed .lm-phone__sum,.lm-phone.is-armed .lm-phone__bill{opacity:0;transform:translate3d(0,3cqw,0)}
.lm-phone.is-play .lm-phone__list b{opacity:1;transform:none;transition:opacity .25s,transform .5s var(--e-pop)}
.lm-phone.is-play .lm-phone__list li:nth-child(2) b{transition-delay:.28s}
.lm-phone.is-play .lm-phone__list li:nth-child(3) b{transition-delay:.56s}
.lm-phone.is-play .lm-sig{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--e-io) .95s}
.lm-phone.is-play .lm-sig--2{transition:stroke-dashoffset .5s var(--e-io) 2.4s}
.lm-phone.is-play .lm-phone__ok{opacity:1;transform:none;transition:opacity .3s 3s,transform .55s var(--e-pop) 3s}
.lm-phone.is-play .lm-phone__sum{opacity:1;transform:none;transition:opacity .5s 3.4s,transform .8s var(--e-out) 3.4s}
.lm-phone.is-play .lm-phone__bill{opacity:1;transform:none;transition:opacity .5s 3.75s,transform .8s var(--e-out) 3.75s}


/* visionneuse : plus large ici pour lire les écrans ; sa phrase d'aide parle
   de sites, elle ne vaut pas pour un logiciel */
.dlg--work{width:min(1320px,calc(100vw - 32px))}
.dlg--work [data-w-note]{display:none}

/* --------------------------------------------------------------------------
   Tablette et téléphone
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  .lm-field{padding-right:0}
  .lm-phone{position:relative;right:auto;bottom:auto;width:44%;max-width:240px;margin:-16% 4% 0 auto}
  .lm-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border-bottom:0}
  .lm-tabs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lm-tab{flex-direction:column;align-items:flex-start;gap:8px;margin:0;padding:12px 12px 11px;border:1px solid var(--line-2);background:rgba(6,6,6,.45);font-size:11px;letter-spacing:.1em;line-height:1.25}
  .lm-tab::after{left:-1px;right:-1px}
  .lm-tab[aria-selected="true"]{border-color:rgba(246,43,62,.75);background:rgba(246,43,62,.12)}
}
@media (max-width:767px){
  .lm-flow{aspect-ratio:.8}
  .lm-file{width:38cqw;--ty0:8cqw}
  .lm-file b{height:5.4cqw;padding:0 2cqw;font-size:2.4cqw;gap:1.4cqw}
  .lm-file b::before{width:2cqw;height:2cqw}
  .lm-file i::before{box-shadow:0 5.8cqw 0 #a8aab1,0 11.6cqw 0 #a8aab1,28cqw 0 0 -.2cqw #b9bbc1,14cqw 5.8cqw 0 #b9bbc1}
  .lm-file:nth-child(1){--x:26%;--y:15%;--r:-7deg}
  .lm-file:nth-child(2){--x:72%;--y:21%;--r:6deg}
  .lm-file:nth-child(3){--x:29%;--y:45%;--r:-4deg}
  .lm-file:nth-child(4){--x:73%;--y:53%;--r:7deg}
  .lm-file:nth-child(5){--x:27%;--y:79%;--r:-5deg}
  .lm-file:nth-child(6){--x:71%;--y:86%;--r:4deg}
  .lm-app{top:55%;width:90cqw;height:76%;border-radius:1.4cqw}
  .lm-app__bar{height:7cqw;gap:1.4cqw;padding:0 3cqw}
  .lm-app__bar i{width:1.8cqw;height:1.8cqw}
  .lm-app__bar span{font-size:2.8cqw;margin-left:1.6cqw}
  .lm-app__body{grid-template-columns:31cqw minmax(0,1fr)}
  .lm-app__side{padding:2.4cqw 0}
  .lm-app__side li{gap:2cqw;padding:2cqw 3cqw;font-size:max(10px,3.1cqw)}
  .lm-app__side li::before{width:2cqw;height:2cqw}
  .lm-app__main{gap:3cqw;padding:3.4cqw 3.4cqw}
  .lm-app__h{font-size:5cqw}
  .lm-app__tiles{grid-template-columns:1fr;gap:2cqw}
  .lm-app__tiles div{gap:1.8cqw;padding:2.2cqw 2.4cqw}
  .lm-app__tiles div:nth-child(3){display:none}
  .lm-app small{font-size:max(8px,2.3cqw)}
  .lm-app__tiles i{height:1.8cqw}
  .lm-app__chart{gap:2cqw;padding:2.4cqw}
  .lm-app__bars{gap:1.6cqw}
  .lm-flow__tag{left:4cqw;bottom:3cqw;font-size:15px;letter-spacing:.02em}
}
@media (max-width:640px){
  .lm-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lm-tabs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lm-tabs--3 .lm-tab{font-size:10px;letter-spacing:.06em;padding:10px 9px}
  .lm-note{font-size:15.5px}
  .lm-icos .ico-item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start}
  .lm-icos .ico-item > .ico{--ico-size:52px;grid-row:1/3;margin-bottom:0}
  .lm-icos .ico-item p{margin-top:4px}
  .lm-phone{width:50%;margin-top:-20%}
  /* dans la visionneuse, l'écran garde une taille lisible et se parcourt du doigt */
  .dlg--work .work__frame img{width:820px;max-width:none}
}