/* ==================================================================
   FOOD MARKET — téléphone (760 px et moins), façon application.

   Chargée après style.css avec media="(max-width: 760px)" : l'ordinateur
   n'est pas concerné. Principes :
   - un seul chemin pour chaque chose : la barre du bas ;
   - fond blanc, tuiles gris clair arrondies, packshots fondus dedans ;
   - tailles d'appli : titres 20-24 px, texte 13-15 px, cibles de 44 px ;
   - champs en 16 px, sinon iOS zoome au toucher.
   ================================================================== */

:root {
  --head-h: 109px;   /* ligne du logo 32 + recherche 44 + marges 22 + trait 1 */
  --gutter: 16px;
  --tuile:  #f3f3f5;
  --m-rayon: 18px;
}

/* Une carte qui apparaît en glissant ne doit jamais faire bouger la page sur
   le côté. `clip` ne casse pas les barres collées, contrairement à `hidden`. */
html, body { overflow-x: clip; }
body { background: #fff; }
h1 { font-size: 1.625rem; letter-spacing: -.025em; }

/* ---------- En-tête d'appli : logo + état du magasin, puis recherche -- */

.topbar { background: rgba(255,255,255,.88); border-bottom-color: transparent; }
.topbar.is-stuck { box-shadow: 0 1px 0 var(--line); }

.topbar__in {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "logo etat" "recherche recherche";
  align-items: center;
  gap: 10px 12px;
  height: auto;
  padding-block: 10px 12px;
}
.logo { grid-area: logo; height: 32px; }
.logo__img { height: 24px; }
.logo__city { display: none; }

.topbar__etat {
  grid-area: etat;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 28px;
  padding: 0 .625rem;
  border-radius: 999px;
  background: var(--brand-pale);
  color: var(--brand-ink);
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
}
.topbar__etat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.topbar__etat.est-ouvert { background: var(--ouvert-bg); color: var(--ouvert); }

.searchbar {
  grid-area: recherche;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 44px;
  padding: 0 1rem;
  border-radius: 14px;
  background: var(--tuile);
}
.searchbar input { width: 100%; font-size: 1rem; }
.searchbar:focus-within { background: #fff; border-color: var(--ink); box-shadow: none; }
.topbar__actions { display: none; }

/* ---------- Barre du bas ------------------------------------------ */

.tabbar { bottom: calc(10px + env(safe-area-inset-bottom)); width: calc(100% - 20px); }
.tabbar__verre { padding: 6px; background: rgba(255,255,255,.76); }
.tab { padding: .4375rem .125rem .375rem; }
.tab.is-on { color: var(--brand-ink); background: var(--brand-pale); }

/* ---------- Titres de section -------------------------------------- */

.section { padding-block: 1.25rem .5rem; border-top: 0; }
.section--first { padding-top: 1rem; }
.section__head { align-items: center; margin-bottom: .75rem; }
.section__head h2 { font-size: 1.25rem; font-weight: 600; }
.section__more { font-size: .875rem; font-weight: 500; color: var(--brand-ink); }

/* ---------- Carte produit d'appli ------------------------------------
   Le packshot (fond blanc) est fondu dans une tuile grise par « multiply » ;
   le prix passe en premier, comme dans les applis de courses. */

.rail, .grid { gap: 1.25rem .75rem; }
/* Six produits par bloc au lieu de quatre, la suite est sous « Voir tout ». */
.rail > *:nth-child(n + 5) { display: block; }
.rail > *:nth-child(n + 7) { display: none; }

.card__media {
  padding-top: 100%;
  border: 0 !important;
  border-radius: var(--m-rayon);
  background: var(--tuile) !important;
}
.card__media > img {
  padding: 12%;
  background: transparent;
  mix-blend-mode: multiply;
}
.card__add {
  right: 8px; bottom: 8px;
  width: 36px; height: 36px;
  border: 0;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(15,23,32,.16);
}
.card__add .icon { width: 18px; height: 18px; }
.card__add.is-in { background: var(--brand); color: #fff; }

.card__body { display: flex; flex-direction: column; padding-top: .5rem; }
.card__price { order: -1; margin: 0 0 .125rem; font-size: 1rem; font-weight: 600; }
.card__price--ask { font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
.card__name { font-size: .875rem; font-weight: 500; }
.card__sub { font-size: .75rem; }
.badge { top: 8px; left: 8px; border-radius: 8px; }

/* ---------- Accueil : bannière -------------------------------------- */

.hero {
  display: block;
  position: relative;
  isolation: isolate;
  width: auto;
  margin: 10px var(--gutter) 0;
  aspect-ratio: 16 / 11;
  min-height: 0;
  max-height: none;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink);
}
.hero__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-position: center 42%;
}
.hero::after {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(9,12,16,.86) 0%, rgba(9,12,16,.45) 45%, rgba(9,12,16,0) 72%);
}
.hero__in { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 16px; color: #fff; }
/* Le titre principal tient sur une ligne au-dessus de l'accroche. En blanc
   avec une ombre : en pêche pâle, il se perdait sur les paquets clairs. */
.hero__oeil {
  font-size: .6875rem;
  letter-spacing: .05em;
  margin-bottom: .3125rem;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 10px rgba(9,12,16,.6);
}
.hero__titre { text-shadow: 0 1px 14px rgba(9,12,16,.35); }
.hero__titre { margin-top: 0; max-width: 17ch; font-size: 1.375rem; line-height: 1.15; }
.hero__sous, .hero__preuves, .hero__actions .btn--verre { display: none; }
.hero__actions { margin-top: .75rem; }
.hero__actions .btn { flex: none; min-height: 38px; padding-inline: 1rem; font-size: .875rem; }
.hero .btn--blanc { background: #fff; color: var(--ink); }
.hero__alerte {
  margin-bottom: .625rem;
  padding: .3125rem .75rem .3125rem .625rem;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: .8125rem;
}

/* ---------- Accueil : rayons en grille d'icônes ---------------------- */

/* Les blocs « un rayon, six produits » de l'ordinateur sont masqués : la
   grille d'icônes y mène, et l'accueil ne s'étire plus sans fin. */
.section--rayon { display: none; }

.rayons { padding-block: 1.375rem .25rem; }
.rayons__titre { margin-bottom: .875rem; font-size: 1.25rem; text-align: left; }
.rayons .cats__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 8px;
  overflow: visible;
  padding: 0;
}
.rayons .cat {
  width: auto;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .4375rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
}
.rayons .cat__ph { width: 100%; max-width: 72px; height: auto; aspect-ratio: 1; border-radius: 20px; }
.rayons .cat__ph svg { width: 28px; height: 28px; }
.rayons .cat span.cat__nom { font-size: .75rem; font-weight: 500; line-height: 1.2; text-align: center; }
.rayons .cat__nb { display: none; }

/* ---------- Accueil : déstockage ------------------------------------ */

.destock { padding-block: 1.25rem .25rem; background: none; }
.destock__tete { align-items: center; margin-bottom: .75rem; }
.destock__tete > div { flex: 1; min-width: 0; }
.destock__pastille { display: none; }
.destock__titre { display: flex; align-items: center; gap: .625rem; margin-top: 0; font-size: 1.25rem; }
.destock__titre::before {
  content: '';
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-vif);
  box-shadow: 0 0 0 4px var(--brand-pale);
}
.destock__sous { font-size: .8125rem; }
.destock__sous--vide {
  margin-top: .75rem;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--tuile);
  color: var(--ink-2);
  font-size: .875rem;
}
.destock--vide .section__more { display: none; }
.dcard__media { border-radius: var(--m-rayon); }

