/* Bento — lumineux, mosaïque, gourmand (compact mobile) */
.tpl-eclat { --radius: 22px; }
.bt-top { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: calc(1.5rem + env(safe-area-inset-top)) 1rem .75rem; animation: up .6s var(--ease) both; }
.bt-brand { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.bt-brand > div { min-width: 0; }
.bt-brand b { display: block; font-family: var(--display); font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-brand small { display: block; color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-logo { width: 42px; height: 42px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-family: var(--display); font-weight: 800; font-size: .95rem; flex-shrink: 0; box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.bt-logo img { width: 100%; height: 100%; object-fit: cover; }
.bt-point { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .7rem; border-radius: 99px; background: var(--text); color: var(--bg); font-weight: 700; font-size: .76rem; white-space: nowrap; flex-shrink: 0; }
.bt-point svg { width: 14px; height: 14px; }
.bt-hero { position: relative; margin: 0 1rem; height: 178px; border-radius: 24px; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; box-shadow: 0 20px 34px -22px rgba(0,0,0,.55); animation: heroIn 1s var(--ease) both .1s; }
@keyframes heroIn { from { opacity: 0; transform: scale(.95); } }
.bt-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.75)); }
.bt-hero-in { position: relative; padding: 1rem 1.1rem; color: #fff; }
.bt-greet { display: inline-block; padding: .22rem .6rem; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .72rem; margin-bottom: .4rem; }
.bt-hero h1 { font-family: var(--display); font-weight: 800; font-size: 1.28rem; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.bt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .85rem 1rem 0; }
.bt-tile { --tint: #ffe8d9; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: .9rem; min-height: 112px; padding: .85rem; border-radius: 20px; background: var(--tint); overflow: hidden; transition: transform .2s var(--ease); }
.bt-tile:nth-child(6n+2) { --tint: #e2f4e8; } .bt-tile:nth-child(6n+3) { --tint: #e5edfd; } .bt-tile:nth-child(6n+4) { --tint: #fdf0c4; } .bt-tile:nth-child(6n+5) { --tint: #f2e5fb; } .bt-tile:nth-child(6n) { --tint: #dcf3f6; }
.bt-tile:active { transform: scale(.96); }
.bt-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: #fff; color: var(--text); box-shadow: 0 6px 12px -8px rgba(0,0,0,.25); }
.bt-ico svg { width: 21px; height: 21px; }
.bt-txt b { display: block; font-family: var(--display); font-weight: 700; font-size: .98rem; line-height: 1.15; letter-spacing: -.01em; }
.bt-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .15rem; font-size: .74rem; color: color-mix(in srgb, var(--text) 62%, transparent); line-height: 1.3; }
.bt-go { position: absolute; top: .85rem; right: .85rem; width: 17px; height: 17px; opacity: .4; }
.bt-tile.is-big { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: .9rem; min-height: 96px; padding: 1rem; background: var(--accent); color: var(--on-accent); background-size: cover; background-position: center; box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--accent) 85%, transparent); }
.bt-tile.is-big.has-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 94%, #000) 0%, color-mix(in srgb, var(--accent) 78%, transparent) 60%, color-mix(in srgb, var(--accent) 30%, transparent)); }
.bt-tile.is-big > * { position: relative; }
.bt-tile.is-big .bt-ico { width: 48px; height: 48px; background: rgba(255,255,255,.22); color: inherit; box-shadow: none; flex-shrink: 0; }
.bt-tile.is-big .bt-txt b { font-size: 1.3rem; }
.bt-tile.is-big .bt-txt small { color: inherit; opacity: .88; font-size: .82rem; }
.bt-tile.is-big .bt-go { position: static; margin-left: auto; opacity: .9; color: inherit; width: 22px; height: 22px; }
.bt-feat { padding: 1.3rem 0 0; }
.bt-feat-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 1rem .6rem; }
.bt-feat-head h2 { font-family: var(--display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.bt-feat-head a { display: inline-flex; align-items: center; gap: .25rem; color: var(--accent); font-weight: 700; font-size: .8rem; }
.bt-feat-head svg { width: 14px; height: 14px; }
.bt-rail { display: flex; gap: .6rem; overflow-x: auto; padding: 0 1rem .4rem; scroll-snap-type: x mandatory; scroll-padding: 1rem; scrollbar-width: none; }
.bt-rail::-webkit-scrollbar { display: none; }
.bt-dish { flex: 0 0 136px; scroll-snap-align: start; padding: .45rem .45rem .65rem; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.bt-dish img { width: 100%; height: 96px; object-fit: cover; border-radius: 13px; margin-bottom: .45rem; }
.bt-dish b { display: block; font-size: .82rem; line-height: 1.25; padding: 0 .2rem; }
.bt-dish span { display: block; padding: .15rem .2rem 0; color: var(--accent); font-weight: 800; font-size: .8rem; }
.bt-contact { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: 1rem 1rem 0; }
.bt-contact a { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); font-weight: 700; font-size: .86rem; }
.bt-contact svg { width: 17px; height: 17px; color: var(--accent); }
.tpl-eclat .sheet-title, .tpl-eclat .menu-sec-title { font-weight: 800; letter-spacing: -.02em; }
.tpl-eclat .cs-dock { border-radius: 22px; }