/* ============================================
   O'SMASH BURGER — Thème Grunge / Street Food
   (inspiré maquette visuelle)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root {
  --rouge-principal: #ED1C24;
  --rouge-vif: #ed1c24;
  --rouge-fonce: #8b0a0a;
  --rouge-glow: rgba(237, 28, 36, 0.55);
  /* --ecru pilotait les sections claires pleine largeur. Le passage au
     mur rouge les a toutes supprimées : plus aucune règle ne l'utilise.
     Conservée le temps du test, à retirer si le mur est validé. */
  --ecru: #FFFFFF;
  /* --- Encarts « sticker » posés sur le mur rouge ---
     Aucune section n'a plus de fond pleine largeur sur l'accueil : la
     texture rouge fixe reste visible entre et autour des blocs. Chaque
     bloc de contenu est un encart blanc opaque, détaché du mur par une
     ombre portée dure et décalée — même ADN que .btn-sticker-*. */
  --carte-blanche: #FFFFFF;
  --carte-rayon: 12px;
  --carte-ombre: 7px 8px 0 rgba(14, 14, 14, 0.85);
  --carte-ombre-mobile: 4px 5px 0 rgba(14, 14, 14, 0.85);
  /* Halo sombre des titres blancs posés à même la texture. */
  --ombre-titre: 3px 3px 0 rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.5);
  --encre: #0E0E0E;
  --texte-courant: #4A4A46;
  --bord-champ: #C9C6BE;
  --noir: #000000;
  --noir-soft: #0d0d0d;
  --blanc: #ffffff;
  --gris-clair: #f2f2f2;
  --gris-texte: #b8b8b8;
  --font-display: 'Anton', 'Barlow Condensed', sans-serif;
  --creme: #f5f0e8;
  --font-titre: 'Barlow Condensed', sans-serif;
  --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  --torn-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,0 H1200 V25 C1150,45 1100,15 1050,35 C1000,55 950,10 900,30 C850,50 800,20 750,40 C700,55 650,15 600,35 C550,50 500,18 450,38 C400,52 350,12 300,32 C250,48 200,20 150,40 C100,55 50,22 0,38 Z'/%3E%3C/svg%3E");
  --torn-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23000000' d='M0,0 H1200 V28 C1140,48 1080,12 1020,38 C960,52 900,18 840,42 C780,55 720,14 660,36 C600,50 540,16 480,40 C420,54 360,10 300,34 C240,48 180,20 120,44 C60,56 30,24 0,36 Z'/%3E%3C/svg%3E");
  --torn-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ED1C24' d='M0,0 H1200 V22 C1155,42 1110,10 1065,35 C1020,52 975,16 930,38 C885,50 840,12 795,34 C750,48 705,18 660,40 C615,52 570,14 525,36 C480,48 435,20 390,42 C345,54 300,12 255,32 C210,46 165,22 120,40 C75,52 38,18 0,30 Z'/%3E%3C/svg%3E");
}

/* --- Textures globales --- */
body {
  background: var(--noir);
  color: var(--blanc);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--texture-noise);
  pointer-events: none;
  z-index: 9990;
  opacity: 0.35;
}

/* --- Mur rouge : calque de fond fixe (accueil uniquement) ---
   Un seul mur continu et immobile du header au footer ; tout le
   contenu défile par-dessus. Le hero n'a donc plus de fond propre :
   il laisserait glisser une seconde copie de l'image contre celle-ci.
   PAS de `background-attachment: fixed` : Safari iOS l'ignore et
   repasse en fond défilant — un pseudo-élément en `position: fixed`
   donne le même rendu partout, iPhone compris.
   ::after et non ::before : body::before porte déjà le grain.
   z-index: -1 fonctionne parce que html n'a pas de background —
   celui du body est propagé au canvas, donc peint sous ce calque.
   Ne pas donner de background à html sans revoir cette règle.

   La vignette n'est pas décorative : bg-grunge-rouge.jpg porte quatre
   zones de papier blanc déchiré dans les coins, et du texte blanc
   tombant dessus deviendrait illisible. Le dégradé les assombrit là
   où elles sont, en laissant le centre du mur vif. */
body.page-home::after {
  content: '';
  position: fixed;
  inset: 0;
  /* couleur de repli si l'image ne charge pas */
  background-color: var(--noir);
  background-image:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.10) 0%,
      rgba(0, 0, 0, 0.38) 52%,
      rgba(0, 0, 0, 0.72) 100%
    ),
    url('../assets/images/bg-grunge-rouge.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}

/* --- Typo display grunge --- */
h1,
.hero__title,
.text-display {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.04em;
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.35),
    0 0 40px rgba(0, 0, 0, 0.25);
}

.section-title,
.menu-section__title,
.menu-hero__title,
.cta-banner__title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.06em;
}

.section-kicker {
  display: block;
  font-family: var(--font-titre);
  font-weight: 700;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rouge-vif);
  margin-bottom: 0.5rem;
}

.section-kicker--light {
  color: var(--rouge-vif);
}

