#city-lab .cl-viewer{position:relative;overflow:hidden;background:#101828;isolation:isolate}
#city-lab .cl-viewer>img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s}
#city-lab .cl-viewer.has-scene>img,#city-lab .cl-viewer.has-scene>.cl-scene-start{visibility:hidden;pointer-events:none}
#city-lab .cl-build-stage .cl-viewer{height:410px}
#city-lab .cl-build-stage .cl-viewer>img{height:100%}
#city-lab .cl-scene-start{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(108deg,#d10a80,#7222b5);color:white;box-shadow:0 8px 55px #0008}
#city-lab .cl-scene-start:hover{transform:translate(-50%,-54%)}
#city-lab .is-loading::after{content:'Chargement de la ville…';position:absolute;inset:auto 15px 18px;z-index:10;padding:13px;border-radius:9px;text-align:center;color:#fff;background:#080b18dc;font-size:13px}
#city-lab .is-loading>.cl-scene-start{visibility:hidden}
#city-lab .cl-text-button{background:none;border:0;border-bottom:1px solid #69f1d949;padding:0 0 7px;text-align:left}
#city-lab .cl-hero-proof i{font-style:normal;color:var(--cl-teal);font-size:18px}
#city-lab .cl-stage-caption p{margin-top:4px;font-size:12px;max-width:360px;line-height:1.5}
#city-lab .cl-warehouse{position:absolute;inset:22px 15%;display:flex;flex-direction:column;gap:10px}
#city-lab .cl-warehouse-visual{background:radial-gradient(ellipse at 30% 20%,#23413a,#151329 70%)}
#city-lab .cl-warehouse-label,#city-lab .cl-warehouse-foot{font-size:10px;color:#adf2df;display:flex;justify-content:space-between;letter-spacing:.05em}
#city-lab .cl-warehouse-label b,#city-lab .cl-warehouse-foot b{font-weight:400;color:#bac5db}
#city-lab .cl-warehouse-grid{height:180px;width:100%;position:relative;border:1px solid #6896a67d;background:linear-gradient(90deg,transparent 46.9%,#8059976b 46.9%,#8059976b 53.1%,transparent 53.1%),repeating-linear-gradient(0deg,transparent 0,transparent calc(100% / 17 - 1px),#91accb29 calc(100% / 17 - 1px),#91accb29 calc(100% / 17)),repeating-linear-gradient(90deg,transparent 0,transparent calc(100% / 17 - 1px),#91accb29 calc(100% / 17 - 1px),#91accb29 calc(100% / 17))}
#city-lab .cl-warehouse-grid i{position:absolute;border:1px solid #9ffbd4;background:#4db39a80;width:17.6%;height:23.5%;top:6%;left:6%;animation:cl-piece-cycle 9s infinite}
#city-lab .cl-warehouse-grid i:nth-child(2){left:24%;top:41%;height:35.3%;width:17.6%;background:#8781ba9c;animation-delay:-2s}
#city-lab .cl-warehouse-grid i:nth-child(3){left:59%;top:6%;height:35.3%;background:#a379b68a;animation-delay:-4s}
#city-lab .cl-warehouse-grid i:nth-child(4){left:76.5%;top:53%;height:35.3%;background:#d083718a;animation-delay:-1s}
#city-lab .cl-warehouse-grid i:nth-child(5){left:6%;top:64.7%;width:11.8%;animation-delay:-6s}
#city-lab .cl-warehouse-grid i:nth-child(6){left:59%;top:65%;width:11.8%;animation-delay:-3s}
#city-lab .cl-warehouse-grid i:nth-child(7){left:29.5%;top:6%;width:11.8%;animation-delay:-5s}
#city-lab .cl-warehouse-grid i:nth-child(8){left:82.4%;top:12%;width:11.8%;height:23.5%;animation-delay:-7s}
@keyframes cl-piece-cycle{0%,12%,92%,100%{opacity:0}20%,80%{opacity:1}}
#city-lab #cl-experience{color:#f7f6fa;padding:0;border:1px solid #82749f7a;border-radius:18px;background:#080d17;width:min(1200px,94vw);max-width:94vw;max-height:94dvh;box-shadow:0 20px 100px #000a;overflow:auto}
#city-lab #cl-experience::backdrop{background:#03050ccc;backdrop-filter:blur(12px)}
#city-lab .cl-dialog-head{display:flex;justify-content:space-between;align-items:center;padding:18px 25px;border-bottom:1px solid #adb1c429}
#city-lab .cl-dialog-head .cl-kicker{font-size:9px;margin-bottom:5px}
#city-lab .cl-dialog-head h2{font-size:27px;letter-spacing:-.03em}
#city-lab .cl-dialog-close{border:1px solid #ffffff30;background:#ffffff08;border-radius:50%;width:42px;height:42px;font-size:18px}
#city-lab #cl-experience-scene{height:min(62dvh,660px);min-height:240px}
#city-lab .cl-dialog-foot{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 23px}
#city-lab .cl-dialog-foot>span{font-size:11px;color:#b8c4d6}
#city-lab .cl-dialog-status{padding:0 23px;font-size:12px;color:#f2b6db}
#city-lab .cl-dialog-status:empty{display:none}
#city-lab .cl-message{position:fixed;z-index:10000;bottom:25px;left:50%;transform:translateX(-50%);width:min(480px,90vw);padding:16px 20px;background:#172332;border:1px solid #7fd6c9;border-radius:12px;box-shadow:0 10px 40px #0009;font-size:13px}
@media(max-width:800px){#city-lab .cl-build-stage .cl-viewer{height:370px}}
@media(max-width:560px){#city-lab .cl-build-stage .cl-viewer{height:290px}#city-lab .cl-hero-copy .cl-link{font-size:11px;gap:7px}#city-lab .cl-warehouse{inset:15px 12% 40px}#city-lab .cl-dialog-head{padding:14px 17px}#city-lab .cl-dialog-foot{padding:12px;display:block}#city-lab .cl-dialog-foot>span{display:block;margin-top:10px;text-align:center}#city-lab .cl-dialog-foot .cl-modes{flex-wrap:wrap}#city-lab .cl-dialog-foot .cl-modes button{flex:auto}#city-lab .cl-dialog-head h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){#city-lab .cl-warehouse-grid i{animation:none;opacity:1}#city-lab .cl-viewer>img{transition:none}}
@media(max-width:350px){.cl-preview-header>a{font-size:0}.cl-preview-header nav{font-size:11px}.cl-preview-header nav a{white-space:nowrap}}
