/* ============================================================
   hero.css — animation « visite guidée » du comptoir (hero Pilot)
   Source : pilot-hero-guided-v7-2.html, extrait + scopé sous .hero-demo
   pour ne JAMAIS fuir sur la page (aucune règle globale body/* conservée).
   Les keyframes sont nommées de façon unique (hero*) et restent globales.
   ============================================================ */

/* ----- Conteneur responsive (mise à l'échelle du moniteur 1180px) ----- */
.hero-demo .hero-stage-outer{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;   /* PAS de stretch : le moniteur garde sa hauteur 674 */
  /* on laisse l'ombre portée du moniteur déborder ; le débordement
     horizontal du bloc 1180px est clippé par la <section> hero
     (classe Tailwind « overflow-hidden »), donc pas de scroll de page */
  overflow:visible;
}
.hero-demo .hero-stage{
  width:1180px;
  flex:0 0 1180px;
  align-self:flex-start;
  transform-origin:top center;
  will-change:transform;
}

/* ===== Châssis moniteur ===== */
.hero-demo .monitor{width:1180px;max-width:100%;border-radius:15px;background:linear-gradient(180deg,#0e1a16,#0a1411);padding:14px 14px 0;box-shadow:0 44px 100px rgba(0,0,0,.6),0 0 0 1px rgba(120,200,170,.13),inset 0 1px 0 rgba(255,255,255,.05);position:relative;}
.hero-demo .scene{position:relative;width:100%;height:660px;border-radius:8px 8px 0 0;overflow:hidden;background:#c6cdd6;isolation:isolate;}

/* ===== LGO mocké (panier / vente) ===== */
.hero-demo .lgo{position:absolute;inset:0;display:flex;flex-direction:column;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;font-size:12.5px;color:#1c2533;background:#dfe4ea;transition:filter .55s ease;}
.hero-demo .lgo .titlebar{height:32px;flex:none;background:linear-gradient(180deg,#2f5b9e,#244a83);color:#fff;display:flex;align-items:center;gap:9px;padding:0 10px;}
.hero-demo .lgo .titlebar .logo{width:17px;height:17px;border-radius:3px;background:#fff;display:grid;place-items:center;color:#244a83;font-weight:800;font-size:11px;}
.hero-demo .lgo .titlebar .title{font-weight:600;}.hero-demo .lgo .titlebar .sub{opacity:.7;font-weight:400;font-size:11.5px;}
.hero-demo .lgo .titlebar .wb{margin-left:auto;display:flex;gap:8px;opacity:.85;font-size:11px;}
.hero-demo .lgo .menubar{display:flex;gap:2px;background:#eaedf1;border-bottom:1px solid #b7c0cc;padding:2px 6px;font-size:11.5px;flex:none;}
.hero-demo .lgo .menubar div{padding:3px 9px;border-radius:3px;color:#2b3441;}.hero-demo .lgo .menubar div.on{background:#2f5b9e;color:#fff;}
.hero-demo .lgo .toolbar{display:flex;align-items:center;gap:4px;background:linear-gradient(180deg,#f6f8fa,#e6eaef);border-bottom:1px solid #b7c0cc;padding:5px 8px;flex:none;}
.hero-demo .lgo .tbtn{display:flex;align-items:center;gap:6px;padding:4px 9px;background:#fbfcfd;border:1px solid #c2cad6;border-radius:3px;color:#33404f;font-size:11px;}
.hero-demo .lgo .tbtn .ic{width:14px;height:14px;border-radius:2px;background:#d6dde7;border:1px solid #aeb9c8;}
.hero-demo .lgo .tbtn.pri{background:#e6eef8;border-color:#9cb6d6;color:#234a83;font-weight:600;}
.hero-demo .lgo .tbsep{width:1px;height:20px;background:#c8cfd9;margin:0 4px;}.hero-demo .lgo .tbar-r{margin-left:auto;color:#5b6675;font-size:11px;}
.hero-demo .lgo .body{flex:1;background:#eef1f5;padding:10px;display:flex;flex-direction:column;gap:10px;overflow:hidden;}
.hero-demo .lgo .patbar{background:#fff;border:1px solid #9aa7b8;border-radius:4px;overflow:hidden;flex:none;}
.hero-demo .lgo .patbar .pat-h{background:#e3e8ef;border-bottom:1px solid #9aa7b8;padding:5px 10px;font-weight:700;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:#3a4757;display:flex;align-items:center;gap:7px;}
.hero-demo .lgo .patbar .pat-h::before{content:"";width:8px;height:8px;border-radius:50%;background:#3873c4;}
.hero-demo .lgo .patbar .pat-fields{display:flex;flex-wrap:wrap;gap:6px 24px;padding:9px 12px;align-items:center;}
.hero-demo .lgo .patbar .pat-fields span{font-size:12px;font-weight:600;color:#1c2533;}
.hero-demo .lgo .patbar .pat-fields i{font-style:normal;color:#5b6675;font-weight:500;font-size:10.5px;margin-right:6px;}
.hero-demo .lgo .patbar .pat-fields .m{font-family:"Consolas",monospace;font-weight:500;font-size:11px;}
.hero-demo .lgo .patbar .vit{margin-left:auto;color:#1e7a45;font-weight:600;display:flex;align-items:center;gap:5px;}
.hero-demo .lgo .patbar .vit::before{content:"";width:7px;height:7px;border-radius:50%;background:#2faa5e;}
.hero-demo .lgo .panier{background:#fff;border:1px solid #9aa7b8;border-radius:4px;overflow:hidden;flex:none;}
.hero-demo .lgo .panier .ph{background:#e3e8ef;border-bottom:1px solid #9aa7b8;padding:6px 10px;display:flex;align-items:center;font-size:11px;color:#3a4757;}
.hero-demo .lgo .panier .ph b{font-size:12px;color:#27313f;}.hero-demo .lgo .panier .ph .r{margin-left:auto;color:#5b6675;}
.hero-demo .lgo table{width:100%;border-collapse:collapse;font-size:11.5px;}
.hero-demo .lgo thead th{background:#eef1f5;color:#5b6675;font-weight:600;font-size:10px;text-align:left;padding:6px 10px;border-bottom:1px solid #9aa7b8;text-transform:uppercase;letter-spacing:.3px;}
.hero-demo .lgo th.n,.hero-demo .lgo td.n{text-align:right;font-variant-numeric:tabular-nums;}
.hero-demo .lgo tbody td{padding:8px 10px;border-bottom:1px solid #e8ecf1;}.hero-demo .lgo tbody tr:nth-child(even){background:#f6f8fa;}
.hero-demo .lgo .pr{font-weight:600;}.hero-demo .lgo .pr .f{font-weight:400;color:#5b6675;font-size:10.5px;}
.hero-demo .lgo .cip{font-family:"Consolas",monospace;color:#5b6675;font-size:10.5px;}
.hero-demo .lgo .ptot{display:flex;align-items:center;gap:12px;background:#f2f5f8;border-top:1px solid #9aa7b8;padding:8px 12px;}
.hero-demo .lgo .ptot .k{font-size:10px;color:#5b6675;text-transform:uppercase;letter-spacing:.3px;}
.hero-demo .lgo .ptot .v{font-size:14px;font-weight:700;color:#27313f;font-variant-numeric:tabular-nums;}
.hero-demo .lgo .ptot .enc{margin-left:auto;background:#2f5b9e;color:#fff;font-weight:700;font-size:12px;padding:6px 14px;border-radius:4px;}
.hero-demo .lgo .searchbar{flex:1;background:#fbfcfd;border:1px dashed #b7c0cc;border-radius:4px;padding:11px 13px;color:#8a96a6;font-size:12px;display:flex;align-items:flex-start;}
.hero-demo .lgo .status{height:22px;flex:none;background:linear-gradient(180deg,#e9edf2,#dde2e9);border-top:1px solid #b7c0cc;display:flex;align-items:center;gap:14px;padding:0 12px;font-size:10.5px;color:#566273;}
.hero-demo .lgo .status .ok{color:#1e7a45;display:flex;align-items:center;gap:5px;}.hero-demo .lgo .status .ok::before{content:"";width:7px;height:7px;border-radius:50%;background:#2faa5e;}
.hero-demo .lgo .status .r{margin-left:auto;font-variant-numeric:tabular-nums;}
.hero-demo .taskbar{position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(180deg,#33414f,#222d38);display:flex;align-items:center;gap:8px;padding:0 10px;z-index:5;transition:filter .55s ease;}
.hero-demo .taskbar .start{width:22px;height:18px;border-radius:3px;background:#2f5b9e;}
.hero-demo .taskbar .task{height:20px;padding:0 12px;display:flex;align-items:center;border-radius:3px;background:#3f4e5e;color:#cdd6df;font-size:11px;font-family:"Segoe UI",sans-serif;}
.hero-demo .taskbar .task.active{background:#4d5f72;box-shadow:inset 0 -2px 0 #6fa8e0;}
.hero-demo .taskbar .clock{margin-left:auto;color:#cdd6df;font-size:11px;font-family:"Segoe UI",sans-serif;}

.hero-demo .dim{position:absolute;inset:0;z-index:6;background:rgba(8,18,13,0);pointer-events:none;transition:background .55s ease;}
.hero-demo .glow{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(380px 300px at 86% 78%,rgba(43,200,90,.30),rgba(43,200,90,0) 60%);transition:opacity .7s ease;}

/* ===== Orbital : Gely (image réelle) + pastilles SVG nettes ===== */
.hero-demo .orbital{position:absolute;right:42px;bottom:52px;width:184px;height:194px;z-index:8;opacity:0;transform:translateY(16px) scale(.9);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.9,.3,1.05);}
.hero-demo .orbital .gely,.hero-demo .orbital .pas{position:absolute;display:block;}
.hero-demo .orbital .gely{filter:drop-shadow(0 9px 16px rgba(16,38,26,.45));}
.hero-demo .orbital .pas{transition:transform .45s cubic-bezier(.2,1.3,.4,1),filter .4s ease,opacity .4s ease;transform-origin:center center;filter:drop-shadow(0 4px 7px rgba(16,38,26,.3));overflow:visible;}
.hero-demo .orbital.tour .pas{opacity:.34;filter:grayscale(.55) opacity(.9) drop-shadow(0 3px 6px rgba(16,38,26,.2));}
.hero-demo .orbital .pas.hot{opacity:1;z-index:3;filter:drop-shadow(0 0 13px rgba(43,208,106,.9)) drop-shadow(0 0 5px rgba(43,208,106,.8)) brightness(1.04);animation:heroPasPulse 1.7s ease-in-out infinite;}
@keyframes heroPasPulse{0%,100%{transform:scale(1.14);}50%{transform:scale(1.28);}}

/* ===== Fenêtre détail : captures réelles + spotlight ===== */
.hero-demo .pwin{position:absolute;left:84px;top:150px;width:470px;z-index:9;border-radius:11px;overflow:hidden;box-shadow:0 34px 74px rgba(8,20,14,.58),0 0 0 1px rgba(0,0,0,.08);background:#fff;opacity:0;transform:translateX(-30px) scale(.97);transition:opacity .55s ease,transform .65s cubic-bezier(.2,.9,.3,1.05);}
.hero-demo .pwin.open{opacity:1;transform:none;}
.hero-demo .shotwrap{position:relative;width:100%;}.hero-demo .shotwrap > img{width:100%;display:block;}
.hero-demo .shot{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;}.hero-demo .shot.show{opacity:1;position:relative;}
.hero-demo .hl{position:absolute;border-radius:8px;border:2px solid rgba(43,208,106,.92);opacity:0;box-shadow:0 0 0 9999px rgba(8,16,12,0);transition:opacity .45s ease,box-shadow .55s ease;pointer-events:none;}
.hero-demo .hl.on{opacity:1;box-shadow:0 0 0 9999px rgba(8,16,12,.55),inset 0 0 16px rgba(43,208,106,.45);animation:heroHlBorder 1.9s ease-in-out infinite;}
@keyframes heroHlBorder{0%,100%{border-color:rgba(43,208,106,.92);}50%{border-color:rgba(43,208,106,.4);}}

/* ===== Bulle d'explication intégrée à l'écran ===== */
.hero-demo .cap{position:absolute;z-index:12;width:362px;max-width:46%;background:linear-gradient(180deg,rgba(12,27,20,.97),rgba(8,19,13,.97));border:1px solid rgba(95,227,154,.34);border-radius:13px;padding:14px 17px;box-shadow:0 20px 44px rgba(0,0,0,.52),0 0 0 1px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);transition:left .55s cubic-bezier(.3,.9,.3,1),top .55s cubic-bezier(.3,.9,.3,1),right .55s cubic-bezier(.3,.9,.3,1),bottom .55s cubic-bezier(.3,.9,.3,1),opacity .4s ease;}
.hero-demo .cap .tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#06150d;background:linear-gradient(90deg,#5fe39a,#2bd06a);border-radius:20px;padding:4px 12px;margin-bottom:8px;box-shadow:0 2px 9px rgba(43,208,106,.42);}
.hero-demo .cap .txt{font-size:13.5px;line-height:1.48;color:#eaf8f0;font-weight:500;}.hero-demo .cap .txt b{color:#7af0b3;font-weight:700;}
.hero-demo .cap::after{content:"";position:absolute;width:15px;height:15px;background:#0b1a13;border:1px solid rgba(95,227,154,.34);transform:rotate(45deg);opacity:0;transition:opacity .3s ease;}
.hero-demo .cap.point-r::after{right:-8px;top:50%;margin-top:-8px;border-left:0;border-bottom:0;opacity:1;}
.hero-demo .cap.point-l::after{left:-8px;top:48%;margin-top:-8px;border-right:0;border-top:0;opacity:1;}
.hero-demo .cap.at-orb{right:246px;bottom:60px;left:auto;top:auto;}
.hero-demo .cap.at-win{left:584px;top:248px;right:auto;bottom:auto;}
.hero-demo .cap.at-center{left:50%;top:80px;transform:translateX(-50%);right:auto;bottom:auto;}

/* ===== Barre de lecture (commandes au survol) ===== */
.hero-demo .ctl{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:15;display:flex;gap:8px;align-items:center;background:rgba(8,18,13,.82);border:1px solid rgba(120,200,170,.28);border-radius:11px;padding:7px 9px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 26px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s ease;}
.hero-demo .scene:hover .ctl,.hero-demo .scene:focus-within .ctl,.hero-demo .scene.show-ctl .ctl{opacity:1;pointer-events:auto;}
.hero-demo .ctl button{display:flex;align-items:center;justify-content:center;height:34px;min-width:34px;padding:0 13px;font-size:13px;font-weight:700;color:#cfeede;background:rgba(120,200,170,.12);border:1px solid rgba(120,200,170,.22);border-radius:8px;cursor:pointer;font-family:inherit;transition:background .2s ease;}
.hero-demo .ctl button:hover{background:rgba(120,200,170,.24);}
.hero-demo .ctl button:focus-visible{outline:2px solid #5fe39a;outline-offset:2px;}
.hero-demo .ctl button#toggle{background:rgba(43,208,106,.22);border-color:rgba(43,208,106,.45);color:#9ff0c2;font-size:15px;min-width:42px;}

/* ===== Mouvement réduit : on coupe l'autoplay (géré en JS) et les boucles ===== */
@media (prefers-reduced-motion: reduce){
  .hero-demo .orbital .pas.hot{animation:none;}
  .hero-demo .hl.on{animation:none;}
  .hero-demo .ctl{opacity:1;pointer-events:auto;} /* commandes toujours visibles pour piloter à la main */
}

/* ===== Plein écran de la démo (lisibilité — agrandissement géré par hero.js) ===== */
.hero-demo:fullscreen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b1410;padding:2.5vmin;}
.hero-demo:-webkit-full-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b1410;}
.hero-demo:fullscreen .hero-stage-outer{width:100%;}
.hero-demo:fullscreen .hero-fs-bar{margin-top:20px;}
.hero-demo:fullscreen #heroFullscreen{color:#9ff0c2;border-color:rgba(159,240,194,.45);background:rgba(255,255,255,.08);}
.hero-demo:-webkit-full-screen #heroFullscreen{color:#9ff0c2;border-color:rgba(159,240,194,.45);background:rgba(255,255,255,.08);}