.section-kicker--white {
  color: rgba(255, 255, 255, 0.7);
}

/* --- Bords déchirés SVG --- */
.torn-edge {
  display: block;
  width: 100%;
  margin-top: -1px;
  line-height: 0;
}

.torn-edge svg {
  width: 100%;
  height: clamp(36px, 5vw, 50px);
  display: block;
}

.torn-edge--white-down,
.torn-edge--black-down,
.torn-edge--red-down,
.torn-edge--white-up {
  display: none;
}

/* --- Header grunge --- */
.site-header {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(139, 10, 10, 0.88) 100%),
    var(--texture-noise);
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.nav__link,
.nav-link {
  color: var(--blanc) !important;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.nav__link:hover,
.nav__link--active,
.nav-link:hover {
  color: var(--rouge-vif) !important;
}

.btn-commander,
.header__order-btn {
  background: var(--rouge-principal) !important;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.35),
    0 0 20px var(--rouge-glow);
  font-family: var(--font-display) !important;
  letter-spacing: 2px;
}

.btn-commander:hover,
.header__order-btn:hover {
  background: var(--rouge-vif) !important;
  transform: translateY(-2px);
}

.header__cart,
.cart-icon {
  color: var(--blanc);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.mobile-menu-toggle {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--blanc);
}

.mobile-menu-toggle:hover {
  background: var(--blanc);
  color: var(--rouge-principal);
}

/* --- Hero : plus de fond propre, il laisse voir le mur rouge fixe --- */
.page-home .hero {
  position: relative;
  background: transparent;
  color: var(--blanc);
  overflow: hidden;
  padding-bottom: 0;
}

/* Assombrissement du haut de page (lisibilité sous le header sombre).
   Il doit s'éteindre complètement en bas : un voile qui s'arrête net
   dessinerait une ligne horizontale en travers du mur. */
.page-home .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0.22) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* --- Transition déchirée SVG hero → section noire --- */
.hero-tear {
  position: relative;
  width: 100%;
  line-height: 0;
  margin-top: -80px;
  z-index: 5;
  pointer-events: none;
}

.hero-tear svg {
  width: 100%;
  height: 80px;
  display: block;
}

.page-home .hero__inner {
  position: relative;
  z-index: 1;
  padding: 2.5rem 1.25rem 2.5rem;
}

.page-home .hero__content,
.page-home .hero-visual {
  position: relative;
  z-index: 1;
}

.page-home .hero-title .line-white {
  color: #fff;
  text-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.5),
    0 0 30px rgba(0, 0, 0, 0.4);
}

/* Hero : sticker décoratif (WebP à canal alpha — pas de blend)
   L'ombre est portée par le conteneur, jamais par l'<img> : les fichiers
   ont une bande de blanc semi-transparent (alpha 14–128) sur leurs bords,
   invisible sur écru mais dont drop-shadow dessinerait la silhouette
   en fines lignes verticales. Le clip-path retire cette bande avant
   que l'ombre ne soit calculée. */
.hero-sticker-wrap {
  display: block;
  margin: 0 0 1rem 0;
  line-height: 0;
  width: 100%;
  max-width: 520px;
  filter: drop-shadow(6px 8px 0 rgba(14, 14, 14, 0.85));
}

.hero-sticker {
  display: block;
  width: 100%;
  height: auto;
  clip-path: inset(0.8%);
}

/* H1 réel : la phrase sous le hero, style discret et lisible */
.page-home .hero__h1 {
  font-family: var(--font-corps, 'Inter', sans-serif) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: clamp(1rem, 1.5vw, 1.12rem) !important;
  line-height: 1.55;
  letter-spacing: 0 !important;
  text-transform: none;
  color: rgba(255, 255, 255, 0.94) !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  max-width: 540px;
  margin: 0 0 1.5rem;
}

/* Titre hero multicolore (legacy texte) */
.hero-title {
  font-family: var(--font-titre) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  text-transform: uppercase;
  font-size: clamp(42px, 6vw, 84px);
  line-height: 0.95;
  letter-spacing: 1px;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
}

.hero-title .line-white {
  color: #fff;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
}

.hero-title .line-red {
  color: #ed1c24;
  text-shadow:
    2px 2px 0 rgba(255, 255, 255, 0.9),
    4px 4px 0 rgba(0, 0, 0, 0.3);
}

.hero__subtitle {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  max-width: 520px;
  margin-bottom: 1.5rem;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ED1C24;
  color: white;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45);
  transform: rotate(-1deg);
  padding: 16px 32px;
  font-family: var(--font-titre);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: all 0.15s;
  min-height: 44px;
}

.btn-hero-primary i {
  width: 20px;
  height: 20px;
}

.btn-hero-primary:hover {
  transform: rotate(-1deg) translate(2px, 2px);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
  color: white;
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5f0e8;
  color: #1a1a1a;
  border: none;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45);
  transform: rotate(0.5deg);
  padding: 16px 32px;
  font-family: var(--font-titre);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: all 0.15s;
  min-height: 44px;
}

