/* Motion layer for the public site — enabled by body.fx-anim (Admin › Paramètres Site Web).
   Everything here is decoration: if this file or the script fails to load, the pages look
   and work exactly as before. Visitors who ask their system for reduced motion get none. */

@keyframes fxUp      { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@keyframes fxFade    { from { opacity: 0; } }
@keyframes fxZoom    { from { opacity: 0; transform: scale(.94); } }
@keyframes fxGrow    { from { transform: scaleX(0); } }
@keyframes fxKen     { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fxMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes fxShine   { 0%, 60% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(220%) skewX(-20deg); } }
@keyframes fxFloat   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Scroll reveal (classes added by fx-site.js, removed once played). */
.fx-anim .fx-reveal:not(.fx-in) { opacity: 0; }
.fx-anim .fx-reveal.fx-in { animation: fxUp .75s cubic-bezier(.2, .7, .2, 1) both; }
.fx-anim .fx-reveal.fx-in.fx-zoom { animation-name: fxZoom; }
.fx-anim .fx-reveal.fx-in.fx-line { animation: fxGrow .9s cubic-bezier(.2, .7, .2, 1) both; transform-origin: center; }

/* Hero slider: slow zoom on the photo, text rises in on every slide. */
.fx-anim .fx-hero img { animation: fxKen 9s ease-out both; }
.fx-anim .fx-hero h1 { animation: fxUp .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
.fx-anim .fx-hero p  { animation: fxUp .9s .35s cubic-bezier(.2, .7, .2, 1) both; }
.fx-anim .fx-hero a  { animation: fxUp .9s .55s cubic-bezier(.2, .7, .2, 1) both; position: relative; overflow: hidden; }
.fx-anim .fx-hero a::after {
    content: ""; position: absolute; inset: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    animation: fxShine 3.2s 1.4s ease-in-out infinite; pointer-events: none;
}

/* Inner-page headers (À propos, Contact, Menu). */
.fx-anim main > div:first-child h1, .fx-anim main > section:first-child h1 { animation: fxUp .9s .1s cubic-bezier(.2, .7, .2, 1) both; }

/* Desktop navigation: underline that grows on hover. */
.fx-anim nav:not([data-fx-keep]) .md\:flex > a { position: relative; }
.fx-anim nav:not([data-fx-keep]) .md\:flex > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
    background: var(--fx-primary, #eab308); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.fx-anim nav:not([data-fx-keep]) .md\:flex > a:hover::after { transform: scaleX(1); }

/* Cards lift a little more smoothly. */
.fx-anim main .group.rounded-2xl { transition: transform .35s ease, box-shadow .35s ease; }
.fx-anim main a.group.rounded-2xl:hover { transform: translateY(-6px); }

/* ---------------------------------------------------------------- category ribbon */
/* Clips the tilted fast-food band so it can never make a phone scroll sideways. */
.fx-ribbons { overflow: hidden; overflow: clip; position: relative; }
.fx-ribbon { position: relative; overflow: hidden; background: var(--fx-primary, #eab308); color: var(--fx-on-primary, #111); padding: .9rem 0; }
.fx-ribbon + .fx-ribbon { background: var(--fx-footer, #111827); color: #fff; padding: .55rem 0; }
.fx-ribbon__track { display: flex; width: max-content; animation: fxMarquee var(--fx-speed, 30s) linear infinite; }
.fx-ribbon--reverse .fx-ribbon__track { animation-direction: reverse; }
.fx-ribbon:hover .fx-ribbon__track { animation-play-state: paused; }
.fx-ribbon__list { display: flex; align-items: center; flex-shrink: 0; }
.fx-ribbon__item {
    display: inline-flex; align-items: center; gap: 1.25rem; padding: 0 1.25rem; white-space: nowrap;
    font-family: var(--fx-font-serif, inherit); font-weight: 800; font-size: 1.35rem; letter-spacing: .04em;
    text-transform: uppercase; color: inherit; text-decoration: none; transition: opacity .2s;
}
.fx-ribbon__item:hover { opacity: .75; }
.fx-ribbon--reverse .fx-ribbon__item { font-size: .95rem; font-weight: 600; letter-spacing: .18em; }
.fx-ribbon__glyph { font-size: .8em; opacity: .7; color: var(--fx-accent, currentColor); }
.fx-ribbon:not(.fx-ribbon--reverse) .fx-ribbon__glyph { color: inherit; }
.fx-ribbon--reverse .fx-ribbon__glyph { color: var(--fx-primary, #eab308); opacity: 1; }
@media (min-width: 768px) {
    .fx-ribbon__item { font-size: 1.75rem; }
    .fx-ribbon--reverse .fx-ribbon__item { font-size: 1rem; }
}
/* Without animations the ribbon is a simple scrollable strip. */
body:not(.fx-anim) .fx-ribbon__track { animation: none; }
body:not(.fx-anim) .fx-ribbon { overflow-x: auto; }
body:not(.fx-anim) .fx-ribbon__list[aria-hidden="true"] { display: none; }

/* Per-cuisine character. */
.fast_food-theme .fx-ribbon:not(.fx-ribbon--reverse) { transform: rotate(-1.2deg) scale(1.02); margin: .4rem 0 -.2rem; box-shadow: 0 6px 0 rgba(0, 0, 0, .12); z-index: 2; }
.fast_food-theme .fx-ribbon__item { font-style: italic; }
.sushi-theme .fx-ribbon__item, .asian-theme .fx-ribbon__item { font-weight: 600; letter-spacing: .3em; }
.classic-theme .fx-ribbon__item, .fine_dining-theme .fx-ribbon__item { text-transform: none; font-style: italic; font-weight: 600; letter-spacing: .02em; }
.boissons-theme .fx-ribbon:not(.fx-ribbon--reverse) { background: linear-gradient(90deg, var(--fx-primary), var(--fx-accent), var(--fx-primary)); background-size: 200% 100%; animation: fxBubble 8s linear infinite; }
@keyframes fxBubble { to { background-position: 200% 0; } }
.indian-theme .fx-ribbon:not(.fx-ribbon--reverse) { border-top: 3px dotted var(--fx-accent); border-bottom: 3px dotted var(--fx-accent); }
.thai-theme .fx-ribbon:not(.fx-ribbon--reverse) .fx-ribbon__glyph { animation: fxFloat 2.4s ease-in-out infinite; display: inline-block; }

/* ---------------------------------------------------------------- logo
   Size and position always apply; motion only with animations on. */
.fx-logo { transition: transform .35s ease; transform-origin: center; }
.fx-logo .fx-logo__img { transition: height .3s ease, transform .35s ease; }
.fx-logo--sm .fx-logo__img { height: 2rem; }
.fx-logo--md .fx-logo__img { height: 2.5rem; }
.fx-logo--lg .fx-logo__img { height: 3.25rem; }
.fx-logo--xl .fx-logo__img { height: 4rem; }
.fx-logo--sm { font-size: 1.4rem; }
.fx-logo--lg { font-size: 2.1rem; }
.fx-logo--xl { font-size: 2.4rem; }
/* Shrinks once the page scrolls, giving the screen back to the menu. */
.fx-scrolled .fx-logo--shrink .fx-logo__img { height: 2.1rem; }
@media (min-width: 768px) { .fx-scrolled .fx-logo--shrink { font-size: 1.5rem; } }
@media (max-width: 767px) {
    .fx-logo--lg .fx-logo__img { height: 2.75rem; }
    .fx-logo--xl .fx-logo__img { height: 3.25rem; }
    .fx-logo { font-size: clamp(1.05rem, 5.4vw, 1.5rem) !important; max-width: 78vw; }
    .fx-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* "Left" position: drop the spacer that centres the logo on phones. */
    .fx-logo-spacer-off { display: none !important; }
}

@keyframes fxLogoFade   { from { opacity: 0; } }
@keyframes fxLogoZoom   { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } }
@keyframes fxLogoBounce { 0% { opacity: 0; transform: translateY(-40px); } 55% { transform: translateY(6px); } 75% { transform: translateY(-3px); } }
@keyframes fxLogoSlide  { from { opacity: 0; transform: translateX(-30px); } }
@keyframes fxLogoFlip   { from { opacity: 0; transform: perspective(400px) rotateY(90deg); } }
@keyframes fxLogoFloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes fxLogoPulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes fxLogoSwing  { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes fxLogoGlow   { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 10px var(--fx-primary, #eab308)); } }

.fx-anim .fx-logo-intro--fade   { animation: fxLogoFade .8s ease both; }
.fx-anim .fx-logo-intro--zoom   { animation: fxLogoZoom .8s cubic-bezier(.2, .8, .2, 1.2) both; }
.fx-anim .fx-logo-intro--bounce { animation: fxLogoBounce .9s cubic-bezier(.3, .7, .3, 1) both; }
.fx-anim .fx-logo-intro--slide  { animation: fxLogoSlide .7s ease-out both; }
.fx-anim .fx-logo-intro--flip   { animation: fxLogoFlip .8s ease-out both; }
/* The loop runs on the image (or the name when there is no image), after the entrance. */
.fx-anim .fx-logo-loop--float .fx-logo__img  { animation: fxLogoFloat 3s 1s ease-in-out infinite; }
.fx-anim .fx-logo-loop--pulse .fx-logo__img  { animation: fxLogoPulse 2.4s 1s ease-in-out infinite; }
.fx-anim .fx-logo-loop--swing .fx-logo__img  { animation: fxLogoSwing 3s 1s ease-in-out infinite; transform-origin: top center; }
.fx-anim .fx-logo-loop--glow .fx-logo__img   { animation: fxLogoGlow 2.8s 1s ease-in-out infinite; }
.fx-anim .fx-logo-loop--float:not(:has(.fx-logo__img)) span { display: inline-block; animation: fxLogoFloat 3s 1s ease-in-out infinite; }
.fx-anim .fx-logo-loop--pulse:not(:has(.fx-logo__img)) span { display: inline-block; animation: fxLogoPulse 2.4s 1s ease-in-out infinite; }
.fx-anim .fx-logo-loop--swing:not(:has(.fx-logo__img)) span { display: inline-block; animation: fxLogoSwing 3s 1s ease-in-out infinite; }
.fx-anim .fx-logo-loop--glow:not(:has(.fx-logo__img)) span { animation: fxLogoGlow 2.8s 1s ease-in-out infinite; }
/* Shine: a light sweep across logo and name. */
.fx-anim .fx-logo-loop--shine { position: relative; overflow: hidden; }
.fx-anim .fx-logo-loop--shine::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: fxShine 4s 1.2s ease-in-out infinite;
}
.fx-anim .fx-logo:hover .fx-logo__img { transform: rotate(-4deg) scale(1.06); }

/* ---------------------------------------------------------------- Google reviews */
.fx-greviews { background: var(--fx-bg, #f9fafb); }
.fx-greviews__box { background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .06); }
.fx-greviews__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.fx-greviews__score { display: flex; align-items: center; gap: .75rem; }
.fx-greviews__big { font-size: 3rem; font-weight: 800; line-height: 1; color: #1f1f1f; }
.fx-stars { --r: 5; display: inline-block; font-size: 1.25rem; line-height: 1; letter-spacing: 2px;
    background: linear-gradient(90deg, #fbbc04 calc(var(--r) / 5 * 100%), #dadce0 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-stars::before { content: "★★★★★"; }
.fx-stars--sm { font-size: 1rem; display: block; }
.fx-greviews__row { display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: 1rem; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: .75rem; margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; scroll-padding: 1.5rem; -webkit-overflow-scrolling: touch; }
.fx-greviews__card { scroll-snap-align: start; display: flex; flex-direction: column; background: #fafafa; border: 1px solid rgba(0, 0, 0, .06); border-radius: 1rem; padding: 1.1rem; min-height: 14rem; }
.fx-greviews__text { margin-top: .5rem; color: #374151; font-size: .925rem; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.fx-greviews__foot { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(0, 0, 0, .06); }
.fx-greviews__btn { display: inline-flex; justify-content: center; align-items: center; padding: .75rem 1.25rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
    background: var(--fx-primary, #eab308); color: var(--fx-on-primary, #111); white-space: nowrap; }
.fx-greviews__btn--ghost { background: transparent; color: #1f2937; border: 1px solid #d1d5db; }
.fx-gattr { font-family: Roboto, Arial, sans-serif; font-weight: 400; color: #5e5e5e; white-space: nowrap; margin-left: .25rem; }
@media (min-width: 768px) {
    .fx-greviews__box { padding: 2.25rem; }
    .fx-greviews__row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; }
    .fx-greviews__foot { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1280px) { .fx-greviews__row { grid-template-columns: repeat(5, 1fr); } }
.fine_dining-theme .fx-greviews__box { background: #14161c; border-color: #2a2e38; }
.fine_dining-theme .fx-greviews__card { background: #1a1d24; border-color: #2a2e38; }
.fine_dining-theme .fx-greviews__big, .fine_dining-theme .fx-greviews__text { color: #e5e7eb; }

/* ---------------------------------------------------------------- phone fixes
   (loaded whatever the theme/animation switches, because they fix layout, not style) */
@media (max-width: 767px) {
    /* Slider arrows sat on top of the subtitle; on a phone you swipe instead. */
    .fx-hero-arrow { display: none !important; }
    /* Inner-page headers (Contact, À propos) had a fixed height with centred text: on a
       phone the title ran up under the logo. Let them grow and start below the header. */
    main > div.relative:first-child:not(.fx-hero) { height: auto !important; min-height: 38vh; padding: 6.5rem 0 2.75rem; }
    main > div.relative:first-child:not(.fx-hero) h1 { font-size: 2.6rem; line-height: 1.08; overflow-wrap: anywhere; }
    main > div.relative:first-child:not(.fx-hero) p { font-size: 1.05rem; }
    /* The empty hours column left a large hole in the footer. */
    footer .grid.gap-12 { gap: 2rem; }
}
/* Suggestion box: the input refused to shrink, pushing "Envoyer" off the screen. */
.fx-suggest-form input { min-width: 0; padding-left: 1rem; padding-right: .5rem; }
.fx-suggest-form button { flex-shrink: 0; padding-left: 1.25rem; padding-right: 1.25rem; }
/* Default suggestion band follows the theme instead of fixed yellow. */
.fx-tint .fx-cta-default { background-color: var(--fx-soft) !important; }

/* The device asks for less motion (Windows "Animation effects" off, iOS/Android
   "Reduce motion"). Respected unless the restaurant chose to keep the animations
   (body.fx-anim-force, admin setting website_animations_force). */
@media (prefers-reduced-motion: reduce) {
    body:not(.fx-anim-force).fx-anim *, body:not(.fx-anim-force).fx-anim *::before, body:not(.fx-anim-force).fx-anim *::after { animation: none !important; transition: none !important; }
    /* Without motion the ribbon becomes a strip you can scroll by hand — without the
       grey scrollbars Windows draws under it. */
    body:not(.fx-anim-force) .fx-ribbon { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    body:not(.fx-anim-force) .fx-ribbon::-webkit-scrollbar { display: none; }
    body:not(.fx-anim-force) .fx-ribbon__list[aria-hidden="true"] { display: none; }
    body:not(.fx-anim-force).fx-anim .fx-reveal { opacity: 1 !important; }
}

/* Mobile bottom bar: colours only. The bar stays out of the general theme layer
   (data-fx-keep) so its layout is never touched; this swaps the fixed yellow for the
   theme colour — active tab, tab hover and the round basket button. */
.fx-colors .fx-nav-tint .text-yellow-500,
.fx-colors .fx-nav-tint .hover\:text-yellow-500:hover { color: var(--fx-primary); }
.fx-colors .fx-nav-tint .bg-yellow-400 { background-color: var(--fx-primary); }
.fx-colors .fx-nav-tint .bg-yellow-400 > svg { color: var(--fx-on-primary); }