/* ============================================================
   MY VTC GO — glass-overlay.css
   Effet glassmorphism sur les blocs de contenu
   
   RÈGLE : backdrop-filter UNIQUEMENT sur petits éléments fixes
   (topbar, cards, city-bar). JAMAIS sur les sections entières
   car cela crée un stacking context qui piège position:fixed.
   ============================================================ */

:root {
  --gl-bg:        rgba(10, 10, 16, 0.82);
  --gl-bg-card:   rgba(12, 12, 20, 0.78);
  --gl-border:    rgba(255, 255, 255, 0.13);
  --gl-border-hi: rgba(255, 255, 255, 0.22);
  --gl-radius:    18px;
  --gl-shadow:    0 8px 40px rgba(0, 0, 0, 0.55);
}

/* ===== TOPBAR ===== */
.hero-topbar {
  background: rgba(8, 8, 14, 0.92) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  border-bottom: 1px solid var(--gl-border) !important;
}

/* ===== HERO CONTENT ===== */
.hero-content {
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
  padding: 40px 36px 36px !important;
}

/* ===== HERO INNER (alternative pages) ===== */
.hero-inner {
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
  padding: 48px 40px;
}

/* ===== TRUST BAR HERO ===== */
.hero-trust-bar {
  background: rgba(10, 10, 16, 0.75);
  border: 1px solid var(--gl-border);
}

/* ===== SECTIONS — fond sombre SANS backdrop-filter ===== */
.about-section > .container,
.services-section > .container,
.tarifs-section > .container,
.vehicle-section > .container,
.destinations-section > .container,
.zone-section > .container,
.faq-section > .container,
.contact-section > .container,
.avis-section > .container,
.seo-cities > .container,
.reservation-section > .container,
.frontalier-section > .container,
.seo-text-block > .container,
.section > .container,
.section--alt > .container,
.bienveillance-intro-section > .container,
.bienveillance-etab-section > .container,
.touch-section > .container,
.city-section > .container,
.cta-section > .container,
/* Pages ville EN/DE/LU/PT — sections sans class="section" */
section#intro > .container,
section#routes > .container,
section#lieux > .container,
section#clients > .container,
section#zones > .container,
section#vehicle > .container,
section#faq > .container,
section#cities > .container {
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
  padding-top: 48px;
  padding-bottom: 48px;
}

/* ===== CARDS ===== */
.glass-card, .service-card, .tarif-card, .avis-card,
.feature-item, .zone-card, .dest-card, .contact-method,
.cta-page-link, .faq-item, .city-content, .bv-card,
.why-card, .feature-card, .summary-card, .route-item {
  background: var(--gl-bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.glass-card:hover, .service-card:hover, .tarif-card:hover,
.avis-card:hover, .dest-card:hover, .contact-method:hover,
.cta-page-link:hover, .zone-card:hover, .feature-card:hover,
.why-card:hover {
  background: rgba(20, 20, 30, 0.85);
  border-color: var(--gl-border-hi);
}

/* ===== FORMULAIRE ===== */
.reservation-form-block {
  background: rgba(8, 8, 14, 0.90);
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow);
}

/* ===== FOOTER ===== */
.site-footer {
  background: rgba(6, 6, 10, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 1px solid var(--gl-border) !important;
}

/* ===== CITY BAR — toujours fixe en bas ===== */
.city-bar {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  z-index: 999 !important;
  background: rgba(8, 8, 14, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 1px solid var(--gl-border) !important;
}

/* ===== QUICK NAV ===== */
.qnav-bar {
  background: rgba(10, 10, 16, 0.82);
  border: 1px solid var(--gl-border);
}

/* ===== TRUST BAR FOOTER ===== */
.footer-trust-bar {
  padding: 16px 48px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  max-width: 1180px;
  margin: 0 auto;
}
.footer-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
}
.footer-trust-item svg { stroke: rgba(192,192,192,0.7); flex-shrink: 0; }
.footer-trust-sep { color: rgba(255,255,255,0.25); font-size: 14px; }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .hero-content {
    padding: 28px 18px 24px !important;
    border-radius: 14px;
  }
  .hero-inner { padding: 28px 18px; border-radius: 14px; }
  .about-section > .container, .services-section > .container,
  .tarifs-section > .container, .vehicle-section > .container,
  .destinations-section > .container, .zone-section > .container,
  .faq-section > .container, .contact-section > .container,
  .avis-section > .container, .seo-cities > .container,
  .reservation-section > .container, .frontalier-section > .container,
  .seo-text-block > .container, .section > .container,
  .section--alt > .container, .bienveillance-intro-section > .container,
  .bienveillance-etab-section > .container, .touch-section > .container,
  .city-section > .container, .cta-section > .container {
    border-radius: 12px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .footer-trust-bar { padding: 14px 16px; }
  .footer-trust-inner { gap: 5px 12px; }
  .footer-trust-item { font-size: 11px; }
}