/* ==========================================================================
   Centre dentaire Nacre — écran de la salle d'attente (lecture seule)
   Une scène de 1920 × 1080 (paysage), 1080 × 1920 (portrait) ou 1600 × 240 (bandeau),
   mise à l'échelle de la fenêtre par salle.js. Aucune action, sauf toucher pour le son.
   ========================================================================== */

html, body { height: 100%; }
body.sa { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; overflow: clip; background: #061c22; color: #eaf6f3; }
.sa .demo-bar { flex: none; }
.room { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; cursor: default; }
.tv { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--s, .5)); transform-origin: 50% 50%; display: grid; grid-template-columns: 1180px minmax(0, 1fr); grid-template-rows: 130px minmax(0, 1fr) 96px; grid-template-areas: "top top" "now side" "tick tick"; background: linear-gradient(150deg, #0c3b44 0%, #08262d 60%, #061c22 100%); overflow: hidden; font-family: var(--text); }

/* fond nacré animé */
.tv__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tv__bg i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.tv__bg i:nth-child(1) { width: 900px; height: 900px; left: -200px; top: -260px; background: radial-gradient(circle, rgba(143, 211, 193, .35), transparent 65%); animation: drift 26s ease-in-out infinite alternate; }
.tv__bg i:nth-child(2) { width: 760px; height: 760px; right: -160px; bottom: -280px; background: radial-gradient(circle, rgba(214, 234, 247, .22), rgba(239, 231, 220, .08) 50%, transparent 70%); animation: drift 32s ease-in-out -8s infinite alternate-reverse; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(140px, 90px) scale(1.15); } }

