/* === Snack Chez LOLO — CSS propre à la carte (/menu) : la feuille de carte, ses rubriques, ses lignes de plat,
   les surligneurs, l'aperçu au survol, les pages à tourner du téléphone, les infos pratiques.
   Base partagée : assets/design.css (jetons, en-tête, boutons, puces de rubriques, pastille Ouvert / Fermé,
   fiche d'un plat, cartes d'infos, barre d'appel, pied de page). Aucune couleur en dur. === */

main { display: block; }
body { font-size: 1rem; line-height: 1.5; }
main .btn { min-height: 44px; }   /* zone tactile */

/* ---------- LA FEUILLE : une carte posée devant soi ---------- */
/* --hd-large / --hd-marge : l'îlot de l'en-tête prend la largeur de la feuille, bord à bord (assets/design.css) */
:root { --marge-page: clamp(0.5rem, 2vw, 1.6rem); --marge-feuille: clamp(0.9rem, 1.8vw, 1.6rem); --hd-large: calc(1560px - 2 * var(--marge-page)); --hd-marge: var(--marge-page); }
/* sous la feuille, de l'air avant le pied de page : la carte ne doit pas avoir l'air posée dessus */
.carte-page { max-width: 1560px; margin: 0 auto; padding: clamp(0.5rem, 1.4vw, 1rem) var(--marge-page) clamp(2.6rem, 5vw, 4.5rem); }
.feuille { --pad: var(--marge-feuille); --wp: 3.5rem; position: relative; padding: clamp(0.85rem, 1.5vw, 1.3rem) var(--pad) 1rem; background: var(--paper); border: 1px solid var(--border); border-radius: 1.1rem; box-shadow: 0 1px 0 var(--border), 0 18px 44px var(--ombre); }
/* le filet doré d'une carte imprimée */
.feuille::before { content: ''; position: absolute; inset: 0.38rem; border: 1px solid color-mix(in srgb, var(--secondary) 55%, transparent); border-radius: 0.8rem; pointer-events: none; }

/* ---------- EN-TÊTE DE LA CARTE : le titre, les surligneurs, le statut et la monnaie ---------- */
.tete { display: grid; grid-template-columns: 21rem minmax(0, 1fr) 20rem; align-items: center; gap: 0.5rem 1.2rem; padding: 0.1rem 0.35rem 0.7rem; border-bottom: 2px dotted var(--border); }
.tete .hero-kicker { margin: 0 0 0.25rem; font-size: 0.58rem; letter-spacing: 0.08em; white-space: nowrap; }
.tete h1 { display: inline-flex; align-items: flex-start; gap: 0.15em; font-size: clamp(1.9rem, 3.1vw, 2.5rem); font-style: italic; font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; }
.tete h1 .hib { width: 0.55em; height: 0.55em; margin-top: -0.05em; }
.hib .hib-petale { fill: var(--gold-light); } .hib .hib-coeur { fill: var(--accent); } .hib .hib-pistil { stroke: var(--accent); fill: var(--accent); }
.tete-infos { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
/* la pastille tient toujours sur une ligne, même en anglais (« Closed · opens Wednesday at 10:00 AM ») */
.tete .hero-status { margin: 0; font-size: 0.62rem; white-space: nowrap; }
/* la monnaie, sous le titre */
.xpf { margin-top: 0.3rem; font-size: 0.74rem; font-style: italic; line-height: 1.3; color: var(--muted-fg); white-space: nowrap; }
.filtres-b { display: none; }

/* Surligneurs : un trait de feutre passe sous le nom des plats qui correspondent, les autres s'estompent.
   Ils sont rangés sur une grille dont le nombre de colonnes ne dépend que de la largeur d'écran (le compteur occupe
   la sixième case) : la hauteur de l'en-tête est la même avant et après l'arrivée des polices, la carte ne descend
   donc pas d'un cran sous les yeux du visiteur. */
.surls { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; align-items: center; gap: 0.4rem; }
@media (min-width: 1260px) { .surls { grid-template-columns: repeat(3, max-content); } }
@media (min-width: 1600px) { .surls { grid-template-columns: repeat(6, max-content); } }
.surl { --m: var(--gold-light); display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.4rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1.5px solid var(--border); background: var(--paper); font-family: 'Fraunces', serif; font-weight: 700; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg); white-space: nowrap; cursor: pointer; transition: border-color 0.2s, background 0.25s; }
.surl::before { content: ''; width: 0.95rem; height: 0.5rem; border-radius: 2px; background: var(--m); }
.surl:hover { border-color: var(--fg); }
.surl[aria-pressed="true"] { border-color: var(--fg); background: color-mix(in srgb, var(--m) 55%, var(--paper)); }
.surl[data-tag="local"], .feuille[data-surl="local"] { --m: color-mix(in srgb, var(--primary-light) 42%, var(--paper)); }
.surl[data-tag="fish"], .feuille[data-surl="fish"] { --m: color-mix(in srgb, var(--blue) 36%, var(--paper)); }
.surl[data-tag="sweet"], .feuille[data-surl="sweet"] { --m: color-mix(in srgb, var(--pink) 42%, var(--paper)); }
.surl[data-tag="veg"], .feuille[data-surl="veg"] { --m: color-mix(in srgb, var(--primary) 30%, var(--gold-light)); }
.feuille[data-surl="best"] { --m: var(--gold-light); }
.surl-compte { min-width: 6.5rem; font-size: 0.74rem; font-style: italic; color: var(--muted-fg); }
.feuille[data-surl] .ligne:not(.touche), .feuille[data-surl] .extras, .feuille[data-surl] .note, .feuille[data-surl] .sous, .feuille[data-surl] .atouts-l { opacity: 0.28; }
.feuille[data-surl] .ligne.touche .ligne-nom b { background-size: 100% 0.6em; }
.feuille[data-surl] .ctab.sans { opacity: 0.4; }

