/* Subito Pizza — feuille de style partagée par les 4 pages */

:root {
  --red: #D62828;
  --red-dark: #A81E1E;
  --green: #0E3B27;
  --green-dark: #092A1B;
  --green-tint: #F0F5F2;
  --cream: #FFFFFF;
  --dark: #1C1B19;
  --gray: #6B6560;
  --border: #E7E5E1;
  --gold: #D4AF64;
  --gold-bright: #FFD166;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(28, 27, 25, 0.07);
  --max-width: 960px;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--dark);
  background:
    radial-gradient(circle at 12% -10%, rgba(14, 59, 39, 0.06), transparent 42%),
    radial-gradient(circle at 105% 12%, rgba(214, 40, 40, 0.05), transparent 38%),
    var(--cream);
  background-attachment: fixed;
  line-height: 1.5;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

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

a { color: inherit; }

/* ---------- Accessibilité : utilitaires ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 2000;
  background: var(--green);
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
}

/* ---------- Apparition douce au scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.75, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sections "moment fort" : légèrement plus de présence à l'arrivée que le
   reste des sections (translate + scale au lieu du simple fondu). */
.reveal--feature {
  transform: translateY(28px) scale(0.97);
}

.reveal--feature.is-visible {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--feature { opacity: 1; transform: none; transition: none; }
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- En-tête ---------- */

.site-header {
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf8 100%);
  padding: 28px 20px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 30px -24px rgba(28, 27, 25, 0.35);
  position: relative;
  z-index: 5;
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}

.site-header--compact {
  padding-top: 12px;
  padding-bottom: 8px;
  box-shadow: 0 14px 30px -20px rgba(28, 27, 25, 0.45);
}

.site-header--compact .site-header__logo {
  max-width: 88px;
}

.site-header__top {
  max-width: 540px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.site-header__badge--hashtag { justify-self: end; }
.site-header__badge--social { justify-self: start; }

.site-header__logo {
  display: inline-block;
  max-width: 130px;
  flex: 0 0 auto;
  transition: max-width 0.3s ease;
}

.site-header__logo img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-header__logo:hover img,
.site-header__logo:focus-visible img {
  transform: scale(1.06) rotate(-1.5deg);
}

.site-header__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--green);
  flex: 0 1 112px;
  min-width: 0;
  transition: transform 0.15s ease;
}

.site-header__badge:active { transform: scale(0.95); }

.site-header__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.site-header__badge-icon svg { flex: 0 0 auto; width: 19px; height: 19px; }

.hashtag-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border: 1.8px solid var(--green);
  border-radius: 999px;
  color: var(--red);
  font-weight: 800;
  font-size: 1.1rem;
  position: relative;
  background: #fff;
}

.hashtag-bubble::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 8px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-left: 1.8px solid var(--green);
  border-bottom: 1.8px solid var(--green);
  transform: rotate(-45deg);
}

.site-header__badge-text {
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0.2px;
}

.site-header__badge-text small {
  display: block;
  font-weight: 400;
  font-size: 0.66rem;
  color: var(--gray);
}

@media (min-width: 480px) {
  .site-header__logo { max-width: 200px; }
  .site-header__top { gap: 24px; }
  .site-header__badge { flex-basis: 150px; }
  .site-header__badge-text { font-size: 0.88rem; }
  .site-header__badge-text small { font-size: 0.76rem; }
  .hashtag-bubble { width: 36px; height: 31px; font-size: 1.25rem; }
  .site-header__badge-icon svg { width: 24px; height: 24px; }
}

/* ---------- Hero (accueil) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--green) 0%, var(--green-dark) 65%, #071d13 100%);
  padding: 52px 20px 96px;
  color: #fff;
}

.hero__glow {
  position: absolute;
  top: -25%;
  right: -12%;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(214, 40, 40, 0.38), transparent 70%);
  pointer-events: none;
}

.hero__glow--left {
  top: auto;
  bottom: -30%;
  right: auto;
  left: -15%;
  width: 45%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
}

.hero__inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  text-align: center;
}

@media (min-width: 760px) {
  .hero__inner { grid-template-columns: 1.15fr 0.85fr; text-align: left; }
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  padding: 9px 22px;
  border: 1px solid rgba(212, 175, 100, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  text-align: center;
  color: var(--gold);
  max-width: 100%;
  order: -2;
}

@media (min-width: 760px) {
  .hero__eyebrow { order: -1; grid-column: 1 / -1; margin: 0 0 -6px; }
}

.hero__eyebrow-counter {
  color: var(--gold-bright);
  font-weight: 800;
  display: inline-block;
}

.hero__eyebrow-counter.is-done {
  animation: eyebrowCounterPulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes eyebrowCounterPulse {
  0% { transform: scale(1); text-shadow: none; }
  55% { transform: scale(1.18); text-shadow: 0 0 14px rgba(255, 209, 102, 0.75); }
  100% { transform: scale(1); text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow-counter.is-done { animation: none; }
}

.hero__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
}

.hero__title em {
  font-style: italic;
  color: #FF6B5B;
}

.hero__subtitle {
  margin: 0 auto 28px;
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
  line-height: 1.65;
}

@media (min-width: 760px) {
  .hero__subtitle { margin-left: 0; margin-right: 0; }
}

.hero__promo-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: fit-content;
  margin: 0 auto 22px;
  padding: 10px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  box-shadow: 0 10px 24px -8px rgba(214, 40, 40, 0.65);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  text-align: center;
  animation: promoBadgeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.15s;
}

.hero__promo-badge span {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

@keyframes promoBadgeIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 760px) {
  .hero__promo-badge { margin-left: 0; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__promo-badge { animation: none; }
}

/* ---------- Statut de prise de commande (temps réel) ---------- */

.order-status {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto 22px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translateY(10px);
  animation: orderStatusIn 0.7s cubic-bezier(0.22, 0.75, 0.2, 1) forwards 0.2s;
  transition: background 0.2s ease, transform 0.2s ease;
}

@keyframes orderStatusIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 760px) {
  .order-status { margin-left: 0; margin-right: auto; }
}

@media (hover: hover) and (pointer: fine) {
  .order-status:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
  }
}

/* Le bloc statut a été conçu pour le fond sombre du hero (voir .hero
   ci-dessus) : le fond translucide à 7% de blanc n'a plus de contraste sur
   un fond clair. Variante utilisée là où ce même composant est repris hors
   du hero (ex. menu.html) — mêmes textes, mêmes couleurs de statut, mêmes
   données, seul le fond du pilule change pour rester lisible. */
.order-status--on-light {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  border-color: transparent;
  box-shadow: var(--shadow);
}

@media (hover: hover) and (pointer: fine) {
  .order-status--on-light:hover {
    background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
    transform: translateY(-1px);
  }
}

.order-status__dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #6BCB77;
  animation: orderStatusBreathe 2.6s ease-in-out infinite;
}

.order-status.is-closed .order-status__dot {
  background: var(--red);
  animation-duration: 3.4s;
  animation-name: orderStatusBreatheClosed;
}

@keyframes orderStatusBreathe {
  0%, 100% { opacity: 0.75; box-shadow: 0 0 0 0 rgba(107, 203, 119, 0.35); }
  50% { opacity: 1; box-shadow: 0 0 0 4px rgba(107, 203, 119, 0.12); }
}

@keyframes orderStatusBreatheClosed {
  0%, 100% { opacity: 0.75; box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.3); }
  50% { opacity: 1; box-shadow: 0 0 0 4px rgba(214, 40, 40, 0.12); }
}

.order-status__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.order-status.is-transitioning .order-status__body {
  opacity: 0;
  transform: translateY(4px);
}

.order-status__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}