.btn-hero-secondary:hover {
  transform: rotate(0.5deg) translate(2px, 2px);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}

/* Badge tampon */
.stamp-badge {
  position: absolute;
  top: 8%;
  right: 4%;
  width: 140px;
  height: 140px;
  border: 3px dashed rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(12deg);
  color: white;
  font-family: var(--font-titre);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  background: rgba(0, 0, 0, 0.25);
  z-index: 2;
  font-size: 14px;
  letter-spacing: 1px;
}

.stamp-badge .stamp-big {
  font-size: 26px;
  background: white;
  color: #ED1C24;
  padding: 2px 10px;
  transform: rotate(-2deg);
  margin: 3px 0;
  line-height: 1;
}

.stamp-badge .stamp-small {
  font-size: 13px;
  letter-spacing: 0.5px;
}

.hero-stamp {
  display: none;
}

.hero__title {
  display: none;
}

.hero__buttons .btn--primary,
.hero__buttons .btn--outline {
  display: none;
}

/* Slot image hero */
.hero-visual {
  position: relative;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  aspect-ratio: 4 / 3;
  max-height: 420px;
}

.hero-visual__slot {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed rgba(255, 255, 255, 0.35);
  background:
    radial-gradient(ellipse at center, var(--rouge-glow) 0%, rgba(0, 0, 0, 0.5) 70%);
  border-radius: 4px;
}

.hero-visual__slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.hero-visual__slot .img-slot__label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.hero-visual__slot .img-slot__label i {
  display: block;
  margin: 0 auto 0.5rem;
  width: 40px;
  height: 40px;
  opacity: 0.5;
}

/* Masquer damier legacy */
.bande-defilante,
.bande-decorative {
  display: none !important;
}

/* --- Section burgers : posée à même le mur rouge --- */
.section--burgers {
  background: transparent;
  color: var(--blanc);
  padding: 4rem 1.25rem 4.5rem;
  position: relative;
  overflow: hidden;
}

.section--burgers::before {
  display: none;
}

.burgers-section__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

.burgers-label {
  display: inline-block;
  font-family: var(--font-titre);
  font-weight: 700;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rouge-vif);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--rouge-principal);
  margin-bottom: 1rem;
}

.burgers-title {
  font-family: var(--font-titre);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 0.95;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

.burgers-title .line-white {
  color: #fff;
  text-shadow: var(--ombre-titre);
}

/* Rouge sur mur rouge : c'est le liseré blanc qui détache la ligne,
   même procédé que .hero-title .line-red. */
.burgers-title .line-red {
  color: #ed1c24;
  text-shadow:
    2px 2px 0 rgba(255, 255, 255, 0.95),
    4px 4px 0 rgba(0, 0, 0, 0.35);
}

.burgers-desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 420px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.btn-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-titre);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 14px 28px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45);
  transform: rotate(-1deg);
  transition: all 0.15s;
}

.btn-stamp i {
  width: 18px;
  height: 18px;
}

.btn-stamp-red {
  background: #ED1C24;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-stamp-red:hover {
  transform: rotate(-1deg) translate(2px, 2px);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
  color: white;
}

