/* Chez Ali – scènes animées : fête 3D, icônes des valeurs, food truck, téléphone. */

/* ---------- Scène de fête 3D (section traiteur) ---------- */
.events__visual { aspect-ratio: auto; }
.feast {
  --tx: 60deg; --mx: 0deg; --my: 0deg;
  position: relative; aspect-ratio: 1 / .96; overflow: hidden; border-radius: 28px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 50% at 50% 45%, rgba(212, 162, 70, .38), transparent 70%),
    linear-gradient(#0c3a24, #062b19 55%, #062b19);
  box-shadow: 0 50px 90px -40px #000, inset 0 0 80px rgba(0, 0, 0, .5);
}
.feast__garland { position: absolute; inset: 0 0 auto; width: 100%; height: 20%; z-index: 4; }
.bulb { animation: bulb 1.8s ease-in-out infinite alternate; animation-delay: var(--b); }
@keyframes bulb { from { opacity: .35; } to { opacity: 1; } }
.feast__lantern { z-index: 3; }
.feast__lantern svg { filter: drop-shadow(0 0 14px rgba(212, 162, 70, .6)); }
.feast__guests {
  position: absolute; left: 0; width: 100%; height: auto; color: #04200f;
  filter: drop-shadow(0 0 1.5px rgba(212, 162, 70, .55)) drop-shadow(0 0 14px rgba(212, 162, 70, .18));
}
.feast__guests--back { top: 19%; z-index: 1; }
.feast__guests--front { bottom: 0; z-index: 5; color: #021209; }
.guest { transform-box: fill-box; transform-origin: 50% 100%; animation: guest 5s ease-in-out infinite alternate; animation-delay: var(--g); }
@keyframes guest { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg) translateY(-1.5px); } }
.toast { transform-origin: 74px 80px; animation: toast 4s ease-in-out infinite; }
@keyframes toast { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-20deg); } 75% { transform: rotate(6deg); } 85% { transform: rotate(0); } }