.order-status__countdown {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.order-status__unit {
  margin-right: 2px;
}

.order-status__odo {
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #fff;
}

.order-status__odo-digit {
  display: inline-block;
  height: 1.1em;
  overflow: hidden;
  position: relative;
}

.order-status__odo-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.order-status__odo-track > span {
  height: 1.1em;
  line-height: 1.1;
  display: block;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .order-status { animation: none; opacity: 1; transform: none; }
  .order-status__dot { animation: none; }
  .order-status__body { transition: none; }
  .order-status__odo-track { transition: none; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 26px;
}

@media (min-width: 760px) {
  .hero__actions { justify-content: flex-start; }
}

.hero__actions .btn-outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.hero__actions .btn-outline:hover,
.hero__actions .btn-outline:focus-visible {
  background: #fff;
  color: var(--green);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 760px) {
  .hero__meta { justify-content: flex-start; }
}

.hero__showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  order: -1;
}

@media (min-width: 760px) {
  .hero__showcase { order: 0; }
}

.hero__plate {
  position: relative;
  display: block;
  width: min(280px, 62vw);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(255, 255, 255, 0.07);
  animation: heroFloat 5s ease-in-out infinite;
  transition: box-shadow 0.25s ease;
}

.hero__plate:hover,
.hero__plate:focus-visible {
  box-shadow: 0 34px 66px -16px rgba(0, 0, 0, 0.65), 0 0 0 10px rgba(255, 255, 255, 0.14);
}

.hero__plate:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 4px;
}

.hero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  transform: scale(1.08) translateY(0);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.6s ease;
  filter: saturate(1) brightness(1);
}

.hero__plate img.is-swapping {
  opacity: 0;
  /* Léger retrait en profondeur plutôt qu'une rotation : la photo suivante
     semble avancer naturellement vers sa place, sans effet "gadget". */
  transform: scale(1.03) translateY(5px);
  filter: saturate(0.94) brightness(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .hero__plate img { transition: opacity 0.3s ease; }
  .hero__plate img.is-swapping { transform: scale(1.08) translateY(0); }
}

.hero__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  background: radial-gradient(circle, rgba(255, 209, 102, 0) 55%, rgba(255, 209, 102, 0.25) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.hero__plate:has(img.is-swapping)::after {
  opacity: 1;
}

/* Lundi = jour du Panuzo (voir initHeroCarousel() dans main.js) : réutilise
   le même halo doré que l'effet de transition ci-dessus, simplement
   maintenu visible tant que le Panuzo est à l'écran plutôt qu'un nouveau
   style. Retiré automatiquement dès que le carrousel passe au produit
   suivant. */
.hero__plate.is-panuzo::after {
  opacity: 1;
}

.hero__showcase-caption {
  /* Léger retard sur l'image : le texte suit d'un cran, pour une
     impression de profondeur plutôt qu'un fondu synchrone plat. */
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s;
}

.hero__showcase-caption.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
  .hero__plate::after { display: none; }
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero__showcase-caption {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.hero__showcase-caption strong { color: #fff; }

.hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
}

.hero__wave svg { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .hero__plate { animation: none; }
}

/* ---------- Navigation ---------- */

.site-nav {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
}

.site-nav__list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-nav__list li { flex: 1; }

.site-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: 3px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.site-nav__link .icon { display: inline-flex; transition: transform 0.2s ease; }
.site-nav__link .icon svg { display: block; }

.site-nav__link:hover,
.site-nav__link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.site-nav__link:hover .icon,
.site-nav__link:focus-visible .icon {
  transform: translateY(-1px);
}

.site-nav__link:active { transform: scale(0.97); }

.site-nav__link.is-active {
  border-bottom-color: var(--red);
}

/* ---------- Bouton réservation téléphone ---------- */

.call-section {
  padding: 28px 20px;
}

.call-section__note {
  max-width: var(--max-width);
  margin: 12px auto 0;
  text-align: center;
  color: var(--gray);
  font-size: 0.85rem;
  font-style: italic;
}

/* ---------- Offres pizza ---------- */

.promo-highlight {
  max-width: var(--max-width);
  margin: 0 auto 28px;
  padding: 26px 24px;
  background: linear-gradient(160deg, var(--green) 0%, var(--green-dark) 100%);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px -14px rgba(9, 42, 27, 0.55);
  text-align: center;
}

.promo-highlight--compact {
  margin: 16px auto 20px;
  padding: 18px 20px;
}

.promo-highlight__eyebrow {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
}

.promo-highlight__main {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}

.promo-highlight--compact .promo-highlight__main {
  font-size: 1.25rem;
}

.promo-highlight__main small {
  display: block;
  margin-top: 5px;
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.promo-highlight__secondary {
  margin: 10px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.promo-highlight__legal {
  margin: 10px 0 0;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-promo {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.call-button {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: var(--max-width);
  margin: 0 auto;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: 0 10px 26px -10px rgba(214, 40, 40, 0.55);
  transition: box-shadow 0.25s ease, transform 0.2s cubic-bezier(0.22, 0.75, 0.2, 1);
}

.call-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.75s ease;
  z-index: 1;
}

.call-button:hover::before,
.call-button:focus-visible::before {
  transform: translateX(130%);
}

.call-button:hover,
.call-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(214, 40, 40, 0.6);
}
.call-button:active { transform: translateY(0) scale(0.99); }

.call-button__icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-shrink: 0;
}

.call-button__text {
  position: relative;
  z-index: 2;
  text-align: center;
  line-height: 1.3;
}

.call-button__label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.9;
}

.call-button__number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ---------- Sections génériques ---------- */

section { padding: 32px 20px; }

.section-title {
  max-width: var(--max-width);
  margin: 0 auto 26px;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: center;
  color: var(--dark);
  position: relative;
  padding-bottom: 14px;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
  transition: transform 0.6s cubic-bezier(0.22, 0.75, 0.2, 1) 0.15s;
}

/* Tant que la section n'est pas encore entrée dans le viewport (classe
   .reveal posée par initScrollReveal), le trait sous le titre part de zéro
   et se dessine à l'arrivée. Sans JS ou sans support IntersectionObserver,
   .reveal n'est jamais posée : le trait reste visible tout de suite. */
.reveal:not(.is-visible) .section-title::after {
  transform: translateX(-50%) scaleX(0);
}

/* ---------- Carte Google Maps ---------- */

.map-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.map-wrapper iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

.map-actions {
  max-width: var(--max-width);
  margin: 14px auto 0;
  text-align: center;
}

.btn-outline {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid var(--green);
  color: var(--green);
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-outline::before,
.btn-solid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.65s ease;
  pointer-events: none;
}

.btn-outline:hover::before,
.btn-outline:focus-visible::before,
.btn-solid:hover::before,
.btn-solid:focus-visible::before {
  transform: translateX(130%);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--green);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(14, 59, 39, 0.5);
}
.btn-outline:active { transform: translateY(0) scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .btn-outline::before, .btn-solid::before { display: none; }
}

/* ---------- Zone de livraison ---------- */

.section-intro {
  max-width: var(--max-width);
  margin: -10px auto 20px;
  text-align: center;
  color: var(--gray);
}

.community-tag {
  max-width: fit-content;
  margin: -10px auto 26px;
  text-align: center;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.community-tag__hashtag {
  font-weight: 800;
  letter-spacing: 0.3px;
}

.delivery-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.delivery-tier {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.delivery-tier:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -14px rgba(28, 27, 25, 0.22);
}

.delivery-tier__price {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--red);
}

.delivery-tier__price span {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.delivery-tier__cities {
  margin: 0;
  font-weight: 600;
  color: var(--dark);
}

.delivery-section__note {
  max-width: var(--max-width);
  margin: 20px auto 0;
  text-align: center;
  font-weight: 700;
  color: var(--red);
}

/* ---------- Moyens de paiement ---------- */

.payment-badges {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.payment-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--green);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.payment-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(28, 27, 25, 0.25);
}

/* ---------- Infos pratiques (accès PMR) ---------- */

.access-note {
  max-width: var(--max-width);
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-weight: 600;
  color: var(--green);
  background: var(--green-tint);
  border-radius: 999px;
  padding: 10px 20px;
}

.access-note svg { flex-shrink: 0; }

/* ---------- Galerie photos ---------- */

.gallery-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.gallery-grid__item {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  border: none;
  padding: 0;
  background: #fff;
  transition: box-shadow 0.25s ease;
}

.gallery-grid__item:hover,
.gallery-grid__item:focus-visible {
  box-shadow: 0 16px 32px -14px rgba(28, 27, 25, 0.3);
}

.gallery-grid__item:active {
  box-shadow: 0 10px 20px -12px rgba(28, 27, 25, 0.32);
}

.gallery-grid__item:active img { transform: scale(1.05); }

.gallery-grid__item:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gallery-grid__item:hover img,
.gallery-grid__item:focus-visible img { transform: scale(1.08); }

.img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--green-tint) 0%, #E3EEE7 100%);
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
  padding: 10px;
}

