/* ===== Mon Menu – tokens (alignés sur l'app mobile) ===== */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/Fraunces-VariableFont.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --red-900: #b30a0a;
  --red-700: #d11414;
  --red-500: #ed1c24;
  --red-100: #fdecec;
  --red-50: #fef6f6;

  --ink-900: #0e0e10;
  --ink-700: #2b2b2f;
  --ink-500: #6e6e76;
  --ink-300: #b7b7bd;
  --ink-100: #ececee;
  --paper: #faf8f5;
  --paper-pure: #ffffff;
  --gold: #c9a14a;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 3px rgba(14, 14, 16, 0.04), 0 1px 2px rgba(14, 14, 16, 0.06);
  --shadow-2: 0 2px 4px rgba(14, 14, 16, 0.04), 0 4px 12px rgba(14, 14, 16, 0.06);
  --shadow-cta: 0 6px 16px rgba(209, 20, 20, 0.24);

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;

  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Manrope", system-ui, -apple-system, sans-serif;

  --container: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.45s;
  --gutter: 20px;
  --nav-offset-top: 92px;
  --nav-offset-bottom: 112px;
  --tabs-bottom: max(12px, env(safe-area-inset-bottom)); /* distance des onglets au bas de l'écran */
}

/* ===== Reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* footer toujours en bas de la page, même quand le contenu est court */
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
:focus-visible {
  outline: 2px solid var(--red-700);
  outline-offset: 2px;
}

main {
  flex: 1 0 auto;
}
.site-footer {
  flex-shrink: 0;
}
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ===== Barre de navigation flottante (équivalent ShellBottomNav, placée en haut) ===== */
.topnav-wrap {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 60;
  width: 100%;
  max-width: var(--container);
  padding: 0 var(--gutter);
  transform: translateX(-50%);
  pointer-events: none;
}
.topnav {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: 0;
  pointer-events: auto;
  border: 0.8px solid transparent;
  border-radius: 32px;
  transition: padding var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), -webkit-backdrop-filter var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
/* La barre blanche n'apparaît qu'une fois le scroll commencé */
.topnav.is-scrolled {
  padding: 8px 12px;
  border-color: rgba(236, 236, 238, 0.9);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(14, 14, 16, 0.1);
}
.brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding-left: 4px;
}
.brand img {
  width: auto;
  height: 40px;
}

.search {
  position: relative;
  flex: 1;
  max-width: 440px;
  margin-left: auto;
}
.search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--red-700);
  pointer-events: none;
}
.search > input {
  width: 100%;
  height: 40px;
  padding: 0 16px 0 38px;
  border: 0;
  border-radius: 20px;
  background: var(--paper-pure);
  box-shadow: var(--shadow-2);
  font-size: 14px;
  color: var(--ink-900);
}
.search > input::placeholder {
  color: var(--ink-500);
}

.icon-btn {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper-pure);
  box-shadow: var(--shadow-2);
  color: var(--red-700);
  transition: background 0.15s;
}
.icon-btn:hover {
  background: var(--red-100);
}
.icon-btn svg {
  width: 22px;
  height: 22px;
}
.badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red-700);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
.badge-count[hidden] {
  display: none;
}

.tabs-wrap {
  position: fixed;
  bottom: calc(var(--tabs-bottom) + var(--tabs-lift, 0px));
  left: 50%;
  z-index: 60;
  width: min(calc(100% - 24px), 520px);
  transform: translateX(-50%);
}
.tabs {
  display: flex;
  width: 100%;
  margin: 0 auto;
  padding: 8px 8px 6px; /* +4 px de hauteur */
  border: 0.8px solid rgba(236, 236, 238, 0.9);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(14, 14, 16, 0.1);
  transition: width var(--dur) var(--ease);
  will-change: width;
}
.tabs-wrap.is-collapsed .tabs {
  width: 66%;
}
.tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 2px 0 4px;
  border-radius: var(--radius-pill);
  color: var(--ink-500);
  transition: color 0.15s;
}
.tab[aria-current="page"] {
  color: var(--red-700);
}
.tab:hover:not([aria-current="page"]) {
  color: var(--ink-900);
}
.tab__icon {
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  transition: padding var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tab__icon svg {
  width: 24px;
  height: 24px;
  transition: transform var(--dur) var(--ease);
}
.tab[aria-current="page"] svg {
  fill: currentColor;
  fill-opacity: 0.18;
  stroke-width: 2.2;
}
.tab__label {
  max-height: 16px;
  margin-top: 3px;
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.35; /* assez haut pour les jambages (g, p, q) : overflow:hidden les rognait */
  white-space: nowrap;
  transition: max-height var(--dur) var(--ease), margin var(--dur) var(--ease), opacity 0.25s ease, transform var(--dur) var(--ease);
}

/* Réduit au scroll vers le bas : icônes seules, pastille sur l'onglet actif */
.tabs-wrap.is-collapsed .tab__icon svg {
  transform: scale(0.92);
}
.tabs-wrap.is-collapsed .tab__label {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-4px);
}
.tabs-wrap.is-collapsed .tab[aria-current="page"] .tab__icon {
  padding: 4px 12px;
  background: var(--red-50);
}