.products-grid--featured {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Cartes burgers : encarts blancs détachés du mur rouge.
   La classe reste `--dark` (nommage HTML), le fond ne l'est plus. */
.burger-card-dark {
  background: var(--carte-blanche) !important;
  border-radius: var(--carte-rayon) !important;
  border: none !important;
  box-shadow: var(--carte-ombre);
  overflow: hidden;
  text-align: left;
}

.burger-card-dark:hover {
  box-shadow: 7px 12px 0 rgba(14, 14, 14, 0.85);
}

.burger-card-dark .burger-name {
  color: var(--encre);
  font-family: var(--font-titre);
  font-weight: 900;
  font-style: italic;
  font-size: 1.35rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.burger-card-dark .burger-desc {
  color: var(--texte-courant);
  font-size: 0.8rem;
  line-height: 1.45;
  margin-bottom: 0.75rem;
}

.burger-card-dark .product-card__body {
  text-align: left;
  padding: 1rem 1.25rem 1.25rem;
}

/* Emplacement photo : gris clair sur carte blanche */
.burger-card-dark .img-slot--dark {
  border-color: rgba(14, 14, 14, 0.18);
  background: #F2F0EC;
  min-height: 160px;
  aspect-ratio: 16 / 10;
}

.burger-card-dark .img-slot--dark .img-slot__label {
  color: rgba(14, 14, 14, 0.45);
}

/* Le halo rouge était calibré pour un fond sombre : sur blanc il
   ne produirait qu'une tache rose autour de la photo. */
.burger-card-dark .product-card__glow {
  display: none;
}

.price-tags {
  display: flex;
  gap: 10px;
  margin: 12px 0 14px;
  flex-wrap: wrap;
}

.price-tag {
  background: #f5f0e8;
  color: #1a1a1a;
  padding: 6px 14px;
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  font-family: var(--font-titre);
  font-weight: 900;
  font-style: italic;
  text-align: center;
  line-height: 1.1;
}

.price-tag .tag-label {
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.price-tag .tag-price {
  font-size: 18px;
  color: #ED1C24;
}

.btn-customize--dark {
  width: 100%;
  margin-top: 0;
  font-size: 13px;
  padding: 12px 16px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
  transform: rotate(-0.5deg);
}

.btn-customize--dark:hover {
  transform: rotate(-0.5deg) translate(2px, 2px);
}

.section--burgers .section-title,
.section--burgers .section-subtitle,
.section--burgers .section-kicker {
  display: none;
}

/* --- Cartes produit grunge --- */
.products-grid {
  gap: 2rem;
}

.product-card {
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: visible;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(237, 28, 36, 0.25);
}

.product-card__image-wrap {
  position: relative;
  padding: 1.5rem 1.5rem 0;
}

.product-card__glow {
  position: absolute;
  inset: 10% 15% 0;
  background: radial-gradient(ellipse at center, var(--rouge-glow) 0%, transparent 70%);
  filter: blur(20px);
  z-index: 0;
}

.product-card__image,
.img-slot {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}

.img-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  background:
    linear-gradient(145deg, #2a2a2a 0%, #111 100%);
  border: 2px dashed rgba(237, 28, 36, 0.45);
  min-height: 200px;
}

.img-slot__label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  text-align: center;
  padding: 0 1rem;
}

.img-slot__icon {
  width: 36px;
  height: 36px;
  color: var(--rouge-principal);
  opacity: 0.6;
}

.product-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  text-align: center;
}

.product-card__name {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  color: var(--blanc);
  margin-bottom: 0.5rem;
}

.product-card__desc {
  color: var(--gris-texte) !important;
  font-size: 0.85rem !important;
  margin-bottom: 1rem !important;
  line-height: 1.5 !important;
}

.product-card__prices {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.price-badge {
  background: var(--blanc);
  color: var(--rouge-principal);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 1px;
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.product-card .btn--primary {
  width: 100%;
  border-radius: 6px;
  border: 2px solid var(--rouge-principal);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
}

.section--burgers .btn--outline {
  background: transparent;
  color: var(--blanc);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
}

.section--burgers .btn--outline:hover {
  background: var(--blanc);
  color: var(--noir);
}

/* --- Zone livraison : cartes blanches posées sur le mur rouge --- */
#zone-livraison.zone-livraison {
  background: transparent;
  position: relative;
  padding: 80px 20px;
  max-width: none;
  color: var(--blanc);
}

#zone-livraison.zone-livraison::before {
  display: none;
}

#zone-livraison.zone-livraison > * {
  position: relative;
  z-index: 1;
}

#zone-livraison .section-title,
#zone-livraison .zone-livraison__heading {
  color: var(--blanc);
  text-shadow: var(--ombre-titre);
}

#zone-livraison .promo-banner {
  background: linear-gradient(90deg, #ED1C24, #8B0000);
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
  transform: rotate(-0.5deg);
  border-radius: 4px;
  color: #ffffff;
}

#zone-livraison .zone-card {
  background: var(--carte-blanche);
  border: none;
  border-radius: var(--carte-rayon);
  color: var(--encre);
  box-shadow: var(--carte-ombre);
  padding: 28px 22px;
}

#zone-livraison .zone-card:hover {
  transform: translateY(-4px);
  box-shadow: 7px 12px 0 rgba(14, 14, 14, 0.85);
}

#zone-livraison .zone-card.zone-highlight {
  border: 3px solid #2D9D3F;
  background: linear-gradient(180deg, #F0FFF4 0%, var(--carte-blanche) 55%);
  box-shadow: var(--carte-ombre);
}

#zone-livraison .zone-badge {
  font-family: var(--font-titre);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 18px;
  border-radius: 4px;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

#zone-livraison .zone-1 .zone-badge {
  background: #2D9D3F;
  color: #ffffff;
}

#zone-livraison .zone-2 .zone-badge {
  background: #E08000;
  color: #ffffff;
}

#zone-livraison .zone-3 .zone-badge {
  background: #ED1C24;
  color: #ffffff;
}

/* Contenu des cartes : texte sombre, la carte est blanche */
#zone-livraison .zone-name {
  color: var(--encre);
  text-shadow: none;
}

#zone-livraison .zone-prix {
  color: #ED1C24;
  text-shadow: none;
}

#zone-livraison .zone-prix-gratuit {
  color: #17692C;
  text-shadow: none;
}

#zone-livraison .zone-info-row {
  border-bottom: 1px solid rgba(14, 14, 14, 0.12);
}

#zone-livraison .zone-info-label {
  color: var(--texte-courant);
}

#zone-livraison .zone-info-value {
  color: var(--encre);
}

#zone-livraison .zone-livraison__heading,
#zone-livraison .promo-banner,
#zone-livraison .zones-grid,
#zone-livraison .zone-info-bottom {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