/* Puces des rubriques (composant : design.css) — utiles tant que la carte ne tient pas d'un seul regard */
.feuille .cnav { margin: 0 calc(-1 * var(--pad)); padding-inline: var(--pad); border-radius: 0; }
@media (min-width: 1100px) { .feuille .cnav { display: none; } }

/* ---------- RUBRIQUES ----------
   Grand écran : des colonnes, chaque rubrique rangée dans la colonne la plus courte (le script pose les lignes
   de grille ; sans lui, les rubriques s'alignent simplement par rangées).
   Téléphone : une rubrique par page, que l'on tourne du doigt (plus bas). */
.pages { --cols: 2; --g: clamp(1.2rem, 2.2vw, 2.2rem); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g); align-items: start; padding-top: 0.8rem; }
@media (min-width: 1024px) { .pages { --cols: 3; } }
@media (min-width: 1400px) { .pages { --cols: 4; } }
.pages.mac { grid-auto-rows: 4px; }
/* filets pointillés entre les colonnes, comme les volets d'une carte */
.pages { background-repeat: no-repeat; background-size: 2px calc(100% - 1.6rem); --filet: repeating-linear-gradient(to bottom, var(--border) 0 2px, transparent 2px 7px);
  background-image: var(--filet); background-position: calc((100% + var(--g)) / 2 - var(--g) / 2 - 1px) 1rem; }
@media (min-width: 1024px) { .pages { background-image: var(--filet), var(--filet); background-position: calc((100% + var(--g)) / 3 - var(--g) / 2 - 1px) 1rem, calc((100% + var(--g)) * 2 / 3 - var(--g) / 2 - 1px) 1rem; } }
@media (min-width: 1400px) { .pages { background-image: var(--filet), var(--filet), var(--filet); background-position: calc((100% + var(--g)) / 4 - var(--g) / 2 - 1px) 1rem, calc((100% + var(--g)) * 2 / 4 - var(--g) / 2 - 1px) 1rem, calc((100% + var(--g)) * 3 / 4 - var(--g) / 2 - 1px) 1rem; } }

.rub { --c: var(--c-vert); min-width: 0; padding-bottom: 1rem; scroll-margin-top: calc(var(--hd-h) + 4.4rem); }
.rub[data-c="or"] { --c: var(--c-or); } .rub[data-c="bleu"] { --c: var(--c-bleu); } .rub[data-c="corail"] { --c: var(--c-corail); } .rub[data-c="rose"] { --c: var(--c-rose); }
.rub-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.1rem 0.65rem; margin-bottom: 0.2rem; padding: 0 0.35rem 0.45rem; border-bottom: 2px solid color-mix(in srgb, var(--c) 45%, var(--paper)); }
/* l'assiette de la rubrique : son plat vedette, cerclé à sa couleur */
.assiette { width: 2.9rem; height: 2.9rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px color-mix(in srgb, var(--c) 55%, var(--paper)), 0 4px 10px var(--ombre); transition: transform 0.5s var(--elan); }
@media (hover: hover) { .rub:hover .assiette { transform: scale(1.08); } }
.rub h2 { font-size: 1.02rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.15; color: var(--primary); }
.rub-titre p { font-size: 0.76rem; font-style: italic; line-height: 1.3; color: var(--muted-fg); }
/* en-têtes des deux colonnes de prix (Seul / Menu, Normal / Magnum, 26 / 30 cm) */
.cols { display: flex; align-self: end; }
.cols span { width: var(--wp); padding-left: 0.3rem; text-align: right; font-family: 'Fraunces', serif; font-weight: 800; font-size: 0.54rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.25; color: var(--muted-fg); }
.cols small { display: block; font-family: 'Lora', serif; font-weight: 400; font-style: italic; font-size: 0.6rem; text-transform: none; letter-spacing: 0; }

