/* Big Moh's — retours client du 09/11 (chargé après bigmohs-v4.css) :
   héros sur photo de table, catégories repliables, fenêtre « À emporter / Livraison » à l'arrivée (bandeau photo),
   mention halal AVS / Achahada, cartes d'upsell avec photo dans les étapes. */

/* ---------- Héros : photo en fond ---------- */
.b4-hero--photo { background: var(--b4-cream); isolation: isolate; }
.b4-hero--photo .b4-hero__bg { position: absolute; inset: 0 0 auto; z-index: -2; display: block; }
.b4-hero--photo .b4-hero__bg img { display: block; width: 100%; height: auto; }
/* fondu vers le crème sous le texte : pas de bord franc avec la section suivante */
.b4-hero--photo::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: 150vw; pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 245, 236, 0) 44%, rgba(251, 245, 236, 0.7) 60%, rgba(251, 245, 236, 0.94) 76%, var(--b4-cream) 100%);
}
.b4-hero--photo::after { display: none; }
.b4-hero--photo .b4-hero__inner { grid-template-areas: "top" "act"; padding: 14px 16px 28px; }
.b4-hero--photo .b4-hero__top { min-height: 72vw; }
.b4-hero--photo .b4-hero__act { margin: 0; text-align: center; }
.b4-hero--photo .b4-hero__title { margin: 0 0 0.55rem; text-shadow: 0 1px 0 rgba(251, 245, 236, 0.6); }
.b4-hero--photo .b4-hero__lead { color: var(--b4-ink); }
.b4-hero--photo .b4-trust { color: var(--b4-ink); }

@media (min-width: 900px) {
  .b4-hero--photo .b4-hero__bg { inset: 0; }
  .b4-hero--photo .b4-hero__bg img { height: 100%; object-fit: cover; object-position: 68% 50%; }
  .b4-hero--photo::before {
    inset: 0; height: auto;
    background:
      linear-gradient(90deg, rgba(251, 245, 236, 0.94) 0%, rgba(251, 245, 236, 0.78) 30%, rgba(251, 245, 236, 0) 54%),
      linear-gradient(180deg, rgba(251, 245, 236, 0) 80%, var(--b4-cream) 100%);
  }
  .b4-hero--photo .b4-hero__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-areas: "top ." "act ."; grid-template-rows: auto 1fr;
    align-items: stretch; min-height: min(660px, calc(100vh - 72px)); padding: 26px 24px 64px;
  }
  .b4-hero--photo .b4-hero__top { min-height: 0; align-self: start; }
  .b4-hero--photo .b4-hero__act { align-self: center; text-align: left; }
  .b4-hero--photo .b4-hero__title { margin-bottom: 0.9rem; }
}

/* ---------- Mention halal certifiée ---------- */
.b4-halal {
  display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.55rem 0 0; padding: 0.3rem 0.7rem 0.3rem 0.5rem;
  border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(47, 158, 99, 0.25); color: var(--b4-ink);
  font-size: 0.78rem; font-weight: 500; line-height: 1.3;
}
.b4-halal svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--b4-ok); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.b4-halal--product { margin: 0.2rem 0 0.9rem; }

/* ---------- Catégories repliables ---------- */
.b4-band[data-b4-band] { cursor: pointer; padding-right: 64px; -webkit-tap-highlight-color: transparent; }
.b4-band__toggle {
  position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--b4-line), var(--b4-s1); color: var(--b4-ink); cursor: pointer;
}
.b4-band__toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform 0.3s var(--b4-ease); }
.b4-sec.is-collapsed .b4-band__toggle svg { transform: none; }
.b4-band__toggle:focus-visible { outline: 2px solid var(--b4-blue); outline-offset: 2px; }
.b4-sec.is-collapsed .b4-grid { display: none; }
.b4-sec.is-collapsed .b4-band { min-height: 84px; margin-bottom: 0; }
.b4-sec.is-collapsed .b4-band p { display: none; }
.b4-sec.is-collapsed + .b4-sec { margin-top: 10px; }
@media (min-width: 900px) {
  .b4-band[data-b4-band] { padding-right: 84px; }
  .b4-band__toggle { right: 24px; bottom: 22px; width: 44px; height: 44px; }
  .b4-sec.is-collapsed .b4-band { min-height: 96px; }
}

/* ---------- Fenêtre « À emporter / Livraison » : bandeau photo ---------- */
.b4-sheet__photo { display: block; margin: -6px -6px 14px; border-radius: 20px; overflow: hidden; aspect-ratio: 920 / 402; background: var(--b4-wood); }
.b4-sheet__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Étapes produit : cartes d'upsell avec photo ---------- */
body.b4 .choice-card .choice-media { flex: none; width: 64px; height: 44px; margin-right: 0.6rem; border-radius: 10px; overflow: hidden; background: var(--b4-cream-2); }
body.b4 .choice-card .choice-media img.choice-image { width: 100%; height: 100%; object-fit: cover; display: block; }