/* ═══════════════════════════════════════════════════════════════
   MyEcoClean — Visual Upgrade V3
   Date: 2026-06-28 | Contenu INCHANGÉ, visuel seulement
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. HERO AURORA BACKGROUND ── */
.hero {
  background:
    radial-gradient(ellipse 80% 70% at 15% 30%, rgba(0,85,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 10%, rgba(0,200,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(0,160,112,0.05) 0%, transparent 60%),
    #F4F7FF;
}

/* ── 2. HERO IMAGE — PERSPECTIVE + GLOW ── */
.hero-img-wrap {
  box-shadow:
    0 0 0 1px rgba(0,85,255,0.12),
    0 24px 70px rgba(0,85,255,0.22),
    0 60px 130px rgba(0,85,255,0.10) !important;
  transform: perspective(1000px) rotateY(-2deg) rotateX(1deg);
  transition: transform 0.5s ease, box-shadow 0.4s ease;
}
.hero-visual:hover .hero-img-wrap {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
  box-shadow:
    0 0 0 1px rgba(0,85,255,0.18),
    0 32px 90px rgba(0,85,255,0.28),
    0 80px 150px rgba(0,85,255,0.14) !important;
}

/* ── 3. BUTTON SHIMMER (tous les boutons verts + nav CTA) ── */
.btn-primary,
.nav-cta,
.leasing-btn,
.b2b-form-btn,
.forfait-band-btn,
.formule-btn-solid {
  position: relative;
  overflow: hidden;
}

.btn-primary::before,
.nav-cta::before,
.leasing-btn::before,
.b2b-form-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-20deg);
  animation: btnShimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btnShimmer {
  0%     { left: -100%; }
  35%    { left: 160%;  }
  35.01% { left: -100%; }
  100%   { left: -100%; }
}

/* ── 4. WAVE DIVIDERS ── */
.wave-dark-top,
.wave-dark-bottom {
  line-height: 0;
  overflow: hidden;
  display: block;
}
.wave-dark-top  svg,
.wave-dark-bottom svg { display: block; width: 100%; }

/* ── 5. STATS BAR — DARK PREMIUM ── */
#stats-bar {
  background: linear-gradient(135deg, #060F24 0%, #0D1E42 50%, #071530 100%);
  padding: 0 24px 52px;
  position: relative;
  overflow: hidden;
}

#stats-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 120% at 5%  50%, rgba(0,100,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 120% at 95% 50%, rgba(0,200,255,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60%  at 50% 100%, rgba(0,160,112,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.stats-inner {
  position: relative;
  z-index: 1;
  padding-top: 52px;
}

.stat-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s, background 0.3s !important;
}

.stat-card:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(0,210,255,0.3) !important;
  box-shadow: 0 18px 52px rgba(0,100,255,0.3), 0 0 0 1px rgba(0,200,255,0.12) !important;
  transform: translateY(-6px) !important;
}

.stat-val {
  color: #40E0FF !important;
  text-shadow: 0 0 28px rgba(0,210,255,0.5);
  font-size: 34px !important;
}

.stat-lbl {
  color: rgba(255,255,255,0.55) !important;
}

/* ── 6. WHYUS — DOT GRID + FLOATING ICONS ── */
.whyus {
  background-image:
    radial-gradient(rgba(0,85,255,0.055) 1.5px, transparent 1.5px) !important;
  background-size: 28px 28px !important;
  background-color: #FFFFFF !important;
}

.whyus-ico {
  width: 66px !important;
  height: 66px !important;
  border-radius: 20px !important;
  font-size: 28px !important;
  box-shadow: 0 10px 30px rgba(0,85,255,0.28) !important;
  animation: floatUpDown 3.4s ease-in-out infinite;
}

.whyus-card:nth-child(1) .whyus-ico { animation-delay: 0s; }
.whyus-card:nth-child(2) .whyus-ico { animation-delay: 0.8s; }
.whyus-card:nth-child(3) .whyus-ico { animation-delay: 1.6s; }
.whyus-card:nth-child(4) .whyus-ico { animation-delay: 2.4s; }

@keyframes floatUpDown {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}

.whyus-card {
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s !important;
}
.whyus-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 52px rgba(0,85,255,0.14) !important;
  border-color: rgba(0,85,255,0.22) !important;
}

/* ── 7. CAR CARDS — GLOW BORDER ON HOVER ── */
.car-card:hover {
  box-shadow:
    0 0 0 2px rgba(0,85,255,0.55),
    0 0 0 4px rgba(0,200,255,0.18),
    0 28px 72px rgba(0,85,255,0.22) !important;
  transform: translateY(-8px) !important;
}