.img-placeholder svg {
  width: 26px;
  height: 26px;
  opacity: 0.55;
  animation: placeholderPulse 2.4s ease-in-out infinite;
}

@keyframes placeholderPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .img-placeholder svg { animation: none; }
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 14, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lightbox.is-open { display: flex; opacity: 1; }

.lightbox img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  transform: scale(0.94);
  transition: transform 0.25s cubic-bezier(0.22, 0.75, 0.2, 1);
}

.lightbox.is-open img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox img { transition: none; }
}

.lightbox__close {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top));
  right: calc(24px + env(safe-area-inset-right));
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  border-radius: 6px;
}

.lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- Avis clients ---------- */

.review-card {
  max-width: var(--max-width);
  margin: 0 auto 16px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -16px rgba(28, 27, 25, 0.25);
}

.review-card__stars { color: var(--red); font-size: 1.1rem; letter-spacing: 2px; }

.review-card__author {
  font-weight: 700;
  margin-top: 8px;
}

.review-card__date {
  color: var(--gray);
  font-size: 0.85rem;
  margin-left: 8px;
  font-weight: 400;
}

.review-card__text { margin: 8px 0 0; }

.review-card__reply {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--green-tint);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  font-size: 0.92rem;
}

.review-card__reply strong {
  color: var(--green);
}

.review-card__google-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  color: var(--green);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.review-card__google-link:hover,
.review-card__google-link:focus-visible {
  border-bottom-color: var(--green);
}

.reviews-cta {
  text-align: center;
  margin-top: 20px;
}

.btn-solid {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgba(214, 40, 40, 0.55);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-solid:hover, .btn-solid:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(214, 40, 40, 0.6);
}
.btn-solid:active { transform: translateY(0) scale(0.98); }

/* ---------- Présentation texte ---------- */

.presentation-section {
  position: relative;
  overflow: hidden;
  background: var(--green-tint);
}

.presentation-section .section-title,
.presentation-section .presentation {
  position: relative;
  z-index: 1;
}

.presentation__year {
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform : uniquement le positionnement + le parallax (piloté en JS).
     L'entrée en fondu ne touche que l'opacité, pour ne jamais entrer en
     conflit avec le décalage de parallax appliqué en inline par le JS. */
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(7rem, 26vw, 20rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--green);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity 1.6s ease;
}

.presentation__year.is-visible {
  opacity: 0.07;
}

@media (max-width: 759px) {
  .presentation__year {
    font-size: clamp(6rem, 32vw, 9rem);
  }
  .presentation__year.is-visible {
    opacity: 0.06;
  }
}

@media (prefers-reduced-motion: reduce) {
  .presentation__year { transition: none; opacity: 0.06; }
}

.presentation {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: var(--dark);
}

.presentation__lead {
  font-style: italic;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 16px;
}

.presentation p + p { margin-top: 12px; }

/* ---------- Scène finale ("Depuis 1999", signature avant le footer) ---------- */

.finale {
  position: relative;
  overflow: hidden;
  padding: 100px 20px 76px;
  background: linear-gradient(180deg, var(--green-tint) 0%, var(--green) 58%, var(--green-dark) 100%);
  text-align: center;
}

.finale__year {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(7rem, 32vw, 24rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transition: opacity 1.8s ease;
}

.finale.is-visible .finale__year { opacity: 0.05; }

/* Braises ambiantes en canvas — au-dessus du filigrane "1999", en dessous
   du contenu. Purement décoratif (aria-hidden côté HTML), jamais
   cliquable. */
.finale__embers-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.finale__content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
}

.finale__date,
.finale__line,
.finale__days,
.finale__logo-wrap {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(16px);
  transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), filter 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.finale.is-visible #finale-date { transition-delay: 0.1s; }
.finale.is-visible #finale-line1 { transition-delay: 0.5s; }
.finale.is-visible #finale-days { transition-delay: 0.95s; }
.finale.is-visible #finale-logo-wrap { transition-delay: 2.05s; }

.finale.is-visible .finale__date,
.finale.is-visible .finale__line,
.finale.is-visible .finale__days,
.finale.is-visible .finale__logo-wrap {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.finale__date {
  margin: 0 0 14px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}

.finale__line {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.2vw, 1.9rem);
  font-weight: 600;
  font-style: italic;
  color: #fff;
  line-height: 1.4;
}

.finale__days {
  position: relative;
  margin: 26px 0 30px;
  line-height: 1;
}

/*
  Le nombre de jours est un vrai <button> (pour le rejouer au clic/tap et
  au clavier, sans code de gestion de touches maison) mais doit rester
  visuellement identique à l'ancien <span> : reset complet des styles de
  bouton natifs.
*/
.finale__days-number {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 13vw, 6.4rem);
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.finale__days-number:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 6px;
  border-radius: 8px;
}

/* Le chiffre "prend du poids" pendant que ses rouleaux tournent — une
   seule animation posée au démarrage, jamais mise à jour par frame. */
