/*
Theme Name:   Harmonia Life
Theme URI:    https://harmonialife.it
Description:  Child theme Hello Elementor — Benessere · Performance · Longevità. Design system complet avec animations CSS/JS, kit Elementor global, header/footer custom, et 6 templates de pages.
Author:       Harmonia Life
Author URI:   https://harmonialife.it
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  harmonia-child
Tags:         wellness, health, elementor, animations, responsive, one-page
*/

/* ================================================================
   IMPORT PARENT THEME
================================================================ */
@import url("../hello-elementor/style.css");

/* ================================================================
   GOOGLE FONTS
================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Lato:wght@300;400;700&display=swap");

/* ================================================================
   CSS DESIGN TOKENS
================================================================ */
:root {
  /* ── Couleurs ── */
  --hl-green:        #1DB88E;
  --hl-green-dark:   #17a07a;
  --hl-green-light:  #25d4a8;
  --hl-gold:         #E8A020;
  --hl-gold-dark:    #c98a18;
  --hl-dark:         #1A1A2E;
  --hl-text:         #333333;
  --hl-gray:         #666666;
  --hl-gray-light:   #999999;
  --hl-light-bg:     #F5F7F6;
  --hl-white:        #FFFFFF;

  /* ── Gradients ── */
  --hl-grad-hero:    linear-gradient(135deg, #0fa878 0%, #1DB88E 50%, #25d4a8 100%);
  --hl-grad-section: linear-gradient(135deg, #0fa878, #1DB88E);
  --hl-grad-card:    linear-gradient(135deg, #1DB88E, #0fa878);

  /* ── Typographies ── */
  --hl-font-h: 'Montserrat', sans-serif;
  --hl-font-b: 'Lato', sans-serif;

  /* ── Espacements ── */
  --hl-py:      clamp(3.5rem, 8vw, 5.5rem);
  --hl-px:      clamp(1.25rem, 6vw, 5rem);
  --hl-gap:     1.5rem;
  --hl-r:       12px;
  --hl-r-lg:    20px;
  --hl-r-pill:  9999px;

  /* ── Ombres ── */
  --hl-sh-sm:   0 2px 15px rgba(0,0,0,.06);
  --hl-sh-md:   0 6px 30px rgba(0,0,0,.08);
  --hl-sh-lg:   0 16px 60px rgba(0,0,0,.14);
  --hl-sh-hero: 0 30px 80px rgba(0,0,0,.25);

  /* ── Transitions ── */
  --hl-t:       all .3s cubic-bezier(.22,.68,0,1.2);
  --hl-t-slow:  all .65s cubic-bezier(.22,.68,0,1.2);
}

/* ================================================================
   RESET & BASE
================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--hl-font-b);
  color: var(--hl-text);
  background: var(--hl-white);
  overflow-x: hidden;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hl-font-h);
  font-weight: 800;
  line-height: 1.15;
  color: var(--hl-dark);
}
a { text-decoration: none; transition: color .2s; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1rem; }

/* ================================================================
   KEYFRAMES
================================================================ */
@keyframes hl-blink {
  0%,49%   { opacity: 1; }
  50%,100% { opacity: 0; }
}
@keyframes hl-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(8px); }
}
@keyframes hl-glow {
  0%,100% { box-shadow: 0 0 0 0   rgba(255,255,255,.18), var(--hl-sh-hero); }
  50%     { box-shadow: 0 0 0 22px rgba(255,255,255,.05), var(--hl-sh-hero); }
}
@keyframes hl-pulse-ring {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.9); opacity: 0;  }
}
@keyframes hl-orbit-cw {
  from { transform: rotate(0deg)    translateX(165px) rotate(0deg); }
  to   { transform: rotate(360deg)  translateX(165px) rotate(-360deg); }
}
@keyframes hl-orbit-ccw {
  from { transform: rotate(0deg)    translateX(200px) rotate(0deg); }
  to   { transform: rotate(-360deg) translateX(200px) rotate(360deg); }
}
@keyframes hl-leaf1 {
  0%,100% { transform: translateY(0)    rotate(0deg)   scale(1);    }
  30%     { transform: translateY(-18px) rotate(5deg)  scale(1.03); }
  65%     { transform: translateY(-8px)  rotate(-3deg) scale(.98);  }
}
@keyframes hl-leaf2 {
  0%,100% { transform: translateY(0)    rotate(0deg)   scale(1);    }
  40%     { transform: translateY(16px)  rotate(-7deg) scale(1.05); }
  70%     { transform: translateY(-6px)  rotate(4deg)  scale(.97);  }
}
@keyframes hl-leaf3 {
  0%,100% { transform: translateY(0)    rotate(15deg)  scale(1);    }
  50%     { transform: translateY(-14px) rotate(24deg) scale(1.04); }
}
@keyframes hl-shimmer {
  from { transform: translateX(-150%) skewX(-20deg); }
  to   { transform: translateX(250%)  skewX(-20deg); }
}
@keyframes hl-slide-l {
  from { opacity: 0; transform: translateX(-70px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hl-slide-r {
  from { opacity: 0; transform: translateX(70px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hl-fade-up {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hl-nav-underline {
  from { width: 0; }
  to   { width: 100%; }
}

/* ================================================================
   TYPED CURSOR
================================================================ */
.hl-typed-cursor {
  color: var(--hl-gold);
  font-weight: 800;
  animation: hl-blink .7s step-end infinite;
  display: inline-block;
  margin-left: 1px;
}
.hl-typed-word { color: var(--hl-gold); }

/* ================================================================
   HERO SECTION
================================================================ */
.hl-hero {
  background: var(--hl-grad-hero);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hl-hero > .elementor-container { position: relative; z-index: 2; }
.hl-hero-tag {
  font: 700 .7rem/1 var(--hl-font-h);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  display: block;
  margin-bottom: .9rem;
}
.hl-hero-content { animation: hl-slide-l .9s cubic-bezier(.22,.68,0,1.15) .15s both; }
.hl-hero-image   { animation: hl-slide-r .9s cubic-bezier(.22,.68,0,1.15) .4s  both; }

/* Hero circle image */
.hl-hero-circle {
  border-radius: 50% !important;
  overflow: hidden;
  border: 6px solid rgba(255,255,255,.3) !important;
  animation: hl-glow 3.5s ease-in-out infinite;
}

/* Scroll-down arrow */
.hl-scroll-down {
  width: 38px; height: 38px;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  cursor: pointer;
  animation: hl-bounce 1.8s ease-in-out infinite;
  margin-top: 2rem;
}

/* Leaf particles (injected by JS) */
.hl-leaf { position: absolute; user-select: none; pointer-events: none; }
.hl-leaf-1 { animation: hl-leaf1  8s ease-in-out infinite; }
.hl-leaf-2 { animation: hl-leaf2 11s ease-in-out infinite; }
.hl-leaf-3 { animation: hl-leaf3  9s ease-in-out infinite; }
.hl-leaf-4 { animation: hl-leaf1 13s ease-in-out infinite; }
.hl-leaf-5 { animation: hl-leaf2 10s ease-in-out infinite; }

/* ================================================================
   HEADER CUSTOM
================================================================ */
/* Top bar */
.hl-topbar {
  background: #111;
  padding: 8px var(--hl-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
}
.hl-topbar-contact { display: flex; gap: 1.5rem; align-items: center; }
.hl-topbar-contact a { color: rgba(255,255,255,.75); transition: color .2s; }
.hl-topbar-contact a:hover { color: var(--hl-green); }
.hl-topbar-tag { color: rgba(255,255,255,.5); font-style: italic; font-size: .75rem; }

/* Main nav */
.hl-header-nav {
  background: white;
  padding: 0 var(--hl-px);
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--hl-sh-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: height .3s ease, box-shadow .3s ease, background .3s ease;
}
.hl-header-nav.hl-scrolled {
  height: 52px;
  box-shadow: 0 4px 30px rgba(0,0,0,.12);
  background: rgba(255,255,255,.98);
}
.hl-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 1.1rem/1 var(--hl-font-h);
  color: var(--hl-dark);
}
.hl-logo-icon {
  width: 36px; height: 36px;
  background: var(--hl-green);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
}

/* Nav links */
.hl-nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0; padding: 0;
}
.hl-nav-links a {
  font: 600 .875rem/1 var(--hl-font-h);
  color: var(--hl-text);
  position: relative;
  padding-bottom: 3px;
}
.hl-nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--hl-green);
  transition: width .25s ease;
}
.hl-nav-links a:hover::after,
.hl-nav-links a.current::after { width: 100%; }
.hl-nav-links a:hover { color: var(--hl-dark); }

/* Social sidebar */
.hl-social-sidebar {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}
.hl-social-sidebar a {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  font-size: .8rem;
  font-weight: 700;
  transition: var(--hl-t);
}
.hl-social-sidebar a:hover {
  background: var(--hl-gold);
  border-color: var(--hl-gold);
  color: white;
  transform: scale(1.1);
}

/* Elementor header overrides */
.elementor-location-header,
.site-header {
  transition: box-shadow .3s ease, background .3s ease;
}
.elementor-location-header.hl-scrolled,
.site-header.hl-scrolled {
  box-shadow: 0 4px 30px rgba(0,0,0,.12) !important;
  background: rgba(255,255,255,.98) !important;
}
.elementor-nav-menu--main .elementor-item {
  font-family: var(--hl-font-h) !important;
  font-weight: 600 !important;
}
.elementor-nav-menu a { position: relative; }
.elementor-nav-menu a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--hl-green);
  transition: width .25s ease;
}
.elementor-nav-menu a:hover::after,
.elementor-nav-menu .current-menu-item > a::after { width: 100%; }

/* ================================================================
   FOOTER CUSTOM
================================================================ */
.hl-footer {
  background: var(--hl-dark);
  color: rgba(255,255,255,.7);
}
.hl-footer h4 {
  color: white;
  font-size: .9rem;
  font-family: var(--hl-font-h);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.hl-footer a { color: rgba(255,255,255,.6); transition: color .2s; }
.hl-footer a:hover { color: var(--hl-green); }
.hl-footer-links { list-style: none; padding: 0; margin: 0; }
.hl-footer-links li { margin-bottom: .5rem; }
.hl-footer-links a { font-size: .875rem; }
.hl-footer-social {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.6);
  font-weight: 700;
  font-size: .75rem;
  transition: var(--hl-t);
  cursor: pointer;
  margin-right: 6px;
}
.hl-footer-social:hover {
  background: var(--hl-green);
  border-color: var(--hl-green);
  color: white;
  transform: translateY(-3px) scale(1.1);
}
.hl-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem var(--hl-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
}
.hl-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .875rem;
  color: rgba(255,255,255,.65);
  margin-bottom: .8rem;
}
.hl-footer-contact-icon { font-size: 1rem; flex-shrink: 0; }

/* ================================================================
   BUTTONS
================================================================ */
.hl-btn-gold,
.hl-btn-green,
.hl-btn-outline-w,
.hl-btn-outline-green {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font: 700 .875rem/1 var(--hl-font-h) !important;
  padding: 14px 30px !important;
  border-radius: var(--hl-r-pill) !important;
  border: 2px solid transparent !important;
  cursor: pointer;
  transition: var(--hl-t) !important;
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  white-space: nowrap;
}
/* Shimmer */
.hl-btn-gold::before, .hl-btn-green::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: rgba(255,255,255,.22);
  transform: translateX(-150%) skewX(-20deg);
  pointer-events: none;
}
.hl-btn-gold:hover::before, .hl-btn-green:hover::before {
  animation: hl-shimmer .55s ease forwards;
}
.hl-btn-gold  { background: var(--hl-gold)  !important; color: #fff !important; }
.hl-btn-green { background: var(--hl-green) !important; color: #fff !important; }
.hl-btn-gold:hover  { background: var(--hl-gold-dark)  !important; transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(232,160,32,.4) !important; color: #fff !important; }
.hl-btn-green:hover { background: var(--hl-green-dark) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(29,184,142,.4) !important; color: #fff !important; }
.hl-btn-outline-w { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.6) !important; }
.hl-btn-outline-w:hover { background: rgba(255,255,255,.15) !important; border-color: #fff !important; transform: translateY(-2px) !important; color: #fff !important; }
.hl-btn-outline-green { background: transparent !important; color: var(--hl-green) !important; border-color: var(--hl-green) !important; }
.hl-btn-outline-green:hover { background: var(--hl-green) !important; color: #fff !important; transform: translateY(-2px) !important; }

/* Elementor button overrides */
.elementor-button.hl-btn-gold,
.elementor-button.hl-btn-green {
  border-radius: var(--hl-r-pill) !important;
}

/* ================================================================
   SECTION TAGS
================================================================ */
.hl-tag {
  display: inline-block;
  font: 700 .7rem/1 var(--hl-font-h);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hl-green);
  margin-bottom: .75rem;
}
.hl-tag--white { color: rgba(255,255,255,.75) !important; }

/* ================================================================
   CARDS
================================================================ */
.hl-card {
  background: var(--hl-white);
  border-radius: var(--hl-r);
  box-shadow: var(--hl-sh-md);
  overflow: hidden;
  transition: transform .32s cubic-bezier(.22,.68,0,1.3), box-shadow .32s ease;
}
.hl-card:hover { transform: translateY(-10px) scale(1.01); box-shadow: var(--hl-sh-lg); }

/* Pricing featured */
.hl-pricing-star { border: 2px solid var(--hl-gold) !important; }
.hl-badge {
  display: inline-block;
  font: 700 .65rem/1 var(--hl-font-h);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: var(--hl-r-pill);
  background: var(--hl-gold);
  color: #fff;
}

/* Testimonial card */
.hl-testi-card {
  background: var(--hl-white);
  border-radius: var(--hl-r-lg);
  padding: 2rem;
  box-shadow: var(--hl-sh-md);
  transition: var(--hl-t);
  position: relative;
}
.hl-testi-card::after {
  content: '\201C';
  position: absolute;
  bottom: 10px; right: 20px;
  font: 800 5rem/1 var(--hl-font-h);
  color: var(--hl-green);
  opacity: .06;
}
.hl-testi-card:hover { transform: translateY(-6px); box-shadow: var(--hl-sh-lg); }

/* ================================================================
   PLAY BUTTON PULSE
================================================================ */
.hl-play {
  width: 64px; height: 64px;
  background: var(--hl-gold);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  padding-left: 4px;
  position: relative;
  cursor: pointer;
  transition: transform .2s ease;
}
.hl-play:hover { transform: scale(1.1); }
.hl-play::before, .hl-play::after {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  background: rgba(232,160,32,.3);
  animation: hl-pulse-ring 1.8s ease-out infinite;
}
.hl-play::after { animation-delay: .9s; }

/* ================================================================
   ORBIT DOTS
================================================================ */
.hl-orbit-wrap { position: relative; display: inline-block; }
.hl-orbit-dot { position: absolute; border-radius: 50%; pointer-events: none; top: 50%; left: 50%; }
.hl-orbit-dot-1 { width:12px; height:12px; margin:-6px 0 0 -6px; background:var(--hl-green); opacity:.75; animation:hl-orbit-cw 12s linear infinite; }
.hl-orbit-dot-2 { width:8px;  height:8px;  margin:-4px 0 0 -4px; background:var(--hl-gold);  opacity:.7;  animation:hl-orbit-ccw 18s linear infinite; }
.hl-orbit-dot-3 { width:6px;  height:6px;  margin:-3px 0 0 -3px; background:rgba(255,255,255,.5); animation:hl-orbit-cw 22s linear infinite; animation-delay:-7s; }

/* ================================================================
   FEATURE ITEMS
================================================================ */
.hl-feature-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--hl-light-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--hl-green);
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: var(--hl-t);
}
.hl-feature-item { display: flex; align-items: flex-start; gap: 1rem; }
.hl-feature-item:hover .hl-feature-icon {
  background: var(--hl-green); color: #fff;
  transform: scale(1.15) rotate(-6deg);
}

/* ================================================================
   STAT COUNTERS
================================================================ */
.hl-stat-num {
  font: 800 clamp(2rem,5vw,2.8rem)/1 var(--hl-font-h);
  color: var(--hl-green);
  display: block;
  margin-bottom: .3rem;
}
.hl-stat-label { font-size: .8rem; color: var(--hl-gray); }

/* ================================================================
   TESTIMONIAL SLIDER
================================================================ */
.hl-testi-text,
.hl-testi-name,
.hl-testi-role { transition: opacity .32s ease, transform .32s ease; }
.hl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: var(--hl-t);
  border: none; padding: 0;
  display: inline-block;
}
.hl-dot.active { background: var(--hl-gold); width: 26px; border-radius: 5px; }

/* ================================================================
   SCROLL REVEAL SYSTEM
================================================================ */
.hl-r, .hl-r-l, .hl-r-r, .hl-r-s { will-change: opacity, transform; }
.hl-r   { opacity:0; transform:translateY(38px);  transition:opacity .65s cubic-bezier(.22,.68,0,1.2),transform .65s cubic-bezier(.22,.68,0,1.2); }
.hl-r-l { opacity:0; transform:translateX(-52px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.68,0,1.2); }
.hl-r-r { opacity:0; transform:translateX(52px);  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.68,0,1.2); }
.hl-r-s { opacity:0; transform:scale(.88);         transition:opacity .65s ease,transform .65s cubic-bezier(.22,.68,0,1.2); }
.hl-r.on,.hl-r-l.on,.hl-r-r.on,.hl-r-s.on { opacity:1 !important; transform:none !important; }

/* Stagger delays */
.hl-d1{transition-delay:.04s!important} .hl-d2{transition-delay:.12s!important}
.hl-d3{transition-delay:.20s!important} .hl-d4{transition-delay:.28s!important}
.hl-d5{transition-delay:.36s!important} .hl-d6{transition-delay:.44s!important}

/* ================================================================
   UTILITY CLASSES
================================================================ */
.hl-text-green  { color:var(--hl-green)  !important; }
.hl-text-gold   { color:var(--hl-gold)   !important; }
.hl-text-white  { color:#fff             !important; }
.hl-text-dark   { color:var(--hl-dark)   !important; }
.hl-text-gray   { color:var(--hl-gray)   !important; }
.hl-bg-green    { background:var(--hl-grad-section) !important; }
.hl-bg-light    { background:var(--hl-light-bg)     !important; }
.hl-bg-dark     { background:var(--hl-dark)         !important; }
.hl-bg-white    { background:#fff                   !important; }
.hl-rounded     { border-radius:var(--hl-r)    !important; }
.hl-rounded-lg  { border-radius:var(--hl-r-lg) !important; }
.hl-pill        { border-radius:var(--hl-r-pill)!important; }
.hl-shadow      { box-shadow:var(--hl-sh-md)   !important; }
.hl-shadow-lg   { box-shadow:var(--hl-sh-lg)   !important; }
.hl-section-pad { padding:var(--hl-py) var(--hl-px) !important; }
.hl-text-center { text-align:center !important; }
.hl-no-margin   { margin:0 !important; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width:1024px) {
  :root { --hl-py:4rem; --hl-px:3rem; }
}
@media (max-width:767px) {
  :root { --hl-py:3.5rem; --hl-px:1.25rem; }
  .hl-hero          { min-height:auto; padding-top:5rem; padding-bottom:3rem; }
  .hl-hero-content,
  .hl-hero-image    { animation:hl-fade-up .8s ease both; }
  .hl-topbar        { display:none; }
  .hl-social-sidebar{ display:none; }
  .hl-orbit-dot-1,
  .hl-orbit-dot-2,
  .hl-orbit-dot-3   { display:none; }
}