*{box-sizing:border-box} :root{--bg:#10111b;--card:#1b1c2c;--card2:#24253a;--text:#f5f5fc;--muted:#a3a5b9;--line:#3c3c59;--purple:#c5b6ff;--green:#60e0b1}
html{background:#090a11}body{margin:0;background:#10111b;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}.app{width:min(100%,560px);margin:auto;padding:calc(18px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom))}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.top{display:flex;align-items:center;justify-content:space-between;margin:0 2px 17px}.heading{display:flex;align-items:center;gap:11px}.mark{width:12px;height:30px;border-radius:5px;background:linear-gradient(180deg,#b7a5ff,#6c62ad)}h1{font-size:21px;letter-spacing:-.5px;margin:0;font-weight:750}.heading p{margin:2px 0 0;color:#8f91a8;font-size:12px}.more{border:1px solid #38394e;background:#202132;border-radius:50%;width:40px;height:40px;letter-spacing:2px;color:#e5e3f4}
.model-card{background:#1b1c2b;border-radius:28px;padding:0 0 13px;overflow:hidden;margin-bottom:22px}.model-placeholder{height:270px;background:#fff;position:relative;display:grid;place-items:center;overflow:hidden;color:#242536;transition:background .25s}.grid{position:absolute;inset:0;background-image:linear-gradient(#24253608 1px,transparent 1px),linear-gradient(90deg,#24253608 1px,transparent 1px);background-size:26px 26px}.placeholder-label{position:relative;display:flex;align-items:center;gap:9px;font-size:14px;color:#343547}.cube{font-size:27px;color:#7b7d91}.model-view{position:absolute;bottom:12px;left:14px;font-size:10px;color:#686a7c;background:#ffffffc9;border:1px solid #0000000d;border-radius:20px;padding:6px 10px}.zone-nav{display:flex;gap:7px;overflow-x:auto;padding:12px 12px 2px;scrollbar-width:none}.zone-nav::-webkit-scrollbar{display:none}.zone-nav button{border:1px solid transparent;border-radius:22px;background:#303142;color:#d5d5e1;padding:10px 13px;white-space:nowrap;font-size:13px;line-height:1}.zone-nav button.active{background:#4b426c;border-color:#8274b2;color:#fff}.zone-nav button:disabled{opacity:.45}.camera-progress{display:flex;align-items:center;gap:9px;padding:12px 14px 0;color:#c9c0f4;font-size:11px}.progress{height:3px;flex:1;background:#39394e;border-radius:5px;overflow:hidden}.progress i{display:block;height:100%;width:100%;background:#b8a6ff;transform-origin:left}.camera-progress[hidden]{display:none}
.audio-card{display:flex;align-items:center;gap:16px;padding:17px 15px;background:#1b1c2c;border-radius:27px;margin-bottom:22px;position:relative;min-height:154px}.amp-wrap{width:124px;height:124px;border-radius:20px;background:#fff;display:grid;place-items:center;flex-shrink:0}.amp{width:104px;height:57px;transform:perspective(130px) rotateX(5deg);background:linear-gradient(165deg,#555b60,#090a0c 52%,#24262a);border-radius:4px;box-shadow:0 6px 8px #0003;position:relative;padding:7px}.amp-vents{height:10px;background:repeating-linear-gradient(90deg,#151719 0 2px,#64696c 2px 4px);margin:-2px 1px 5px;border-radius:2px}.amp-face{height:28px;display:flex;align-items:center;gap:6px}.amp-screen{display:flex;align-items:center;gap:3px;background:#090e11;color:#7fffd0;font-size:7px;padding:4px 3px;border:1px solid #363a3d}.amp-screen i{height:5px;width:2px;background:#62cba9}.knob{width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c7c9c9 40%,#777 72%,#222);border:1px solid #c6c7c6}.amp-lights{display:flex;gap:3px;align-self:flex-end;margin-bottom:2px}.amp-lights i{width:2px;height:2px;border-radius:50%;background:#cbd0d2}
.audio-copy{min-width:0;flex:1;padding-right:15px}.kicker{font-size:11px;letter-spacing:.5px;color:#a6a7ba;margin:0 0 10px}.audio-copy h2{font-size:18px;line-height:1.15;margin:0 0 8px;letter-spacing:-.3px}.bluetooth-name{font-size:14px;color:#a4a6b9;margin:0 0 8px}.speaker-count{font-size:14px;color:#d2c9f5;margin:0}.bt-icon{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:30px;color:#b4a5ff;font-weight:300}.audio-status{display:table;margin-top:9px;padding:5px 8px;border-radius:6px;font-size:9px;font-weight:750;letter-spacing:.5px}.audio-status i{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}.audio-status.unavailable{color:#9699ad;background:#292b3b}.audio-status.activating{color:#ffbd83;background:#48342f}.audio-status.ready{color:#67e1b3;background:#20483e}
.lighting-card{background:#1b1c2c;border-radius:28px;padding:24px 16px 16px;margin-bottom:22px}.lighting-card>h2{font-size:23px;letter-spacing:-.6px;margin:0 0 28px}.intro{font-size:16px;line-height:1.45;color:#a6a8bc;margin:0 0 23px}.all-card{background:#3a3459;border-radius:22px;padding:17px 16px 16px;margin-bottom:23px}.all-head{display:flex;align-items:center;gap:13px;margin-bottom:13px}.all-icon{font-size:27px;color:#d2c4ff;width:28px;text-align:center}.all-head h3{font-size:18px;margin:0 0 6px}.all-head p{font-size:14px;color:#c5c0dc;margin:0;line-height:1.3}.all-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.all-buttons button{background:transparent;border:1.5px solid #8477b5;border-radius:15px;padding:13px 5px;font-size:15px;font-weight:550}.all-buttons button:active{background:#514873}
.light-row{display:flex;align-items:center;gap:13px;padding:12px 0 14px;min-height:104px}.row-icon{width:64px;height:64px;display:grid;place-items:center;flex-shrink:0;border-radius:19px;background:#292a40;color:#c8b9ff;font-size:29px}.row-copy{flex:1;min-width:0;padding-right:0}.row-copy h3{font-size:19px;line-height:1.2;letter-spacing:-.4px;font-weight:600;margin:0 0 9px}.row-copy p{font-size:15px;line-height:1.42;color:#a5a7bb;margin:0}.switch{width:58px;height:34px;border:0;border-radius:22px;background:#3a3c4d;padding:4px;flex-shrink:0;transition:background .18s;display:flex;align-items:center}.switch i{display:block;width:26px;height:26px;background:#c4c7d2;border-radius:50%;transition:transform .18s,background .18s}.switch.on{background:#23644f}.switch.on i{transform:translateX(24px);background:#65e1b5}
.exterior-card{display:flex;align-items:center;gap:13px;padding:20px 16px;background:#1b1c2c;border-radius:26px;margin-bottom:20px}.exterior-card .row-copy h3{font-size:19px;margin-bottom:8px}.exterior-card .row-copy p{font-size:14px}.exterior-icon{font-size:25px}.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,14px);opacity:0;pointer-events:none;background:#292a40;border:1px solid #45465f;border-radius:14px;padding:12px 16px;color:#f5f3ff;font-size:12px;white-space:nowrap;transition:.22s;box-shadow:0 10px 35px #0005;z-index:5}.toast.show{opacity:1;transform:translate(-50%,0)}
.model-placeholder.view-soiree:after,.model-placeholder.view-atelier:after,.model-placeholder.view-informatique:after,.model-placeholder.view-exterieur:after{content:"";position:absolute;inset:0;border:4px solid transparent;pointer-events:none;border-radius:0;animation:fade .4s ease}.model-placeholder.view-soiree:after{border-color:#ffad69}.model-placeholder.view-atelier:after{border-color:#6bb8ff}.model-placeholder.view-informatique:after{border-color:#b29aff}.model-placeholder.view-exterieur:after{border-color:#74d5b1}@keyframes fade{from{opacity:.2}to{opacity:1}}
@media(max-width:390px){.app{padding-left:12px;padding-right:12px}.audio-card{gap:11px;padding:13px}.amp-wrap{width:96px;height:100px;border-radius:16px}.amp{transform:scale(.85) perspective(130px) rotateX(5deg)}.audio-copy h2{font-size:16px}.bluetooth-name,.speaker-count{font-size:12px}.bt-icon{right:9px;font-size:24px}.lighting-card{padding:21px 13px 13px}.row-icon{width:55px;height:57px;border-radius:16px}.row-copy h3{font-size:17px}.row-copy p{font-size:13px}.switch{width:53px}.switch.on i{transform:translateX(19px)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Ajustements demandés : typographie plus compacte et pictogrammes homogènes */
.lighting-card>h2{font-size:21px;margin:0 0 22px;letter-spacing:-.45px}
.all-card{padding:17px 16px 16px;margin-bottom:17px}
.all-head{margin-bottom:14px;min-height:29px}
.all-head h3{font-size:18px;margin:0}
.all-icon{display:grid;place-items:center;width:28px;height:28px}
.all-icon svg{width:25px;height:25px;fill:none;stroke:#d2c4ff;stroke-width:1.7;stroke-linecap:round}
.light-row{gap:13px;padding:10px 0;min-height:82px}
.row-icon{width:58px;height:58px;border-radius:17px}
.row-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.row-copy h3{font-size:17px;letter-spacing:-.25px;margin:0}
.exterior-card .row-copy h3{font-size:17px;margin:0}
.exterior-card .row-copy p{font-size:13px;margin-top:5px}
.exterior-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.all-buttons button{font-size:14px;padding:12px 5px}
@media(max-width:390px){.lighting-card>h2{font-size:20px;margin-bottom:19px}.all-head h3{font-size:17px}.row-icon{width:52px;height:52px}.row-icon svg{width:27px;height:27px}.row-copy h3{font-size:16px}.light-row{min-height:76px;padding:9px 0}}

/* V4 : texte légèrement plus compact et éclairage extérieur organisé comme l'intérieur */
body{font-size:14px}
.top h1{font-size:19px}
.heading p{font-size:11px}
.kicker{font-size:10px}
.audio-copy h2{font-size:16px}
.bluetooth-name,.speaker-count{font-size:12px}
.lighting-card>h2{font-size:19px;margin-bottom:17px}
.all-head h3{font-size:16px}
.all-head p{font-size:12px}
.all-buttons button{font-size:13px}
.row-copy h3,.exterior-card .row-copy h3{font-size:15.5px}
.row-copy p,.exterior-card .row-copy p{font-size:12px}
.row-icon{width:52px;height:52px;border-radius:16px}
.row-icon svg{width:26px;height:26px}
.light-row{min-height:70px;padding:8px 0}
.exterior-lighting-card{padding-top:21px}
.exterior-lighting-card .light-row:last-child{padding-bottom:3px}
.availability{display:inline-block;margin-top:6px;padding:4px 7px;border:1px solid #4b4c63;border-radius:7px;background:#292a3d;color:#aaaac0;font-size:9px;font-weight:750;letter-spacing:.45px}
.disabled-switch{opacity:.48;cursor:not-allowed}
.parking-icon{color:#aaaac0}
@media(max-width:390px){
 .top h1{font-size:18px}.lighting-card>h2{font-size:18px}
 .row-copy h3{font-size:15px}.row-icon{width:49px;height:49px}
 .row-icon svg{width:24px;height:24px}.availability{font-size:8px}
}

/* Étiquette indisponibilité : compacte, élégante et cohérente avec les badges de statut */
.availability{font-size:9px;letter-spacing:.1px;text-transform:none;padding:5px 8px;color:#b4b5c7;background:#292a3d;border-color:#484960}