/* ============================================================
   SÉRÉNITÉ KINÉ — Styles partagés & Animations
   ============================================================ */

/* ---- Scrollbar personnalisée ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #fdf9ef; }
::-webkit-scrollbar-thumb { background: #c2c8bf; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a5a40; }

/* ---- Barre de progression de scroll ---- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, #45664b 0%, #A3B18A 50%, #c7ecca 100%);
  z-index: 9999;
  width: 0%;
  transition: width 0.08s linear;
}

/* ---- Apparition de la page ---- */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
body { animation: pageFadeIn 0.55s cubic-bezier(0.16,1,0.3,1) both; }

/* ---- Glass header ---- */
.glass-header {
  background-color: rgba(218, 215, 205, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---- Glass card ---- */
.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(163, 177, 138, 0.3);
}

/* ---- Tonal elevation ---- */
.tonal-elevation {
  box-shadow: 0 10px 30px -10px rgba(52, 78, 65, 0.08);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
  opacity: 1;
  transform: none;
}

/* Décalages en cascade */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.18s; }
.stagger-3 { transition-delay: 0.28s; }
.stagger-4 { transition-delay: 0.38s; }
.stagger-5 { transition-delay: 0.48s; }

/* ============================================================
   BOUTON CHAT FLOTTANT
   ============================================================ */
@keyframes chatPulse {
  0%   { box-shadow: 0 0 0 0   rgba(69,102,75,0.45); }
  60%  { box-shadow: 0 0 0 14px rgba(69,102,75,0); }
  100% { box-shadow: 0 0 0 0   rgba(69,102,75,0); }
}
.chat-btn { animation: chatPulse 2.8s ease-in-out infinite; }

/* ============================================================
   HOVER LIFT SUR CARTES
   ============================================================ */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -12px rgba(52,78,65,0.14);
}

/* ============================================================
   ORBES DÉCORATIFS ANIMÉS
   ============================================================ */
@keyframes orbFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(18px,-18px) scale(1.04); }
  66%       { transform: translate(-12px,8px) scale(0.97); }
}
.orb-1 { animation: orbFloat 9s ease-in-out infinite; }
.orb-2 { animation: orbFloat 11s ease-in-out infinite reverse; animation-delay: -3s; }

/* ============================================================
   BOUTON RIPPLE
   ============================================================ */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.btn-ripple:active::after { opacity: 1; }

/* ============================================================
   MARQUEE / TICKER
   ============================================================ */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-wrap { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); }
.ticker-inner { display: inline-flex; animation: marquee 22s linear infinite; }
.ticker-inner:hover { animation-play-state: paused; }

/* ============================================================
   COMPTEURS ANIMÉS
   ============================================================ */
.count-up { font-variant-numeric: tabular-nums; }

/* ============================================================
   PARALLAXE IMAGE HÉRO
   ============================================================ */
.parallax-img { will-change: transform; transition: transform 0s linear; }

/* ============================================================
   MOBILE MENU
   ============================================================ */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1);
}
#mobile-menu.open { max-height: 500px; }

/* ============================================================
   MATERIAL SYMBOLS BASE
   ============================================================ */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1;
}

/* ============================================================
   ACTIVE NAV — surcharge de l'animation underline
   ============================================================ */
.nav-active {
  color: #23422a;
  font-weight: 700;
  border-bottom: 2px solid #23422a;
  padding-bottom: 2px;
}

/* ============================================================
   INPUT FOCUS GLOW
   ============================================================ */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(88,129,87,0.18);
}

/* ============================================================
   STATISTIQUES — animation de la ligne de remplissage
   ============================================================ */
.stat-line {
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #45664b, #A3B18A);
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
}
.stat-line.filled { width: 100%; }