.tv__top { grid-area: top; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 70px; border-bottom: 1px solid rgba(143, 211, 193, .14); }
.tv__brand { display: flex; align-items: center; gap: 20px; }
.tv__brand svg { width: 72px; height: 72px; }
.tv__brand b { display: block; font-family: var(--display); font-weight: 800; font-stretch: 78%; font-size: 64px; line-height: .9; letter-spacing: -.045em; color: #fff; }
.tv__brand small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 18px; letter-spacing: .16em; text-transform: uppercase; color: rgba(234, 246, 243, .6); }
.tv__time { display: flex; align-items: baseline; gap: 28px; font-size: 30px; color: rgba(234, 246, 243, .7); }
.tv__time b { font-family: var(--display); font-weight: 700; font-stretch: 85%; font-size: 72px; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.tv__snd { align-self: center; width: 40px; height: 40px; fill: none; stroke: rgba(234, 246, 243, .45); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tv__snd.is-on { stroke: var(--mint); }

.tv__now { grid-area: now; position: relative; display: grid; align-content: center; justify-items: center; text-align: center; overflow: hidden; }
.tv__rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.tv__rings i { position: absolute; width: 820px; height: 820px; border-radius: 50%; border: 2px solid rgba(143, 211, 193, .12); }
.tv__rings i:nth-child(2) { width: 660px; height: 660px; border-color: rgba(143, 211, 193, .16); }
.tv__rings i:nth-child(3) { width: 500px; height: 500px; border-color: rgba(143, 211, 193, .2); }
.tv__rings i:nth-child(4) { width: 1000px; height: 1000px; border-color: rgba(143, 211, 193, .07); }
.tv__k { position: relative; font-family: var(--mono); font-size: 26px; letter-spacing: .22em; text-transform: uppercase; color: var(--mint); }
.tv__num { position: relative; margin: 6px 0 0; font-family: var(--display); font-weight: 800; font-stretch: 75%; font-size: 470px; line-height: .8; letter-spacing: -.025em; color: #fff; text-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.tv__chair { position: relative; margin-top: 34px; padding: 14px 44px; border-radius: 999px; background: #fff; color: var(--lagoon-d); font-family: var(--display); font-weight: 800; font-stretch: 78%; font-size: 92px; line-height: 1; letter-spacing: -.03em; }
.tv__prac { position: relative; margin-top: 22px; font-size: 36px; font-weight: 600; color: rgba(234, 246, 243, .78); }
.tv__flash { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(226, 87, 76, .85), rgba(226, 87, 76, 0) 70%); opacity: 0; pointer-events: none; }
.is-call .tv__flash { animation: tvflash 2.6s var(--ease); }
.is-call .tv__num { animation: tvnum 1s var(--ease); }
.is-call .tv__chair { animation: tvchair 2.6s var(--ease); }
.is-call .tv__rings i { animation: tvring 2.2s var(--ease); }
@keyframes tvflash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tvnum { 0% { transform: translateY(80px) scale(.82); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tvchair { 0%, 40% { background: var(--coral); color: #fff; } 100% { background: #fff; color: var(--lagoon-d); } }
@keyframes tvring { 0% { transform: scale(.85); border-color: rgba(255, 255, 255, .6); } 100% { transform: scale(1); } }

.tv__side { grid-area: side; position: relative; display: flex; flex-direction: column; gap: 18px; padding: 54px 70px 40px 30px; }
.tv__h { font-family: var(--mono); font-size: 22px; letter-spacing: .2em; text-transform: uppercase; color: rgba(234, 246, 243, .55); }
.tv__next { display: grid; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; }
.tv__next li { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 24px; padding: 18px 28px; border-radius: 28px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(143, 211, 193, .14); }
.tv__next li:first-child { background: rgba(143, 211, 193, .14); box-shadow: inset 0 0 0 2px rgba(143, 211, 193, .5); }
.tv__next b { font-family: var(--display); font-weight: 800; font-stretch: 78%; font-size: 110px; line-height: .9; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.tv__next span { font-size: 32px; font-weight: 600; color: rgba(234, 246, 243, .8); }
.tv__next small { display: block; font-size: 24px; font-weight: 600; color: var(--mint); }
.tv__next .is-empty { grid-template-columns: 1fr; font-size: 30px; color: rgba(234, 246, 243, .6); }
.tv__chairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.tv__chairs li { display: grid; gap: 4px; padding: 18px 20px; border-radius: 24px; background: rgba(255, 255, 255, .05); }
.tv__chairs b { font-family: var(--display); font-weight: 800; font-stretch: 78%; font-size: 72px; line-height: .9; color: #fff; }
.tv__chairs span { font-size: 22px; font-weight: 700; color: rgba(234, 246, 243, .6); }
.tv__chairs span + span { font-weight: 600; color: rgba(234, 246, 243, .45); }
.tv__chairs li.is-new { animation: chairnew 2.6s var(--ease); }
@keyframes chairnew { 0%, 35% { background: var(--coral); } 100% { background: rgba(255, 255, 255, .05); } }

.tv__tick { grid-area: tick; position: relative; display: flex; align-items: center; overflow: hidden; background: rgba(143, 211, 193, .1); border-top: 1px solid rgba(143, 211, 193, .16); white-space: nowrap; }
.tv__tick-in { display: inline-block; padding-left: 100%; font-size: 34px; font-weight: 600; color: rgba(234, 246, 243, .85); animation: tick 48s linear infinite; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Portrait (écran vertical, téléphone) */
.tv--port { width: 1080px; height: 1920px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 130px 1060px minmax(0, 1fr) 96px; grid-template-areas: "top" "now" "side" "tick"; }
.tv--port .tv__top { padding: 0 50px; }
.tv--port .tv__brand small { display: none; }
.tv--port .tv__time span { display: none; }
.tv--port .tv__side { padding: 20px 50px 40px; }
.tv--port .tv__next { margin-bottom: 18px; }
.tv--port .tv__next li { padding: 12px 24px; }
.tv--port .tv__next li:nth-child(3) { display: none; }

/* Bandeau (page « en direct » sur téléphone) */
.tv--banner { width: 1600px; height: 240px; grid-template-columns: 700px minmax(0, 1fr) 260px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "now side top"; }
.tv--banner .tv__top { padding: 0 40px 0 0; border: 0; justify-content: flex-end; }
.tv--banner .tv__brand, .tv--banner .tv__time span, .tv--banner .tv__snd, .tv--banner .tv__tick, .tv--banner .tv__rings, .tv--banner .tv__k, .tv--banner .tv__prac, .tv--banner .tv__chairs, .tv--banner .tv__h { display: none; }
.tv--banner .tv__time b { font-size: 76px; }
.tv--banner .tv__now { grid-template-columns: auto auto; align-content: center; align-items: center; justify-content: start; gap: 34px; padding-left: 50px; }
.tv--banner .tv__num { font-size: 200px; margin: 0; }
.tv--banner .tv__chair { margin: 0; font-size: 70px; padding: 12px 34px; }
.tv--banner .tv__side { flex-direction: row; align-items: center; padding: 0 20px; }
.tv--banner .tv__next { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; flex: 1; }
.tv--banner .tv__next li { grid-template-columns: 1fr; gap: 0; padding: 14px 20px; border-radius: 22px; }
.tv--banner .tv__next b { font-size: 90px; }
.tv--banner .tv__next span { display: none; }
.tv--banner .tv__next li { place-items: center; }
.tv--banner .tv__next small { display: none; }

.is-embed .room { cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .tv__tick-in { animation: none; padding-left: 40px; } }