/* Immersion — photo plein écran, verre dépoli (compact mobile) */
.tpl-cinema { --glass: rgba(255,255,255,.1); --glass-bd: rgba(255,255,255,.18); }
.cn-bg { position: fixed; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: scale(1.1); animation: cnKen 24s ease-in-out infinite alternate; }
.cn-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,10,.35) 0%, rgba(5,6,10,.2) 18%, rgba(5,6,10,.78) 45%, rgba(5,6,10,.96) 75%); }
@keyframes cnKen { from { transform: scale(1.1); } to { transform: scale(1.2) translate(-2%, -2%); } }
.cn-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: calc(1.6rem + env(safe-area-inset-top)) 1rem 0; }
.cn-logo { width: 46px; height: 46px; border-radius: 15px; overflow: hidden; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--glass-bd); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: var(--display); font-weight: 800; font-size: .9rem; color: #fff; }
.cn-logo img { width: 100%; height: 100%; object-fit: cover; }
.cn-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 99px; background: var(--glass); border: 1px solid var(--glass-bd); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-weight: 600; font-size: .8rem; }
.cn-live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: cnPulse 2s infinite; }
@keyframes cnPulse { 0% { box-shadow: 0 0 0 0 var(--accent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.cn-hero { position: relative; padding: max(96px, 15vh) 1.1rem 1rem; }
.cn-greet { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); animation: up .8s var(--ease) both .2s; }
.cn-name { margin-top: .35rem; font-family: var(--display); font-weight: 800; font-size: clamp(2.3rem, 11.5vw, 3rem); line-height: .95; letter-spacing: -.035em; overflow-wrap: anywhere; text-wrap: balance; animation: up .9s var(--ease) both .3s; }
.cn-tag { margin-top: .6rem; color: rgba(255,255,255,.75); font-size: .92rem; animation: up .9s var(--ease) both .4s; }
.cn-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: 0 1rem; }
.cn-card { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: 108px; padding: .85rem; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-bd); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); transition: background .3s, transform .2s var(--ease); }
.cn-card:active { transform: scale(.97); background: rgba(255,255,255,.16); }
.cn-card.is-main { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: .85rem; min-height: 0; padding: .95rem; background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--accent) 80%, transparent); }
.cn-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(255,255,255,.14); flex-shrink: 0; }
.cn-card.is-main .cn-ico { background: rgba(0,0,0,.12); width: 44px; height: 44px; }
.cn-ico svg { width: 20px; height: 20px; }
.cn-txt b { display: block; font-family: var(--display); font-weight: 700; font-size: .98rem; line-height: 1.15; }
.cn-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .15rem; font-size: .74rem; opacity: .7; line-height: 1.3; }
.cn-card.is-main .cn-txt b { font-size: 1.15rem; }
.cn-feat { position: relative; padding: 1.5rem 0 0; }
.cn-feat h2 { padding: 0 1.1rem .6rem; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.cn-rail { display: flex; gap: .65rem; overflow-x: auto; padding: 0 1rem; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: 1rem; }
.cn-rail::-webkit-scrollbar { display: none; }
.cn-dish { position: relative; flex: 0 0 58%; height: 168px; scroll-snap-align: start; border-radius: 20px; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; border: 1px solid var(--glass-bd); }
.cn-dish::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.85)); }
.cn-dish span { position: relative; padding: .85rem; }
.cn-dish b { display: block; font-family: var(--display); font-size: .98rem; line-height: 1.15; }
.cn-dish small { color: var(--accent); font-weight: 700; font-size: .8rem; }
.cn-welcome { position: relative; padding: 1.3rem 1.3rem 0; color: rgba(255,255,255,.6); text-align: center; font-size: .86rem; }
.tpl-cinema .cs-foot { position: relative; }
.tpl-cinema .sheet { background: rgba(14,15,20,.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.tpl-cinema .sheet-head, .tpl-cinema .menu-cats { background: transparent; }
.tpl-cinema .sheet-full { background: #0b0c10; }
.tpl-cinema .cs-btn:not(.cs-btn-ghost):not(.cs-btn-google) { color: #111; }
.tpl-cinema .cs-dock { background: rgba(20,22,30,.7); border-color: var(--glass-bd); }
.tpl-cinema .cs-dock a.is-main { color: #111; }