@keyframes finale-grow {
  0% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.finale__days-number.is-growing {
  animation: finale-grow var(--finale-grow-duration, 900ms) cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .finale__days-number.is-growing { animation: none; }
}

/* Chiffres à rouleau (mécanique d'odomètre) : réutilise exactement les
   classes .order-status__odo-digit / __odo-track déjà construites pour le
   compteur "commandes ouvertes/fermées" — les unités em s'adaptent
   automatiquement à la taille de police de .finale__days-number. */
.finale__days-number .order-status__odo-digit { height: 1em; }
.finale__days-number .order-status__odo-track > span { height: 1em; line-height: 1; }

.finale__days-label {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  transition: opacity 0.3s ease;
}

/* Rebond d'arrivée : le chiffre "atterrit" une fois sa valeur finale
   posée, au lieu de simplement s'arrêter. Transform uniquement. */
@keyframes finale-settle {
  0% { transform: scale(1); }
  40% { transform: scale(1.055); }
  100% { transform: scale(1); }
}

.finale__days-number.is-settling {
  animation: finale-settle 0.52s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Indice discret de rejouabilité — toujours présent, jamais intrusif. */
.finale__replay-hint {
  display: block;
  margin-top: 14px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.32);
}

/* Équivalences humaines : révélées par JS (classe .is-revealed) une fois
   le compteur arrivé — délibérément indépendant de la chaîne de
   transition-delay de .finale.is-visible, pour rester synchronisé avec la
   fin réelle de l'animation du chiffre. */
.finale__equivalences {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.finale__equivalences.is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.finale__equivalences li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 68px;
}

.finale__equivalences strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.finale__equivalences span {
  margin-top: 2px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .finale__equivalences {
    transition: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
  .finale__days-number.is-settling { animation: none; }
}

.finale__logo-wrap {
  position: relative;
  width: min(150px, 42vw);
  margin: 48px auto 0;
}

.finale__logo-wrap::before {
  content: "";
  position: absolute;
  inset: -55%;
  background: radial-gradient(circle, rgba(255, 209, 102, 0.22) 0%, transparent 70%);
  z-index: -1;
}

.finale__logo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

@media (max-width: 480px) {
  .finale { padding: 76px 20px 60px; }
  .finale__logo-wrap { width: min(120px, 38vw); margin-top: 38px; }
  .finale__days { margin: 20px 0 24px; }
  .finale__equivalences { gap: 8px 20px; }
  .finale__equivalences strong { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .finale__year { transition: none; opacity: 0.05; }
  .finale__date,
  .finale__line,
  .finale__days,
  .finale__logo-wrap {
    transition: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}

.placeholder-note {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--gray);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px 14px;
}

.site-footer__panuzo-line {
  margin: 0 0 6px;
}

.site-footer__panuzo-line a {
  color: var(--gold-bright);
  font-weight: 700;
  text-decoration: underline;
}

/* Carte teaser Panuzo (reseaux.html) — palette charbon/or, distincte du
   vert utilisé ailleurs sur le site. */
.panuzo-card {
  position: relative;
  overflow: hidden;
  max-width: var(--max-width);
  margin: 0 auto 32px;
  background: linear-gradient(160deg, #241f1a 0%, var(--dark) 100%);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.55);
  padding: 34px 24px;
  text-align: center;
}

.panuzo-card__eyebrow {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--gold-bright);
}

.panuzo-card__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 8vw, 2.8rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.panuzo-card__tag {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 16px;
  border: 1px solid var(--gold-bright);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--gold-bright);
}

.panuzo-card__price {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: #fff;
}

/* Jour de disponibilité (voir initPanuzoStatus() dans main.js) : accent
   discret plutôt qu'un habillage complet — le badge et le prix suffisent
   à faire sentir "aujourd'hui c'est le jour du Panuzo" sans transformer
   la carte en publicité. */
.panuzo-card.is-panuzo-today {
  box-shadow: 0 0 0 2px var(--gold-bright), 0 24px 50px -22px rgba(0, 0, 0, 0.55);
}

.panuzo-card.is-panuzo-today .panuzo-card__price { color: var(--gold-bright); }

.panuzo-card__text {
  margin: 0 auto 20px;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
}

.panuzo-card__cta {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

.panuzo-card__cta:hover,
.panuzo-card__cta:focus-visible {
  background: var(--gold-bright);
  color: var(--green-dark);
}

/* Section "Panuzo" du menu (menu.html) — une vraie catégorie au même
   titre que les autres (présente dans .menu-jump / .menu-quicknav), mais
   dont le contenu reprend la palette charbon/or de .panuzo-card plutôt
   qu'une grille .menu-item classique : offre éphémère du lundi, pas une
   fiche produit comme les autres (prix et statut pilotés par
   initPanuzoStatus() dans main.js, voir .is-panuzo-today plus bas). */
.menu-category--panuzo .menu-category__title { color: var(--gold-bright); }

.panuzo-menu-feature {
  display: grid;
  gap: 0;
  max-width: var(--max-width);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #241f1a 0%, var(--dark) 100%);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.55);
  color: #fff;
}

@media (min-width: 700px) {
  .panuzo-menu-feature { grid-template-columns: 1fr 1.2fr; align-items: stretch; }
}

.panuzo-menu-feature__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

@media (min-width: 700px) {
  .panuzo-menu-feature__img { height: 100%; min-height: 260px; }
}

.panuzo-menu-feature__body {
  padding: 26px 24px;
  text-align: center;
}

@media (min-width: 700px) {
  .panuzo-menu-feature__body { text-align: left; display: flex; flex-direction: column; justify-content: center; }
}

.panuzo-menu-feature__tag {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 14px;
  border: 1px solid var(--gold-bright);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--gold-bright);
}

.panuzo-menu-feature__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.8rem;
  text-transform: uppercase;
}

.panuzo-menu-feature__price {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
}

.panuzo-menu-feature.is-panuzo-today {
  box-shadow: 0 0 0 2px var(--gold-bright), 0 24px 50px -22px rgba(0, 0, 0, 0.55);
}

.panuzo-menu-feature.is-panuzo-today .panuzo-menu-feature__price { color: var(--gold-bright); }

.panuzo-menu-feature__ingredients {
  margin: 0 0 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.panuzo-menu-feature__note {
  margin: 0 0 18px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
}

.panuzo-menu-feature__cta {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

.panuzo-menu-feature__cta:hover,
.panuzo-menu-feature__cta:focus-visible {
  background: var(--gold-bright);
  color: var(--green-dark);
}

/* ---------- Grille des réseaux sociaux ---------- */

.social-grid {
  max-width: 480px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  text-decoration: none;
  color: var(--dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -16px rgba(28, 27, 25, 0.28);
}

.social-link:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.social-link__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.social-link__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.social-link__name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.3px;
}

.social-link__handle {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray);
}

.social-link--soon {
  opacity: 0.6;
  cursor: default;
}

.social-link--soon:hover { transform: none; box-shadow: var(--shadow); }

.social-link--soon .social-link__handle {
  font-style: italic;
}

/* ---------- Écrire un avis ---------- */

.page-shortcut {
  max-width: var(--max-width);
  margin: 0 auto 6px;
  padding: 10px 20px;
  text-align: center;
}

.page-shortcut a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-shortcut a:hover,
.page-shortcut a:focus-visible {
  color: var(--red);
  border-color: var(--red);
}

.write-review-section {
  padding-top: 8px;
  scroll-margin-top: 20px;
}

.write-review__tagline {
  max-width: var(--max-width);
  margin: 0 auto 20px;
  text-align: center;
  font-style: italic;
  font-weight: 600;
  color: var(--green);
}

.review-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  color: var(--dark);
}

.review-form__field input,
.review-form__field select,
.review-form__field textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--dark);
  background: var(--green-tint);
  resize: vertical;
}

.review-form__field input:focus-visible,
.review-form__field select:focus-visible,
.review-form__field textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}

.review-form .btn-solid {
  border: none;
  cursor: pointer;
  font: inherit;
  align-self: center;
}

.review-form__note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--gray);
  text-align: center;
}

/* ---------- Funnel d'avis (étoiles d'abord) ---------- */

.review-funnel {
  max-width: 520px;
  margin: 0 auto;
}

.review-step {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: review-step-in 0.35s ease both;
}

/*
  [hidden] doit toujours gagner : sans cette règle, "display: flex"
  ci-dessus écrase l'attribut hidden (règle d'auteur > règle navigateur)
  et les panneaux masqués par showPanel() dans main.js restent visibles.
*/
.review-step[hidden] { display: none; }

@keyframes review-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.review-step__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--green);
  text-align: center;
}

.review-step--thanks {
  align-items: center;
  text-align: center;
}

.review-step--thanks p:not(.review-step__title):not(.review-step__icon) {
  margin: 0;
  color: var(--gray);
}

.review-step--thanks .btn-solid {
  text-decoration: none;
  display: inline-block;
}

/* Deux options à poids égal : ni l'une ni l'autre n'est mise en avant
   selon la note choisie (conformité Google — pas de "review gating"). */
.review-choice {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  margin-top: 4px;
}

.review-choice__option {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--green-tint);
  border-radius: var(--radius);
  text-align: center;
}

.review-choice__option .review-form__field { text-align: left; }

.review-choice__label {
  margin: 0;
  font-weight: 700;
  color: var(--green);
  font-size: 1rem;
}

.review-choice__hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray);
}

.review-choice__option .btn-outline {
  align-self: center;
  text-decoration: none;
  margin-top: 4px;
}

.review-choice__divider {
  position: relative;
  text-align: center;
  height: 1px;
  background: var(--border);
}

.review-choice__divider span {
  position: relative;
  top: -0.8em;
  background: #fff;
  padding: 0 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray);
}

.review-step__icon {
  margin: 0;
  font-size: 2.4rem;
  line-height: 1;
}

.review-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.review-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--border);
  padding: 4px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.review-star:hover,
.review-star:focus-visible,
.review-star.is-active {
  color: var(--red);
  transform: scale(1.12);
}

.review-star:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .review-step { animation: none; }
  .review-star { transition: none; }
}