.sous { margin: 0.6rem 0.35rem 0.1rem; font-family: 'Fraunces', serif; font-weight: 800; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted-fg); transition: opacity 0.3s; }

/* ---------- LIGNES DE PLAT : le nom, des points de conduite, le prix — et la description dessous ---------- */
.lignes { list-style: none; }
.ligne { transition: opacity 0.3s; }
.ligne-b { display: flex; align-items: flex-start; gap: 0.6rem; width: 100%; padding: 0.2rem 0.35rem; border: 0; border-radius: 0.5rem; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s; }
.ligne-b:focus-visible { outline-offset: 0; }
.ligne-ph { display: none; }
.ligne-txt { display: block; flex: 1 1 auto; min-width: 0; }
.ligne-tete { display: flex; align-items: baseline; }
.ligne-nom { flex: 0 1 auto; min-width: 0; font-family: 'Fraunces', serif; font-size: 0.92rem; line-height: 1.25; transition: color 0.2s; }
/* le trait de surligneur : un fond qui s'étire de gauche à droite quand le plat est « touché » */
.ligne-nom b { font-weight: 700; background: linear-gradient(var(--m, transparent), var(--m, transparent)) no-repeat 0 88% / 0% 0.6em; transition: background-size 0.5s var(--elan); }
.ligne-nom .bdg { margin-left: 0.3rem; vertical-align: 0.12em; white-space: nowrap; }
.points { flex: 1 1 0; min-width: 0; align-self: flex-end; margin: 0 0.3rem 0.34em; border-bottom: 2px dotted var(--border); transition: border-color 0.2s; }
.ligne .price { flex: 0 0 var(--wp); text-align: right; font-size: 0.92rem; }
.ligne .price:first-of-type { flex-basis: auto; min-width: 2.2rem; }
.ligne .price small { display: none; }           /* grand écran : la monnaie est dite une fois, en tête de carte */
.ligne-desc { display: block; margin-top: 0.05rem; padding-right: 0.4rem; font-size: 0.76rem; font-style: italic; line-height: 1.35; color: var(--muted-fg); }
@media (hover: hover) {
  .ligne-b:hover { background: color-mix(in srgb, var(--c) 9%, var(--paper)); }
  .ligne-b:hover .ligne-nom { color: var(--primary); }
  .ligne-b:hover .points { border-color: var(--primary); }
}
.ligne-b:active { background: color-mix(in srgb, var(--c) 16%, var(--paper)); }
/* les plats au choix du jour : pas de prix propre, deux par ligne */
.lignes.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0.3rem; }
.lignes.duo .points { display: none; }

/* suppléments et petits prix : une liste en ligne, séparée par des points médians */
.extras { margin: 0.5rem 0.35rem 0; padding: 0.45rem 0.65rem 0.5rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--c) 8%, var(--paper)); font-size: 0.76rem; line-height: 1.55; transition: opacity 0.3s; }
.extras .sous { display: inline; margin: 0 0.35rem 0 0; }
.extras ul { display: inline; list-style: none; }
.extras li { display: inline; white-space: nowrap; }
.extras li + li::before { content: ' · '; white-space: normal; color: var(--muted-fg); }
.extras .price { font-size: 0.8rem; }
.note { margin: 0.4rem 0.35rem 0; font-size: 0.7rem; font-style: italic; line-height: 1.4; color: var(--muted-fg); transition: opacity 0.3s; }
.note b { font-style: normal; font-family: 'Fraunces', serif; font-weight: 800; color: var(--fg); }

.feuille-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1.4rem; margin-top: 0.2rem; padding: 0.7rem 0.35rem 0; border-top: 2px dotted var(--border); font-size: 0.74rem; font-style: italic; color: var(--muted-fg); }
.feuille-pied .geste { color: var(--primary); }
.tourne { display: none; }

