/* Démo « mobile » : application d'intervention sur téléphone + chaîne de publication jusqu'aux stores
   (landing application-mobile) */
.lp-mobile{position:relative;z-index:1;display:grid;grid-template-columns:218px minmax(0,1fr);gap:14px;align-items:center;font-family:Inter,system-ui,sans-serif;color:#20201f;transition:opacity .4s ease}
.lp-mobile.is-fading{opacity:0}
.lp-mobile *,.lp-mobile *::before,.lp-mobile *::after{box-sizing:border-box}
.lp-mobile svg{display:block}

/* ---------- Téléphone (cadre sobre, sans marque) ---------- */
.lp-mobile-phone{min-width:0;padding:7px;border-radius:32px;background:linear-gradient(160deg,#2a2735,#16141d);box-shadow:0 30px 60px -22px rgba(42,20,110,.45),0 10px 22px -12px rgba(42,20,110,.3),inset 0 0 0 1px rgba(255,255,255,.08)}
.lp-mobile-screen{position:relative;display:flex;flex-direction:column;height:452px;border-radius:25px;background:#f7f6fb;overflow:hidden}
.lp-mobile-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:26px;padding:4px 16px 0;font-size:10.5px;font-weight:600;color:#20201f;flex:none;font-variant-numeric:tabular-nums}
.lp-mobile-cam{position:absolute;left:50%;top:8px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#16141d}
.lp-mobile-sig{display:flex;align-items:center;gap:4px}
.lp-mobile-bars{display:flex;align-items:flex-end;gap:1.5px;height:9px}
.lp-mobile-bars b{width:2.5px;border-radius:1px;background:#20201f;transition:opacity .3s ease}
.lp-mobile-bars b:nth-child(1){height:3px}.lp-mobile-bars b:nth-child(2){height:5px}.lp-mobile-bars b:nth-child(3){height:7px}.lp-mobile-bars b:nth-child(4){height:9px}
.lp-mobile-wifi{width:12px;height:9px;transition:opacity .3s ease}
.lp-mobile-batt{position:relative;width:18px;height:9px;border:1.2px solid #20201f;border-radius:3px}
.lp-mobile-batt::before{content:"";position:absolute;inset:1px;right:5px;border-radius:1px;background:#20201f}
.is-offline .lp-mobile-wifi{opacity:.18}
.is-offline .lp-mobile-bars b:nth-child(n+2){opacity:.2}

.lp-mobile-views{position:relative;flex:1;min-height:0}
.lp-mobile-view{position:absolute;inset:0;padding:6px 11px 0;transition:opacity .35s ease,transform .35s ease,visibility .35s}
.lp-mobile-views[data-screen="list"] .lp-mobile-view-detail,.lp-mobile-views[data-screen="detail"] .lp-mobile-view-list{opacity:0;visibility:hidden}
.lp-mobile-views[data-screen="list"] .lp-mobile-view-detail{transform:translateX(22px)}
.lp-mobile-views[data-screen="detail"] .lp-mobile-view-list{transform:translateX(-22px)}

/* Indicateur réseau de l'application */
.lp-mobile-net{display:grid;flex:none}
.lp-mobile-net>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:2px 7px;border-radius:999px;font-size:9.5px;font-weight:600;white-space:nowrap;transition:opacity .3s ease,visibility .3s}
.lp-mobile-net i{width:5px;height:5px;border-radius:50%}
.lp-mobile-net-on{background:#e8f7ee;color:#15803d}.lp-mobile-net-on i{background:#16a34a}
.lp-mobile-net-off{background:#fff4e5;color:#b45309;opacity:0;visibility:hidden}.lp-mobile-net-off i{background:#f59e0b}
.is-offline .lp-mobile-net-on{opacity:0;visibility:hidden}
.is-offline .lp-mobile-net-off{opacity:1;visibility:inherit}

/* Écran 1 : liste */
.lp-mobile-apphead{padding:4px 1px 10px}
.lp-mobile-apphead strong{display:block;font:700 15px/1.2 'Inter Tight',Inter,sans-serif;letter-spacing:-.01em}
.lp-mobile-approw{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:3px}
.lp-mobile-approw small{min-width:0;font-size:10px;color:#62616b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-mobile-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.lp-mobile-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 6px;padding:8px 9px;border-radius:12px;background:#fff;border:1px solid #ebe7f2;box-shadow:0 2px 6px -4px rgba(42,20,110,.25);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.lp-mobile-item.is-tap{transform:scale(.97);border-color:#c8b8fb;box-shadow:0 0 0 3px rgba(96,36,245,.12)}
.lp-mobile-time{grid-row:1;grid-column:1;font-size:10.5px;font-weight:700;color:#4b16d0;font-variant-numeric:tabular-nums;align-self:center}
.lp-mobile-item-body{grid-row:2;grid-column:1/-1;min-width:0}
.lp-mobile-item-body b{display:block;font-size:11.5px;font-weight:600;line-height:1.3;color:#20201f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-mobile-item-body span{display:block;margin-top:1px;font-size:10px;line-height:1.3;color:#62616b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-mobile-chip{grid-row:1;grid-column:2;display:grid;justify-items:end}
.lp-mobile-chip>span{grid-area:1/1;padding:2px 7px;border-radius:999px;font-size:9.5px;font-weight:600;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.lp-mobile-chip-todo{background:#efe9ff;color:#4b16d0}
.lp-mobile-chip-sync{background:#fff4e5;color:#b45309}
.lp-mobile-chip-done{background:#e8f7ee;color:#15803d}
[data-state="todo"] .lp-mobile-chip-todo,[data-state="sync"] .lp-mobile-chip-sync,[data-state="done"] .lp-mobile-chip-done{opacity:1;visibility:inherit}

/* Écran 2 : fiche d'intervention */
.lp-mobile-dhead{display:flex;align-items:center;gap:5px;padding:2px 0 8px}
.lp-mobile-dhead svg{width:14px;height:14px;color:#4b16d0;flex:none}
.lp-mobile-dhead strong{flex:1;min-width:0;font:700 13px/1.2 'Inter Tight',Inter,sans-serif}
.lp-mobile-client{padding:8px 9px;border-radius:11px;background:#fff;border:1px solid #ebe7f2}
.lp-mobile-client b{display:block;font-size:11.5px;font-weight:600;line-height:1.3}
.lp-mobile-client span{display:block;font-size:10px;line-height:1.3;color:#62616b}
.lp-mobile-client em{display:block;margin-top:3px;font-style:normal;font-size:10px;font-weight:600;color:#4b16d0;line-height:1.3}
.lp-mobile-sec{margin:8px 1px 4px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a8496}
.lp-mobile-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.lp-mobile-checks li{display:flex;align-items:center;gap:6px;font-size:10.5px;line-height:1.25;color:#20201f}
.lp-mobile-box{display:grid;place-items:center;flex:none;width:14px;height:14px;border-radius:4px;background:#6024f5;border:1.5px solid #6024f5;color:#fff;transition:background-color .25s ease,border-color .25s ease}
.lp-mobile-box svg{width:10px;height:10px;transition:opacity .25s ease}
.lp-mobile-checks li.is-off .lp-mobile-box{background:#fff;border-color:#cfc9dc}
.lp-mobile-checks li.is-off .lp-mobile-box svg{opacity:0}
.lp-mobile-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.lp-mobile-photo{height:34px;border-radius:8px;overflow:hidden;transition:opacity .35s ease,transform .35s ease}
.lp-mobile-photo svg{width:100%;height:100%}
.lp-mobile-photo.is-p1{background:linear-gradient(135deg,#8d9bb3,#5b6a86)}
.lp-mobile-photo.is-p2{background:linear-gradient(135deg,#b7a99a,#7d6e60)}
.lp-mobile-photo.is-off{opacity:0;transform:scale(.85)}
.lp-mobile-photo-add{display:grid;place-items:center;border:1.5px dashed #cfc9dc;color:#a39db0}
.lp-mobile-photo-add svg{width:14px;height:14px}
.lp-mobile-sign{position:relative;height:42px;border-radius:9px;background:#fff;border:1px solid #ebe7f2}
.lp-mobile-sign svg{position:absolute;left:6px;right:6px;top:2px;width:calc(100% - 12px);height:30px}
.lp-mobile-sign path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease-in-out}
.lp-mobile-sign.is-off path{stroke-dashoffset:1;transition:none}
.lp-mobile-sign span{position:absolute;right:8px;bottom:3px;font-size:9px;color:#8a8496}
.lp-mobile-sign::after{content:"";position:absolute;left:10px;right:10px;bottom:12px;border-bottom:1px dashed #e0dbe9}
.lp-mobile-btn{display:block;margin-top:9px;padding:8px 6px;border-radius:10px;background:#6024f5;color:#fff;text-align:center;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .15s ease,background-color .15s ease}
.lp-mobile-btn.is-tap{transform:scale(.96);background:#4b16d0}

/* Bandeau de synchronisation */
.lp-mobile-toast{position:absolute;left:9px;right:9px;bottom:48px;display:grid;z-index:2;pointer-events:none}
.lp-mobile-toast>span{grid-area:1/1;display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:10px;font-size:10px;font-weight:600;line-height:1.3;box-shadow:0 8px 18px -8px rgba(32,32,31,.45);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease,visibility .3s}
.lp-mobile-toast svg{width:12px;height:12px;flex:none}
.lp-mobile-toast-off{background:#2a2735;color:#fff}
.lp-mobile-toast-on{background:#15803d;color:#fff}
.lp-mobile-toast-on>span{display:contents}
.lp-mobile-toast[data-toast="offline"] .lp-mobile-toast-off,.lp-mobile-toast[data-toast="synced"] .lp-mobile-toast-on{opacity:1;visibility:visible;transform:none}

.lp-mobile-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:none;height:42px;padding:6px 4px 0;border-top:1px solid #ebe7f2;background:#fff}
.lp-mobile-tabs span{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;font-size:9px;font-weight:600;color:#a39db0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-mobile-tabs i{width:16px;height:4px;border-radius:99px;background:#dcd6e6}
.lp-mobile-tabs span.is-on{color:#6024f5}.lp-mobile-tabs span.is-on i{background:#6024f5}

/* ---------- Chaîne de publication ---------- */
.lp-mobile-ops{display:flex;flex-direction:column;gap:10px;min-width:0}
.lp-mobile-card{min-width:0;background:#fff;border:1px solid #e4def2;border-radius:16px;box-shadow:0 22px 50px -24px rgba(42,20,110,.3),0 6px 16px -10px rgba(42,20,110,.16)}
.lp-mobile-release{padding:12px 12px 12px}
.lp-mobile-rhead{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid #f0edf6}
.lp-mobile-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#7b4bff,#4b16d0);color:#fff;font:700 14px/1 'Inter Tight',Inter,sans-serif}
.lp-mobile-rid{min-width:0}
.lp-mobile-rid b{display:block;font:600 13px/1.25 'Inter Tight',Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-mobile-rid b em{font-style:normal;margin-left:3px;padding:1px 6px;border-radius:999px;background:#efe9ff;color:#4b16d0;font:600 11px/1.4 Inter,sans-serif;vertical-align:1px}
.lp-mobile-rid small{display:block;margin-top:2px;font-size:11px;color:#62616b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lp-mobile-steps{list-style:none;margin:0;padding:6px 0 4px;position:relative}
.lp-mobile-steps li{position:relative;display:flex;gap:9px;padding:5px 0;min-width:0}
.lp-mobile-steps li+li::before{content:"";position:absolute;left:9.5px;top:-6px;height:11px;width:1px;background:#e4def2}
.lp-mobile-dot{position:relative;display:grid;place-items:center;flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:#f3f1f8;border:1.5px solid #e0dbe9;transition:background-color .3s ease,border-color .3s ease}
.lp-mobile-dot>span{display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .25s ease}
.lp-mobile-dot>span svg{width:11px;height:11px}
.lp-mobile-spin{position:absolute;inset:-1.5px;border-radius:50%;border:2px solid #d9ccff;border-top-color:#6024f5;opacity:0;animation:lpMobSpin .8s linear infinite;transition:opacity .2s ease}
[data-state="run"]>.lp-mobile-dot{background:#fff;border-color:transparent}
[data-state="run"]>.lp-mobile-dot .lp-mobile-spin{opacity:1}
[data-state="done"]>.lp-mobile-dot{background:#16a34a;border-color:#16a34a}
[data-state="done"]>.lp-mobile-dot>span{opacity:1}
.lp-mobile-step-body{flex:1;min-width:0}
.lp-mobile-step-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.lp-mobile-step-top b{min-width:0;font-size:12px;font-weight:600;line-height:1.3;color:#20201f;transition:color .3s ease}
.lp-mobile-step-top em{flex:none;font-style:normal;font-size:10.5px;font-weight:600;color:#16a34a;white-space:nowrap;transition:opacity .3s ease}
.lp-mobile-step-body small{display:block;margin-top:1px;font-size:10.5px;line-height:1.35;color:#62616b}
[data-state="wait"] .lp-mobile-step-top b{color:#8a8496}
[data-state="wait"] .lp-mobile-step-top em,[data-state="run"] .lp-mobile-step-top em{opacity:0}

.lp-mobile-stores{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;margin-top:6px}
.lp-mobile-store{display:flex;flex-direction:column;gap:6px;min-width:0;padding:8px 9px;border-radius:11px;background:#f8f7fb;border:1px solid #ebe7f2;transition:background-color .35s ease,border-color .35s ease}
.lp-mobile-store[data-state="live"]{background:#f3fbf6;border-color:#cdeed9}
.lp-mobile-store-name{min-width:0}
.lp-mobile-store-name b{display:block;font-size:12px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-mobile-store-name small{display:block;font-size:10.5px;color:#62616b;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-mobile-pill{display:grid;justify-items:start}
.lp-mobile-pill>span{grid-area:1/1;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:600;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.lp-mobile-pill svg{width:10px;height:10px}
.lp-mobile-pill .st-wait{background:#efecf3;color:#62616b}
.lp-mobile-pill .st-review{background:#fff4e5;color:#b45309}
.lp-mobile-pill .st-review i{width:6px;height:6px;border-radius:50%;background:#f59e0b;animation:lpMobPulse 1.2s ease-in-out infinite}
.lp-mobile-pill .st-live{background:#16a34a;color:#fff}
[data-state="wait"]>.lp-mobile-pill .st-wait,[data-state="review"]>.lp-mobile-pill .st-review,[data-state="live"]>.lp-mobile-pill .st-live{opacity:1;visibility:inherit}

/* Suivi en production */
.lp-mobile-prod{padding:11px 12px 10px;transition:opacity .45s ease,transform .45s ease}
.lp-mobile-prod.is-off{opacity:0;transform:translateY(8px)}
.lp-mobile-prod-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lp-mobile-prod-head span{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;font-weight:600;color:#20201f}
.lp-mobile-prod-head span i{flex:none;width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.lp-mobile-prod-head small{flex:none;font-size:10.5px;color:#8a8496;white-space:nowrap}
.lp-mobile-kpis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:8px}
.lp-mobile-kpi{min-width:0}
.lp-mobile-kpi b{display:block;font:700 19px/1.1 'Inter Tight',Inter,sans-serif;color:#20201f;font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-mobile-kpi span{display:block;margin-top:2px;font-size:10.5px;line-height:1.3;color:#62616b}
.lp-mobile-gauge{height:6px;margin-top:8px;border-radius:99px;background:#efecf5;overflow:hidden}
.lp-mobile-gauge i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#6024f5,#a24bf0 70%,#f4206e);transition:width .9s cubic-bezier(.4,0,.2,1)}
.lp-mobile-src{margin-top:6px;font-size:10px;color:#8a8496;line-height:1.35}

@keyframes lpMobSpin{to{transform:rotate(360deg)}}
@keyframes lpMobPulse{50%{opacity:.35}}

.lp-mobile-device{min-width:0}
.lp-mobile-vm{display:none}

/* Petits écrans : même scène, téléphone réduit à l'échelle (place réservée par le conteneur) et chaîne compacte */
@media (max-width:560px){
  .lp-mobile{--s:.8;grid-template-columns:calc(218px * var(--s)) minmax(0,1fr);gap:12px}
  .lp-mobile-device{width:calc(218px * var(--s));height:calc(466px * var(--s))}
  .lp-mobile-phone{width:218px;transform:scale(var(--s));transform-origin:0 0}
  .lp-mobile-ops{gap:8px}
  .lp-mobile-release{padding:10px}
  .lp-mobile-rhead{padding-bottom:8px}
  .lp-mobile-store-name small{display:none}
  .lp-mobile-store{padding:7px 8px}
  .lp-mobile-prod{padding:9px 10px 8px}
}
@media (max-width:459px){
  .lp-mobile{--s:.66;grid-template-columns:calc(218px * var(--s)) minmax(0,1fr);gap:10px 10px}
  .lp-mobile-ops{display:contents}
  .lp-mobile-device{grid-column:1;grid-row:1}
  .lp-mobile-release{grid-column:2;grid-row:1;align-self:center;padding:9px}
  .lp-mobile-prod{grid-column:1/-1;grid-row:2}
  .lp-mobile-rhead{gap:7px;align-items:flex-start}
  .lp-mobile-icon{width:24px;height:24px;border-radius:7px;font-size:12px}
  .lp-mobile-rid b{font-size:12px}
  .lp-mobile-rid b em{display:none}
  .lp-mobile-vm{display:inline}
  .lp-mobile-rid small{font-size:10px;white-space:normal;line-height:1.3}
  .lp-mobile-steps{padding:4px 0 2px}
  .lp-mobile-steps li{gap:7px;padding:3px 0;align-items:center}
  .lp-mobile-steps li+li::before{left:8.5px;top:-4px;height:8px}
  .lp-mobile-dot{width:18px;height:18px;margin-top:0}
  .lp-mobile-step-top b{font-size:11px}
  .lp-mobile-step-top em,.lp-mobile-step-body small{display:none}
  .lp-mobile-stores{grid-template-columns:minmax(0,1fr);gap:5px}
  .lp-mobile-store{gap:4px;padding:5px 7px 6px}
  .lp-mobile-store-name b{font-size:11px}
  .lp-mobile-pill>span{padding:2px 6px;font-size:10px}
  .lp-mobile-kpi b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.lp-mobile *{animation:none!important;transition:none!important}}