/* ===== Sections ===== */
main {
  padding: var(--nav-offset-top) 0 var(--nav-offset-bottom);
}
.section {
  margin-top: var(--s8);
}
.section__head {
  margin-bottom: var(--s3);
}
.section__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
}
.section__more {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--red-700);
}
.section__more svg {
  width: 16px;
  height: 16px;
}
.section__more:hover {
  text-decoration: underline;
}
.section__foot {
  display: flex;
  justify-content: center;
  margin-top: var(--s6);
}
.section__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.section__sub {
  margin-top: var(--s1);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12px;
  color: var(--ink-500);
}

/* ===== Cover tones (fallback sans image) ===== */
.tone-warm { background: linear-gradient(135deg, #f3c58e, #d98a4a); }
.tone-green { background: linear-gradient(135deg, #bfe0b5, #6fae6a); }
.tone-rouge { background: linear-gradient(135deg, #f1a28f, #c9402c); }
.tone-cream { background: linear-gradient(135deg, #f7ecd9, #e4cfa9); }
.tone-cocoa { background: linear-gradient(135deg, #b98768, #6b4331); }

.cover {
  position: relative;
  overflow: hidden;
}
.cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s4);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: rgba(14, 14, 16, 0.55);
}

/* ===== Hero ===== */
.hero {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  background: var(--ink-100);
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.hero:hover .hero__img {
  transform: scale(1.03);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(14, 14, 16, 0.85));
}
.hero__text {
  position: absolute;
  z-index: 1;
  left: var(--s6);
  right: var(--s6);
  bottom: var(--s6);
  color: #fff;
}
.hero__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.hero__caption {
  margin-top: var(--s2);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

/* ===== Catégories ===== */
.categories {
  display: flex;
  gap: 4px;
  margin: var(--s4) calc(var(--gutter) * -1) 0;
  padding: var(--s2) var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.categories::-webkit-scrollbar {
  display: none;
}
.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}
.category__dot {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s;
}
.category:hover .category__dot {
  transform: translateY(-2px);
}
.category__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

/* ===== Badges ===== */
.badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
}
.pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}
.pill--gold {
  background: var(--paper-pure);
  border: 1px solid var(--gold);
  color: var(--gold);
  box-shadow: 0 1px 3px rgba(201, 161, 74, 0.25);
}
.pill--new {
  background: var(--ink-900);
  color: var(--paper-pure);
}

/* ===== Cartes restaurant (commun) ===== */
.card {
  position: relative;
  display: block;
  background: var(--paper-pure);
  border-radius: 20px;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.card__top {
  position: relative;
}
.card__media {
  border-radius: 20px 20px 0 0;
}
.card__logo {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--paper-pure);
  border-radius: 50%;
  background: var(--paper-pure);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-700);
}
.card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__name {
  font-family: var(--font-display);
  font-weight: 600;
}
.card__cuisine {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22px;
  color: var(--ink-500);
}
.meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
}
.meta__star {
  width: 13px;
  height: 13px;
  color: var(--ink-900);
}
.meta__muted {
  font-weight: 400;
  color: var(--ink-500);
}
.meta__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-300);
}

/* Large (carrousel) */
.card--large {
  width: 260px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.card--large .card__media {
  aspect-ratio: 5 / 4;
}
.card--large .card__logo {
  left: 14px;
  bottom: -28px;
  width: 44px;
  height: 44px;
}
.card--large .card__body {
  padding: 22px 16px 16px;
}
.card--large .card__name {
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.09px;
}
.card--large .meta {
  margin-top: 10px;
}

/* Wide (liste) */
.card--wide .card__media {
  aspect-ratio: 16 / 9;
}
.card--wide .card__logo {
  left: 16px;
  bottom: -28px;
  width: 56px;
  height: 56px;
  font-size: 14px;
}
.card--wide .card__body {
  padding: 32px 16px 16px;
}
.card--wide .card__name {
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.11px;
}
.card--wide .card__cuisine {
  font-size: 12px;
  letter-spacing: 0.24px;
}
.card--wide .meta {
  margin-top: 12px;
}

.fav {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink-700);
  transition: transform 0.15s;
}
.fav:hover {
  transform: scale(1.08);
}
.fav svg {
  width: 18px;
  height: 18px;
}
.fav[aria-pressed="true"] {
  color: var(--red-700);
}
.fav[aria-pressed="true"] svg {
  fill: currentColor;
}
.fav:not([aria-pressed="true"]) svg {
  fill: none;
}

/* Carrousel */
.carousel {
  display: flex;
  gap: 14px;
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--s2) var(--gutter) var(--s3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar {
  display: none;
}

/* Grille « près de chez vous » */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}

/* ===== Bon plan ===== */
.deal {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s4);
  overflow: hidden;
  padding: 18px 18px 18px 22px;
  border: 1px solid rgba(196, 30, 58, 0.08);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--red-50), #fce6e0);
  transition: box-shadow 0.2s, transform 0.2s;
}
.deal:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.deal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--red-700), var(--red-900));
}
.deal__img {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(196, 30, 58, 0.15);
}
.deal__body {
  flex: 1;
  min-width: 0;
}
.deal__badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--red-700);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.26px;
  color: #fff;
  text-transform: uppercase;
}
.deal__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.09px;
}
.deal__promo {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12px;
  color: var(--red-900);
}
.deal__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--red-700);
}