/* ---------- La carte se pose ----------
   Tant que le script n'a pas mis les rubriques à leur place (grand écran : colonnes équilibrées, polices arrivées ;
   téléphone : page de départ), elles restent invisibles — sinon elles se déplaceraient sous les yeux du visiteur.
   <html class="js"> est posée dans le <head> ; sans script, rien n'est caché. Si le script tarde ou échoue, tout
   devient visible au bout de 3 s. */
/* le pied de la feuille attend lui aussi : sa place dépend de la hauteur des rubriques */
.js .feuille:not(.prete) .pages, .js .feuille:not(.prete) > .atouts, .js .feuille:not(.prete) > .tourne, .js .feuille:not(.prete) > .feuille-pied { visibility: hidden; animation: secours 0s linear 3s forwards; }
@keyframes secours { to { visibility: visible; } }
/* Puis les rubriques arrivent l'une après l'autre (grand écran, et seulement si <html class="anim">).
   Ce sont les contenus qui bougent, pas la rubrique : elle est la cible d'un lien, sa position doit rester exacte. */
@media (min-width: 700px) {
  .anim .feuille.prete .rub > * { animation: pose 0.5s var(--elan) both; animation-delay: calc(min(var(--i, 0), 6) * 40ms); }
  .anim .feuille.prete .atouts .sous, .anim .feuille.prete .atout { animation: pose 0.55s var(--elan) backwards; animation-delay: calc(0.3s + var(--k, 0) * 80ms); }
}
@keyframes pose { from { opacity: 0; transform: translateY(0.8rem); } }
/* arrivée depuis l'accueil sur une rubrique précise : son en-tête s'allume un instant */
.rub:target .rub-tete { animation: cible 1.8s ease 0.3s both; }
@keyframes cible { 0%, 60% { background: color-mix(in srgb, var(--c) 18%, var(--paper)); } 100% { background: transparent; } }

/* ---------- APERÇU AU SURVOL (souris) : la photo du plat suit le curseur, droite, sans rotation ---------- */
.apercu { position: fixed; left: 0; top: 0; z-index: 70; width: 11.5rem; height: 11.5rem; overflow: hidden; border: 5px solid var(--paper); border-radius: 1rem; background: var(--sand); box-shadow: 0 18px 40px var(--ombre-forte); pointer-events: none; opacity: 0; transition: opacity 0.22s; will-change: transform, opacity; }
.apercu.vu { opacity: 1; }
.apercu img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- BON À SAVOIR : les atouts du snack, dans la carte ----------
   Grand écran : le script en fait la dernière case de la grille (colonne la plus courte). Téléphone, ou sans
   script : le bloc reste sous les pages. Les médaillons et leurs mouvements : assets/design.css (« ATOUTS »). */