#zone-livraison .zone-row-icon,
#zone-livraison .info-icon {
  color: #ED1C24 !important;
}

#zone-livraison .zone-villes {
  color: var(--texte-courant);
}

#zone-livraison .zone-villes strong {
  color: var(--encre);
}

/* Encadré bas : même encart blanc que les cartes, en plus discret */
#zone-livraison .zone-info-bottom {
  background: var(--carte-blanche);
  border: none;
  color: var(--texte-courant);
  border-radius: var(--carte-rayon);
  box-shadow: var(--carte-ombre);
}

/* --- Histoire --- */
#notre-histoire {
  background:
    linear-gradient(135deg, var(--rouge-fonce) 0%, var(--rouge-principal) 100%);
  color: var(--blanc);
}

#notre-histoire .section-title {
  color: var(--blanc);
  text-align: left;
}

#notre-histoire p {
  color: rgba(255, 255, 255, 0.85) !important;
}

.story-section__image .img-slot,
.story-section__image img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* --- CTA --- */
.cta-banner {
  background: var(--noir);
  border-top: 3px solid var(--rouge-principal);
  border-bottom: 3px solid var(--rouge-principal);
}

.cta-banner__title {
  color: var(--blanc);
  font-size: clamp(2rem, 5vw, 3rem);
}

/* --- Barre USP (maquette) --- */
.usp-bar {
  background: var(--creme);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 40px 5%;
  align-items: center;
}

.usp-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 20px;
}

.usp-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.usp-icon {
  width: 36px;
  height: 36px;
  color: #ED1C24;
  flex-shrink: 0;
  stroke-width: 2;
}

.usp-item strong {
  font-family: var(--font-titre);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 16px;
  color: #1a1a1a;
  display: block;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.usp-item p {
  font-size: 13px;
  color: #5f5e5a;
  line-height: 1.4;
  margin: 0;
}

.usp-social {
  border: 3px solid #ED1C24;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  text-align: center;
  max-width: 280px;
  margin: 0 auto;
}

.usp-social__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 2px;
  color: #ED1C24;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.usp-social__handle {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1rem;
  color: #1a1a1a;
  letter-spacing: 1px;
  margin-top: 0.5rem;
}

.usp-social__icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* Réseaux sociaux : SVG inline en currentColor, aucune image externe. */
.usp-social__icons {
  gap: 1.5rem;
  align-items: center;
  margin-top: 0.25rem;
}

.usp-social__icons a {
  color: #ED1C24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* cible tactile confortable sans agrandir l'icône */
  padding: 6px;
  border-radius: 6px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.usp-social__icons a:hover,
.usp-social__icons a:focus-visible {
  color: #0E0E0E;
  transform: scale(1.12);
}

.usp-social__icons svg {
  width: 28px;
  height: 28px;
  display: block;
}

.usp-social__handle {
  font-size: 0.85rem;
  margin-top: 0.6rem;
}

.features-bar {
  display: none;
}

/* --- Footer --- */
.footer {
  background: var(--noir);
  border-top: none;
  padding-top: 2rem;
}

.footer__logo {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-size: 1.75rem !important;
  letter-spacing: 2px;
}

.footer__social a {
  font-size: 0;
}

.footer__social a i {
  width: 24px;
  height: 24px;
}

/* --- Boutons globaux --- */
.btn--primary {
  background: var(--rouge-principal) !important;
}

.btn--primary:hover {
  background: var(--rouge-vif) !important;
  color: var(--blanc) !important;
}

/* --- Page menu --- */
.menu-hero {
  background:
    linear-gradient(160deg, var(--rouge-fonce) 0%, var(--rouge-principal) 100%);
  position: relative;
}

.menu-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--texture-noise);
  opacity: 0.12;
  pointer-events: none;
}

.menu-categories {
  background: var(--noir);
  border-bottom: 2px solid var(--rouge-principal);
}

.menu-categories__link {
  color: rgba(255, 255, 255, 0.7);
}

.menu-categories__link:hover,
.menu-categories__link--active {
  color: var(--blanc);
}

.menu-section {
  background: var(--noir-soft);
  color: var(--blanc);
}

.menu-section:nth-child(even) {
  background: var(--noir);
}

.menu-section__title {
  color: var(--blanc);
  border-bottom-color: var(--rouge-principal);
}