/* ---------- Accueil : avis ----------------------------------------- */

.avis-bloc { padding-block: 1.25rem 0; }
.avis-bloc__tete { flex-direction: column; align-items: flex-start; gap: .25rem; }
.avis-bloc__tete h2 { font-size: 1.25rem; }
.avis-bloc__lien { color: var(--brand-ink); }
/* Une seule piste qui défile avec les douze avis (l'ordinateur en a deux,
   en sens inverse) ; elle s'arrête quand on pose le doigt dessus. */
.avis-bloc .ruban { display: none; }
.avis-bloc .ruban.m-avis { display: block; margin-top: .25rem; }
.m-avis .ruban__piste { gap: .75rem; animation-duration: 75s; }
.m-avis .avis-carte { width: 272px; padding: 1rem; border: 0; border-radius: 16px; background: var(--tuile); }

/* Le bouton « Voir tout le catalogue » en bas de l'accueil. */
.avis-bloc + .wrap { padding-block: 1.25rem .5rem !important; }
.avis-bloc + .wrap .btn { width: 100%; min-height: 48px; border-radius: 14px; }

/* ---------- Pied de page : une ligne, pas un plan du site ----------- */

.site-foot { margin-top: 1.5rem; padding-block: 1.25rem; border-top: 0; background: var(--tuile); }
.foot__grid { display: none; }
.foot__legal {
  margin: 0;
  padding: 0;
  border: 0;
  flex-direction: column;
  gap: .375rem;
  font-size: .75rem;
  text-align: center;
}