/* ===== CTA partenaire ===== */
.partner {
  margin-top: var(--s8);
  padding: 32px 24px;
  border: 1px solid rgba(212, 175, 86, 0.18);
  border-radius: 20px;
  background: linear-gradient(135deg, #fbf6ee, #f5eddf);
  text-align: center;
}
.partner__rule {
  width: 36px;
  height: 1px;
  margin: 0 auto 16px;
  background: var(--gold);
}
.partner__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.1px;
}
.partner__text {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-700);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13px;
  transition: opacity 0.15s, transform 0.15s;
}
.btn:hover {
  opacity: 0.88;
}
.btn--dark {
  margin-top: 18px;
  background: var(--ink-900);
  color: var(--paper-pure);
}

/* ===== Footer ===== */
.site-footer {
  padding: var(--s8) 0;
  border-top: 1px solid var(--ink-100);
  background: var(--paper-pure);
  font-size: 13px;
  color: var(--ink-500);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
}
.site-footer__links a:hover {
  color: var(--ink-900);
}

/* ===== États ===== */
.empty {
  padding: var(--s6);
  text-align: center;
  color: var(--ink-500);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== Tablette ===== */
@media (min-width: 640px) {
  :root {
    --gutter: 32px;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero {
    aspect-ratio: 16 / 9;
  }
  .hero__title {
    font-size: 40px;
  }
  .hero__caption {
    font-size: 16px;
  }
  .categories {
    justify-content: flex-start;
  }
}

/* ===== Desktop ===== */
@media (min-width: 960px) {
  :root {
    --gutter: 40px;
    --nav-offset-top: 100px;
  }
  .section {
    margin-top: var(--s12);
  }
  .section__title {
    font-size: 28px;
  }
  .section__sub {
    font-size: 13px;
  }
  .hero {
    aspect-ratio: 21 / 9;
    border-radius: 32px;
  }
  .hero__text {
    left: var(--s12);
    bottom: var(--s12);
    max-width: 620px;
  }
  .hero__title {
    font-size: 52px;
  }
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s6);
  }
  .categories {
    justify-content: space-between;
    margin: var(--s6) 0 0;
    padding: var(--s2) 0;
  }
  /* Le carrousel s'arrête aux bords du contenu (pas de débordement) */
  .carousel {
    margin: 0;
    padding: var(--s2) 4px var(--s3);
    scroll-padding-left: 4px;
  }
  .category {
    width: 96px;
  }
  .category__dot {
    width: 72px;
    height: 72px;
    font-size: 38px;
  }
  .category__label {
    font-size: 13px;
  }
  .deal {
    max-width: 640px;
  }
  .partner {
    padding: 48px 32px;
  }
  .partner__title {
    font-size: 28px;
  }
  .partner__text {
    font-size: 15px;
  }
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

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

/* ===== Boutons supplémentaires ===== */
.btn--red {
  height: 52px;
  background: var(--red-700);
  color: #fff;
  font-size: 15px;
}
.btn--outline {
  height: 52px;
  border: 1px solid var(--ink-100);
  background: var(--paper-pure);
  color: var(--ink-900);
  font-size: 15px;
  font-weight: 600;
}
.close-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink-100);
  color: var(--ink-700);
}
.close-btn svg {
  width: 18px;
  height: 18px;
}

