/* Senshin — page démo : un ordinateur portable fermé qui s'ouvre sur un bureau, puis l'appli */
.demo{padding:24px 0 72px;overflow:clip}
.demo-stage{position:relative;--w:min(1040px,86vw);display:flex;flex-direction:column;align-items:center}
.dm-scene{width:100%;perspective:5200px;perspective-origin:50% 40%;display:flex;justify-content:center;align-items:flex-start;padding:calc(var(--w) * .03) 0 0;height:calc(var(--w) * .8)}
.dm-mac{position:relative;width:var(--w);aspect-ratio:1.55;transform-style:preserve-3d;transform:translateY(calc(var(--w) * -.36)) rotateX(-11deg);transition:transform 1.8s cubic-bezier(.55,0,.2,1);--t:calc(var(--w) * .006);--alu:linear-gradient(180deg,#e6e7e9,#c9cbce 55%,#b7b9bd)}
:root[data-theme="dark"] .dm-mac,:root:not([data-theme]) .dm-mac{--alu:linear-gradient(180deg,#d8d9dc,#b9bbbf 55%,#a3a5aa)}
/* Base : dessus (clavier), tranche avant avec l'encoche, ombre au sol */
.dm-deck{position:absolute;left:0;right:0;top:calc(100% + var(--t));height:100%;transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d;border-radius:0 0 3.2% 3.2% / 0 0 4.6% 4.6%;background:linear-gradient(180deg,#c9cbcf,#d9dbde 25%,#d3d5d8 80%,#c4c6ca);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.dm-shadow{position:absolute;left:-4%;right:-4%;top:-2%;bottom:-10%;border-radius:8%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,.25) 60%,transparent);filter:blur(18px);transform:translateZ(calc(var(--w) * -.019))}
.dm-front{position:absolute;left:0;right:0;top:calc(100% + var(--t));height:calc(var(--w) * .016);transform:translateZ(calc(var(--w) / 1.55));border-radius:calc(var(--w) * .006) calc(var(--w) * .006) calc(var(--w) * .014) calc(var(--w) * .014) / calc(var(--w) * .004) calc(var(--w) * .004) calc(var(--w) * .014) calc(var(--w) * .014);
  background:linear-gradient(90deg,rgba(60,62,66,.35),rgba(60,62,66,0) 2.2%,rgba(60,62,66,0) 97.8%,rgba(60,62,66,.35)),linear-gradient(180deg,#fdfdfd 0,#e9eaec 14%,#cfd1d4 40%,#acaeb3 72%,#8c8e93 100%);box-shadow:inset 0 1px 0 #fff}
.dm-front::after{content:"";position:absolute;left:50%;top:0;width:11%;height:46%;transform:translateX(-50%);border-radius:0 0 50% 50% / 0 0 100% 100%;background:linear-gradient(180deg,#8f9196,#b9bbbf 60%,#d3d5d8);box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}
.dm-front::before{content:"";position:absolute;left:3%;right:3%;bottom:-90%;height:90%;border-radius:50%;background:rgba(0,0,0,.38);filter:blur(7px)}
.dm-hinge{position:absolute;left:7%;right:7%;top:calc(100% - var(--t) * .2);height:calc(var(--t) * 1.6);border-radius:0 0 6px 6px;background:linear-gradient(180deg,#141416,#2c2d30 60%,#0f0f10)}
.dm-keys{position:absolute;left:12.5%;right:12.5%;top:4.5%;height:47%;display:flex;flex-direction:column;gap:1.1%;padding:.9%;border-radius:1.2%;background:#0b0b0c;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.dm-row{display:flex;gap:.55%;flex:1}.dm-row.fn{flex:.55}
.dm-row i{flex:1;border-radius:14%/22%;background:linear-gradient(180deg,#232325,#18181a);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.dm-row i.w15{flex:1.5}.dm-row i.w18{flex:1.8}.dm-row i.w22{flex:2.2}.dm-row i.sp{flex:5.4}
.dm-spk{position:absolute;top:5%;height:47%;width:8%;border-radius:4px;background:linear-gradient(90deg,#bfc1c5,#b3b5b9);opacity:.7}
.dm-spk.l{left:3%}.dm-spk.r{right:3%}
.dm-pad{position:absolute;left:30%;width:40%;top:56%;height:38%;border-radius:2.4%/3.6%;background:linear-gradient(180deg,#d6d8db,#cdd0d3);box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),inset 0 1px 2px rgba(0,0,0,.05)}
/* Écran : capot en aluminium, tranche, dalle noire à bords fins avec encoche */
.dm-lid{position:absolute;inset:0;transform-origin:50% 100%;transform:rotateX(-90deg);transform-style:preserve-3d;transition:transform 1.8s cubic-bezier(.55,0,.2,1)}
.dm-lid-back,.dm-lid-front{position:absolute;inset:0;border-radius:3.2% 3.2% 1.3% 1.3% / 5% 5% 2% 2%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dm-lid-back{transform:translateZ(calc(var(--t) * -1)) rotateY(180deg);background:radial-gradient(120% 70% at 50% 100%,rgba(255,255,255,.55),transparent 60%),linear-gradient(0deg,#e3e4e7 0%,#cfd1d4 35%,#c1c3c7 70%,#b4b6ba 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 0 40px rgba(0,0,0,.06)}
.dm-lid-edge{position:absolute;left:0;right:0;top:0;height:var(--t);transform-origin:50% 0;transform:rotateX(90deg);background:linear-gradient(90deg,rgba(60,62,66,.35),rgba(60,62,66,0) 2.2%,rgba(60,62,66,0) 97.8%,rgba(60,62,66,.35)),linear-gradient(180deg,#f6f7f8,#c7c9cd 45%,#8f9196);border-radius:calc(var(--w) * .006)}
.dm-lid-front{background:#070707;padding:1.05% 1.05% 1.75%;box-shadow:0 0 0 1px #a6a8ac,0 0 0 1.6px #6c6e72,inset 0 0 0 1px #2a2b2e}
.dm-lid-front::before{content:"";position:absolute;top:1.05%;left:50%;width:10.5%;height:3.1%;transform:translateX(-50%);background:#0a0a0a;border-radius:0 0 22% 22% / 0 0 40% 40%;z-index:9}
.dm-lid-front::after{content:"";position:absolute;top:1.9%;left:50%;width:.7%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 40% 40%,#2c3550,#0b0d14);z-index:10}
.demo-stage:not([data-state="closed"]) .dm-mac{transform:translateY(0) rotateX(-1.4deg)}
.demo-stage:not([data-state="closed"]) .dm-lid{transform:rotateX(1.4deg)}

/* L'écran : bureau, barre des menus, Dock, fenêtre de l'appli */
.dm-screen{position:relative;height:100%;border-radius:2% 2% .4% .4% / 3.2% 3.2% .6% .6%;overflow:hidden;background:#000;container-type:inline-size;color:var(--ink);font-family:var(--ui)}
.dm-screen>*{opacity:0;transition:opacity .8s}
.on .dm-screen>.dm-wall,.on .dm-screen>.dm-menubar,.on .dm-screen>.dm-dock,.on .dm-screen>.dm-desk-icon{opacity:1}
.dm-wall{position:absolute;inset:0;background:url(footer-nuit.webp) 50% 70% / cover;filter:saturate(1.05)}
.dm-menubar{position:absolute;left:0;right:0;top:0;height:2.5cqw;display:flex;align-items:center;gap:1.7cqw;padding:0 1.4cqw;font-size:1.12cqw;color:#fff;background:rgba(30,32,40,.35);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);transform:translateY(-100%);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1) .2s}
.on .dm-menubar{transform:none}
.dm-menubar b{font-weight:700}
.dm-mark{width:1.25cqw;height:1.25cqw;border-radius:.35cqw;background:#fff;opacity:.9}
.dm-sp{flex:1}
.dm-ico{width:1.5cqw;height:.95cqw;border:.12cqw solid #fff;border-radius:.25cqw;opacity:.9}
.dm-wifi{border:0;background:radial-gradient(circle at 50% 100%,#fff 0 .22cqw,transparent .24cqw),radial-gradient(circle at 50% 100%,transparent 0 .45cqw,#fff .47cqw .6cqw,transparent .62cqw),radial-gradient(circle at 50% 100%,transparent 0 .8cqw,#fff .82cqw .95cqw,transparent .97cqw)}
.dm-bat{position:relative;width:2cqw;background:linear-gradient(90deg,#fff 0 72%,transparent 72%) .18cqw .18cqw / calc(100% - .36cqw) calc(100% - .36cqw) no-repeat}
.dm-clock{font-variant-numeric:tabular-nums}
.dm-desk-icon{position:absolute;top:5cqw;right:3cqw;display:flex;flex-direction:column;align-items:center;gap:.5cqw;background:none;border:0;padding:.6cqw;border-radius:.8cqw;cursor:default;font:inherit;color:#fff}
.dm-desk-icon img{width:5.4cqw;height:5.4cqw;border-radius:1.2cqw;box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.45)}
.dm-desk-icon span{font-size:1.1cqw;padding:.1cqw .6cqw;border-radius:.4cqw;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.dm-desk-icon.sel{background:rgba(255,255,255,.18)}
.dm-desk-icon.sel span{background:#2f62ff;text-shadow:none}
.dm-dock{position:absolute;left:50%;bottom:.9cqw;display:flex;align-items:flex-end;gap:.7cqw;padding:.7cqw .8cqw;border-radius:1.6cqw;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);transform:translate(-50%,140%);transition:opacity .6s,transform .9s cubic-bezier(.2,.8,.2,1) .35s}
.on .dm-dock{transform:translate(-50%,0)}
.dm-dock i{position:relative;display:block;width:4cqw;height:4cqw;border-radius:1cqw;box-shadow:0 .3cqw .8cqw rgba(0,0,0,.3)}
.dm-dock .d1{background:linear-gradient(160deg,#6fb6ff,#1a67e8)}
.dm-dock .d2{background:linear-gradient(160deg,#fafafa,#d6d6d6)}
.dm-dock .d3{background:linear-gradient(160deg,#7ef0a1,#22b45a)}
.dm-dock .d4{background:linear-gradient(160deg,#ffd76a,#f39c12)}
.dm-dock .d5{background:linear-gradient(160deg,#c7a6ff,#7b4dff)}
.dm-dock .d6{background:linear-gradient(160deg,#ff8f8f,#e8413e)}
.dm-dock .d7{background:linear-gradient(160deg,#9aa0a8,#5b6068)}
.dm-dock .dm-dock-sep{width:1px;height:3.4cqw;border-radius:0;background:rgba(255,255,255,.35);box-shadow:none;margin:0 .2cqw .3cqw}
.dm-dock .dm-dock-app{box-shadow:none}
.dm-dock .dm-dock-app img{width:100%;height:100%;border-radius:1cqw;display:block}
.dm-dock .dm-dock-app::after{content:"";position:absolute;left:50%;bottom:-.55cqw;width:.36cqw;height:.36cqw;border-radius:50%;background:#fff;transform:translateX(-50%);opacity:0;transition:opacity .4s}
.app-open .dm-dock-app::after{opacity:.9}
.dm-win{position:absolute;top:3.2cqw;left:1.2cqw;right:1.2cqw;bottom:6.8cqw;border-radius:1cqw;overflow:hidden;background:var(--bg);box-shadow:0 2cqw 5cqw rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12);display:flex;flex-direction:column;transform-origin:0 0;pointer-events:none}
.dm-win-bar{height:2.6cqw;flex:none;display:flex;align-items:center;gap:.65cqw;padding:0 1.1cqw;background:var(--surface);border-bottom:1px solid var(--line);font-size:1.1cqw;color:var(--muted)}
.dm-win-bar i{width:1.05cqw;height:1.05cqw;border-radius:50%;background:#ff5f57}.dm-win-bar i:nth-child(2){background:#febc2e}.dm-win-bar i:nth-child(3){background:#28c840}
.dm-win-bar span{margin:0 auto;transform:translateX(-2.5cqw)}
.dm-win-body{flex:1;min-height:0}
.dm-win-body .app{height:100%}
.dm-cursor{position:absolute;left:0;top:0;width:1.9cqw;height:1.9cqw;z-index:20;filter:drop-shadow(0 .15cqw .3cqw rgba(0,0,0,.4));pointer-events:none}

/* Boutons sous l'ordinateur */
.dm-cta{position:relative;margin-top:24px;display:flex;gap:12px;z-index:3;transition:opacity .5s}
.demo-stage:not([data-state="closed"]) .dm-open{display:none}
.dm-replay{display:none}
.demo-stage[data-state="done"] .dm-replay{display:inline-flex}


/* Version téléphone de la démo (petits écrans) : écran verrouillé, déverrouillage, toucher sur l'appli */
.dp-scene{display:none;justify-content:center;padding:8px 0 0}
@media (max-width:760px){.dm-scene{display:none}.dp-scene{display:flex}}
.dp-phone{position:relative;width:min(290px,76vw);aspect-ratio:9/19.3;background:#050505;border-radius:14.4%/6.7%;padding:.9%;box-shadow:0 0 0 1px var(--alu-2),0 40px 70px -24px var(--shadow);container-type:inline-size}
.dp-screen{position:relative;height:100%;border-radius:13.9%/6.5%;overflow:hidden;background:#000;color:#fff;font-family:var(--ui)}
.dp-island{position:absolute;top:3.4cqw;left:50%;width:30%;height:8.5cqw;border-radius:99px;background:#000;transform:translateX(-50%);z-index:30}
.dp-wall{position:absolute;inset:0;background:url(footer-nuit.webp) 62% 50% / cover;opacity:0;transition:opacity .7s}
.dp-status{position:absolute;top:4.6cqw;left:9cqw;right:8cqw;display:flex;justify-content:space-between;align-items:center;font-size:4.2cqw;font-weight:600;z-index:25;opacity:0;transition:opacity .5s .2s}
.dp-ind{display:flex;gap:1.2cqw;align-items:center}.dp-ind i{display:block;width:4.2cqw;height:2.6cqw;border-radius:.8cqw;background:#fff}.dp-ind i:first-child{width:3.2cqw;border-radius:.5cqw;opacity:.85}.dp-ind i:last-child{width:6cqw;border:.5cqw solid #fff;background:linear-gradient(90deg,#fff 70%,transparent 70%)}
.dp-lock{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;padding-top:20cqw;opacity:0;transition:opacity .6s,transform .75s cubic-bezier(.6,0,.2,1);background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.25))}
.dp-lock p{margin:0;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.dp-lock-date{font-size:5.4cqw;font-weight:600;opacity:.9;text-transform:capitalize}
.dp-lock-time{font-size:26cqw;font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:1cqw!important;font-variant-numeric:tabular-nums}
.dp-lock-hint{margin-top:auto!important;margin-bottom:6cqw!important;font-size:4cqw;opacity:.8}
.dp-bar{display:block;width:36%;height:1.6cqw;border-radius:9px;background:#fff;margin-bottom:3.4cqw}
.dp-home{position:absolute;inset:0;padding:22cqw 6cqw 5cqw;display:flex;flex-direction:column;opacity:0;transform:scale(1.08);transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1)}
.dp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7cqw 4cqw}
.dp-grid span{display:flex;flex-direction:column;align-items:center;gap:1.6cqw;font-size:3.1cqw;text-shadow:0 1px 4px rgba(0,0,0,.5);border-radius:4cqw}
.dp-grid i,.dp-dock i{display:block;width:15.5cqw;height:15.5cqw;border-radius:4.2cqw;box-shadow:0 1cqw 3cqw rgba(0,0,0,.3)}
.dp-grid i img{width:100%;height:100%;border-radius:4.2cqw;display:block}
.dp-dock{margin-top:auto;display:flex;justify-content:space-around;padding:3.5cqw;border-radius:9cqw;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.a1{background:linear-gradient(160deg,#6fb6ff,#1a67e8)}.a2{background:linear-gradient(160deg,#fff,#d8d8d8)}.a3{background:linear-gradient(160deg,#7ef0a1,#22b45a)}.a4{background:linear-gradient(160deg,#ffd76a,#f39c12)}
.a5{background:linear-gradient(160deg,#8fd3ff,#2b8bf2)}.a6{background:linear-gradient(160deg,#fff,#eee)}.a7{background:linear-gradient(160deg,#ff8f8f,#e8413e)}
.dp-app-icon.press i{transform:scale(.9);filter:brightness(.8);transition:transform .12s,filter .12s}
.dp-app{position:absolute;inset:0;z-index:22;background:var(--bg);color:var(--ink);padding:17cqw 7cqw 0;display:flex;flex-direction:column;gap:4cqw;opacity:0;pointer-events:none}
.dp-app svg{width:100%;height:24cqw;overflow:visible}
.dp-touch{position:absolute;left:0;top:0;width:13cqw;height:13cqw;margin:-6.5cqw 0 0 -6.5cqw;border-radius:50%;background:rgba(255,255,255,.45);border:.6cqw solid rgba(255,255,255,.8);z-index:40;opacity:0;pointer-events:none}
.ph-on .dp-wall,.ph-on .dp-status,.ph-on .dp-lock{opacity:1}
.ph-unlocked .dp-lock{transform:translateY(-100%);opacity:0}
.ph-unlocked .dp-home{opacity:1;transform:none}
.demo-stage[data-state="done"] .dp-status{color:var(--ink)}
.demo-stage[data-state="done"] .dp-ind i{background:var(--ink);border-color:var(--ink)}

/* Vraie appli dans la fenêtre : affichée en 1440 px de large puis réduite à la taille de l'écran */
.dm-win-body{position:relative;overflow:hidden;background:#0d0d0d}
.dm-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.dm-live{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;transform-origin:0 0;background:#0d0d0d;opacity:0;pointer-events:none;transition:opacity .4s}
.dm-live.ready{opacity:1}
.demo-stage[data-state="done"] .dm-live{pointer-events:auto}
.dm-full{display:none}
.demo-stage[data-state="done"] .dm-full{display:inline-flex}
.dp-app.shot{padding:0;background:#0d0d0d}
.dp-app.shot img{position:absolute;left:0;top:11cqw;width:100%;height:auto}
/* Téléphone : la vraie appli en présentation mobile (390 px de large), réduite à l'écran */
.dp-live{position:absolute;left:0;top:11cqw;width:390px;border:0;transform-origin:0 0;background:#0d0d0d;opacity:0;pointer-events:none;transition:opacity .4s}
.dp-live.ready{opacity:1}
.demo-stage[data-state="done"] .dp-app,.demo-stage[data-state="done"] .dp-live{pointer-events:auto}
/* Appli ouverte : le dock s'efface et la fenêtre prend toute la hauteur de l'écran */
.app-open .dm-dock{opacity:0;transform:translate(-50%,160%);pointer-events:none;transition:opacity .4s,transform .5s}
.demo-stage[data-state="done"] .dm-win{bottom:1.2cqw;transition:bottom .5s cubic-bezier(.2,.85,.25,1)}
/* Le boîtier en 3D passe devant le haut de l'écran pour la souris : seul l'écran (l'appli) reçoit clics et défilement */
.dm-mac{pointer-events:none}