.section-title--small {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

/* ---------- Réclamation (commande, erreur, etc.) ---------- */

.complaint-section {
  max-width: 520px;
  margin: 0 auto 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  text-align: center;
  scroll-margin-top: 20px;
}

.complaint-section__intro {
  max-width: 420px;
  margin: 0 auto 24px;
  color: var(--gray);
  font-size: 0.92rem;
}

.complaint-section__google {
  max-width: 420px;
  margin: -8px auto 24px;
  font-size: 0.88rem;
  color: var(--gray);
}

.complaint-section__google a {
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.complaint-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  margin-top: 6px;
}

.review-choice__option--form {
  align-items: stretch;
}

.complaint-section__note {
  max-width: 460px;
  margin: 22px auto 0;
  font-size: 0.82rem;
  color: var(--gray);
  text-align: center;
  line-height: 1.5;
}

.complaint-form__optional {
  font-weight: 400;
  color: var(--gray);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
}

.complaint-form .btn-solid {
  border: none;
  cursor: pointer;
  font: inherit;
  align-self: center;
}

.btn-solid--dark {
  background: linear-gradient(135deg, var(--dark) 0%, #0a0908 100%);
  box-shadow: 0 8px 20px -10px rgba(28, 27, 25, 0.5);
}

.btn-solid--dark:hover,
.btn-solid--dark:focus-visible {
  box-shadow: 0 14px 28px -10px rgba(28, 27, 25, 0.55);
}

.complaint-form__sent {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
}

.complaint-form__sent .review-step__title { color: var(--dark); }
.complaint-form__sent p:not(.review-step__title):not(.review-step__icon) { margin: 0; color: var(--gray); }

/* ---------- Page Mentions légales ---------- */

.legal-content {
  max-width: 720px;
  margin: 0 auto;
  color: var(--dark);
}

.legal-content h2 {
  font-family: var(--font-display);
  color: var(--green);
  font-size: 1.2rem;
  margin: 32px 0 8px;
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content p { margin: 0 0 12px; }

.legal-content ul { margin: 0 0 12px; padding-left: 20px; }

.legal-content a { color: var(--red); text-decoration: underline; }

.faq-teaser {
  text-align: center;
}

.faq-teaser .btn-outline {
  text-decoration: none;
  display: inline-block;
}

/* ---------- FAQ (page dédiée + section) ---------- */

.faq-category {
  font-family: var(--font-display);
  color: var(--green);
  font-size: 1.1rem;
  max-width: 720px;
  margin: 28px auto 12px;
}

.faq-category:first-of-type { margin-top: 0; }

.faq-contact-note {
  max-width: 720px;
  margin: 24px auto 0;
  text-align: center;
  color: var(--gray);
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 44px 16px 18px;
  font-weight: 700;
  color: var(--green);
  position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--red);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.faq-item p {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--gray);
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item summary::after { transition: transform 0.2s ease; }
}

/* ---------- Page Menu : catalogue par catégories ---------- */

.menu-page-eyebrow {
  margin: 0 0 4px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
}

.menu-jump {
  max-width: var(--max-width);
  margin: 0 auto 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 759px) {
  /*
    Toutes les catégories doivent être visibles d'un seul coup d'oeil, sans
    que le client ait besoin de deviner qu'il peut faire défiler pour voir
    la suite : on affiche donc la grille complète (comme sur desktop),
    plutôt qu'une seule ligne qui défile horizontalement.

    Pas de "position: sticky" ici volontairement : la grille doit
    disparaître normalement quand on descend dans la page (elle défile
    avec le contenu, comme un titre), c'est la barre fine .menu-quicknav
    juste en dessous qui prend le relais et reste collante une fois
    qu'on a dépassé la grille.
  */
  .menu-jump {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    margin: 0 0 28px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px -10px rgba(28, 27, 25, 0.25);
  }

  .menu-jump a {
    padding: 11px 18px;
    font-size: 0.92rem;
    border-width: 2px;
  }

  .menu-jump a svg { width: 22px; height: 22px; }

  .menu-jump a.is-active {
    transform: scale(1.08);
  }
}

.menu-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  background: #fff;
  color: var(--green);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 1.05rem;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-jump a svg { width: 24px; height: 24px; }

.menu-jump a:hover,
.menu-jump a:focus-visible {
  background: var(--green);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -12px rgba(14, 59, 39, 0.5);
}

.menu-jump .menu-jump__compose {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.menu-jump .menu-jump__compose:hover,
.menu-jump .menu-jump__compose:focus-visible {
  background: var(--red-dark);
  box-shadow: 0 12px 22px -12px rgba(214, 40, 40, 0.55);
}

.menu-jump .menu-jump__veggie {
  background: var(--green);
  color: #fff;
}

.menu-jump .menu-jump__panuzo {
  background: var(--dark);
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

.menu-jump .menu-jump__panuzo:hover,
.menu-jump .menu-jump__panuzo:focus-visible {
  background: #000;
  color: #fff;
  box-shadow: 0 12px 22px -12px rgba(0, 0, 0, 0.55);
}

.menu-jump a.is-active {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--gold-bright);
  box-shadow: 0 14px 26px -12px rgba(9, 42, 27, 0.6), 0 0 0 3px rgba(255, 209, 102, 0.3);
}

/*
  Barre de navigation rapide entre catégories, sur une seule ligne : ne
  remplace pas la grille ci-dessus (laissée intacte), elle vient en plus,
  juste après. Elle est collante (reste fixée en haut de l'écran) une
  fois qu'on a dépassé la grille, qui elle défile normalement et
  disparaît. Masquée par défaut (.is-visible ajouté par
  initMenuJumpActive() dans main.js, dès qu'on descend dans le menu ou
  qu'on clique sur une catégorie de la grille) : elle n'apparaît donc
  jamais avant que ce soit utile.
*/
.menu-quicknav {
  position: sticky;
  top: 0;
  z-index: 19;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 10px;
  max-width: var(--max-width);
  margin: 0 auto 32px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px -10px rgba(28, 27, 25, 0.25);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.menu-quicknav.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .menu-quicknav { transition: opacity 0.15s linear; transform: none; }
}

.menu-quicknav::-webkit-scrollbar { display: none; }

.menu-quicknav a {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  text-decoration: none;
  background: #fff;
  color: var(--green);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-quicknav a svg { width: 18px; height: 18px; flex-shrink: 0; }

.menu-quicknav a:hover,
.menu-quicknav a:focus-visible {
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 18px -10px rgba(14, 59, 39, 0.5);
}

.menu-quicknav a.is-active {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--gold-bright);
  box-shadow: 0 14px 22px -12px rgba(9, 42, 27, 0.6), 0 0 0 3px rgba(255, 209, 102, 0.3);
}

@media (max-width: 759px) {
  .menu-quicknav {
    justify-content: flex-start;
    /* Fondu aux bords : montre qu'il y a d'autres catégories à faire
       défiler des deux côtés, sans avoir besoin d'essayer. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
}

/* ---------- Modificateurs de mise en page ---------- */

.section--flush-top { padding-top: 0; }
.call-section--tight { padding-top: 8px; }
.compose-pizza--center { text-align: center; }

.placeholder-note--block {
  display: block;
  max-width: var(--max-width);
  margin: 20px auto 0;
  text-align: center;
}

.menu-category {
  padding-top: 12px;
  scroll-margin-top: var(--menu-sticky-h, 16px);
}

.menu-category__title {
  max-width: var(--max-width);
  margin: 0 auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
}

.menu-category__price-note {
  max-width: var(--max-width);
  margin: 0 auto 20px;
  text-align: center;
  color: var(--gray);
  font-size: 0.9rem;
}

/* Avertissement discret : disponibilité réduite en cas de forte affluence
   (priorité donnée aux pizzas, notre produit principal). Utilisé sous les
   sections Pâtes et Salades — ni alarmant ni caché, juste informatif. */
.menu-category__notice {
  max-width: 560px;
  margin: 0 auto 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--dark);
  background: rgba(212, 175, 100, 0.14);
  border: 1px solid rgba(212, 175, 100, 0.45);
  border-radius: 10px;
  padding: 10px 16px;
}

.menu-category__notice svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--gold);
}

/* ---------- Sous-navigation "base" des pizzas ---------- */

.pizza-base-nav {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
  max-width: var(--max-width);
  margin: 0 auto 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px;
}

.pizza-base-nav::-webkit-scrollbar { display: none; }

/*
  Pastille qui glisse d'un onglet à l'autre au lieu d'un simple changement
  de couleur instantané (positionnée/dimensionnée en JS dans
  initPizzaBaseNav(), voir main.js). Portée par un élément séparé plutôt
  que par le lien actif lui-même : le glissement reste fluide même quand
  le lien de destination est encore hors champ dans le défilement mobile.
*/
.pizza-base-nav__indicator {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--green-dark);
  border: 1.5px solid var(--gold-bright);
  box-shadow: 0 14px 26px -12px rgba(9, 42, 27, 0.6), 0 0 0 3px rgba(255, 209, 102, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), width 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease;
}

.pizza-base-nav__indicator.is-ready { opacity: 1; }

.pizza-base-nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  text-decoration: none;
  background: #fff;
  color: var(--green);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 0.98rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pizza-base-nav a:hover,
.pizza-base-nav a:focus-visible {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -12px rgba(14, 59, 39, 0.5);
}

.pizza-base-nav a:active {
  transform: translateY(-2px) scale(0.95);
}

.pizza-base-nav a.is-active {
  background: transparent;
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 480px) {
  .pizza-base-nav {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pizza-base-nav__indicator { transition: opacity 0.15s linear; }
  .pizza-base-nav a:active { transform: none; }
}

.pizza-base-group {
  scroll-margin-top: var(--menu-sticky-h, 16px);
}

.pizza-base-group__title {
  position: relative;
  max-width: var(--max-width);
  margin: 36px auto 22px;
  padding-bottom: 12px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark);
  text-align: center;
}

.pizza-base-group__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
}