/* ===== Modale / bottom sheet (mobile) / dialogue centré (desktop) ===== */
body.has-modal {
  overflow: hidden;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 16, 0.5);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 12px);
  padding: 12px var(--s5) max(var(--s5), env(safe-area-inset-bottom));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--paper);
  transform: translateY(100%);
  transition: transform 0.35s var(--ease);
}
.modal.is-open .modal__backdrop {
  opacity: 1;
}
.modal.is-open .modal__panel {
  transform: none;
}
.sheet__handle {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--s4);
  border-radius: var(--radius-pill);
  background: var(--ink-100);
}
.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
}
.sheet__head--center {
  align-items: center;
}
.sheet__head--center::before {
  content: "";
  width: 32px;
}
.sheet__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}
.sheet__title--lg {
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.3px;
  text-align: left;
}
.sheet__text {
  margin-top: var(--s3);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-500);
}
.sheet__body {
  min-height: 0;
  margin: var(--s5) calc(var(--s5) * -1) 0;
  padding: 0 var(--s5) var(--s2);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet__actions {
  display: grid;
  gap: 10px;
  margin-top: var(--s6);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 120;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (min-width: 720px) {
  .modal {
    align-items: center;
  }
  .modal__panel {
    max-height: min(760px, calc(100dvh - 48px));
    border-radius: var(--radius-xl);
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.35s var(--ease), opacity 0.25s ease;
  }
  .modal.is-open .modal__panel {
    opacity: 1;
  }
  .sheet__handle {
    display: none;
  }
}

/* ===== Carte de filtres de la recherche (cuisine, distance, prix) ===== */
.search-card {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 70;
  width: 400px;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 16px;
  border: 1px solid var(--ink-100);
  border-radius: 18px;
  background: var(--paper-pure);
  box-shadow: 0 16px 40px rgba(14, 14, 16, 0.16);
  color: var(--ink-900);
  animation: sc-in 0.2s var(--ease);
}
.search-card[hidden] {
  display: none;
}
@keyframes sc-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.sc-block + .sc-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-100);
}
.sc-title {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-500);
}
.sc-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.sc-title-row .sc-title {
  margin-bottom: 10px;
}
.sc-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sc-chip,
.sc-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-pill);
  background: var(--paper-pure);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sc-chip:hover,
