@font-face{font-family:Cormorant;src:url('../villa/fonts/cormorant-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:Manrope;src:url('../villa/fonts/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Mono;src:url('../villa/fonts/mono.woff2') format('woff2');font-display:swap}

/* Toile fixe 960×540 (zone CSS réelle d'une clé Android TV en 1080p), mise à l'échelle par tv.js. */
:root{--ink:#f1ebdf;--muted:#b7b0a1;--brass:#d6ac6a;--glass:rgba(255,255,255,.07);--glass-line:rgba(255,255,255,.14);--sea:#7cc4c9}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#07090a;overflow:hidden}
body{font-family:Manrope,system-ui,sans-serif;color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.screen{position:absolute;left:0;top:0;width:960px;height:540px;transform-origin:0 0;overflow:hidden;
  background:radial-gradient(120% 90% at 80% 10%,#2a4a57 0%,rgba(42,74,87,0) 55%),radial-gradient(90% 70% at 10% 100%,#3a2a1c 0%,rgba(58,42,28,0) 60%),linear-gradient(180deg,#0d1416 0%,#121a1b 55%,#17140f 100%)}
.screen::before{content:"";position:absolute;inset:auto 0 0 0;height:180px;background:linear-gradient(180deg,rgba(124,196,201,0),rgba(124,196,201,.06));pointer-events:none}
.stage{position:absolute;inset:0;padding:30px 40px 56px}
.hints{position:absolute;left:40px;right:40px;bottom:16px;display:flex;justify-content:space-between;font:11px/1 Mono,monospace;letter-spacing:.06em;color:var(--muted)}
.hints b{color:var(--ink);font-weight:400}

.top{display:flex;justify-content:space-between;align-items:flex-start}
.brand{display:flex;align-items:center;gap:12px}
.mono{width:38px;height:38px;border-radius:50%;border:1px solid var(--brass);display:grid;place-items:center;font:500 22px/1 Cormorant,serif;color:var(--brass)}
.brand b{display:block;font:500 22px/1 Cormorant,serif}
.brand small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.clock{text-align:right}
.clock b{display:block;font:400 44px/1 Cormorant,serif}
.clock small{font-size:12px;color:var(--muted)}
h1{font:400 58px/1 Cormorant,serif;margin:28px 0 6px;letter-spacing:.01em}
.sub{font-size:15px;color:var(--muted);margin:0}
.title{font:400 40px/1 Cormorant,serif;margin:18px 0 4px}

/* Tuiles et focus : lisibles à trois mètres */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:34px}
.tile{position:relative;height:150px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);padding:16px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;transition:transform .18s,background .18s,box-shadow .18s}
.tile svg{width:30px;height:30px;stroke:var(--brass);fill:none;stroke-width:1.5}
.tile b{font:500 22px/1.05 Cormorant,serif}
.tile small{font-size:11px;color:var(--muted)}
[data-nav]{outline:none}
[data-nav].focus{transform:scale(1.05);border-color:var(--brass);box-shadow:0 0 0 3px var(--brass),0 18px 40px -14px rgba(0,0,0,.8);z-index:2}
.tile.focus,.row.focus,.box.focus{background:rgba(214,172,106,.18)}
.chips{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.chip{font-size:12px;padding:7px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);color:var(--muted)}
.chip b{color:var(--ink);font-weight:600}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.card{position:relative;height:150px;border-radius:16px;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;border:1px solid var(--glass-line);overflow:hidden;transition:transform .18s,box-shadow .18s}
.card b{font:500 26px/1 Cormorant,serif;position:relative}
.card small{font-size:12px;opacity:.85;position:relative}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.5))}
.card.on::after{content:"";position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.s-arrivee{background:linear-gradient(140deg,#f2c27b,#d9824f 55%,#8e5a3f)}
.s-diner{background:linear-gradient(140deg,#7a3d2c,#c06a3c 60%,#e2a35f)}
.s-cinema{background:linear-gradient(140deg,#13151c,#2a2f45 60%,#6b5ca5)}
.s-nuit{background:linear-gradient(140deg,#0e1622,#1f3550 60%,#3b5f7e)}
.s-absence{background:linear-gradient(140deg,#5e6660,#8b958c 60%,#c3c8bd)}
.s-piscine{background:linear-gradient(140deg,#0f5560,#2f9aa3 60%,#9fdcd9)}

.rows{display:grid;gap:10px;margin-top:22px}
.row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;height:62px;padding:0 20px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-line);text-align:left;transition:transform .18s,background .18s}
.row .name{font:500 24px/1 Cormorant,serif}
.row .now{font-size:13px;color:var(--muted)}
.row .val{font:400 32px/1 Cormorant,serif;min-width:110px;text-align:right}
.row .val i{font-style:normal;color:var(--brass);font-size:20px;opacity:0;transition:opacity .2s}
.row.focus .val i{opacity:1}
.two{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;margin-top:22px;align-items:start}
.big{font:400 96px/1 Cormorant,serif}
.big small{font:500 16px Manrope,sans-serif;color:var(--muted);margin-left:8px}
.cams{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
.cam{position:relative;height:178px;border-radius:14px;overflow:hidden;border:1px solid var(--glass-line);transition:transform .18s,box-shadow .18s}
.cam svg{width:100%;height:100%;display:block}
.cam span{position:absolute;left:12px;bottom:10px;font:11px Mono,monospace;letter-spacing:.06em;text-shadow:0 1px 2px #000}
.cam em{position:absolute;right:12px;top:10px;font:11px Mono,monospace;font-style:normal;display:flex;gap:6px;align-items:center}
.cam em::before{content:"";width:8px;height:8px;border-radius:50%;background:#e5484d}
.full{position:absolute;inset:0;z-index:10;background:#000}
.full svg{width:100%;height:100%}
.full span{position:absolute;left:30px;bottom:24px;font:14px Mono,monospace;letter-spacing:.06em}
.info{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}
.info .box{border-radius:14px;background:var(--glass);border:1px solid var(--glass-line);padding:16px;text-align:left;transition:transform .18s,background .18s}
.info .box small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.info .box b{font:500 26px/1.1 Cormorant,serif}
.info .box p{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.sim{position:absolute;top:30px;left:50%;transform:translateX(-50%);font:10px Mono,monospace;letter-spacing:.08em;color:var(--muted);border:1px solid var(--glass-line);border-radius:999px;padding:5px 10px;white-space:nowrap}

.toast{position:fixed;left:50%;bottom:6%;transform:translateX(-50%);background:rgba(241,235,223,.95);color:#121516;padding:12px 20px;border-radius:999px;font:600 15px Manrope,sans-serif;opacity:0;transition:opacity .25s;pointer-events:none;z-index:20}
.toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}