/* ── 8. FORMULE CARDS — SPRING BOUNCE ── */
.formule-card {
  transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s !important;
}
.formule-card:hover { transform: translateY(-10px) !important; }

.formule-card.featured::after,
.formule-card.featured-prem::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  pointer-events: none;
}
.formule-card.featured::after {
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
}
.formule-card.featured-prem::after {
  background: radial-gradient(circle, rgba(255,255,220,0.15) 0%, transparent 70%);
}

/* ── 9. FORFAIT BAND — MOVING SHINE ── */
.forfait-band { position: relative; overflow: hidden; }
.forfait-band::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 35%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  transform: rotate(20deg);
  animation: forfaitShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes forfaitShine {
  0%     { left: -60%; }
  40%    { left: 130%; }
  40.01% { left: -60%; }
  100%   { left: -60%; }
}

/* ── 10. GALERIE — LIFT ON HOVER ── */
.galerie-item {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.galerie-item:hover {
  transform: scale(1.022) translateY(-4px) !important;
  box-shadow: 0 24px 60px rgba(0,85,255,0.22) !important;
  z-index: 2;
  position: relative;
}

/* ── 11. AVIS GOOGLE — PREMIUM ── */
.avis-inner {
  background: white !important;
  box-shadow:
    0 20px 60px rgba(0,85,255,0.10),
    0 0 0 1px rgba(0,85,255,0.06) !important;
  transition: box-shadow 0.3s, transform 0.3s;
}
.avis-inner:hover {
  box-shadow:
    0 28px 80px rgba(0,85,255,0.16),
    0 0 0 1px rgba(0,85,255,0.1) !important;
  transform: translateY(-3px);
}

/* ── 12. SECTION LABELS — PILL ── */
.section-label {
  display: inline-block;
  background: rgba(0,85,255,0.07);
  border: 1px solid rgba(0,85,255,0.18);
  border-radius: 100px;
  padding: 4px 16px;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
}

/* ── 13. SERVICE ICONS ── */
.service-icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 18px !important;
  font-size: 26px !important;
  box-shadow: 0 8px 24px rgba(0,85,255,0.28);
  transition: transform 0.3s, box-shadow 0.3s;
}
.service-card:hover .service-icon {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 18px 44px rgba(0,85,255,0.38);
}

/* ── 14. LEASING ITEMS ── */
.leasing-item {
  transition: transform 0.25s, box-shadow 0.25s !important;
}
.leasing-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 36px rgba(0,85,255,0.1) !important;
}
.leasing-ico { transition: transform 0.3s !important; }
.leasing-item:hover .leasing-ico {
  transform: scale(1.12) rotate(-5deg) !important;
}

/* ── 15. FAQ — OPEN HIGHLIGHT ── */
.faq-item.open .faq-q { color: var(--blue); }
.faq-item { transition: background 0.2s; }
.faq-item.open {
  background: rgba(0,85,255,0.025);
  border-radius: 12px;
  padding: 0 12px;
  margin: 4px -12px;
}

/* ── 16. FOOTER — GRADIENT TOP BORDER ── */
footer {
  position: relative;
}
footer::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    #0055FF 20%,
    #00C8FF 50%,
    #00A070 80%,
    transparent 100%
  );
  margin-bottom: 0;
}

/* ── 17. MOBILE BAR — PREMIUM GRADIENT ── */
@media (max-width: 768px) {
  .mobile-bar {
    box-shadow: 0 -8px 36px rgba(0,85,255,0.14) !important;
  }
  .mobile-bar-book {
    background: linear-gradient(90deg, #008F62, #00A070, #00B87A) !important;
  }
}

/* ── 18. SEARCH INPUT FOCUS RING ── */
.hero-search-input:focus {
  box-shadow: 0 0 0 4px rgba(0,85,255,0.12) !important;
}

/* ── 19. ADRESSE CARDS ── */
.adresse-info-card,
.map-card {
  transition: box-shadow 0.3s, transform 0.3s;
}
.adresse-info-card:hover,
.map-card:hover {
  box-shadow: 0 24px 60px rgba(0,85,255,0.14) !important;
  transform: translateY(-3px);
}

/* ── 20. REVEAL ANIMATION ENHANCED ── */
.reveal {
  transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1), transform 0.75s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── 21. FEUILLES + GOUTTES DE FOND ── */
.bg-leaf {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  animation: leafDrift linear infinite;
  opacity: 0;
}
.bg-leaf svg { display: block; }

@keyframes leafDrift {
  0%   { transform: translateY(-30px) rotate(0deg);   opacity: 0; }
  8%   { opacity: 0.75; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(140px) rotate(180deg); opacity: 0; }
}

.bg-drop {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  animation: dropFall linear infinite;
  opacity: 0;
}
.bg-drop svg { display: block; }

@keyframes dropFall {
  0%   { transform: translateY(-20px) scaleY(1);    opacity: 0; }
  10%  { opacity: 0.85; }
  85%  { opacity: 0.7; }
  95%  { transform: translateY(120px) scaleY(0.85); opacity: 0.3; }
  100% { transform: translateY(130px) scaleY(0);   opacity: 0; }
}

/* disable on reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bg-leaf, .bg-drop { animation: none !important; opacity: 0 !important; }
}

/* ── 22. NAVBAR GLASS ── */
#navbar {
  transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease !important;
}
#navbar.nav-glass {
  background: rgba(244,247,255,0.72) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  box-shadow: 0 2px 32px rgba(0,85,255,0.09), 0 1px 0 rgba(0,85,255,0.07) !important;
}

