/* Street Pop — néo-brutalisme (compact mobile) */
.tpl-pop { --ink: #111; --radius: 16px; --radius-sm: 12px; }
.pp-marquee { overflow: hidden; background: var(--ink); color: var(--bg); padding: .45rem 0; padding-top: calc(.45rem + env(safe-area-inset-top)); }
.pp-marquee div { display: flex; gap: .9rem; width: max-content; animation: ppMarq 18s linear infinite; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: .82rem; }
.pp-marquee i { font-style: normal; color: var(--accent); }
@keyframes ppMarq { to { transform: translateX(-50%); } }
.pp-head { padding: 1.1rem 1rem .2rem; }
.pp-stickers { position: relative; height: 158px; }
.pp-photo { position: absolute; left: 50%; top: 2px; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%; overflow: hidden; border: 3.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); animation: ppSpin .9s var(--spring) both; }
@keyframes ppSpin { from { transform: rotate(-90deg) scale(.4); opacity: 0; } }
.pp-photo img { width: 100%; height: 100%; object-fit: cover; }
.pp-logo { position: absolute; left: 4%; bottom: 4px; width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border-radius: 15px; background: #fff; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-10deg); font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--ink); animation: ppPop .6s var(--spring) both .4s; }
.pp-logo img { width: 100%; height: 100%; object-fit: cover; }
.pp-burst { position: absolute; right: 2%; top: -4px; width: 84px; height: 84px; display: grid; place-items: center; transform: rotate(14deg); animation: ppPop .6s var(--spring) both .55s; }
.pp-burst svg { position: absolute; inset: 0; fill: var(--accent); stroke: var(--ink); stroke-width: 3; animation: ppRot 14s linear infinite; }
@keyframes ppRot { to { transform: rotate(360deg); } }
.pp-burst b { position: relative; font-family: var(--display); font-weight: 800; font-size: .74rem; line-height: 1; text-align: center; color: #fff; text-transform: uppercase; padding: 0 .9rem; }
@keyframes ppPop { from { transform: scale(0) rotate(-40deg); } }
.pp-name { margin-top: .8rem; font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 12.5vw, 3.2rem); line-height: .88; letter-spacing: -.05em; text-transform: uppercase; text-align: center; color: var(--ink); text-shadow: 3px 3px 0 var(--accent); overflow-wrap: anywhere; animation: up .7s var(--ease) both .2s; }
.pp-tag { display: table; margin: .7rem auto 0; padding: .28rem .8rem; background: #fff; border: 2.5px solid var(--ink); border-radius: 99px; font-weight: 700; font-size: .8rem; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--ink); }
.pp-hello { margin-top: .75rem; text-align: center; font-weight: 500; font-size: .86rem; line-height: 1.4; }
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: .9rem 1rem 0; }
.pp-tile { --c: var(--accent); position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; min-height: 106px; padding: .75rem; border-radius: 16px; background: var(--c); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(var(--r, -1deg)); transition: transform .15s, box-shadow .15s; }
.pp-tile:nth-child(6n+2) { --c: #4de1ff; --r: 1.2deg; } .pp-tile:nth-child(6n+3) { --c: #86f26e; --r: .9deg; } .pp-tile:nth-child(6n+4) { --c: #ffffff; --r: -1.3deg; } .pp-tile:nth-child(6n+5) { --c: #c0a3ff; --r: -.7deg; } .pp-tile:nth-child(6n) { --c: #ff9f1c; --r: 1.3deg; }
.pp-tile:active { transform: translate(3px, 3px) rotate(0); box-shadow: 1px 1px 0 var(--ink); }
.pp-num { position: absolute; top: .45rem; right: .6rem; font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.pp-ico { width: 28px; height: 28px; stroke-width: 2.4; margin-bottom: auto; }
.pp-tile b { font-family: var(--display); font-weight: 800; font-size: .94rem; line-height: 1.05; text-transform: uppercase; }
.pp-feat { padding: 1.5rem 0 0; }
.pp-feat h2 { padding: 0 1rem .6rem; font-family: var(--display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; letter-spacing: -.04em; line-height: .95; }
.pp-feat h2 span { display: block; font-size: .85rem; letter-spacing: 0; background: var(--ink); color: var(--bg); width: max-content; padding: .1rem .45rem; margin-top: .3rem; transform: rotate(-2deg); }
.pp-rail { display: flex; gap: .85rem; overflow-x: auto; padding: .5rem 1rem .9rem; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: 1rem; }
.pp-rail::-webkit-scrollbar { display: none; }
.pp-dish { position: relative; flex: 0 0 146px; scroll-snap-align: start; padding: .5rem; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
.pp-dish img { width: 100%; height: 100px; object-fit: cover; border-radius: 9px; border: 2px solid var(--ink); margin-bottom: .4rem; }
.pp-dish b { font-weight: 800; font-size: .84rem; line-height: 1.15; display: block; }
.pp-price { position: absolute; top: -10px; right: -8px; padding: .2rem .5rem; background: var(--accent); color: #fff; border: 2.5px solid var(--ink); border-radius: 9px; font-weight: 800; font-size: .78rem; transform: rotate(8deg); }
/* Panneaux & dock */
.tpl-pop .sheet { border: 3px solid var(--ink); border-bottom: 0; }
.tpl-pop .dish, .tpl-pop .svc span, .tpl-pop .amount span, .tpl-pop .social, .tpl-pop .cs-input, .tpl-pop .menu-cat, .tpl-pop .staff > span, .tpl-pop .amen, .tpl-pop .contact, .tpl-pop .info-row, .tpl-pop .wifi-box, .tpl-pop .aspects { border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tpl-pop .cs-btn:not(.cs-btn-ghost):not(.cs-btn-google) { border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); color: #fff; text-transform: uppercase; font-family: var(--display); font-weight: 800; }
.tpl-pop .cs-btn-ghost { border: 2.5px solid var(--ink); font-weight: 800; }
.tpl-pop .sheet-title, .tpl-pop .sheet-head h2, .tpl-pop .menu-sec-title { font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; }
.tpl-pop .cs-foot { color: var(--ink); }
.tpl-pop .cs-dock { background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); backdrop-filter: none; }
.tpl-pop .cs-dock a { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: .62rem; }
.tpl-pop .cs-dock a.is-main { color: #fff; border: 2px solid var(--ink); }