.feast__stage { position: absolute; inset: 0; z-index: 2; perspective: 900px; perspective-origin: 50% 10%; }
.feast__table {
  position: absolute; left: 9%; width: 82%; top: 40%; height: 50%;
  transform-style: preserve-3d; transform-origin: 50% 30%;
  transform: rotateX(calc(var(--tx) + var(--my))) rotateZ(var(--mx));
  transition: transform .8s var(--ease);
}
.feast__spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: table-sway 10s ease-in-out infinite alternate; }
@keyframes table-sway { from { transform: rotateZ(-5deg); } to { transform: rotateZ(5deg); } }
.feast__cloth {
  position: absolute; inset: 0; border-radius: 26px;
  background: radial-gradient(ellipse at 50% 50%, rgba(212, 162, 70, .3), transparent 70%), var(--zellige), #6b2716;
  background-size: auto, 34px, auto;
  box-shadow: inset 0 0 0 7px rgba(191, 141, 48, .6), inset 0 0 0 11px #6b2716, inset 0 0 0 12px rgba(191, 141, 48, .7), inset 0 0 60px rgba(0, 0, 0, .45);
}
.feast__edge {
  position: absolute; left: 1.5%; right: 1.5%; bottom: 0; height: 26px;
  transform-origin: 50% 100%; transform: rotateX(-90deg);
  background: linear-gradient(#7a2e18, #2c0f07); border-radius: 0 0 14px 14px;
}
.feast__spot { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1; transform: translate(-50%, -50%); transform-style: preserve-3d; }
.feast__shadow { position: absolute; inset: 22% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); }
.feast__dish {
  position: absolute; left: 0; right: 0; bottom: 50%;
  transform-origin: 50% 100%; transform: rotateX(calc(-1 * (var(--tx) + var(--my))));
  transform-style: preserve-3d; transition: transform .8s var(--ease);
}
.feast__dish svg {
  width: 100%; height: auto; aspect-ratio: 260 / 220; transform-origin: 50% 95%;
  animation: dish-bob 4.2s ease-in-out infinite; animation-delay: var(--d, 0s);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.feast__spot--glass .feast__dish svg { aspect-ratio: 20 / 30; animation-duration: 3s; }
@keyframes dish-bob { 0%, 100% { transform: translateY(0) rotateY(-16deg); } 50% { transform: translateY(-8%) rotateY(16deg); } }
.feast__spot--pass { animation: pass 9s ease-in-out infinite; }
@keyframes pass { 0%, 100% { transform: translate(-50%, -50%) translateX(-130%); } 45%, 55% { transform: translate(-50%, -50%) translateX(130%); } }
.feast__confetti { position: absolute; inset: 0; z-index: 4; pointer-events: none; container-type: size; }
.feast__confetti i { position: absolute; top: -6%; width: 7px; height: 11px; border-radius: 2px; opacity: .85; animation: confetti linear infinite; }
@keyframes confetti { to { transform: translate3d(var(--dx), 115cqh, 0) rotate(720deg); } }

/* ---------- Icônes des valeurs ---------- */
.value .value__icon { width: 64px; height: 64px; animation: none; color: var(--gold); filter: drop-shadow(0 0 12px rgba(191, 141, 48, .3)); }
.value:hover .value__icon { color: var(--gold-2); }
.v-steam path { opacity: 0; animation: v-steam 2.6s ease-in-out infinite; }
.v-steam path:nth-child(2) { animation-delay: 1.3s; }
@keyframes v-steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-6px); } }
.v-spoon { transform-origin: 37px 30px; animation: stir 1.6s ease-in-out infinite alternate; }
@keyframes stir { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
.v-flame { transform-origin: 32px 63px; animation: flame .45s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scaleY(.8); } to { transform: scaleY(1.12); } }
.v-star { transform-origin: 32px 37px; animation: spin 9s linear infinite; }
.v-hand { animation: dip 2.4s ease-in-out infinite; }
.v-hand--2 { animation-delay: .8s; }
.v-hand--3 { animation-delay: 1.6s; }
@keyframes dip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.v-waves { animation: waves-x 2.6s linear infinite; }
@keyframes waves-x { to { transform: translateX(-28px); } }
.v-pine { transform-origin: 14.5px 50px; animation: pine 3.6s ease-in-out infinite alternate; }
.v-pine--2 { transform-origin: 33px 48px; animation-delay: -1.8s; }
@keyframes pine { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.v-sun { animation: sun 4s ease-in-out infinite alternate; }
@keyframes sun { from { opacity: .6; transform: translateY(2px); } to { opacity: 1; transform: translateY(-1px); } }

/* ---------- Food truck du marché ---------- */
.market__scene { max-width: 760px; margin: -8px auto 40px; }
.market__scene svg { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.bunting polygon { transform-box: fill-box; transform-origin: 50% 0; animation: flag 2.6s ease-in-out infinite alternate; animation-delay: var(--f); }
@keyframes flag { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.truck { animation: idle 2.8s ease-in-out infinite; }
@keyframes idle { 50% { transform: translateY(-1.5px); } }
.truck__glow { animation: flicker 2.4s ease-in-out infinite; }
.truck__awning { transform-box: fill-box; transform-origin: 50% 0; animation: awning-flap 3.4s ease-in-out infinite alternate; }
@keyframes awning-flap { from { transform: scaleY(1); } to { transform: scaleY(1.1); } }

/* ---------- Encart « 24 h à l'avance » ---------- */
.ticket .notice-24 {
  display: flex; align-items: center; gap: 14px; margin: -6px 0 24px; padding: 10px 18px 10px 8px;
  border: 1px dashed rgba(191, 141, 48, .5); border-radius: 18px; background: rgba(6, 43, 25, .5);
  font-size: 15px; line-height: 1.45;
}
.notice-24 img { flex: none; width: 56px; height: 56px; filter: drop-shadow(0 0 10px rgba(191, 141, 48, .35)); }
.notice-24 strong { color: var(--gold-2); font-weight: 700; }

/* ---------- Encart carte « Place du Foirail » (même cadre que l'encart 24 h) ---------- */
.ticket .notice-map { margin: -6px 0 24px; padding: 8px; border: 1px dashed rgba(191, 141, 48, .5); border-radius: 18px; background: rgba(6, 43, 25, .5); }
.notice-map__frame { position: relative; height: 170px; overflow: hidden; border-radius: 12px; background: #141c3f; }
.notice-map__frame iframe {
  position: absolute; top: -80px; left: -60px; width: calc(100% + 120px); height: calc(100% + 160px); border: 0; pointer-events: none;
  filter: invert(1) hue-rotate(185deg) brightness(.8) contrast(.95) saturate(.55) sepia(.2);
}
.notice-map__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 30px rgba(6, 43, 25, .9); }
.notice-map__pin { position: absolute; left: 50%; top: 50%; z-index: 2; width: 30px; translate: -50% -100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
.notice-map__pin svg { display: block; width: 100%; animation: pin-bob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.notice-map__pin i { position: absolute; left: 50%; bottom: -6px; width: 34px; height: 12px; margin-left: -17px; border-radius: 50%; border: 2px solid var(--gold-2); animation: pin-ring 2.4s ease-out infinite; }
@keyframes pin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pin-ring { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.notice-map__credit { position: absolute; right: 6px; bottom: 4px; z-index: 4; font-size: 9px; color: rgba(245, 236, 221, .55); text-decoration: none; }
.notice-map__hit { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.notice-map__hit:focus-visible { outline-offset: -3px; }
.ticket .notice-map__text { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 8px 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.notice-map__text strong { display: block; font-size: 15px; color: var(--gold-2); }
.notice-map__text a { flex: none; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); text-decoration: none; border-bottom: 1px solid rgba(227, 189, 111, .4); padding-bottom: 3px; }
.notice-map__text a:hover { border-color: var(--gold-2); }

/* ---------- Téléphone animé et bouton Appeler ---------- */
.ring { width: 17px; height: 17px; flex: none; transform-origin: 50% 50%; animation: ring 2.6s ease-in-out infinite; }
@keyframes ring {
  0%, 36%, 100% { transform: rotate(0); }
  4% { transform: rotate(-18deg); } 8% { transform: rotate(16deg); } 12% { transform: rotate(-14deg); }
  16% { transform: rotate(12deg); } 20% { transform: rotate(-8deg); } 24% { transform: rotate(6deg); } 28% { transform: rotate(0); }
}
.phone__waves path { opacity: 0; animation: phone-waves 2.6s ease-out infinite; }
.phone__waves path:nth-child(2) { animation-delay: .15s; }
@keyframes phone-waves { 0%, 32%, 100% { opacity: 0; } 6%, 26% { opacity: 1; } }
.btn--call { animation: call-pulse 2.6s ease-out infinite; }
.btn--gold.btn--call { animation-name: call-pulse-gold; }
@keyframes call-pulse { 0% { box-shadow: 0 0 0 0 rgba(227, 189, 111, .5); } 60%, 100% { box-shadow: 0 0 0 14px rgba(227, 189, 111, 0); } }
@keyframes call-pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(227, 189, 111, .6), 0 10px 30px -12px rgba(191, 141, 48, .8); }
  60%, 100% { box-shadow: 0 0 0 16px rgba(227, 189, 111, 0), 0 10px 30px -12px rgba(191, 141, 48, .8); }
}
.tel { display: inline-flex; align-items: center; gap: 8px; }
.tel .ring { color: var(--gold); }
.call-fab {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 15px 22px 15px 18px; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, var(--gold-3)); color: var(--night);
  font: 800 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8);
  transform: translateY(160%); opacity: 0; transition: transform .6s var(--ease), opacity .4s;
}
.call-fab.is-visible { transform: none; opacity: 1; }
.call-fab .ring { width: 22px; height: 22px; }
.call-fab::before, .call-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--gold-2);
  pointer-events: none; animation: fab-wave 2.6s ease-out infinite;
}
.call-fab::after { animation-delay: 1.3s; }
@keyframes fab-wave { from { transform: scale(1); opacity: .8; } to { transform: scale(1.25, 1.7); opacity: 0; } }
.call-fab:hover { filter: brightness(1.08); }
.menu-open .call-fab { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .call-fab { padding: 16px; }
  .call-fab__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .feast__confetti { display: none; }
}

/* ---------- Bouton musique (en bas à droite, au-dessus du bouton Appeler) ---------- */
.musique {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 66px); z-index: 42;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: rgba(4, 33, 19, .82); color: var(--gold-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8); transition: border-color .3s, transform .3s var(--ease);
}
.musique:hover { border-color: var(--gold); transform: scale(1.06); }
.musique__barres { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.musique__barres i { width: 3px; height: 100%; border-radius: 2px; background: linear-gradient(var(--gold-2), var(--gold)); transform-origin: bottom; animation: barre .9s ease-in-out infinite alternate; }
.musique__barres i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.musique__barres i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }
.musique__barres i:nth-child(4) { animation-delay: -.15s; animation-duration: .8s; }
@keyframes barre { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.musique__note { width: 22px; height: 22px; }
.musique.is-joue .musique__barres { display: flex; }
.musique.is-joue .musique__note { display: none; }
.menu-open .musique { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .musique { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 66px); width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .musique__barres i { animation: none; transform: scaleY(.7); } }

/* ---------- Avis Google (avis réels de la fiche Google, relevés le 04/11/2026) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avis__tete { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.avis__note { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; color: var(--cream); font-size: 14px; }
.avis__note strong { font: 600 30px/1 var(--serif); color: var(--gold-2); }
.avis__note-etoiles, .avis__etoiles { color: var(--gold); letter-spacing: .12em; }
.avis__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 24px); margin-bottom: 44px; }
.avis__carte {
  position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 28px 26px 24px;
  border: 1px solid var(--faint); border-radius: 22px; background: rgba(9, 64, 38, .55);
  transition: border-color .4s, transform .5s var(--ease);
}
.avis__carte:hover { border-color: var(--line); transform: translateY(-4px); }
.avis__carte::before { content: "“"; position: absolute; top: -6px; right: 22px; font: 400 96px/1 var(--serif); color: var(--gold); opacity: .25; }
.avis__carte blockquote { margin: 0; }
.avis__carte blockquote p { margin: 0; font: italic 400 clamp(19px, 1.7vw, 22px)/1.4 var(--serif); color: var(--cream); }
.avis__carte figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding-top: 14px; border-top: 1px dashed rgba(191, 141, 48, .25); }
.avis__carte figcaption strong { font: 700 13px/1 var(--sans); letter-spacing: .1em; color: var(--gold-2); }
.avis__carte figcaption span { font-size: 12.5px; color: var(--muted); }
.avis__carte.reveal { transition: opacity 1s var(--ease) var(--delay, 0s), transform .6s var(--ease), border-color .4s; }