/* ── TITRES DÉGRADÉ ── */
.section-title {
  background: linear-gradient(130deg, var(--dark) 0%, var(--blue) 55%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-title span[style] {
  -webkit-text-fill-color: transparent !important;
}
#cta .section-title {
  background: none !important;
  -webkit-text-fill-color: white !important;
  background-clip: unset !important;
  color: white !important;
}
.whyus-title {
  background: linear-gradient(130deg, var(--dark) 0%, var(--blue) 70%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── COMPTEUR STAT-VAL ── */
.stat-val {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s !important;
}
.stat-val.count-pop {
  animation: statPop 0.65s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes statPop {
  0%   { transform: scale(0.4) translateY(20px); opacity: 0; }
  100% { transform: scale(1)   translateY(0);    opacity: 1; }
}

/* ── 23. ARC-EN-CIEL ── */
.bg-rainbow {
  position: fixed;
  bottom: -10vh;
  left: 50%;
  transform: translateX(-50%);
  width: 160vw;
  height: 90vw;
  border-radius: 50%;
  background: transparent;
  border-style: solid;
  border-width: 0;
  box-shadow:
    0 0 0  8px rgba(255, 50,  50, 0.18),
    0 0 0 18px rgba(255,140,   0, 0.15),
    0 0 0 28px rgba(255,230,   0, 0.14),
    0 0 0 38px rgba( 60,200,  60, 0.13),
    0 0 0 48px rgba(  0,140, 255, 0.13),
    0 0 0 58px rgba( 80,  0, 200, 0.11),
    0 0 0 68px rgba(180,  0, 220, 0.09);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: rainbowAppear 55s ease-in-out infinite;
}

@keyframes rainbowAppear {
  0%,  36% { opacity: 0; }
  44%       { opacity: 0.85; }
  56%       { opacity: 0.85; }
  64%       { opacity: 0; }
  100%      { opacity: 0; }
}

/* ── 23. AURORE BORÉALE ── */
.bg-aurora {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 70vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  filter: blur(36px);
  background:
    radial-gradient(ellipse 95% 80% at 10%  0%, rgba(  0,255,120,0.42) 0%, transparent 60%),
    radial-gradient(ellipse 75% 90% at 80%  0%, rgba(140,  0,255,0.32) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 45% 15%, rgba(  0,220,255,0.28) 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 90% 10%, rgba(  0,255,180,0.24) 0%, transparent 50%);
  animation: auroraAppear 48s ease-in-out infinite;
}

.bg-aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 55%  0%, rgba(220,120,255,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 25%  8%, rgba(  0,255,200,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 70% 20%, rgba( 60,255,160,0.18) 0%, transparent 50%);
  animation: auroraDrift 10s ease-in-out infinite alternate;
}

@keyframes auroraAppear {
  0%,  18% { opacity: 0; }
  30%       { opacity: 1; }
  70%       { opacity: 1; }
  82%       { opacity: 0; }
  100%      { opacity: 0; }
}

@keyframes auroraDrift {
  0%   { transform: translateX(-6%) scaleX(1);    }
  100% { transform: translateX( 6%) scaleX(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-rainbow, .bg-aurora { animation: none !important; opacity: 0 !important; }
}

/* ── REDUCED MOTION SUPPORT ── */
@media (prefers-reduced-motion: reduce) {
  .whyus-ico,
  .btn-primary::before,
  .nav-cta::before,
  .leasing-btn::before,
  .b2b-form-btn::before,
  .forfait-band::after {
    animation: none !important;
  }
  .hero-img-wrap {
    transform: none !important;
  }
  .formule-card {
    transition: box-shadow 0.2s !important;
  }
}