/* Carte Noire — gastronomique, filets dorés (compact mobile) */
.tpl-noir { --radius: 4px; --radius-sm: 4px; --gold: var(--accent); }
.nr-hero { position: relative; display: grid; place-items: center; padding: calc(3.4rem + env(safe-area-inset-top)) 1.1rem 1.4rem; isolation: isolate; overflow: hidden; }
.nr-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--img) center / cover; filter: saturate(.85); transform: scale(1.08); animation: nrZoom 18s ease-out forwards; }
@keyframes nrZoom { to { transform: scale(1); } }
.nr-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 40%, rgba(12,11,10,.35), rgba(12,11,10,.8) 75%), linear-gradient(180deg, transparent 55%, var(--bg)); }
.nr-frame { position: relative; width: 100%; max-width: 340px; padding: 2rem 1.2rem 1.4rem; text-align: center; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: rgba(12,11,10,.28); animation: fadeIn 1.4s var(--ease) both .15s; }
.nr-frame::before { content: ''; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); pointer-events: none; }
.nr-mono { width: 70px; height: 70px; margin: -3.3rem auto 1rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--gold); color: var(--gold); font-family: var(--display); font-style: italic; font-size: 1.6rem; font-weight: 600; box-shadow: 0 0 0 5px var(--bg); }
.nr-mono img { width: 100%; height: 100%; object-fit: cover; }
.nr-kicker { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.nr-name { margin-top: .5rem; font-family: var(--display); font-weight: 500; font-size: clamp(2.1rem, 10vw, 2.6rem); line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.nr-orn { width: 150px; height: 16px; margin: .8rem auto; color: var(--gold); }
.nr-tag { font-family: var(--display); font-style: italic; font-size: 1.02rem; line-height: 1.3; color: color-mix(in srgb, var(--text) 78%, transparent); }
.nr-point { margin-top: .9rem; font-size: .64rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.nr-point::before, .nr-point::after { content: '—'; margin: 0 .5rem; opacity: .6; }
.nr-welcome { padding: .2rem 1.6rem 1.1rem; text-align: center; font-family: var(--display); font-style: italic; font-size: 1.02rem; line-height: 1.4; color: color-mix(in srgb, var(--text) 68%, transparent); }
.nr-list { margin: 0 1.1rem; border-top: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.nr-item { display: flex; align-items: center; gap: .8rem; min-height: 64px; padding: .8rem .2rem; border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); transition: padding .3s var(--ease), background .3s; }
.nr-item:active { background: color-mix(in srgb, var(--gold) 8%, transparent); padding-left: .6rem; }
.nr-num { width: 2.1rem; font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--gold); flex-shrink: 0; }
.nr-txt { flex: 1; min-width: 0; }
.nr-txt b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.24rem; line-height: 1.15; }
.nr-txt small { display: block; margin-top: .1rem; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: color-mix(in srgb, var(--text) 50%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-go { color: var(--gold); stroke-width: 1.2; width: 22px; height: 22px; flex-shrink: 0; }
.nr-feat { margin: 1.6rem 1.1rem 0; padding: 1.3rem 1rem; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.nr-feat h2 { text-align: center; margin-bottom: 1rem; font-family: var(--display); font-weight: 500; font-style: italic; font-size: 1.35rem; color: var(--gold); }
.nr-dish { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; }
.nr-dish img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); flex-shrink: 0; }
.nr-dish-name { font-family: var(--display); font-size: 1.05rem; font-weight: 600; line-height: 1.15; }
.nr-dots { flex: 1; min-width: 12px; border-bottom: 1px dotted color-mix(in srgb, var(--gold) 55%, transparent); transform: translateY(5px); }
.nr-price { font-family: var(--display); font-size: 1.05rem; color: var(--gold); white-space: nowrap; }
/* Panneaux & dock */
.tpl-noir .sheet { border-top: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); }
.tpl-noir .sheet-title, .tpl-noir .sheet-head h2, .tpl-noir .menu-sec-title { font-weight: 500; font-size: 1.6rem; }
.tpl-noir .menu-sec-title { border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); padding-bottom: .4rem; }
.tpl-noir .dish { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .9rem 0; }
.tpl-noir .dish h4 { font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.tpl-noir .cs-btn:not(.cs-btn-ghost):not(.cs-btn-google) { color: #111; text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; }
.tpl-noir .menu-cat.is-active { color: #111; }
.tpl-noir .cs-dock { border-radius: 4px; border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: rgba(16,14,12,.88); }
.tpl-noir .cs-dock a { border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-size: .6rem; }
.tpl-noir .cs-dock a.is-main { color: #111; }