.atouts { min-width: 0; padding: 0.3rem 0.35rem 1rem; transition: opacity 0.3s; }
.feuille > .atouts { padding: 0.9rem 0.35rem 0.7rem; }
.atouts .sous { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.8rem; white-space: nowrap; }
.atouts .sous::before, .atouts .sous::after { content: ''; flex: 1 1 0; border-bottom: 2px dotted var(--border); }
.atouts-l { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.feuille > .atouts .atouts-l { max-width: 34rem; margin-inline: auto; }
/* les médaillons eux-mêmes (.atout, .atout-ico) et leurs mouvements : composant partagé, assets/design.css (« ATOUTS ») */

/* ---------- COMMANDER dans la carte (composant .cmd et sa version « bas d'écran » : assets/design.css) ----------
   Grand écran : en haut à droite de la feuille, au-dessus de la pastille Ouvert / Fermé — c'est le geste de la page.
   Téléphone : collé au bas de la feuille, toujours sous le pouce. */
.feuille > .mbar-wrap { margin: 0.8rem calc(var(--pad) * -0.4) 0; }
@media (max-width: 640px) { .tete .cmd { display: none; } }

/* ---------- TABLETTE : la carte ne tient plus d'un regard, on respire un peu plus ---------- */
@media (max-width: 1099px) {
  .tete { grid-template-columns: minmax(0, 1fr) auto; }
  /* une seule rangée, que l'on fait glisser si elle dépasse : sa hauteur ne dépend pas non plus de la police */
  .surls { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .surls::-webkit-scrollbar { display: none; }
  .surl-compte { min-width: 0; white-space: nowrap; }
}

/* ---------- TÉLÉPHONE : une rubrique par page, que l'on tourne du doigt ---------- */
@media (max-width: 699px) {
  .carte-page { padding-inline: 0.4rem; }
  .feuille { --pad: 0.95rem; --wp: 4.6rem; padding-top: 0.8rem; border-radius: 1rem; }
  .feuille::before { display: none; }           /* pas de filet : la barre des puces traverse toute la feuille */
  .tete { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 0.8rem; padding: 0 0 0.7rem; border-bottom: 0; }
  .tete .hero-kicker { display: none; }
  .tete h1 { font-size: 1.75rem; }
  .tete-infos { display: contents; }
  .tete .hero-status { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .xpf { font-size: 0.7rem; white-space: normal; }
  /* les surligneurs se rangent derrière un bouton */
  .filtres-b { grid-column: 2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.2rem; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1.5px solid var(--border); background: var(--paper); font-family: 'Fraunces', serif; font-weight: 700; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg); cursor: pointer; }
  .filtres-b .ico { width: 15px; height: 15px; }
  .filtres-b[aria-expanded="true"] { border-color: var(--fg); }
  .surls { grid-row: 3; display: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding: 0.1rem var(--pad); }
  .surls::-webkit-scrollbar { display: none; }
  .tete.ouverte .surls { display: flex; }
  .surl-compte { min-width: 0; white-space: nowrap; }

  /* pas de pointillé au-dessus des puces : collées sous l'en-tête, il ferait un trait sous l'îlot */
  .feuille .cnav { border-bottom: 2px dotted var(--border); }
  /* Une rubrique à la fois, sans glissière horizontale : au doigt, la glissière changeait de rubrique au moindre écart de
     côté (iPhone de Joram, 2026-10-09). Le script pose « tournee » sur .pages et « ici » sur la rubrique montrée ; sans
     lui, les rubriques se suivent simplement l'une sous l'autre. */
  .pages { display: block; margin-inline: calc(-1 * var(--pad)); padding-top: 0; background-image: none; }
  .pages.tournee > .rub:not(.ici) { display: none; }
  .rub { padding: 0.9rem var(--pad) 0.9rem; scroll-margin-top: calc(var(--hd-h) + 4rem); }
  .rub-tete { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 0; }
  .assiette { display: none; }                   /* chaque ligne a déjà sa vignette */
  .rub h2 { font-size: 1.3rem; }
  .rub-titre p { font-size: 0.85rem; }
  .ligne-b { align-items: center; gap: 0.7rem; padding: 0.42rem 0; }
  .ligne-ph { display: block; flex: 0 0 auto; width: 2.9rem; height: 2.9rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px color-mix(in srgb, var(--c) 45%, var(--paper)); }
  .ligne-nom { font-size: 1rem; }
  .ligne .price { font-size: 0.98rem; }
  .ligne .price small { display: inline; }
  .ligne-desc { font-size: 0.8rem; }
  .lignes.duo { display: block; }
  .sous { margin-inline: 0; }
  .extras, .note { margin-inline: 0; }
  .extras { font-size: 0.8rem; }
  .feuille-pied { justify-content: center; text-align: center; }
  .feuille > .atouts { padding-inline: 0; }
  .atouts .atout { font-size: 0.56rem; letter-spacing: 0.05em; }
  .atouts .atout-ico { width: 2.75rem; height: 2.75rem; }
  /* pied de page de la carte : page précédente, numéro, page suivante */
  .tourne { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.5rem; padding: 0.6rem 0 0.2rem; border-top: 2px dotted var(--border); }
  .tourne button { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 44px; min-width: 0; padding: 0.3rem 0; border: 0; background: none; font-family: 'Fraunces', serif; font-weight: 700; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); cursor: pointer; }
  .tourne button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tourne button:last-child { justify-self: end; }
  .tourne button:first-child .ico { transform: rotate(180deg); }
  .tourne button[hidden] { display: none; }
  .tourne .ico { width: 16px; height: 16px; flex: 0 0 auto; }
  .tourne b { grid-column: 2; font-family: 'Fraunces', serif; font-weight: 800; font-size: 0.78rem; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
}

@media (min-width: 641px) and (max-width: 699px) {
  .tete .hero-status { grid-column: 1; }
  .tete .cmd { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* Téléphone : la rubrique qu'on vient de choisir arrive d'un léger mouvement, une fois */
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  .anim .feuille.prete .pages.tournee > .rub.ici { animation: page-arrive 0.26s ease both; }
  @keyframes page-arrive { from { opacity: 0; transform: translateY(0.5rem); } }
}