/* Carte Sunny Sushi. Charte reprise de sunnysushi.fr :
   crème #fff8ef, orange #ff7a00, ambre #ffc14d, sable #f4e2b0, encre #1a1a1a,
   Manrope (titres), DM Sans (texte), Playfair Display italique (le mot qui chante). */
:root{
  --creme:#fff8ef; --creme2:#fbefe0; --carte:#fffdf9;
  --orange:#ff7a00; --orange-fonce:#b84d00; --ambre:#ffc14d; --sable:#f4e2b0; --or:#b88b38;
  --encre:#1a1a1a; --doux:#6c6258; --ligne:#eadfcf;
  --display:'Manrope',system-ui,sans-serif; --texte:'DM Sans',system-ui,sans-serif; --script:'Playfair Display',Georgia,serif;
  --r:18px; --haut-outils:58px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.fige{overflow:hidden}
body{margin:0;overflow-anchor:none;background:var(--creme);color:var(--encre);font:400 15px/1.5 var(--texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
.cadre{width:100%;max-width:760px;margin:0 auto;padding:0 16px}

/* ── En-tête ─────────────────────────────── */
.haut{background:
  radial-gradient(120% 70% at 50% -10%, #ffe2b8 0%, rgba(255,226,184,0) 60%), var(--creme)}
.haut__in{position:relative;display:flex;justify-content:center;padding-top:max(14px, env(safe-area-inset-top))}
.haut__logo{width:148px;height:auto;mix-blend-mode:multiply}
@media (max-width:380px){.haut__logo{width:118px;margin-right:30px}}
.langue{position:absolute;right:16px;top:max(16px, env(safe-area-inset-top));display:flex;background:var(--carte);border:1px solid var(--ligne);border-radius:99px;padding:3px}
.langue button{min-width:40px;height:32px;border-radius:99px;font:700 12px/1 var(--display);letter-spacing:.06em;color:var(--doux)}
.langue button[aria-pressed="true"]{background:var(--encre);color:#fff}

.intro{padding-top:6px;padding-bottom:20px;text-align:center}
.surtitre{margin:0 0 10px;font:700 11px/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--orange-fonce)}
h1{margin:0;font:800 clamp(34px,10vw,52px)/1 var(--display);letter-spacing:-.035em}
h1 i{font-family:var(--script);font-weight:600;color:var(--orange);letter-spacing:-.01em}
.intro__p{margin:12px auto 0;max-width:30ch;color:var(--doux);font-size:15px}

.filtres{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.filtre{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:99px;border:1px solid var(--ligne);background:var(--carte);font:600 13px/1 var(--texte);color:var(--encre);transition:background .15s,border-color .15s,color .15s}
.filtre svg{width:16px;height:16px;flex:none}
.filtre[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:#fff}

/* ── Barre collante ──────────────────────── */
.outils{position:sticky;top:0;z-index:20;background:rgba(255,248,239,.92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--ligne)}
.outils__in{height:var(--haut-outils);display:flex;align-items:center}
.nav{display:flex;align-items:center;gap:10px;width:100%;min-width:0}
.loupe{flex:none;width:42px;height:42px;border-radius:50%;background:var(--encre);display:grid;place-items:center}
.loupe svg,.rech svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.loupe svg{stroke:#fff}
.puces{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;padding:4px 16px 4px 0;margin-right:-16px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
.puces::-webkit-scrollbar{display:none}
.puce{flex:none;height:36px;padding:0 14px;border-radius:99px;font:700 13px/1 var(--display);color:var(--doux);white-space:nowrap;transition:background .2s,color .2s}
.puce[aria-current="true"]{background:var(--ambre);color:var(--encre)}

.rech{display:flex;align-items:center;gap:8px;width:100%;height:44px;padding:0 6px 0 14px;border-radius:99px;background:var(--carte);border:1.5px solid var(--encre)}
.rech input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:500 16px/1 var(--texte);color:var(--encre);-webkit-appearance:none;appearance:none}
.rech input::-webkit-search-cancel-button{display:none}
.rech__x{width:32px;height:32px;display:grid;place-items:center;color:var(--doux)}
.rech__fin{flex:none;height:32px;padding:0 10px;font:700 13px/1 var(--display);color:var(--orange-fonce)}

.actif{display:flex;justify-content:center;padding:0 16px 10px}
.actif button{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:99px;background:var(--encre);color:#fff;font:600 12px/1 var(--texte)}
.actif button b{font-weight:700;opacity:.7}

/* ── Catégories ──────────────────────────── */
#carte{padding-top:8px;padding-bottom:40px}
.recherche #carte{min-height:100svh}   /* la barre reste collée en haut même avec peu de résultats */
.cat{padding-top:30px}
.cat__t{margin:0;font:800 26px/1.1 var(--display);letter-spacing:-.025em}
.cat__s{margin:4px 0 0;color:var(--doux);font-size:14px}
.compte{margin:18px 0 0;color:var(--doux);font-size:14px}
.vide{padding:48px 0;text-align:center;color:var(--doux)}
.vide button{margin-top:12px;height:40px;padding:0 18px;border-radius:99px;border:1px solid var(--encre);font-weight:700;color:var(--encre)}

/* Grille de plats : deux colonnes au téléphone */
.grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin-top:16px}
@media (min-width:600px){.grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
.art{display:flex;flex-direction:column;text-align:left;min-width:0}
.art__v{position:relative;display:block;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--creme2)}
.art__v img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.art:active .art__v img{transform:scale(.97)}
.art__n{margin-top:9px;font:700 15px/1.25 var(--display);letter-spacing:-.01em}
.art__pied{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.prix{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:99px;background:var(--sable);font:800 13px/1 var(--display);white-space:nowrap}
.tags{display:inline-flex;gap:4px}
.tag{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--carte);border:1px solid var(--ligne)}
.tag svg{width:16px;height:16px}

/* Signatures : grandes cartes qui défilent de côté */
.sig{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:16px -16px 0;padding:0 16px 4px;scroll-padding:0 16px}
.sig::-webkit-scrollbar{display:none}
.sig .art{flex:none;width:min(78vw,330px);scroll-snap-align:start;position:relative}
.sig .art__v{aspect-ratio:1;border-radius:24px}
.sig .art__v::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(26,16,8,.78))}
.sig .art__txt{position:absolute;left:16px;right:16px;bottom:16px;z-index:1;color:#fff}
.sig .art__n{margin:0;font-size:22px;letter-spacing:-.02em}
.sig .art__pied{margin-top:8px}
.sig .prix{background:var(--ambre);color:var(--encre)}
.sig .tag{background:rgba(255,255,255,.9);border:0}
.sig .art__soleil{position:absolute;top:12px;left:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:99px;background:rgba(255,248,239,.94);font:800 10px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--orange-fonce)}

/* Boissons : packshots entiers, trois colonnes */
.grille--boissons{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
@media (min-width:600px){.grille--boissons{grid-template-columns:repeat(5,minmax(0,1fr))}}
.grille--boissons .art__v{background:#fff;border:1px solid var(--ligne);border-radius:14px}
.grille--boissons .art__v img{object-fit:contain;padding:8%}
.grille--boissons .art__n{font-size:13px}
.grille--boissons .art__d{margin-top:1px;font-size:12px;color:var(--doux)}
.grille--boissons .prix{height:22px;font-size:12px;padding:0 8px}

/* ── Pied de page ────────────────────────── */
.pied{background:var(--encre);color:#f3e9db;padding:44px 0 calc(36px + env(safe-area-inset-bottom));text-align:center}
.pied__marque{margin:0;font:800 34px/1 var(--display);letter-spacing:.06em;color:var(--ambre)}
.pied__marque i{font-family:var(--script);font-weight:600;letter-spacing:0;color:var(--orange);margin-left:4px}
.pied__slogan{margin:8px 0 0;font:700 11px/1.3 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#c4b6a8}
.pied__cmd{display:inline-flex;align-items:center;gap:8px;margin-top:24px;height:48px;padding:0 22px;border-radius:99px;background:var(--orange);color:var(--encre);font:800 14px/1 var(--display);text-decoration:none}
.pied__infos{display:flex;justify-content:center;gap:28px;margin-top:28px;font-size:14px;line-height:1.5}
.pied__infos p{margin:0}
.pied__infos a{text-decoration:none;font-weight:700;color:#fff}
.pied__liens{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-size:14px}
.pied__liens a{color:#f3e9db;text-underline-offset:3px}
.pied__note{margin:26px auto 0;max-width:34ch;font-size:12.5px;color:#a89c8f}
.pied__sign{margin:14px 0 0;font-size:12px;color:#8d8176}
.pied__sign a{color:#c4b6a8}

/* ── Fiche produit ───────────────────────── */
.voile{position:fixed;inset:0;z-index:40;background:rgba(26,16,8,.5);opacity:0;transition:opacity .3s}
.voile.on{opacity:1}
.fiche{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:560px;margin:0 auto;max-height:92svh;display:flex;flex-direction:column;background:var(--creme);border-radius:26px 26px 0 0;box-shadow:0 -10px 40px rgba(26,16,8,.25);transform:translateY(100%);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.fiche.on{transform:none}
.fiche.glisse{transition:none}
.fiche__prise{display:flex;justify-content:center;padding:10px 0 6px;flex:none}
.fiche__prise span{width:40px;height:5px;border-radius:9px;background:#d9cbb8}
.fiche__corps{overflow-y:auto;overscroll-behavior:contain;padding:0 16px calc(20px + env(safe-area-inset-bottom))}
.fiche__v{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--creme2) center/cover}
.fiche__v img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.fiche__v img.pret{opacity:1}
.fiche__v--boisson{background:#fff;border:1px solid var(--ligne)}
.fiche__v--boisson img{object-fit:contain;padding:6%}
.fiche__cat{margin:16px 0 0;font:700 11px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-fonce)}
.fiche h2{margin:6px 0 0;font:800 28px/1.08 var(--display);letter-spacing:-.025em}
.fiche__ligne{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.fiche__ligne .prix{height:34px;padding:0 14px;font-size:16px;background:var(--ambre)}
.fiche__tag{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:99px;background:var(--carte);border:1px solid var(--ligne);font-size:13px;font-weight:600}
.fiche__tag svg{width:15px;height:15px}
.fiche__d{margin:14px 0 0;font-size:16px;line-height:1.55;color:#3d362f}
.fiche__note{display:flex;gap:10px;margin-top:18px;padding:12px 14px;border-radius:14px;background:var(--creme2);font-size:13px;color:var(--doux)}
.fiche__note svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--orange-fonce)}
.fiche__fermer{display:block;width:100%;height:50px;margin-top:16px;border-radius:99px;background:var(--encre);color:#fff;font:800 15px/1 var(--display)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}