.pizza-base-group:first-of-type .pizza-base-group__title {
  margin-top: 0;
}

.size-chart {
  max-width: var(--max-width);
  margin: 0 auto 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.size-chart__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 18px;
  min-width: 84px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.size-chart__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -14px rgba(28, 27, 25, 0.25);
}

.size-chart__name {
  font-weight: 700;
  color: var(--dark);
  font-size: 0.95rem;
}

.size-chart__cm {
  font-size: 0.78rem;
  color: var(--gray);
}

.size-chart__price {
  font-weight: 700;
  color: var(--red);
  font-size: 0.95rem;
  margin-top: 2px;
}

.menu-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.menu-item {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.22, 0.75, 0.2, 1), box-shadow 0.35s ease;
}

.menu-item__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  background: var(--red);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(214, 40, 40, 0.6);
}

/* Léger reflet qui balaie le badge "signature" toutes les quelques
   secondes — un clin d'oeil discret plutôt qu'une animation permanente
   voyante (une seule pizza porte ce badge). */
.menu-item__badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: badge-shine 4.5s ease-in-out infinite;
}

@keyframes badge-shine {
  0%, 40% { left: -60%; }
  60%, 100% { left: 130%; }
}

.menu-item:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 22px 38px -16px rgba(28, 20, 18, 0.32);
}

/* Retour tactile au tap (mobile n'a pas de survol) : la carte "s'enfonce"
   légèrement plutôt que de rester inerte au toucher. */
.menu-item:active {
  transform: translateY(-2px) scale(0.98);
  box-shadow: 0 14px 26px -14px rgba(28, 20, 18, 0.28);
}

.menu-item > img { transition: transform 0.5s cubic-bezier(0.22, 0.75, 0.2, 1); }
.menu-item:hover > img { transform: scale(1.07); }

@media (prefers-reduced-motion: reduce) {
  .menu-item__badge::after { animation: none; display: none; }
}

.menu-item .img-placeholder,
.menu-item > img {
  aspect-ratio: 4 / 3;
  border-radius: 0;
  width: 100%;
  object-fit: cover;
  display: block;
}

.menu-item__body { padding: 12px 14px 16px; }

.menu-item__name {
  margin: 0 0 4px;
  font-size: 1rem;
}

.menu-item__ingredients {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray);
}

.menu-item__price {
  margin: 8px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--red);
}

/* ---------- L'atelier Subito (en-tête de composer.html) ---------- */

.atelier {
  position: relative;
  overflow: hidden;
  padding: 56px 20px 8px;
  background: linear-gradient(180deg, #FBF9F3 0%, var(--green-tint) 100%);
  text-align: center;
}

.atelier__year {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 30vw, 16rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--green);
  opacity: 0.045;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.atelier__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
}

.atelier__stage {
  position: relative;
  width: min(300px, 74vw);
  aspect-ratio: 1;
  margin: 0 auto 32px;
}

.atelier__ring { position: absolute; inset: 0; display: none; }

.atelier__ring svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(14, 59, 39, 0.16);
  stroke-width: 1;
}

.atelier__step {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray);
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 72deg)) translateY(-172px) rotate(calc(var(--i) * -72deg));
}

.atelier__plate {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 26px 50px -18px rgba(28, 27, 25, 0.35), 0 0 0 7px #fff;
}

.atelier__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

.atelier__editorial {
  max-width: 440px;
  margin: 0 auto;
}

.atelier__eyebrow {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--red);
}

.atelier__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 9vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--green);
}

.atelier__intro {
  margin: 0 0 20px;
  color: var(--gray);
  font-size: 1rem;
  line-height: 1.55;
}

.atelier__intro strong { color: var(--dark); }

.atelier__steps-mobile {
  list-style: none;
  margin: 0 auto 40px;
  padding: 16px 0 0;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray);
  border-top: 1px solid var(--border);
}

@media (min-width: 760px) {
  .atelier { padding: 90px 20px 20px; }

  .atelier__inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 40px;
    text-align: left;
  }

  .atelier__stage {
    width: min(420px, 42vw);
    margin: 0;
    order: 2;
  }

  .atelier__ring { display: block; }
  .atelier__step { transform: translate(-50%, -50%) rotate(calc(var(--i) * 72deg)) translateY(-198px) rotate(calc(var(--i) * -72deg)); }

  .atelier__editorial { margin: 0; }
  .atelier__intro { margin-bottom: 0; }
  .atelier__steps-mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier__year { opacity: 0.045; }
}

/* ---------- Composez votre pizza ---------- */

.compose-pizza {
  max-width: var(--max-width);
  margin: 32px auto 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 20px;
}

.compose-pizza__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--green);
}

.compose-pizza__base {
  margin: 0 0 18px;
  color: var(--gray);
  font-size: 0.92rem;
}

.compose-pizza__base strong { color: var(--dark); }

.compose-group {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dashed var(--border);
}

.compose-group__title {
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 6px;
}

.compose-group__list {
  margin: 0 0 14px;
  color: var(--gray);
  font-size: 0.9rem;
}

.compose-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.compose-price-row__item {
  flex: 1 1 72px;
  text-align: center;
  background: var(--green-tint);
  border-radius: 8px;
  padding: 8px 6px;
}

.compose-price-row__item .compose-price-row__name {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.compose-price-row__item .compose-price-row__price {
  display: block;
  font-weight: 700;
  color: var(--red);
  margin-top: 2px;
}

/* ---------- Composez votre pizza : mode d'emploi ---------- */

.howto {
  margin-top: 22px;
  padding: 18px 18px 4px;
  background: var(--green-tint);
  border-radius: var(--radius);
}

.howto__title {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--green);
  font-size: 1.02rem;
}

.howto-steps {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.howto-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.howto-step p { margin: 0; line-height: 1.45; color: var(--dark); font-size: 0.92rem; }

.howto-step__number {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  border-radius: 50%;
}

.howto-example {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1.5px dashed var(--green);
  border-radius: var(--radius);
  text-align: center;
}

.howto-example__label {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green);
}

.howto-example__calc {
  margin: 0;
  font-size: 1rem;
  color: var(--dark);
}

.howto-example__calc span {
  color: var(--red);
  font-weight: 700;
}

.howto-example__calc strong {
  color: var(--green);
  font-size: 1.15rem;
}

/* ---------- Pied de page ---------- */

.site-footer {
  text-align: center;
  padding: 28px 20px calc(70px + env(safe-area-inset-bottom));
  margin-top: 12px;
  background: var(--green);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
}

.site-footer a {
  color: #fff;
  font-weight: 600;
}

.site-footer__legal {
  margin-top: 10px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__signature {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.5);
}

.site-footer__signature strong {
  font-style: normal;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 1px;
}

/* ---------- Écran d'intro (logo, page d'accueil uniquement) ----------
   Voile décoratif non bloquant : la page réelle reste scrollable/utilisable
   en dessous pendant qu'il joue (voir initIntroSplash() dans main.js). */

.intro-splash {
  /* Couverture plein cadre garantie par top/right/bottom/left à 0 (inset)
     seuls — sans largeur/hauteur explicite en plus. Un position:fixed avec
     top:0 + bottom:0 ET une hauteur fixée (100vh/100dvh) est "sur-contraint" :
     la spec CSS fait alors gagner la hauteur sur le bas, donc le moindre
     écart entre 100dvh et la vraie fenêtre visible (barre d'adresse mobile
     qui se rétracte après le premier rendu, arrondi, etc.) laissait un
     espace en bas où la page d'accueil apparaissait. inset seul se
     recalcule à chaque repositionnement du viewport, sans dépendre d'une
     unité vh/dvh figée au moment du rendu. */
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 40%, #123a28 0%, var(--green-dark) 58%, #050f0a 100%);
  overflow: hidden;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.9s;
}

.intro-splash.is-hiding {
  opacity: 0;
  transform: scale(1.05);
  visibility: hidden;
  pointer-events: none;
}

.intro-splash__glow {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 40, 40, 0.24) 0%, transparent 68%);
  animation: introGlowBreathe 3.4s ease-in-out infinite;
}

