:root{
  --red:#e73338;
  --blue:#2aa3e1;
  --logo-blue:#2196d9;
  --pink:#d786cc;
  --ink:#1b1b1b;
  --bg:#fffdfc;
  --muted:#6b7280;
  --carousel-h: 420px;
  --carousel-h-sm: 260px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Site-wide fairground theme background (darker) */
body{
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    url('images/bg-stars.svg') repeat,
    repeating-conic-gradient(from -12deg at 0% 18%, #e9bfa3 0 22deg, #d786cc 22deg 44deg);
  background-attachment: fixed, fixed, fixed;
  color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;line-height:1.5
}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.narrow{max-width:850px}

.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:50}
.header-inner{display:flex;align-items:center;gap:20px;padding:12px 0}
.logo{height:clamp(52px, 6.5vw, 76px);width:auto}
@media (max-width:900px){.logo{height:52px}}
.nav{margin-left:auto;display:flex;gap:20px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:600}
.nav a:hover{color:#d786cc}
.nav a:focus,.nav a:active,.nav a:focus-visible{color:#d786cc;outline:none}
.btn-cta{padding:8px 14px;border:2px solid #d786cc;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:700}
/* Header CTA hover: fill pink like the form button */
.btn-cta:hover{background:#d786cc;color:#fff;border-color:#d786cc}
/* Force CTA text white on hover */
.nav a.btn-cta:hover{color:#fff !important;background:#d786cc;border-color:#d786cc}
.nav-toggle{display:none;margin-left:8px;font-size:22px;background:transparent;border:0}

.hero{position:relative;padding:110px 0;text-align:center;
  background-image:linear-gradient(135deg, rgba(231,51,56,.06), rgba(42,163,225,.08)), url('images/hero.jpg');
  background-size:cover;background-position:center 38%}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.hero .hero-inner{position:relative;z-index:1}
/* Hero title adjusted: slightly smaller, blue */
.hero h1{
  font-family: 'Pacifico','Lobster',cursive;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .2px;
  color: var(--logo-blue);
  font-size: clamp(36px, 6vw, 86px);
  -webkit-text-stroke: 8px #ffffff;
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff,
    1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff,
    0 0 12px rgba(255,255,255,.85);
}
@media (max-width:700px){
  .hero h1{-webkit-text-stroke:6px #ffffff;font-size:clamp(28px, 8vw, 58px)}
}
.hero .sub{color:#f3f4f6;margin:0 0 22px;font-size:clamp(14px,2.2vw,18px)}
.btn-primary{display:inline-block;background:transparent;color:var(--ink);text-decoration:none;padding:12px 18px;border-radius:999px;font-weight:800;border:2px solid #d786cc;cursor:pointer}
/* Hero CTA filled pink */
.hero .btn-primary{background:#d786cc;color:#fff;border-color:#d786cc}
.hero .btn-primary:hover{filter:brightness(.95)}

.section{padding:56px 0}
.section.alt{background:#fff}
.section h2{font-size: clamp(24px, 3.6vw, 34px);margin:0 0 18px}
/* Script font for section titles (non-italic), keep current size */
#produits h2, #stands h2, #histoire h2, #contact h2{
  font-family: 'Pacifico','Lobster',cursive;
  font-style: normal;
  font-weight: 400;
  color: var(--logo-blue);
  letter-spacing: .2px;
}

/* Goodies grid */
.goodies{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:22px}
.goodie{position:relative;overflow:hidden;border-radius:22px;border:2px solid #eee;aspect-ratio:1/1;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.goodie img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease,filter .3s ease;filter:brightness(1.06) contrast(1.02)}
.goodie::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,.02))}
.goodie figcaption{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:900;font-size:clamp(22px,3.2vw,30px);letter-spacing:.4px;text-shadow:0 2px 6px rgba(0,0,0,.7);text-align:center;pointer-events:none}
.goodie:hover::after{background:linear-gradient(to top, rgba(0,0,0,.10), rgba(0,0,0,.02))}
.goodie:hover img{transform:scale(1.08);filter:brightness(1.10) contrast(1.03)}

/* Stands */
.stand{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center;margin:28px 0 42px;padding:18px;border:1px solid #eee;border-radius:18px;background:#fff}
.stand:nth-child(even){grid-template-columns:1fr 1fr}
.stand-text h3{margin:0 0 10px;font-size:clamp(20px,3vw,26px)}

/* Unified carousel sizing */
.carousel{position:relative;overflow:hidden;border-radius:14px;border:1px solid #eee;height:var(--carousel-h)}
.carousel .track{display:flex;transition:transform .35s ease;will-change:transform;height:100%}
.carousel .track img{min-width:100%;flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block}
.carousel button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);border:1px solid #ddd;border-radius:999px;width:36px;height:36px;cursor:pointer;font-size:22px;line-height:1}
.carousel .prev{left:8px}
.carousel .next{right:8px}
@media (max-width: 700px){
  .carousel{height:var(--carousel-h-sm)}
}

/* History layout */
#histoire .story{display:flex;flex-direction:column;gap:16px}
#histoire p{line-height:1.7}
.history-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}
.history-photo{margin:0;justify-self:end;margin-right:-10px}
.history-photo img{width:100%;height:auto;border-radius:18px;border:2px solid #eee;box-shadow:0 10px 24px rgba(0,0,0,.10);display:block}
@media (max-width: 900px){
  .history-grid{grid-template-columns:1fr;gap:18px}
  .history-photo{margin-right:0}
  .history-photo img{border-radius:16px}
}

.cta{background:linear-gradient(135deg, rgba(42,163,225,.08), rgba(231,51,56,.06));padding:56px 0}
/* Contact without form: single column */
#contact .contact-left{max-width:760px;padding-left:24px}
@media (max-width:900px){
  #contact .contact-left{padding-left:0;max-width:100%}
}

.contact-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.contact-list li{display:flex;align-items:center;gap:12px}
.contact-list a{color:var(--ink);text-decoration:none;font-weight:600}
.contact-list a:hover{color:#d786cc}
.ico{width:36px;height:36px;border:1px solid #eee;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#fff}
.ico svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.8}
.ico.at svg path{stroke-linecap:round;stroke-linejoin:round}
.ico.phone svg path{fill:var(--ink);stroke:none}
/* Pink hover accents for contact items */
.contact-list li:hover .ico{border-color:#d786cc}
.contact-list li:hover .ico svg{stroke:#d786cc}

.socials-row{display:flex;gap:14px;align-items:center;margin-top:4px}
.social-round{width:44px;height:44px;border-radius:999px;border:1px solid #eee;display:inline-flex;align-items:center;justify-content:center;background:#fff;transition:transform .15s ease}
.social-round:hover{transform:translateY(-2px)}
.social-round svg{width:26px;height:26px}
.social-round.fb svg circle{fill:#1877F2}

.site-footer{border-top:1px solid #eee;padding:16px 0;color:#6b7280;font-size:14px}

@media (max-width: 900px){
  .stand, .cta-inner{grid-template-columns:1fr}
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:24px;position:absolute;right:16px;top:64px;padding:16px 18px;background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
  .nav-toggle{display:block;margin-left:auto}
}


/* Align "Histoire" section with Contact (same left offset) */
#histoire .narrow{max-width:1100px;padding-left:24px}
@media (max-width:900px){
  #histoire .narrow{padding-left:0}
}


/* Align Contact left margin with History and unify title size */
#contact .container{max-width:1100px}
#contact .contact-left{padding-left:24px}
#contact h2{font-size:clamp(24px, 3.6vw, 34px)}
@media (max-width:900px){
  #contact .contact-left{padding-left:0}
}


/* Colorful fairground-style background for Nos stands */
#stands.section.alt{
  background:
    linear-gradient(135deg, rgba(42,163,225,.08), rgba(231,51,56,.06));
}


#contact .contact-desc{
  font-family: inherit;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 12px;
  max-width: 60ch;
}


/* Unify lead & description styles in Contact */
#contact .lead, 
#contact .contact-desc{
  font-family: inherit;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 6px 0 18px;
  max-width: 60ch;
}


/* Bigger subline under the hero title */
.hero-sub{
  font-size: clamp(18px, 2.7vw, 28px);
}


/* Ensure both email and phone badges turn pink on hover/focus */
#contact .contact-list a .icon,
#contact .contact-list a .contact-icon{
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#contact .contact-list a:hover .icon,
#contact .contact-list a:focus .icon,
#contact .contact-list a:hover .contact-icon,
#contact .contact-list a:focus .contact-icon{
  background: #d786cc;
  color: #fff;
  border-color: #d786cc;
  box-shadow: 0 0 0 6px rgba(233, 64, 159, .12);
}
/* If icons are SVGs, force the glyph to white on hover */
#contact .contact-list a:hover .icon svg,
#contact .contact-list a:hover .icon svg *,
#contact .contact-list a:focus .icon svg,
#contact .contact-list a:focus .icon svg *,
#contact .contact-list a:hover .contact-icon svg,
#contact .contact-list a:hover .contact-icon svg *,
#contact .contact-list a:focus .contact-icon svg,
#contact .contact-list a:focus .contact-icon svg *{
  fill: #fff !important;
  stroke: #fff !important;
}


/* ===== Anchor offset so section titles are not hidden under the sticky header ===== */
:root{ --anchor-offset: clamp(88px, 12vw, 128px); }
/* Apply to all in‑page section targets */
section[id], .section[id]{ scroll-margin-top: var(--anchor-offset); }
@media (max-width: 900px){
  :root{ --anchor-offset: clamp(72px, 13vw, 108px); }
}


/* Language switch */
.lang-switch{ display:flex; gap:.5rem; align-items:center; margin-left:12px; }
.lang-btn{ padding:.25rem .6rem; border:1px solid #d786cc; border-radius:999px; background:#fff; font-weight:600; line-height:1; }
.lang-btn.active{ background: rgba(233,64,159,.12); }
@media (max-width: 900px){
  .lang-switch{ margin-left:auto; }
}


/* Ensure all stands stack consistently on tablets & mobile */
@media (max-width: 1024px){
  .stand{ grid-template-columns: 1fr !important; }
  .stand .carousel{ width: 100%; }
  .stand .stand-text{ margin-bottom: 10px; }
}
@media (max-width: 700px){
  .stand{ gap: 14px; }
  .stand .carousel{ height: var(--carousel-h-sm); }
}

/* Better horizontal spacing for Story section */
#histoire .narrow {
  padding-left: 32px;
  padding-right: 32px;
}
@media (max-width: 900px){
  #histoire .narrow {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* MOBILE HEADER LAYOUT FIX: place language buttons right next to burger (right side) */
@media (max-width: 900px){
  .header-inner{ align-items: center; gap: 8px; }
  .nav{ margin-left: 0 !important; } /* prevent pushing items */
  .site-header .lang-switch{
    display:flex !important;
    align-items:center;
    margin-left: auto !important; /* push to the right */
    margin-right: 2px;            /* tiny gap before burger */
    gap: 4px;
  }
  .nav-toggle{ margin-left: 0; }
}

/* === Lightbox for carousel images === */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.82); display:none; align-items:center; justify-content:center; z-index:9999; padding:24px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width: 92vw; max-height: 90vh; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.45); }
.lightbox .lb-close,
.lightbox .lb-prev,
.lightbox .lb-next{
  position:absolute; background:#ffffff; border:0; width:42px; height:42px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.lightbox .lb-close{ top:16px; right:16px; }
.lightbox .lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lightbox .lb-next{ right:18px; top:50%; transform:translateY(-50%); }
@media (max-width:700px){
  .lightbox .lb-prev, .lightbox .lb-next{ width:38px; height:38px; font-size:22px; }
  .lightbox{ padding:12px; }
}
body.lb-lock{ overflow:hidden; }



/* === Scroll reveal animations === */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.reveal--visible{ opacity:1; transform: none; }
.reveal[data-reveal="left"]{ transform: translateX(-16px); }
.reveal[data-reveal="right"]{ transform: translateX(16px); }
.reveal[data-reveal="zoom"]{ transform: scale(.98); }
.reveal--visible[data-reveal="zoom"]{ transform: none; }

/* Stagger support via CSS variable */
.reveal{ transition-delay: var(--reveal-delay, 0ms); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition: none !important; }
}



/* Recenter hero CTA and content */
.hero .hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero .hero-inner .btn-primary_static{
  margin:20px auto 0;
}



/* === Legal link footer layout & i18n visibility === */
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
.footer-links{margin:0;white-space:nowrap}
.footer-links .legal-link{margin-left:16px;text-decoration:underline}
html[lang="fr"] .legal-link-nl{display:none}
html[lang="nl"] .legal-link-fr{display:none}

/* Show only the legal link for current language */
html[lang="fr"] .legal-link-nl, html[lang="fr"] .legal-link-de {display:none}
html[lang="nl"] .legal-link-fr, html[lang="nl"] .legal-link-de {display:none}
html[lang="de"] .legal-link-fr, html[lang="de"] .legal-link-nl {display:none}


/* === Active nav link (section in view) === */
.nav a{transition:color .2s ease}
.nav a.active{color:#d786cc} /* mauve */
.nav a.active span{color:inherit}
.nav a.active::after{content:"";display:block;height:2px;background:#d786cc;border-radius:1px;margin-top:4px}


/* === Language dropdown === */
.lang-switch{position:relative;display:flex;align-items:center;gap:8px}
.lang-toggle{border:1px solid #ddd;background:#fff;padding:6px 10px;border-radius:999px;font-weight:700;cursor:pointer}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid #eee;box-shadow:0 6px 18px rgba(0,0,0,.08);border-radius:10px;padding:6px;display:none;z-index:50}
.lang-menu .lang-btn{display:block;width:100%;text-align:left;padding:8px 12px;border:none;background:transparent;cursor:pointer;border-radius:8px;font-weight:700}
.lang-menu .lang-btn:hover{background:#f3f4f6}
.lang-switch.open .lang-menu{display:block}

/* Globe icon styling for language toggle */
.lang-toggle{display:flex;align-items:center;gap:8px}
.lang-toggle .icon-globe{display:block}

.nav a.btn-cta{margin-left:0}


/* === Header nav alignment fix === */
.nav{align-items:center;gap:20px}
.nav a{display:inline-flex;align-items:center;line-height:1;padding:8px 0;margin:0}
.nav a.btn-cta{padding:8px 14px;margin:0} /* keep pill look but no extra offset */
@media (max-width:900px){
  .nav a{padding:10px 0}
  .nav a.btn-cta{padding:10px 14px}
}


/* === Header nav positioning override === */
/* Put the nav right after the logo (no giant gap), push only the language switch to the far right */
.site-header .header-inner{align-items:center}
.site-header .nav{margin-left: 20px !important; gap:20px; align-items:center}
.site-header .lang-switch{margin-left:auto} /* keeps globe on the far right */


/* === Final header alignment tune === */
.site-header .nav{margin-left:18px !important; gap:20px !important; justify-content:flex-start !important; align-items:center !important}
.site-header .nav a{display:inline-flex; align-items:center; margin:0 !important; padding:8px 0}
.site-header .nav:not(.open) a.btn-cta{margin-left:0 !important; padding:8px 14px}


/* === Remove pill/border style from header CTA === */
.site-header .nav:not(.open) a.btn-cta{
  border:none !important;
  background:transparent !important;
  border-radius:0 !important;
  padding:8px 0 !important;   /* same vertical rhythm as other items */
  color:var(--ink) !important;
  font-weight:600 !important;  /* align with other nav links */
}
.site-header .nav a.btn-cta:hover{
  background:transparent !important;
  color:#d786cc !important;    /* same hover color as other links */
  border-color:transparent !important;
}


/* === Header: center nav between logo (left) and language menu (right) === */
.site-header .header-inner{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
}
.site-header .logo{justify-self:start}
.site-header .nav{
  margin-left:0 !important;
  justify-self:center;
  justify-content:center !important;
}
.site-header .lang-switch{
  margin-left:0 !important;
  justify-self:end;
}
.site-header .nav-toggle{
  grid-column:3;
  justify-self:end;
}


/* Ensure the Contact link (btn-cta) turns pink when its section is active */
.site-header .nav a.btn-cta.active{
  color:#d786cc !important;
}


@media (max-width: 900px){
  .nav a{display:block;text-align:center;width:100%;padding:10px 12px;font-size:20px;line-height:1.2}
  .nav a.btn-cta{padding:10px 12px}
}


/* === Mobile dropdown uniform items === */
.nav.open a{
  display:block;
  width:100%;
  text-align:center;
  padding:12px 14px;
  margin:0;
  font-size:20px;
  line-height:1.3;
}
.nav.open a.btn-cta{
  border:none !important;
  background:transparent !important;
  border-radius:0 !important;
  color:inherit !important;
  font-weight:600 !important;
  padding:12px 14px;
}
@media (max-width: 900px){
  /* Remove underline bar that can shift spacing on active item in dropdown */
  .nav.open a.active::after{display:none}
}


/* === Footer legal links: underline only, no color === */
.site-footer .footer-links .legal-link{
  color: inherit !important;
  text-decoration: underline;
}
.site-footer .footer-links .legal-link:hover{
  color: inherit !important;
  text-decoration: underline;
}



/* === Mobile: force globe & hamburger icons/text to black, fixed (no hover color change) === */
@media (max-width: 900px){
  /* Globe icon button (language toggle) */
  .lang-toggle,
  .lang-toggle .icon-globe{
    color:#000 !important;
  }
  .lang-toggle:hover,
  .lang-toggle:active,
  .lang-toggle:focus{
    color:#000 !important;
    filter:none !important;
  }

  /* Hamburger button */
  .nav-toggle{
    color:#000 !important;
  }
  .nav-toggle:hover,
  .nav-toggle:active,
  .nav-toggle:focus{
    color:#000 !important;
    background:transparent !important;
    filter:none !important;
  }

  /* Language inline buttons text (FR/NL/DE) — text only */
  .lang-btn{
    color:#000 !important;
  }
}


/* === FIX: Mobile burger menu — right-align every item including CTA === */
@media (max-width: 900px){
  .nav.open{
    align-items: stretch !important;
  }
  .nav.open a,
  .nav.open a.btn-cta{
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    margin: 0 !important;
    padding: 12px 14px !important;
  }
}


/* === FINAL FIX: Mobile burger menu — make "Contactez-nous" identical to others === */
@media (max-width: 900px){
  /* Reset CTA styles inside burger menu so it's just a normal link */
  .nav.open a.btn-cta{
    all: unset !important;
  }

  /* Uniform link styles for EVERY item in the open burger menu */
  .nav.open a,
  .nav.open a.btn-cta{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    text-align:right !important;
    padding:12px 16px !important;
    margin:0 !important;
    font-size:20px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    color: var(--ink) !important;
    text-decoration:none !important;
    border:none !important;
    background:transparent !important;
    border-radius:0 !important;
  }
}


/* === Uniform hover for all mobile menu links === */
@media (max-width: 900px){
  .nav.open a:hover,
  .nav.open a.btn-cta:hover {
    color: #d786cc !important;
    background: transparent !important;
  }
}


/* === DESKTOP HEADER: make "Contactez-nous" identical to other titles & uniform hover === */
/* Scope to header nav only (won't touch other CTAs elsewhere) */
.site-header .nav:not(.open) a.btn-cta{
  /* reset old pill/CTA look */
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  /* use same spacing as other links */
  padding: 8px 0 !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
/* Uniform hover for ALL header links */
.site-header .nav a:hover,
.site-header .nav a.btn-cta:hover{
  color: #d786cc !important;
  background: transparent !important;
}


/* === MOBILE FINAL FIX: hamburger menu uniform spacing & alignment === */
@media (max-width: 900px){
  .site-header .nav.open a,
  .site-header .nav.open a.btn-cta{
    display:block !important;
    width:100% !important;
    text-align:right !important;
    padding:12px 16px !important;
    margin:0 !important;
    font-size:20px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    color: var(--ink) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
}


/* === Active section highlight for all menu items (desktop & mobile) === */
.site-header .nav a.active,
.site-header .nav a.btn-cta.active,
.nav.open a.active,
.nav.open a.btn-cta.active{
  color: #d786cc !important;
  background: transparent !important;
}


/* Ensure instant jump to #accueil on mobile (no smooth scroll delay) */
@media (max-width: 900px){
  html { scroll-behavior: auto !important; }
}


}


/* === UNIVERSAL FIX: persistent background via body::before (mobile-safe) === */
html, body{
  background: transparent !important;
}
body{ position: relative; z-index: 0; }

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Same layered background as desktop, but mobile-safe */
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    url('images/bg-stars.svg') repeat,
    repeating-conic-gradient(from -12deg at 0% 18%, #e9bfa3 0 22deg, #d786cc 22deg 44deg);
  background-size: auto, auto, auto;
  background-position: center top, center top, center top;
  will-change: transform;
  transform: translateZ(0); /* iOS composite hint */
}

/* Keep hero specific image on top of global bg */
.hero{
  position: relative;
  background-image: linear-gradient(135deg, rgba(231,51,56,.06), rgba(42,163,225,.08)), url('images/hero.jpg');
  background-size: cover;
  background-position: center 38%;
}


/* === Active language highlight (same color as active menu section) === */
.lang-btn.active{
  color: #d786cc !important;
  background: transparent !important;
}


@media (max-width: 900px){
  .lang-switch .lang-btn.active{
    color: #d786cc !important;
    background: transparent !important;
  }
}