/* Adaptation Codex du scénario et du composant proposés par Claude, 27/09/2026. */
.vc-motion{width:100%;max-width:680px;margin:auto;--cycle:8s}.vc-stage{position:relative;aspect-ratio:1.25;overflow:hidden;container-type:inline-size;background:#151515;border-radius:28px;border:1px solid #333}.vc-card{position:absolute;left:6%;bottom:21%;width:49%;aspect-ratio:1.6;background:#0C0E12;border:1px solid #555;border-radius:14px;padding:6%;box-shadow:0 18px 35px #0008;transform:rotate(-9deg);display:flex;flex-direction:column;justify-content:space-between}.vc-card .vcarte-logo-window{width:100%;border-radius:3px}.vc-card-name{font:500 1.5cqw Inter,sans-serif;letter-spacing:1px;color:white;margin-top:15%}.vc-card>svg{position:absolute;right:8%;bottom:12%;width:11%;stroke:#CCFF00;fill:none;stroke-width:3}.vc-phone{position:absolute;right:9%;top:7%;width:39%;aspect-ratio:.51;background:#0C0E12;border:2px solid #666;border-radius:11%/6%;padding:2%;box-shadow:0 25px 45px #0008}.vc-screen{height:100%;border-radius:8%/4%;overflow:hidden;position:relative;background:#222}.vc-rest{height:100%;display:grid;place-items:center;font:600 4cqw/1.15 Montserrat,sans-serif;color:#888}.vc-notif{position:absolute;top:6%;left:5%;right:5%;padding:9% 7%;background:#fff;color:#0C0E12;border-radius:10px;display:flex;flex-direction:column;gap:7px;opacity:0}.vc-notif b{font-size:2.7cqw}.vc-notif span{font-size:2.6cqw;color:#0074a6}.vc-fiche{position:absolute;inset:0;background:#fff;color:#0C0E12;display:flex;flex-direction:column;padding:12% 9%;transform:translateY(105%)}.vc-avatar{display:grid;place-items:center;width:32%;aspect-ratio:1;border-radius:50%;background:#009FE3;color:#fff;font:700 3cqw Montserrat,sans-serif}.vc-fiche>strong{font:750 4.2cqw/1.04 Montserrat,sans-serif;margin-top:10%;letter-spacing:-.5px}.vc-company{font-size:1.8cqw;letter-spacing:2px;margin-top:7%}.vc-details{display:grid;gap:12px;margin-top:10%;font-size:2cqw}.vc-details>span{padding-bottom:8%;border-bottom:1px solid #ddd}.vc-save{background:#CCFF00;color:#0C0E12;padding:10% 3%;border-radius:8px;font:650 2.1cqw Inter,sans-serif;margin-top:auto;text-align:center;opacity:0}.vc-tap{position:absolute;top:21%;right:23%;width:15%;aspect-ratio:1;border:2px solid #009FE3;background:#009FE355;border-radius:50%;opacity:0}.vc-pulse{position:absolute;left:42%;top:39%;width:15%;aspect-ratio:1;border:2px solid #CCFF00;border-radius:50%;opacity:0}.vc-captions{position:absolute;left:6%;bottom:6%;right:6%;height:30px;color:white;font:600 3.5cqw Montserrat,sans-serif}.vc-captions>span{position:absolute;opacity:0}.vc-controls{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:12px}.vc-controls small{font-size:10px;color:#aaa}.vc-controls>div{display:flex;gap:7px}.vc-controls button{background:transparent;border:1px solid #555;color:white;padding:8px 11px;border-radius:7px;cursor:pointer;font-size:11px}.vc-controls button:hover{border-color:#CCFF00}.vc-controls button:focus-visible{outline:3px solid #009FE3;outline-offset:3px}.vc-motion.on .vc-phone{animation:vcPhone var(--cycle) ease-in-out infinite}.vc-motion.on .vc-notif{animation:vcNotif var(--cycle) linear infinite}.vc-motion.on .vc-tap{animation:vcTap var(--cycle) linear infinite}.vc-motion.on .vc-fiche{animation:vcFiche var(--cycle) ease-in-out infinite}.vc-motion.on .vc-save{animation:vcSave var(--cycle) linear infinite}.vc-motion.on .vc-pulse{animation:vcPulse var(--cycle) ease-out infinite}.vc-motion.on .vc-cap1{animation:vcCap1 var(--cycle) linear infinite}.vc-motion.on .vc-cap2{animation:vcCap2 var(--cycle) linear infinite}.vc-motion.on .vc-cap3{animation:vcCap3 var(--cycle) linear infinite}.vc-motion.paused *,.vc-motion.offscreen *{animation-play-state:paused!important}@keyframes vcPhone{0%,10%{transform:translate(7%,-8%) rotate(5deg)}28%,95%{transform:none}100%{transform:translate(7%,-8%) rotate(5deg)}}@keyframes vcNotif{0%,26%{opacity:0;transform:translateY(-50%)}32%,55%{opacity:1;transform:none}61%,100%{opacity:0;transform:none}}@keyframes vcTap{0%,53%{opacity:0;transform:scale(1.4)}57%{opacity:1;transform:scale(1)}62%,100%{opacity:0;transform:scale(.8)}}@keyframes vcFiche{0%,61%{transform:translateY(105%)}75%,96%{transform:none}100%{transform:translateY(105%)}}@keyframes vcSave{0%,76%{opacity:0}84%,96%{opacity:1}100%{opacity:0}}@keyframes vcPulse{0%,18%{opacity:0;transform:scale(.3)}22%{opacity:.7}32%,100%{opacity:0;transform:scale(1.8)}}@keyframes vcCap1{0%,25%{opacity:1}30%,100%{opacity:0}}@keyframes vcCap2{0%,30%{opacity:0}33%,61%{opacity:1}65%,100%{opacity:0}}@keyframes vcCap3{0%,65%{opacity:0}70%,96%{opacity:1}100%{opacity:0}}.vc-motion:not(.on) .vc-fiche{transform:none}.vc-motion:not(.on) .vc-save,.vc-motion:not(.on) .vc-cap3{opacity:1}@media(prefers-reduced-motion:reduce){.vc-motion *{animation:none!important}.vc-motion .vc-phone,.vc-motion .vc-fiche{transform:none!important}.vc-motion .vc-save,.vc-motion .vc-cap3{opacity:1!important}.vc-motion .vc-cap1,.vc-motion .vc-cap2,.vc-motion .vc-pulse,.vc-motion .vc-tap,.vc-motion .vc-notif{opacity:0!important}}
/* Keep the entire phone inside the scene on desktop. */
@media(min-width:741px){.vc-phone{width:37%}}