.menu-card {
  background: linear-gradient(180deg, #1a1a1a, #0d0d0d);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.menu-card__image-wrap {
  position: relative;
  background: transparent;
  padding: 1.25rem;
}

.menu-card__image-wrap::before {
  content: '';
  position: absolute;
  inset: 15% 20% 10%;
  background: radial-gradient(ellipse, var(--rouge-glow), transparent 70%);
  filter: blur(16px);
  z-index: 0;
}

.menu-card__image,
.menu-card__image-wrap .img-slot {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 4px;
}

.menu-card__name {
  color: var(--blanc);
  font-family: var(--font-display) !important;
}

.menu-card__desc,
.menu-card__ingredients {
  color: var(--gris-texte) !important;
}

.menu-card__price {
  color: var(--rouge-principal) !important;
  background: var(--blanc);
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
}

.btn-customize {
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

/* --- Contact / checkout pages --- */
.menu-hero__subtitle,
.contact-info p,
.contact-info a {
  color: rgba(255, 255, 255, 0.85);
}

.section:not(.section--burgers):not(#notre-histoire) {
  background: var(--noir-soft);
  color: var(--blanc);
}

.section .section-title {
  color: var(--blanc);
}

.contact-info__label {
  color: var(--rouge-vif);
  font-family: var(--font-display);
  letter-spacing: 2px;
}

#zones .section-title,
#zones .section-subtitle {
  color: var(--blanc);
}

.header-opening-status.opening-status,
.hero-opening-status.opening-status {
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

.header-opening-status.opening-status {
  transform: rotate(-1deg);
}

.header-opening-status.status-open,
.hero-opening-status.status-open {
  background: rgba(45, 157, 63, 0.18);
}

.header-opening-status.status-closed-soon,
.hero-opening-status.status-closed-soon {
  background: rgba(224, 128, 0, 0.18);
}

.header-opening-status.status-closed,
.hero-opening-status.status-closed {
  background: rgba(237, 28, 36, 0.18);
}

/* --- Checkout : formulaires lisibles --- */
.checkout-page .checkout-panel,
.checkout-page .checkout-summary,
.checkout-page .reception-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--blanc);
}

.checkout-page .section-title,
.checkout-page .footer__heading,
.checkout-page label {
  color: var(--blanc);
}

.checkout-page input,
.checkout-page textarea,
.checkout-page select {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--blanc);
}

.checkout-page input::placeholder,
.checkout-page textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.checkout-page .reception-card {
  background: rgba(0, 0, 0, 0.35);
}

.checkout-page .reception-card--selected {
  border-color: var(--rouge-vif);
  background: rgba(237, 28, 36, 0.15);
}

/* ============================================
   BOUTONS « AUTOCOLLANT »
   Placés après les boutons legacy (.btn-hero-*,
   .btn-stamp-*) pour gagner la cascade à
   spécificité égale.
   ============================================ */
.btn-sticker-rouge,
.btn-sticker-blanc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 3px;
  padding: 15px 30px;
  min-height: 44px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 7px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-sticker-rouge {
  background: #ED1C24;
  color: #FFFFFF;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 3px #ED1C24, 5px 6px 0 0 rgba(14, 14, 14, 0.9);
  transform: rotate(-1.5deg);
}

.btn-sticker-blanc {
  background: #FFFFFF;
  color: #ED1C24;
  border: 3px solid #ED1C24;
  box-shadow: 0 0 0 3px #FFFFFF, 5px 6px 0 0 rgba(14, 14, 14, 0.9);
  transform: rotate(1deg);
}

.btn-sticker-rouge i,
.btn-sticker-blanc i {
  width: 18px;
  height: 18px;
}

.btn-sticker-rouge:hover,
.btn-sticker-blanc:hover,
.btn-sticker-rouge:focus-visible,
.btn-sticker-blanc:focus-visible {
  transform: rotate(0deg) scale(1.03);
}

.btn-sticker-rouge:hover {
  background: #ED1C24;
  color: #FFFFFF;
}

.btn-sticker-blanc:hover {
  background: #FFFFFF;
  color: #ED1C24;
}

/* Bouton du formulaire : bat prelancement.css (chargé après ce fichier) */
.page-home #liste-attente .waitlist-form__submit.btn-sticker-rouge {
  background: #ED1C24;
  color: #FFFFFF;
  border: 3px solid #FFFFFF;
  border-radius: 7px;
  box-shadow: 0 0 0 3px #ED1C24, 5px 6px 0 0 rgba(14, 14, 14, 0.9);
  transform: rotate(-1.5deg);
  width: calc(100% - 6px);
}

.page-home #liste-attente .waitlist-form__submit.btn-sticker-rouge:hover:not(:disabled) {
  background: #ED1C24;
  transform: rotate(0deg) scale(1.03);
}

/* ============================================
   STICKERS DE SECTION
   ============================================ */
/* Même principe que le sticker du hero : ombre sur le conteneur,
   rognage sur l'image (cf. commentaire plus haut). */
.section-sticker-wrap {
  display: block;
  width: 100%;
  line-height: 0;
  filter: drop-shadow(6px 8px 0 rgba(14, 14, 14, 0.85));
}

.section-sticker {
  display: block;
  width: 100%;
  height: auto;
  clip-path: inset(0.8%);
}

.section-sticker-wrap--burgers {
  max-width: 340px;
  margin: 0 0 1.25rem;
}

.section-sticker-wrap--zone {
  max-width: 280px;
  margin: 0 auto 1.5rem;
}

/* ============================================
   SECTION BURGERS — cartes compactes 3 colonnes
   ============================================ */
.burger-card-dark .product-card__image-wrap {
  padding: 0.75rem 0.75rem 0;
}