/* ---------- Catalogue : rayons en pastilles ------------------------- */

/* La barre des rayons reste collée sous l'en-tête (style.css la rendait
   statique sur petit écran). */
.cats { position: sticky; top: var(--head-h); background: rgba(255,255,255,.92); }
.cats .cats__rail { gap: .5rem; padding-block: .625rem; }
.cats .cat {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 36px;
  padding: 0 .875rem 0 .3125rem;
  border: 0;
  border-radius: 999px;
  background: var(--tuile);
  color: var(--ink-2);
}
.cats .cat__ph { width: 26px; height: 26px; background: #fff; box-shadow: none !important; }
.cats .cat__ph svg { width: 15px; height: 15px; }
.cats .cat span { font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.cats .cat.is-on { background: var(--ink); color: #fff; }
.cats__ink { display: none; }

#tri { min-height: 36px; padding-inline: .75rem !important; border-radius: 999px; font-size: .8125rem; }
.grille__rayon { font-size: 1.125rem; }

/* ---------- Fiche produit : plein écran, retour flottant, achat en bas - */

body[data-page="produit"] .topbar,
body[data-page="produit"] .tabbar { display: none; }
body[data-page="produit"] { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
body[data-page="produit"] main.wrap { padding-inline: 0; }
body[data-page="produit"] .section { padding-inline: var(--gutter); }
body[data-page="produit"] .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }

.crumbs { display: none; }
.product { gap: 0; padding-bottom: .5rem; }
.product__media { border-radius: 0 0 28px 28px; background: var(--tuile); }
.product__media img { padding: 14%; background: transparent; mix-blend-mode: multiply; }
.product > div:last-child { padding: 1.25rem var(--gutter) 0; }
.product__brand { font-size: .75rem; }
.product__title { font-size: 1.5rem; }
.product__price { font-size: 1.625rem; }
.product__actions { display: none; }
.product__facts { gap: 0; padding: .125rem 1rem; border-radius: 16px; background: var(--tuile); }
.product__facts li { padding: .75rem 0; border-bottom: 1px solid #e4e4e8; font-size: .875rem; }
.product__facts li:last-child { border-bottom: 0; }
.notice { margin-top: 1rem; padding: 0; border: 0; background: none; font-size: .75rem; color: var(--ink-3); }

.m-retour,
.m-liste {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  z-index: 45;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 12px rgba(15,23,32,.14);
  color: var(--ink);
  cursor: pointer;
}
.m-retour { left: 14px; }
.m-liste { right: 14px; }
.m-liste .list-btn__count { top: -3px; right: -3px; }

.m-achat {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.m-achat__prix { display: grid; line-height: 1.2; min-width: 0; }
.m-achat__prix b { font-size: 1.125rem; font-weight: 600; }
.m-achat__prix small { font-size: .75rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-achat .btn { flex: 1; min-height: 50px; border-radius: 16px; font-size: 1rem; font-weight: 600; }

/* ---------- Page déstockage ---------------------------------------- */

.page-destock { padding-block: 1rem 2rem; }

/* ---------- Page infos : des cartes -------------------------------- */

body[data-page="infos"] .cols { gap: 1.5rem; padding-block: 1rem 0; }
body[data-page="infos"] .cols .btn { flex: 1 1 auto; border-radius: 14px; }
.map { aspect-ratio: 4 / 3; border: 0; border-radius: 18px; }
.table { overflow: hidden; border-radius: 16px; background: var(--tuile); }
.table td { padding: .75rem 1rem; border-bottom-color: #e4e4e8; }
.table tr:hover td { background: none; }
.info-cards { grid-template-columns: 1fr 1fr; gap: .625rem; }
.info-card { padding: .875rem; border: 0; border-radius: 16px; background: var(--tuile); }
.info-card h3 { font-size: .9375rem; }
.info-card p { font-size: .8125rem; }

/* ---------- Ma liste : feuille avec poignée ------------------------- */

.drawer { border-radius: 24px 24px 0 0; }
.drawer::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  width: 40px; height: 5px;
  margin-left: -20px;
  border-radius: 999px;
  background: #d6d6dc;
}
.drawer__head { padding-top: 1.25rem; border-bottom: 0; }
.drawer__head h2 { font-size: 1.25rem; }
.drawer .btn--primary { min-height: 50px; border-radius: 16px; }
.line__media { border-radius: 12px; background: var(--tuile); }
.line__media img { background: transparent; mix-blend-mode: multiply; }