@keyframes introGlowBreathe {
  0%, 100% { transform: scale(1); opacity: 0.65; }
  50% { transform: scale(1.14); opacity: 1; }
}

.intro-splash__stage {
  position: relative;
  width: min(230px, 54vw);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-splash__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.intro-splash__ring circle {
  fill: none;
  stroke: rgba(212, 175, 100, 0.9);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 616;
  stroke-dashoffset: 616;
  animation: introRingDraw 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards 0.1s;
}

@keyframes introRingDraw {
  to { stroke-dashoffset: 0; }
}

.intro-splash__logo-wrap {
  position: relative;
  width: 66%;
  border-radius: 10px;
  clip-path: inset(0 100% 0 0);
  transform: scale(1.05);
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5));
  animation: introLogoWipe 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.25s;
}

@keyframes introLogoWipe {
  0% { clip-path: inset(0 100% 0 0); transform: scale(1.05); }
  100% { clip-path: inset(0 0% 0 0); transform: scale(1); }
}

.intro-splash__logo {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.intro-splash__sheen {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%);
  transform: translateX(-130%);
  animation: introSheenSweep 0.5s ease 0.65s;
}

@keyframes introSheenSweep {
  to { transform: translateX(130%); }
}

.intro-splash__tagline {
  position: relative;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
  letter-spacing: 0.4px;
  font-size: 0.88rem;
  opacity: 0;
  transform: translateY(8px);
  animation: introTaglineIn 0.45s ease forwards 0.75s;
}

@keyframes introTaglineIn {
  to { opacity: 1; transform: translateY(0); }
}

.intro-skip .intro-splash,
html.no-js .intro-splash {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .intro-splash { display: none; }
}

/* ---------- Page 404 ---------- */

.error-404 {
  max-width: 560px;
  margin: 40px auto;
  text-align: center;
}

.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 24px;
}

.error-404__code {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 800;
  color: var(--green-tint);
  -webkit-text-stroke: 2px var(--green);
  line-height: 1;
}

/* ---------- Retour en haut ---------- */

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(9, 42, 27, 0.5);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
  z-index: 40;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--green-dark);
}

.back-to-top svg { width: 22px; height: 22px; }

/* ---------- Panuzo — teaser nouveauté ---------- */

.panuzo-teaser {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 15% -10%, rgba(14, 59, 39, 0.55), transparent 45%), linear-gradient(175deg, #14211a 0%, var(--dark) 55%, #100f0d 100%);
  padding: 64px 20px 72px;
  color: #fff;
}

.panuzo-teaser__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 50% 115%, rgba(0, 0, 0, 0.55), transparent 60%);
  pointer-events: none;
}

.panuzo-teaser__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.panuzo-teaser__glow--red {
  top: -18%;
  right: -14%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(214, 40, 40, 0.32), transparent 70%);
}

.panuzo-teaser__glow--gold {
  bottom: -20%;
  left: -10%;
  width: 42%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(212, 175, 100, 0.18), transparent 70%);
}

.panuzo-teaser__sprig {
  position: absolute;
  z-index: 0;
  width: 34px;
  height: 34px;
  color: rgba(154, 199, 149, 0.35);
  pointer-events: none;
  animation: panuzoSprigFloat 7s ease-in-out infinite;
}

.panuzo-teaser__sprig--1 { top: 14%; right: 8%; }
.panuzo-teaser__sprig--2 { bottom: 10%; left: 6%; width: 26px; height: 26px; animation-delay: -3.5s; transform: rotate(140deg); }

@keyframes panuzoSprigFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(8deg); }
}

.panuzo-teaser__sprig--2 { animation-name: panuzoSprigFloat2; }
@keyframes panuzoSprigFloat2 {
  0%, 100% { transform: translateY(0) rotate(140deg); }
  50% { transform: translateY(10px) rotate(150deg); }
}

.panuzo-teaser__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  text-align: center;
}

@media (min-width: 780px) {
  .panuzo-teaser__inner {
    grid-template-columns: 1fr 1.05fr;
    text-align: left;
    gap: 48px;
  }
  .panuzo-teaser__ribbons,
  .panuzo-teaser__steps,
  .panuzo-teaser__final { grid-column: 1 / -1; }
}

.panuzo-teaser__intro { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 780px) { .panuzo-teaser__intro { align-items: flex-start; } }

.panuzo-teaser__brandrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.panuzo-teaser__logo {
  width: 108px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(212, 175, 100, 0.4), 0 14px 26px -14px rgba(0, 0, 0, 0.7);
  margin: 0;
}

/* Sceau/médaillon "L'Italie dans chaque bouchée", écho du tampon doré en
   haut du flyer officiel. Légèrement de travers, comme un vrai cachet. */
.panuzo-teaser__seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  transform: rotate(-11deg);
  background: radial-gradient(circle at 34% 30%, #e6c67a, var(--gold) 70%);
  border: 2px dashed rgba(28, 27, 25, 0.35);
  box-shadow: 0 0 0 3px rgba(212, 175, 100, 0.18), 0 10px 18px -10px rgba(0, 0, 0, 0.6);
  text-align: center;
  line-height: 1.15;
}

.panuzo-teaser__seal span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--dark);
}

.panuzo-teaser__seal span:nth-child(2) { font-size: 0.56rem; }

.panuzo-teaser__eyebrow {
  margin: 0 0 6px;
  padding: 8px 18px;
  border: 1px solid rgba(212, 175, 100, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--gold-bright);
}

.panuzo-teaser__title {
  margin: 10px 0 4px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 15vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 18px 40px rgba(0, 0, 0, 0.45);
}

.panuzo-teaser__subtitle {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  color: rgba(255, 255, 255, 0.82);
}

.panuzo-teaser__flag { display: inline-flex; gap: 5px; margin-top: 16px; }
.panuzo-teaser__flag i { width: 24px; height: 4px; border-radius: 2px; display: block; }
.panuzo-teaser__flag i:nth-child(1) { background: var(--green); }
.panuzo-teaser__flag i:nth-child(2) { background: rgba(255, 255, 255, 0.85); }
.panuzo-teaser__flag i:nth-child(3) { background: var(--red); }

.panuzo-teaser__showcase { display: flex; flex-direction: column; align-items: center; gap: 26px; }

.panuzo-teaser__plate-frame { position: relative; width: min(300px, 78vw); }

.panuzo-teaser__plate {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #3a2a1d, #1a1310 72%);
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.65), 0 0 0 10px rgba(255, 255, 255, 0.06);
  animation: panuzoPlateFloat 6s ease-in-out infinite;
}

@keyframes panuzoPlateFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.panuzo-teaser__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panuzo-teaser__plate-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.panuzo-teaser__plate-placeholder svg { width: 40px; height: 40px; }
.panuzo-teaser__plate-placeholder span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }

.panuzo-teaser__bands { position: absolute; inset: 0; }

.panuzo-teaser__band {
  position: absolute;
  left: -12%;
  right: -12%;
  height: 32px;
  overflow: hidden;
  transform: rotate(-7deg);
  background: rgba(9, 42, 27, 0.88);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.panuzo-teaser__band { top: 34%; }
.panuzo-teaser__band--2 { top: 64%; transform: rotate(5deg); background: rgba(28, 27, 25, 0.88); }

.panuzo-teaser__band-track {
  display: flex;
  width: max-content;
  animation: panuzoMarquee 20s linear infinite;
}

.panuzo-teaser__band-track--reverse { animation-direction: reverse; animation-duration: 24s; }

.panuzo-teaser__band-track span {
  display: inline-block;
  padding: 0 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  line-height: 32px;
  white-space: nowrap;
}

.panuzo-teaser__band--2 .panuzo-teaser__band-track span { color: rgba(255, 255, 255, 0.85); }

@keyframes panuzoMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Badge "rendez-vous", écho du tampon doré du flyer qui pointait vers le
   produit. Affiché sur le cadre du plat plutôt qu'avec une flèche séparée
   (plus sobre, tient sur mobile) : la deuxième révélation après le titre. */
.panuzo-teaser__badge {
  position: absolute;
  top: -6%;
  right: -9%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 104px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: rotate(-11deg);
  background: var(--dark);
  border: 2px solid var(--gold-bright);
  box-shadow: 0 0 0 4px rgba(28, 27, 25, 0.9), 0 14px 26px -10px rgba(0, 0, 0, 0.7);
  text-align: center;
}

.panuzo-teaser__badge-line1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
}

