/* ============================================================
   Flourish Bubble — animations.css
   Ajoutez dans header.php : <link rel="stylesheet" href="<?= SITE_URL ?>/css/animations.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,700;1,300;1,600&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Canvas global perles ── */
#fb-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
nav, main, footer, header { position: relative; z-index: 1; }
.navbar { position: fixed; z-index: 5000; }

/* ══ HERO ══ */
.hero-section {
  background:
    radial-gradient(ellipse 80% 60% at 15% 40%, rgba(45,106,79,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 70%, rgba(244,168,35,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 50%, #0D2B1E 40%, #081810 100%);
  overflow: hidden; position: relative;
}
.hero-section::before {
  content: ''; position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  border: 1px solid rgba(244,168,35,0.12);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: ringPulse 8s ease-in-out infinite;
}
.hero-section::after {
  content: ''; position: absolute;
  width: 900px; height: 900px; border-radius: 50%;
  border: 1px solid rgba(82,183,136,0.08);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: ringPulse 12s ease-in-out infinite reverse;
}
@keyframes ringPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity:0.6; }
  50%     { transform: translate(-50%,-50%) scale(1.08); opacity:1; }
}

.hero-section h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  color: #fff; line-height: 1.05; letter-spacing: -0.02em;
  animation: heroReveal 1.2s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-section h1 .accent { color: #F4A823; font-style: italic; font-weight: 300; }
.hero-section p { animation: heroReveal 1.2s cubic-bezier(0.16,1,0.3,1) 0.15s both; }
.hero-section .btn-gold, .hero-section .btn-primary, .hero-section .btn-outline {
  animation: heroReveal 1.2s cubic-bezier(0.16,1,0.3,1) 0.3s both;
}
@keyframes heroReveal {
  from { opacity:0; transform:translateY(50px) skewY(2deg); filter:blur(8px); }
  to   { opacity:1; transform:none; filter:none; }
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(244,168,35,0.15);
  border: 1px solid rgba(244,168,35,0.35);
  backdrop-filter: blur(10px);
  color: #F4A823; padding: 8px 18px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 28px;
  animation: badgeDrop 0.9s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes badgeDrop {
  from { opacity:0; transform:translateY(-20px) scale(0.8); }
  to   { opacity:1; transform:none; }
}

/* ══ NAVBAR glass ══ */
.navbar {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(45,106,79,0.15) !important;
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}
.navbar.scrolled {
  background: rgba(13,43,30,0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(244,168,35,0.15) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.3) !important;
}
.navbar .nav-links a { position: relative; color: #1B2B1E !important; transition: color 0.3s !important; }
.navbar .nav-links a::after {
  content: ''; position: absolute;
  bottom: -4px; left: 50%; right: 50%;
  height: 1.5px; background: #F4A823;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1); border-radius: 2px;
}
.navbar .nav-links a:hover::after,
.navbar .nav-links a.active::after { left: 0; right: 0; }
.navbar .nav-links a:hover, .navbar .nav-links a.active { color: #2D6A4F !important; }
.nav-logo .logo-text { font-family: 'Fraunces', serif; font-size: 1.35rem; color: #2D6A4F !important; }
.nav-logo .logo-text .accent { color: #F4A823 !important; font-style: italic; font-weight: 300; }
.navbar.scrolled .nav-links a,
.navbar.scrolled .nav-links a:hover,
.navbar.scrolled .nav-links a.active { color: #fff !important; }
.navbar.scrolled .nav-logo .logo-text { color: #fff !important; }
.navbar.scrolled .nav-logo .logo-text .accent { color: #F4A823 !important; }

/* ══ SCROLL REVEAL ══ */
[data-aos] {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
[data-aos].visible { opacity: 1 !important; transform: none !important; }
[data-aos][data-delay="1"] { transition-delay: 0.1s; }
[data-aos][data-delay="2"] { transition-delay: 0.2s; }
[data-aos][data-delay="3"] { transition-delay: 0.3s; }
[data-aos][data-delay="4"] { transition-delay: 0.4s; }
[data-aos][data-delay="5"] { transition-delay: 0.5s; }

/* ══ CARDS hover ══ */
.menu-card {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease !important;
  position: relative; overflow: hidden;
}
.menu-card::after {
  content: ''; position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  transition: left 0.6s ease; pointer-events: none;
}
.menu-card:hover::after { left: 150%; }
.menu-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: 0 24px 60px rgba(45,106,79,0.22), 0 0 0 1px rgba(244,168,35,0.15) !important;
}
.atelier-card, .card {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease !important;
  position: relative; overflow: hidden;
}
.atelier-card::after, .card::after {
  content: ''; position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transition: left 0.6s ease; pointer-events: none;
}
.atelier-card:hover::after, .card:hover::after { left: 150%; }
.atelier-card:hover, .card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(45,106,79,0.2) !important;
}

/* ══ BOUTONS ripple ══ */
.btn-primary, .btn-gold, .btn-outline {
  position: relative; overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
.btn-primary::before, .btn-gold::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; width: 0; height: 0;
  background: rgba(255,255,255,0.2); border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width 0.5s ease, height 0.5s ease;
}
.btn-primary:hover::before, .btn-gold:hover::before { width: 300px; height: 300px; }
.btn-primary:active, .btn-gold:active { transform: scale(0.96) !important; }

/* ══ TOAST ══ */
#toastContainer {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  background: rgba(13,43,30,0.95); backdrop-filter: blur(16px);
  color: #fff; padding: 14px 20px; border-radius: 14px;
  font-size: 0.88rem; font-weight: 500;
  border: 1px solid rgba(244,168,35,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  animation: toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both,
             toastOut 0.3s ease 3.2s both;
  min-width: 260px;
}
@keyframes toastIn  { from { opacity:0; transform:translateX(60px) scale(0.9); } to { opacity:1; transform:none; } }
@keyframes toastOut { to   { opacity:0; transform:translateX(40px); } }

/* ══ SECTION titles ══ */
.section-title h2 { font-family: 'Fraunces', serif; position: relative; display: inline-block; }
.section-title h2::after {
  content: ''; position: absolute;
  bottom: -8px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #F4A823, transparent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
[data-aos].visible .section-title h2::after { transform: scaleX(1); }
.spots-fill { transition: width 1.2s cubic-bezier(0.16,1,0.3,1) !important; }

/* ══ CURSOR (desktop) ══ */
@media (pointer: fine) {
  #fb-cursor {
    position: fixed; width: 10px; height: 10px;
    background: #F4A823; border-radius: 50%;
    pointer-events: none; z-index: 99999;
    mix-blend-mode: difference;
    transform: translate(-50%,-50%); transition: transform 0.1s ease;
  }
  #fb-cursor-ring {
    position: fixed; width: 36px; height: 36px;
    border: 1.5px solid rgba(244,168,35,0.6); border-radius: 50%;
    pointer-events: none; z-index: 99998;
    transform: translate(-50%,-50%); transition: all 0.15s ease;
  }
  body:has(a:hover) #fb-cursor-ring,
  body:has(button:hover) #fb-cursor-ring { width: 50px; height: 50px; }
}

/* ══ PAGE LOADER ══ */
#fb-loader {
  position: fixed; inset: 0; background: #0D2B1E; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 20px;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#fb-loader.hide { opacity: 0; visibility: hidden; }
#fb-loader .loader-icon {
  width: 90px; height: 56px; display: block;
  animation: logoPulse 1.5s ease-in-out infinite;
}
#fb-loader .loader-icon svg {
  display: block; width: 90px; height: 56px;
}
#fb-loader .loader-logo {
  font-family: 'Fraunces', serif; font-size: 2rem; color: #fff;
  letter-spacing: -0.02em; animation: logoPulse 1.5s ease-in-out infinite;
}
#fb-loader .loader-logo span { color: #F4A823; font-style: italic; font-weight: 300; }
#fb-loader .loader-bar { width: 120px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
#fb-loader .loader-bar-fill { height: 100%; background: #F4A823; animation: loaderFill 1s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes logoPulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
@keyframes loaderFill { from { width:0; } to { width:100%; } }