@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --charcoal: #0e0d0c;
  --panel: #1a1714;
  --panel-alt: #201c18;
  --red: #8b0000;
  --red-bright: #c81e1e;
  --gold: #d4af37;
  --gold-soft: #f0d67a;
  --white: #f7f5f0;
  --grey: #c9c4ba;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  background: var(--charcoal);
  color: var(--white);
  font-family:'Poppins', sans-serif;
  padding-bottom: 84px; /* espace pour le bouton d'appel flottant */
}

a { color: inherit; text-decoration:none; }

img { max-width:100%; display:block; }

/* ---------------- Splash / loading screen ---------------- */
.splash {
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  overflow:hidden;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(200,30,30,0.28) 0%, rgba(200,30,30,0) 60%),
    radial-gradient(120% 90% at 50% 100%, rgba(212,175,55,0.16) 0%, rgba(212,175,55,0) 55%),
    var(--charcoal);
  transition: opacity 0.5s ease;
}
.splash.splash-hide { opacity:0; pointer-events:none; }

/* ambient moving glows, fill the whole screen with slow motion */
.splash-glow-a, .splash-glow-b {
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
  pointer-events:none;
}
.splash-glow-a {
  width:80vmax; height:80vmax;
  top:-30vmax; left:-20vmax;
  background:radial-gradient(circle, rgba(200,30,30,0.30) 0%, rgba(200,30,30,0) 70%);
  animation: splash-drift-a 6s ease-in-out infinite;
}
.splash-glow-b {
  width:70vmax; height:70vmax;
  bottom:-28vmax; right:-22vmax;
  background:radial-gradient(circle, rgba(212,175,55,0.22) 0%, rgba(212,175,55,0) 70%);
  animation: splash-drift-b 7s ease-in-out infinite;
}

/* cinematic corner frame, uses the full edges of the screen */
.splash-frame { position:absolute; inset:18px; pointer-events:none; }
.splash-frame .corner {
  position:absolute;
  width:22px; height:22px;
  border:2px solid rgba(212,175,55,0.55);
  opacity:0;
  animation: splash-fade-up 0.5s ease 0.15s both;
}
.corner.tl { top:0; left:0; border-right:none; border-bottom:none; }
.corner.tr { top:0; right:0; border-left:none; border-bottom:none; }
.corner.bl { bottom:0; left:0; border-right:none; border-top:none; }
.corner.br { bottom:0; right:0; border-left:none; border-top:none; }

.splash-inner {
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:20px;
}

.splash-logo-wrap {
  position:relative;
  margin-bottom:10px;
}
.splash-logo-wrap::before {
  content:'';
  position:absolute;
  inset:-16px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,0.35) 0%, rgba(212,175,55,0) 70%);
  animation: splash-ring-pulse 1.8s ease-in-out 0.6s infinite;
}

.splash-logo {
  position:relative;
  width:clamp(190px, 50vw, 300px);
  height:clamp(190px, 50vw, 300px);
  border-radius:16%;
  background:#fff;
  object-fit:cover;
  animation: splash-logo-in 0.65s cubic-bezier(.22,1.5,.36,1) both,
             splash-glow 1.7s ease-in-out 0.65s infinite;
}