.burger-card-dark .img-slot--dark {
  aspect-ratio: 4 / 3;
  min-height: 0;
  border-radius: 4px;
}

.burger-card-dark .img-slot--dark .img-slot__label {
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  padding: 0 0.5rem;
}

.burger-card-dark .img-slot--dark .img-slot__icon {
  width: 22px;
  height: 22px;
}

.burger-card-dark .product-card__body {
  padding: 0.85rem 0.9rem 1rem;
}

.burger-card-dark .burger-name {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.burger-card-dark .burger-desc {
  font-size: 0.76rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.burger-card-dark .price-tags {
  margin: 8px 0 10px;
}

/* Le crème de l'étiquette se noyait dans la carte devenue blanche :
   un filet sombre lui redonne sa silhouette d'autocollant. */
.burger-card-dark .price-tag {
  padding: 4px 10px;
  border: 2px solid var(--encre);
  box-shadow: 3px 3px 0 rgba(14, 14, 14, 0.85);
}

.burger-card-dark .price-tag .tag-price {
  font-size: 16px;
}

.burger-card-dark .btn-customize--dark {
  font-size: 12px;
  padding: 10px 12px;
}

/* Le halo rouge derrière la photo est calibré pour une grande vignette */
.burger-card-dark .product-card__glow {
  inset: 15% 20% 15%;
  filter: blur(14px);
}

/* ============================================
   ENCARTS BLANCS SUR LE MUR ROUGE
   Plus aucune section de l'accueil n'a de fond pleine largeur : la
   texture fixe reste visible entre et autour des blocs. Chaque bloc
   de contenu est un encart blanc opaque détaché par une ombre dure,
   et les titres de section passent en blanc à même la texture.
   Header et footer inchangés.
   ============================================ */

/* --- Liste d'attente : le bloc entier devient une carte blanche --- */
.page-home #liste-attente {
  background: transparent;
  color: var(--encre);
}

.page-home #liste-attente .waitlist {
  background: var(--carte-blanche);
  border-radius: var(--carte-rayon);
  box-shadow: var(--carte-ombre);
  padding: 2.5rem 2rem;
}

.page-home .waitlist__title {
  color: #ED1C24;
}

.page-home .waitlist__subtitle {
  color: var(--texte-courant);
}

.page-home .waitlist-form label:not(.checkbox-label) {
  color: var(--encre);
}

/* Champs : un fond blanc sur une section blanche disparaîtrait —
   léger gris + bordure plus marquée pour garder la zone de saisie lisible. */
.page-home .waitlist-form input[type="text"],
.page-home .waitlist-form input[type="tel"],
.page-home .waitlist-form input[type="email"] {
  background: #F7F7F7;
  border: 2px solid #BDBAB3;
  color: var(--encre);
}

.page-home .waitlist-form input[type="text"]::placeholder,
.page-home .waitlist-form input[type="tel"]::placeholder,
.page-home .waitlist-form input[type="email"]::placeholder {
  color: #8A877F;
}

.page-home .waitlist-form input:focus {
  border-color: #ED1C24;
}

.page-home .waitlist-form .checkbox-label {
  color: var(--texte-courant);
}

.page-home .waitlist-form input[type="checkbox"] {
  accent-color: #ED1C24;
}

.page-home .waitlist__error {
  color: #B8141A;
}

.page-home .waitlist__success {
  color: #17692C;
  background: rgba(23, 105, 44, 0.08);
  border-color: rgba(23, 105, 44, 0.35);
}

/* --- Intitulé « Nos burgers » : blanc sur la texture --- */
.burgers-label {
  color: var(--blanc);
  border-bottom-color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* --- Notre histoire : le dégradé rouge cachait le mur --- */
#notre-histoire {
  background: transparent;
}

#notre-histoire .section-title {
  text-shadow: var(--ombre-titre);
}

#notre-histoire p {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* --- CTA « Prêt à smasher ? » : titre blanc, aucun fond --- */
.cta-banner {
  background: transparent;
  border-top: none;
  border-bottom: none;
}

.cta-banner__title {
  color: var(--blanc);
  text-shadow: var(--ombre-titre);
}

/* --- Barre USP : encart blanc, plus de fond pleine largeur.
       L'ancien procédé (box-shadow 100vmax + clip-path) servait à
       étendre le fond clair d'un bord à l'autre ; il masquerait
       maintenant le mur, d'où clip-path: none. --- */
.usp-bar {
  background: var(--carte-blanche);
  border-radius: var(--carte-rayon);
  box-shadow: var(--carte-ombre);
  clip-path: none;
}

/* --- Séparateurs en dents de scie : sans rupture de fond à masquer,
       ils n'ont plus d'objet. Neutralisés en CSS, le balisage
       (décoratif, aria-hidden) reste en place dans index.html. --- */
.page-home .hero-tear,
.page-home .torn-edge-red {
  display: none;
}