.sc-price:hover {
  border-color: var(--ink-300);
}
.sc-chip[aria-pressed="true"],
.sc-price[aria-pressed="true"] {
  border-color: var(--red-700);
  background: var(--red-50);
  color: var(--red-700);
}
.sc-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sc-price {
  justify-content: center;
  height: 40px;
  border-radius: var(--radius-md);
  font-size: 15px;
  letter-spacing: 1px;
}
.sc-range {
  display: block;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.sc-range:focus {
  outline: 0;
}
.sc-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--red-700) var(--pct, 100%), var(--ink-100) var(--pct, 100%));
}
.sc-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ink-100);
}
.sc-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--red-700);
}
.sc-range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 3px solid var(--red-700);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(14, 14, 16, 0.25);
  appearance: none;
  -webkit-appearance: none;
}
.sc-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--red-700);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(14, 14, 16, 0.25);
}
.sc-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(209, 20, 20, 0.2), 0 2px 6px rgba(14, 14, 16, 0.25);
}
.sc-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.sc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.sc-reset {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500);
}
.sc-reset:hover {
  color: var(--ink-900);
}
.sc-reset[hidden] {
  display: none;
}
.sc-go {
  flex: 1;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--red-700);
  box-shadow: var(--shadow-cta);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: transform 0.15s;
}
.sc-go:hover {
  transform: translateY(-1px);
}
/* Desktop / tablette : la carte a exactement la largeur du champ de recherche (elle est positionnée par rapport à lui) */
@media (min-width: 720px) {
  .search-card {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}
@media (max-width: 719px) {
  /* sur mobile la carte se cale sous la barre du haut, sur toute la largeur */
  .search-card {
    position: fixed;
    top: 72px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .search-card {
    animation: none;
  }
}

/* Mobile : sur une page courte, le footer passe sous la ligne de flottaison pour que la barre de
   navigation reste en bas de l'écran par défaut (on le découvre en faisant défiler) */
@media (max-width: 719px) {
  /* Le footer reste sous la ligne de flottaison : sur iPhone la page se dessine aussi sous la barre de Safari,
     donc 100dvh seul le laissait apparaître en bas d'écran et la barre d'onglets ne collait plus au bas. */
  main:has(+ .site-footer) {
    min-height: calc(100vh + 120px);
    min-height: calc(100dvh + 120px);
  }
}

/* iOS Safari zoome sur tout champ dont la police est < 16px : on force 16px sur écrans tactiles / mobiles
   (le zoom manuel par pincement reste possible, par accessibilité). */
@media (max-width: 959px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Mobile : barre d'onglets plus basse. Elle ne doit pas coller au bord (< 6 px) : Safari iOS 26 prendrait alors
   sa couleur pour teinter sa barre du bas et masquerait le contenu derrière. */
@media (max-width: 959px) {
  :root {
    --tabs-bottom: max(6px, calc(env(safe-area-inset-bottom) - 18px));
  }
}

/* Safari iOS 26 : la barre d'onglets fait moins de 80 % de la largeur, donc Safari ne la prend plus pour sa
   barre du bas (plus de bande) — on peut alors la descendre au plus près de la barre d'adresse. */
@media (max-width: 959px) {
  .ios26 .tabs-wrap {
    width: 78%;
    bottom: calc(2px + var(--tabs-lift, 0px));
  }
}

/* ===== Onglets collants (pages avec footer) : s'arrêtent d'eux-mêmes au-dessus du footer ===== */
.tabs-sticky main {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
/* contenu court : la barre reste en bas de la page (et donc de l'écran), pas juste sous le contenu */
.tabs-sticky main > #shell-bottom {
  margin-top: auto;
}
#shell-bottom.is-sticky {
  position: sticky;
  bottom: 0;
  z-index: 60;
  height: var(--nav-offset-bottom); /* remplace le padding du bas de <main> */
  pointer-events: none;
}
.tabs-sticky .tabs-wrap {
  position: absolute;
  bottom: var(--tabs-bottom);
  pointer-events: auto;
}
@media (max-width: 959px) {
  /* Safari iOS 26 : tout élément collé en bas et large (≥ 80 %) fait teinter sa barre et masque le contenu derrière,
     même transparent. Le conteneur lui-même est donc réduit à 78 %. */
  .ios26.tabs-sticky #shell-bottom.is-sticky {
    width: 78%;
    margin-inline: auto; /* pas de margin-top: 0 ici, sinon la barre ne descend plus en bas de page */
  }
  .ios26.tabs-sticky .tabs-wrap {
    width: 100%;
    bottom: 0;
  }
  /* l'ombre portée est rognée par le bord de la page : elle formait une bande grise sous la barre */
  .ios26 .tabs {
    box-shadow: none;
  }
}

/* ===== Réduction de la barre d'onglets plus fluide =====
   Le flou d'arrière-plan (backdrop-filter) est recalculé à chaque image pendant que la barre change de taille :
   c'est ce qui saccadait sur mobile. On le remplace par un fond presque opaque, et on isole la barre du reste
   de la page pour que l'animation ne relance pas la mise en page de tout le contenu. */
.tabs-wrap {
  contain: layout style;
}
@media (max-width: 959px) {
  .tabs {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.94);
    transition: width 0.5s var(--ease);
  }
  .tab__label {
    transition: max-height 0.5s var(--ease), margin 0.5s var(--ease), opacity 0.2s ease, transform 0.5s var(--ease);
    will-change: opacity, transform;
  }
  .tab__icon {
    transition: padding 0.5s var(--ease), background 0.5s var(--ease);
  }
  .tab__icon svg {
    transition: transform 0.5s var(--ease);
  }
}