.splash-name {
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:26px;
  letter-spacing:2px;
  color:var(--gold-soft);
  animation: splash-name-in 0.5s cubic-bezier(.22,.8,.32,1) 0.35s both;
}
.splash-name .shimmer {
  background-image:linear-gradient(100deg, var(--gold-soft) 30%, #fff 50%, var(--gold-soft) 70%);
  background-size:250% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: splash-shimmer 2s ease-in-out 1.1s infinite;
}

.splash-since {
  font-family:'Poppins', sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:1.5px;
  color:var(--grey);
  animation: splash-fade-up 0.4s ease 0.6s both;
}

.splash-tagline {
  margin-top:4px;
  font-family:'Bebas Neue', sans-serif;
  font-size:14px;
  letter-spacing:1.5px;
  color:#fff;
}
.splash-tagline span {
  display:inline-block;
  opacity:0;
  animation: splash-fade-up 0.35s ease both;
}
.splash-tagline .dot { color:var(--gold); margin:0 5px; }
.splash-tagline span:nth-child(1) { animation-delay:0.85s; }
.splash-tagline span:nth-child(2) { animation-delay:0.90s; }
.splash-tagline span:nth-child(3) { animation-delay:0.95s; }
.splash-tagline span:nth-child(4) { animation-delay:1.00s; }
.splash-tagline span:nth-child(5) { animation-delay:1.05s; }
.splash-tagline span:nth-child(6) { animation-delay:1.10s; }
.splash-tagline span:nth-child(7) { animation-delay:1.15s; }

.splash-foot {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding-bottom:34px;
}
.loader-duo {
  display:flex;
  align-items:flex-end;
  gap:30px;
}

/* ================= Burger: layers drop from above, bottom to top ================= */
.burger {
  position:relative;
  width:62px;
  height:68px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
}
.burger > * {
  position:relative;
  opacity:0;
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(.25,1.4,.4,1);
  animation-fill-mode: forwards;
}
.bun-bottom {
  width:52px; height:10px;
  background:linear-gradient(180deg,#d9a35a,#c07f3a);
  border-radius:4px 4px 12px 12px;
  opacity:1;
  animation:none;
  /* déjà présent à 0% : le pain du bas est là avant même que le chargement démarre */
}
.patty {
  width:50px; height:9px;
  border-radius:5px;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,0.18) 0 3px, transparent 3px 7px),
    #6b3b1f;
  animation-name: drop-in;
  animation-delay: 0.25s;
}
.cheese-slice {
  width:56px; height:6px;
  background:#f0c419;
  clip-path: polygon(0% 0%, 100% 0%, 96% 100%, 86% 40%, 74% 100%, 62% 40%, 50% 100%, 38% 40%, 26% 100%, 14% 40%, 4% 100%);
  animation-name: drop-in;
  animation-delay: 0.5s;
}
.tomato {
  width:46px; height:7px;
  border-radius:4px;
  background:linear-gradient(180deg,#d8493a,#b83224);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
  animation-name: drop-in;
  animation-delay: 0.75s;
}
.lettuce {
  width:58px; height:8px;
  background:#6bab48;
  clip-path: polygon(0% 30%, 8% 0%, 18% 35%, 28% 5%, 40% 38%, 52% 8%, 64% 36%, 76% 6%, 88% 34%, 100% 8%, 100% 100%, 0% 100%);
  animation-name: drop-in;
  animation-delay: 1.0s;
}
.bun-top {
  width:56px; height:20px;
  background:linear-gradient(180deg,#eab35b,#cf8f3a);
  border-radius:26px 26px 6px 6px;
  animation-name: drop-in-rotate;
  animation-delay: 1.265s;
}

.seed {
  position:absolute;
  top:6px;
  width:5px; height:2.5px;
  border-radius:50%;
  background:#fff3d6;
  transform:rotate(-15deg);
}
.s1 { left:16px; } .s2 { left:26px; top:4px; } .s3 { left:36px; }

.splash-percent {
  font-family:'Bebas Neue', sans-serif;
  font-size:13px;
  letter-spacing:1px;
  color:var(--grey);
  min-width:34px;
  text-align:center;
}

/* stays invisible for most of the fall, appears only as it lands */
@keyframes drop-in {
  0% { opacity:0; transform:translateY(-28px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes drop-in-rotate {
  0% { opacity:0; transform:translateY(-32px) rotate(-14deg); }
  100% { opacity:1; transform:translateY(0) rotate(0); }
}

@keyframes splash-drift-a {
  0%, 100% { transform:translate(0, 0) scale(1); }
  50% { transform:translate(4vmax, 3vmax) scale(1.08); }
}
@keyframes splash-drift-b {
  0%, 100% { transform:translate(0, 0) scale(1); }
  50% { transform:translate(-4vmax, -3vmax) scale(1.1); }
}
@keyframes splash-ring-pulse {
  0%, 100% { opacity:0.5; transform:scale(0.94); }
  50% { opacity:1; transform:scale(1.06); }
}
@keyframes splash-logo-in {
  0% { opacity:0; transform:scale(0.5) rotate(-6deg) translateY(14px); }
  100% { opacity:1; transform:scale(1) rotate(0) translateY(0); }
}
@keyframes splash-glow {
  0%, 100% { box-shadow:0 20px 50px rgba(0,0,0,0.55), 0 0 50px rgba(212,175,55,0.28); }
  50% { box-shadow:0 20px 50px rgba(0,0,0,0.55), 0 0 85px rgba(212,175,55,0.55); }
}
@keyframes splash-shimmer {
  0% { background-position:120% 0; }
  100% { background-position:-20% 0; }
}
@keyframes splash-name-in {
  from { opacity:0; letter-spacing:9px; transform:translateY(6px); }
  to { opacity:1; letter-spacing:2px; transform:translateY(0); }
}
@keyframes splash-fade-up {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes splash-fill {
  from { width:0%; }
  to { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-logo, .splash-name, .splash-since, .splash-tagline span,
  .splash-foot, .splash-frame .corner, .splash-logo-wrap::before, .splash-glow-a, .splash-glow-b,
  .splash-name .shimmer {
    animation:none; opacity:1;
  }
}

/* ---------------- Scroll reveal ---------------- */
.reveal {
  opacity:0;
  transform:translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal-visible {
  opacity:1;
  transform:translateY(0);
}
.menu-grid .reveal:nth-child(2) { transition-delay:0.05s; }
.menu-grid .reveal:nth-child(3) { transition-delay:0.1s; }
.menu-grid .reveal:nth-child(4) { transition-delay:0.05s; }
.menu-grid .reveal:nth-child(5) { transition-delay:0.1s; }
.menu-grid .reveal:nth-child(6) { transition-delay:0.15s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}

/* ---------------- Header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, #161310, #0e0d0c);
  border-bottom: 2px solid rgba(212,175,55,0.5);
  padding: 14px 16px 12px;
}

.header-top {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
}

.header-logo {
  width:clamp(48px, 14vw, 64px);
  height:clamp(48px, 14vw, 64px);
  border-radius:14px;
  overflow:hidden;
  flex-shrink:0;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,0.5);
}
.header-logo img { width:100%; height:100%; object-fit:cover; }

.header-name-block { flex:1 1 140px; min-width:0; }

.header-name {
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(19px, 5.5vw, 26px);
  letter-spacing:0.5px;
  color:var(--gold-soft);
  line-height:1.05;
}

.header-address {
  margin-top:3px;
  font-size:clamp(11px, 3vw, 12.5px);
  color: var(--grey);
  display:flex;
  align-items:flex-start;
  gap:5px;
}

.header-hours {
  margin-top:2px;
  font-size:clamp(10.5px, 2.8vw, 12px);
  color:var(--gold-soft);
}

/* sub-nav */
.subnav {
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}
.subnav a {
  flex:0 1 auto;
  font-family:'Bebas Neue', sans-serif;
  font-size:13px;
  letter-spacing:0.3px;
  color:var(--charcoal);
  background: var(--gold-soft);
  padding:6px 11px;
  border-radius:999px;
  white-space:nowrap;
  transition: background 0.2s, color 0.2s, transform 0.15s ease;
}
.subnav a:active { transform:scale(0.94); }
@media (hover:hover) {
  .subnav a:hover { background:#fff; }
  .subnav a.active:hover { background:var(--red-bright); }
}
.subnav a.active {
  background: var(--red-bright);
  color:#fff;
}
@media (max-width:480px) {
  .subnav { gap:5px; }
  .subnav a { font-size:12px; padding:5px 9px; }
}
@media (max-width:360px) {
  .subnav { gap:4px; }
  .subnav a { font-size:10.5px; padding:4px 7px; letter-spacing:0.2px; }
}

/* ---------------- Hero banner ---------------- */
.hero {
  position:relative;
  width:100%;
  height:clamp(96px, 22vw, 130px);
  overflow:hidden;
  background: radial-gradient(120% 160% at 50% -10%, #3a1414 0%, var(--charcoal) 62%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0 14px;
}
.hero-glow {
  position:absolute;
  top:-40%; left:50%;
  width:60vw; height:60vw;
  max-width:320px; max-height:320px;
  transform:translateX(-50%);
  background: radial-gradient(circle, rgba(212,175,55,0.32) 0%, rgba(212,175,55,0) 68%);
}
.hero-photo {
  position:relative;
  width:auto;
  height:clamp(64px, 15vw, 84px);
  object-fit:contain;
  flex-shrink:0;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,0.6)) drop-shadow(0 0 16px rgba(255,180,90,0.35));
}
.hero-text {
  position:relative;
  text-align:left;
}
.hero-kicker {
  font-family:'Bebas Neue', sans-serif;
  font-size:11px;
  letter-spacing:2.5px;
  color:var(--gold-soft);
  margin-bottom:1px;
}
.hero-title {
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(15px, 4.5vw, 20px);
  letter-spacing:0.5px;
  color:#fff;
  text-shadow:0 3px 10px rgba(0,0,0,0.6);
}

/* ---------------- Sections ---------------- */
main { padding: 14px 14px 10px; max-width:720px; margin:0 auto; }

.intro-text {
  font-size:13px;
  line-height:1.5;
  color:var(--grey);
  margin-bottom:16px;
}
.intro-text strong { color:var(--gold-soft); font-weight:600; }

.section { margin-bottom:30px; scroll-margin-top:112px; }

.section-title {
  position:relative;
  display:inline-block;
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(22px, 7vw, 30px);
  letter-spacing:0.5px;
  color:#fff;
  padding:6px 16px;
  margin-bottom:14px;
  background: var(--red-bright);
  border-radius:4px;
  box-shadow:0 6px 14px rgba(0,0,0,0.4);
  transform:rotate(-1deg);
  max-width:100%;
}

.section-note {
  font-size:12.5px;
  color:var(--grey);
  margin:-4px 0 14px;
  font-style:italic;
}

/* ---------------- Menu item rows ---------------- */
.menu-item {
  display:flex;
  gap:14px;
  align-items:flex-start;
  background: var(--panel);
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
@media (hover:hover) {
  .menu-item:hover {
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(0,0,0,0.4);
    background:var(--panel-alt);
  }
}
.menu-item:active { transform:scale(0.985); }

.menu-item-photo {
  width:78px;
  height:78px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  background:#0a0908;
}
.menu-item-photo img { width:100%; height:100%; object-fit:cover; }

.menu-item-body { flex:1; min-width:0; }

.menu-item-top {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:4px 10px;
}

.menu-item-name {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(17px, 4.5vw, 20px);
  letter-spacing:0.5px;
  color:#fff;
}

.menu-item-price {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(17px, 4.5vw, 20px);
  font-weight:800;
  color:var(--gold);
  white-space:nowrap;
}

.badge-popular {
  display:inline-block;
  font-family:'Poppins', sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.3px;
  color:var(--charcoal);
  background: var(--gold);
  padding:2px 8px;
  border-radius:999px;
  margin-left:6px;
  vertical-align:middle;
  white-space:nowrap;
}

.coming-soon-banner {
  display:inline-block;
  font-family:'Bebas Neue', sans-serif;
  font-size:15px;
  letter-spacing:0.5px;
  color:var(--charcoal);
  background: var(--gold-soft);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:12px;
}

.section-soon .menu-item { opacity:0.88; }

.menu-item-desc {
  margin-top:3px;
  font-size:13px;
  line-height:1.35;
  color:var(--grey);
}

.price-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.price-chips .chip {
  font-size:12px;
  background: var(--panel-alt);
  border:1px solid rgba(212,175,55,0.35);
  color:var(--gold-soft);
  padding:4px 9px;
  border-radius:999px;
}
.price-chips .chip b { color:#fff; font-weight:600; margin-right:4px; }

/* ---------------- French Tacos steps ---------------- */
.step-block { margin-bottom:22px; }
.step-heading {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.step-num {
  width:28px; height:28px;
  border-radius:50%;
  background:var(--gold);
  color:var(--charcoal);
  font-family:'Bebas Neue',sans-serif;
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.step-label {
  font-family:'Bebas Neue', sans-serif;
  font-size:18px;
  letter-spacing:1px;
  color:var(--gold-soft);
}

.taille-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
}
.taille-card {
  background:var(--panel);
  border-radius:12px;
  padding:10px 6px;
  text-align:center;
  transition: transform 0.2s ease, background 0.2s ease;
}
@media (hover:hover) { .taille-card:hover { transform:translateY(-2px); background:var(--panel-alt); } }
.taille-card img { width:100%; height:56px; object-fit:contain; margin:0 auto 6px; }
.taille-card .t-name { font-family:'Bebas Neue',sans-serif; font-size:15px; color:#fff; }
.taille-card .t-note { font-size:10.5px; color:var(--grey); margin-top:1px; }
.taille-card .t-price { font-family:'Bebas Neue',sans-serif; font-size:16px; color:var(--gold); margin-top:4px; }

.chip-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
.viande-chip {
  background:var(--panel);
  border-radius:12px;
  padding:10px 6px;
  text-align:center;
  transition: transform 0.2s ease, background 0.2s ease;
}
@media (hover:hover) { .viande-chip:hover { transform:translateY(-2px); background:var(--panel-alt); } }
.viande-chip img { width:100%; height:68px; object-fit:contain; margin:0 auto 6px; }
.viande-chip span { font-size:12px; color:var(--grey); }
.viande-chip span em { display:block; font-size:9px; font-style:italic; opacity:0.75; margin-top:2px; line-height:1.2; }
@media (max-width:360px) {
  .chip-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

.sauce-tags { display:flex; flex-wrap:wrap; gap:8px; }
.sauce-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--panel);
  border-radius:999px;
  padding:6px 12px;
  font-size:13px;
  color:#fff;
}
.sauce-tag .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

.extra-tier {
  background:var(--panel);
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:8px;
}
.extra-tier .price-badge {
  font-family:'Bebas Neue',sans-serif;
  font-size:15px;
  color:var(--gold);
  margin-bottom:5px;
  display:block;
}
.extra-tier .extra-items { font-size:12.5px; color:var(--grey); line-height:1.6; }

.formule-note {
  margin-top:6px;
  background: rgba(255,216,60,0.15);
  border:1px solid rgba(255,216,60,0.4);
  border-radius:12px;
  padding:10px 14px;
  font-family:'Bebas Neue',sans-serif;
  font-size:16px;
  letter-spacing:0.3px;
  color:var(--gold-soft);
  text-align:center;
}
.formule-note b { color:#fff; }

/* ---------------- Floating call button ---------------- */
.floating-call {
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  display:flex;
  align-items:stretch;
  background: linear-gradient(180deg, #4cbb63, #1f9e46);
  box-shadow:0 -6px 20px rgba(0,0,0,0.5);
  animation: call-pulse 2.6s ease-in-out infinite;
}
.floating-call-link {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(15px, 4.5vw, 20px);
  letter-spacing:0.5px;
  text-align:center;
  padding:16px 8px;
  transition: transform 0.15s ease;
}
.floating-call-link:active { transform:scale(0.98); }

/* bandeau plus haut sur petit écran, pour rester confortable au doigt */
@media (max-width:480px) {
  .floating-call-link { padding:19px 8px; font-size:16px; }
}

@keyframes call-pulse {
  0%, 100% { box-shadow:0 -6px 20px rgba(0,0,0,0.5); }
  50% { box-shadow:0 -6px 26px rgba(76,187,99,0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-call { animation:none; }
}

/* ============================================================
   Bouton "Installer l'application", au bout du bandeau d'appel
   ============================================================ */
.pwa-install-btn {
  flex-shrink:0;
  width:58px;
  border:none;
  border-left:1px solid rgba(0,0,0,0.15);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color:var(--charcoal);
  font-size:24px;
  cursor:pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.pwa-install-btn:active { transform:scale(0.94); background:var(--gold-soft); }
@media (hover:hover) {
  .pwa-install-btn:hover { background:var(--gold-soft); }
}
.pwa-install-icon { line-height:1; }

/* petite pulsation pour attirer l'œil, uniquement à la première visite */
.pwa-install-btn--attention {
  animation: pwa-attention 1.6s ease-in-out 3;
}
@keyframes pwa-attention {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.15); background:var(--gold-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-install-btn--attention { animation:none; }
}

/* ============================================================
   Modal d'installation (iOS + repli Android) — thème du site,
   moderne et responsive.
   ============================================================ */
.pwa-modal {
  position:fixed;
  inset:0;
  z-index:9998;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.pwa-modal[hidden] { display:none; }

.pwa-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(8,7,6,0.65);
  backdrop-filter:blur(2px);
  animation: pwa-fade-in 0.25s ease both;
}

.pwa-modal-box {
  position:relative;
  width:100%;
  max-width:400px;
  margin:0 auto 0;
  max-height:88vh;
  overflow-y:auto;
  background: linear-gradient(180deg, var(--panel), var(--panel-alt));
  border:1px solid rgba(212,175,55,0.35);
  border-radius:22px 22px 0 0;
  padding:24px 22px 26px;
  text-align:center;
  color:#fff;
  box-shadow:0 -12px 40px rgba(0,0,0,0.55);
  animation: pwa-slide-up 0.3s cubic-bezier(.25,.9,.4,1) both;
}
@media (min-width:480px) {
  .pwa-modal { align-items:center; padding:16px; }
  .pwa-modal-box { border-radius:22px; margin-bottom:0; }
}

.pwa-modal-close {
  position:absolute;
  top:12px; right:12px;
  width:30px; height:30px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:var(--grey);
  font-size:15px;
  cursor:pointer;
  transition: background 0.15s ease;
}
.pwa-modal-close:active { background:rgba(255,255,255,0.18); }

.pwa-modal-logo {
  width:64px; height:64px;
  border-radius:16px;
  margin:0 auto 12px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,0.4);
}

.pwa-modal-box h2 {
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:22px;
  letter-spacing:0.5px;
  color:var(--gold-soft);
  margin-bottom:8px;
}

.pwa-modal-subtitle {
  font-size:13.5px;
  line-height:1.5;
  color:var(--grey);
  margin-bottom:20px;
}

.pwa-modal-steps {
  list-style:none;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:22px;
}
.pwa-modal-steps li {
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(212,175,55,0.2);
  border-radius:12px;
  padding:10px 12px;
}
.pwa-step-icon {
  flex-shrink:0;
  width:34px; height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  border-radius:50%;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
}
.pwa-step-text {
  font-size:13.5px;
  line-height:1.4;
  color:#fff;
}
.pwa-step-text strong { color:var(--gold-soft); }

.pwa-modal-cta {
  width:100%;
  border:none;
  background: linear-gradient(180deg, #4cbb63, #1f9e46);
  color:#fff;
  font-family:'Bebas Neue', sans-serif;
  font-size:17px;
  letter-spacing:0.5px;
  padding:13px;
  border-radius:999px;
  cursor:pointer;
  transition: transform 0.15s ease;
}
.pwa-modal-cta:active { transform:scale(0.98); }

@keyframes pwa-fade-in {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes pwa-slide-up {
  from { opacity:0; transform:translateY(24px); }
  to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-modal-backdrop, .pwa-modal-box { animation:none; }
}

/* ---------------- Footer ---------------- */
footer {
  text-align:center;
  padding:26px 16px 10px;
  color:var(--grey);
  font-size:12.5px;
}
footer .footer-name {
  font-family:'Anton', sans-serif;
  font-size:20px;
  color:var(--gold-soft);
  margin-bottom:4px;
}
.footer-social {
  display:inline-block;
  margin-top:12px;
  font-weight:600;
  color:var(--gold-soft);
  text-decoration:underline;
}

/* ---------------- Larger screens ---------------- */
@media (min-width:640px) {
  .header-name { font-size:30px; }
  .section-title { font-size:34px; }
  .menu-item-photo { width:92px; height:92px; }

  .menu-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
    align-items:stretch;
  }
  .menu-grid .menu-item { margin-bottom:0; height:100%; }
  .menu-item-photo img { object-fit:contain; }

  .hero { height:170px; gap:20px; }
  .hero-photo { height:118px; }
  .hero-kicker { font-size:13px; }
  .hero-title { font-size:26px; }

  .taille-grid, .chip-grid { gap:14px; }
}

@media (min-width:900px) {
  main { max-width:960px; padding-top:26px; }
  .menu-grid { grid-template-columns:repeat(3, 1fr); gap:16px; }
  .hero { height:190px; }
  .site-header { padding:18px 32px 14px; }
  main, .hero { padding-left:32px; padding-right:32px; }
}

@media (min-width:1200px) {
  main { max-width:1080px; }
}