/* --- Responsive --- */
@media (min-width: 768px) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    padding: 3rem 2rem 3rem;
    gap: 2rem;
    max-width: 1280px;
    margin: 0 auto;
  }

  .hero__content {
    order: 1;
  }

  .hero-visual {
    order: 2;
  }

  .burgers-section__layout {
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 3rem;
    align-items: start;
  }

  .products-grid--featured {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: start;
  }

  /* La marge basse dégage l'ombre portée de l'encart : sans elle,
     la carte vient buter contre le noir du footer. */
  .usp-bar {
    grid-template-columns: 1fr auto;
    max-width: 1280px;
    margin: 0 auto 4rem;
    padding: 40px 5%;
  }

  .usp-bar__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }

  .usp-social {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .page-home .hero {
    background-position: center 30%;
    min-height: auto;
  }

  /* Ordre du hero sur mobile.
     style.css (l. 511 et 543) place .hero-visual en order:1 et
     .hero__content en order:2 : le cadre « photo bientôt » passait
     donc avant le sticker et l'accroche. On inverse ici plutôt que
     dans style.css, partagé par les 7 pages.
     .page-home + classe = spécificité (0,0,2,0), suffisant pour
     battre la règle d'origine à classe unique.
     Résultat : sticker → h1 → boutons (ordre du DOM dans
     .hero__content), puis le bloc photo. */
  .page-home .hero__content {
    order: 1;
  }

  .page-home .hero-visual {
    order: 2;
  }

  #zone-livraison.zone-livraison {
    padding: 60px 16px;
  }

  .stamp-badge {
    width: 90px;
    height: 90px;
    top: 4%;
    right: 2%;
    font-size: 11px;
  }

  .stamp-badge .stamp-big {
    font-size: 18px;
    padding: 1px 6px;
  }

  .stamp-badge .stamp-small {
    font-size: 10px;
  }

  .hero-visual__slot {
    min-height: 200px;
  }

  /* Encart : marges latérales pour ne pas coller aux bords de l'écran */
  .usp-bar {
    padding: 26px 18px;
    margin: 0 1rem 2.5rem;
  }

  /* Ombres portées réduites : à 390px, 7px de décalage mangent
     la largeur utile et débordent de la colonne. */
  .page-home #liste-attente .waitlist,
  .burger-card-dark,
  .burger-card-dark:hover,
  #zone-livraison .zone-card,
  #zone-livraison .zone-card.zone-highlight,
  #zone-livraison .zone-info-bottom,
  .usp-bar {
    box-shadow: var(--carte-ombre-mobile);
  }

  .page-home #liste-attente .waitlist {
    padding: 1.75rem 1.25rem;
  }

  .usp-bar__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* Boutons autocollants : rotation supprimée, ombre réduite */
  .btn-sticker-rouge,
  .btn-sticker-blanc {
    transform: rotate(0deg);
    font-size: 0.95rem;
    padding: 13px 22px;
  }

  .btn-sticker-rouge {
    box-shadow: 0 0 0 2px #ED1C24, 3px 4px 0 0 rgba(14, 14, 14, 0.9);
  }

  .btn-sticker-blanc {
    box-shadow: 0 0 0 2px #FFFFFF, 3px 4px 0 0 rgba(14, 14, 14, 0.9);
  }

  .btn-sticker-rouge:hover,
  .btn-sticker-blanc:hover,
  .btn-sticker-rouge:focus-visible,
  .btn-sticker-blanc:focus-visible {
    transform: scale(1.02);
  }

  .page-home #liste-attente .waitlist-form__submit.btn-sticker-rouge {
    transform: rotate(0deg);
    box-shadow: 0 0 0 2px #ED1C24, 3px 4px 0 0 rgba(14, 14, 14, 0.9);
    width: calc(100% - 4px);
  }

  .page-home #liste-attente .waitlist-form__submit.btn-sticker-rouge:hover:not(:disabled) {
    transform: scale(1.02);
  }

  /* Stickers de section : ombre réduite */
  .section-sticker-wrap {
    filter: drop-shadow(4px 5px 0 rgba(14, 14, 14, 0.85));
  }

  .section-sticker-wrap--burgers {
    max-width: min(78vw, 300px);
    margin: 0 auto 1rem;
  }

  .section-sticker-wrap--zone {
    max-width: min(68vw, 240px);
  }

  /* Burgers : carrousel horizontal, une carte visible à la fois */
  .products-grid--featured {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none;
    gap: 0.85rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scroll-padding-left: 0.25rem;
  }

  .products-grid--featured > .product-card {
    scroll-snap-align: center;
  }

  /* Le survol soulève la carte et créerait un débordement vertical */
  .products-grid--featured > .product-card:hover {
    transform: none;
  }

  .hero-title {
    font-size: clamp(36px, 9vw, 52px);
  }

  .hero-sticker-wrap {
    margin: 0 0 0.85rem 0;
    max-width: min(88vw, 400px);
    filter: drop-shadow(4px 5px 0 rgba(14, 14, 14, 0.85));
  }
}

@media (max-width: 480px) {
  .stamp-badge {
    display: none;
  }
}