.panuzo-teaser__badge-line2 {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gold-bright);
  color: var(--dark);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .panuzo-teaser__badge { width: 84px; top: -4%; right: -4%; }
  .panuzo-teaser__badge-line1 { font-size: 0.76rem; }
  .panuzo-teaser__badge-line2 { font-size: 0.5rem; }
}

.panuzo-teaser__ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
  width: 100%;
  max-width: 360px;
}

/* 5 ingrédients sur une grille à 2 colonnes : le dernier occupe la ligne
   entière, centré, plutôt que de laisser une case vide à côté de lui. */
.panuzo-teaser__ingredients li:last-child {
  grid-column: 1 / -1;
  justify-content: center;
}

.panuzo-teaser__ingredients li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.panuzo-teaser__ingredients svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-bright); }

.panuzo-teaser__ingredients span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.25;
}

/* Prix, piloté par initPanuzoStatus() (main.js) : "Aujourd'hui seulement
   — 9,90 €" le lundi, "9,90 € le lundi" le reste de la semaine — jamais
   figé en dur ici. */
.panuzo-teaser__price {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--gold-bright);
}

/* Jour de disponibilité : lueur dorée pulsée très discrète sur le badge
   du plat, seul accent "aujourd'hui" du composant — la règle globale
   prefers-reduced-motion (tout en haut du fichier) neutralise déjà cette
   animation pour les visiteurs qui la refusent. */
.panuzo-teaser.is-panuzo-today .panuzo-teaser__badge {
  animation: panuzoTodayPulse 2.6s ease-in-out infinite;
}

@keyframes panuzoTodayPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(28, 27, 25, 0.9), 0 14px 26px -10px rgba(0, 0, 0, 0.7); }
  50% { box-shadow: 0 0 0 4px rgba(28, 27, 25, 0.9), 0 14px 26px -10px rgba(0, 0, 0, 0.7), 0 0 0 9px rgba(255, 209, 102, 0.28); }
}

/* Double bandeau "twist" — le levier narratif du flyer : Subito propose,
   le client décide. Deux rubans en biais opposés, façon coup de pinceau,
   plutôt que deux cartes identiques. */
.panuzo-teaser__ribbons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.panuzo-teaser__ribbon {
  margin: 0;
  padding: 16px 22px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 2.6vw, 1.2rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

.panuzo-teaser__ribbon--dark {
  transform: rotate(-1deg);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.panuzo-teaser__ribbon--dark strong { color: var(--gold-bright); }

.panuzo-teaser__ribbon--gold {
  transform: rotate(1deg);
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: var(--dark);
}

.panuzo-teaser__ribbon--gold strong { color: var(--green); }

/* Les 3 blocs du flyer : explication → action → conséquence. Traités
   comme une progression (numérotée, reliée par une flèche en desktop),
   pas comme trois cartes interchangeables. */
.panuzo-teaser__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: panuzo-step;
}

@media (min-width: 780px) {
  .panuzo-teaser__steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.panuzo-teaser__step {
  position: relative;
  counter-increment: panuzo-step;
  padding: 22px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}

.panuzo-teaser__step::before {
  content: counter(panuzo-step);
  position: absolute;
  top: 10px;
  left: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.25);
}

@media (min-width: 780px) {
  .panuzo-teaser__step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 50%;
    right: -19px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.25);
    font-size: 1.1rem;
  }
}

.panuzo-teaser__step svg {
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  color: var(--gold-bright);
}

.panuzo-teaser__step h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: #fff;
}

.panuzo-teaser__step p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.panuzo-teaser__step p strong { color: var(--gold-bright); }

.panuzo-teaser__final {
  text-align: center;
  margin-top: 6px;
}

.panuzo-teaser__final-text {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.4vw, 1.55rem);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

.panuzo-teaser__final-text em { display: block; margin-top: 4px; font-style: italic; color: var(--gold-bright); font-size: 0.86em; }

.panuzo-teaser__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

@media (min-width: 560px) {
  .panuzo-teaser__actions { flex-direction: row; justify-content: center; gap: 28px; }
}

/* Bouton "rappel calendrier" — réutilise .btn-outline (défini pour fond
   clair) avec les couleurs du thème sombre du teaser, comme .panuzo-card__cta. */
.panuzo-teaser__remind {
  appearance: none;
  background: none;
  font: inherit;
  cursor: pointer;
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

.panuzo-teaser__remind svg { width: 18px; height: 18px; flex-shrink: 0; }

.panuzo-teaser__remind:hover,
.panuzo-teaser__remind:focus-visible {
  background: var(--gold-bright);
  color: var(--dark);
}

/* ---- Entrée séquencée : chaque élément a son propre délai, calé sur
   .panuzo-teaser.is-visible posée par initScrollReveal (même mécanique
   que la scène #finale). L'ordre suit le funnel du flyer : marque → titre
   → produit → badge rendez-vous → twist → mécanique → CTA. ---- */
.panuzo-teaser__brandrow,
.panuzo-teaser__eyebrow,
.panuzo-teaser__title,
.panuzo-teaser__flag,
.panuzo-teaser__subtitle,
.panuzo-teaser__showcase,
.panuzo-teaser__ribbons,
.panuzo-teaser__steps,
.panuzo-teaser__final {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s cubic-bezier(0.22, 0.75, 0.2, 1), transform 0.75s cubic-bezier(0.22, 0.75, 0.2, 1);
}

.panuzo-teaser__showcase { transform: translateY(26px) scale(0.96); }

/* Le badge "rendez-vous" arrive comme un vrai tampon qu'on abat : léger
   sur-pivot puis retour, plutôt qu'un simple fondu comme le reste. */
.panuzo-teaser__badge {
  opacity: 0;
  transform: rotate(24deg) scale(0.4);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.panuzo-teaser.is-visible .panuzo-teaser__brandrow { transition-delay: 0.05s; }
.panuzo-teaser.is-visible .panuzo-teaser__eyebrow { transition-delay: 0.16s; }
.panuzo-teaser.is-visible .panuzo-teaser__title { transition-delay: 0.28s; }
.panuzo-teaser.is-visible .panuzo-teaser__flag { transition-delay: 0.4s; }
.panuzo-teaser.is-visible .panuzo-teaser__subtitle { transition-delay: 0.5s; }
.panuzo-teaser.is-visible .panuzo-teaser__showcase { transition-delay: 0.38s; }
.panuzo-teaser.is-visible .panuzo-teaser__badge { transition-delay: 0.85s; }
.panuzo-teaser.is-visible .panuzo-teaser__ribbons { transition-delay: 0.62s; }
.panuzo-teaser.is-visible .panuzo-teaser__steps { transition-delay: 0.74s; }
.panuzo-teaser.is-visible .panuzo-teaser__final { transition-delay: 0.86s; }

.panuzo-teaser.is-visible .panuzo-teaser__brandrow,
.panuzo-teaser.is-visible .panuzo-teaser__eyebrow,
.panuzo-teaser.is-visible .panuzo-teaser__title,
.panuzo-teaser.is-visible .panuzo-teaser__flag,
.panuzo-teaser.is-visible .panuzo-teaser__subtitle,
.panuzo-teaser.is-visible .panuzo-teaser__ribbons,
.panuzo-teaser.is-visible .panuzo-teaser__steps,
.panuzo-teaser.is-visible .panuzo-teaser__final {
  opacity: 1;
  transform: translateY(0);
}

.panuzo-teaser.is-visible .panuzo-teaser__showcase {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.panuzo-teaser.is-visible .panuzo-teaser__badge {
  opacity: 1;
  transform: rotate(-11deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .panuzo-teaser__sprig,
  .panuzo-teaser__plate,
  .panuzo-teaser__band-track {
    animation: none;
  }
  .panuzo-teaser__badge { transform: rotate(-11deg) scale(1); }
}

@media (max-width: 480px) {
  .panuzo-teaser { padding: 52px 16px 56px; }
  .panuzo-teaser__ingredients { max-width: 320px; }
  .panuzo-teaser__ingredients li { padding: 9px 10px; }
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
  .site-nav__link { font-size: 0.8rem; padding: 12px 4px; }
  .call-button__number { font-size: 1.25rem; }
  .call-button { flex-direction: column; gap: 8px; padding: 18px; }
}