/* ═══════════════════════════════════════════════════════════
   VALORYS — Responsive Design Fixes
   Corrections globales du design responsive (mobile/tablette/desktop)
   ═══════════════════════════════════════════════════════════ */

/* ── Garde-fou global : pas de scroll horizontal ── */
html, body {
  overflow-x: hidden;
}

/* Médias responsives sans casser les layouts flex/grid */
img, video, iframe {
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   HEADER & NAVIGATION
   - Desktop ≥ 900px : nav-pill visible, hamburger caché
   - Mobile  < 900px : nav-pill cachée,  hamburger visible
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  .hamburger { display: none !important; }
  .nav-pill  { display: flex !important; }
}

@media (max-width: 900px) {
  .hamburger { display: flex !important; }
  .nav-pill  { display: none !important; }
  .user-section #logged-out-btns,
  .user-section #logged-in-info {
    display: none !important;   /* le menu mobile prend le relais */
  }
  .site-header {
    padding: 0 16px !important;
    height: 60px !important;
    gap: 8px;
  }
  .header-status, #goldTicker {
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   CONTAINERS — pas de débordement horizontal
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  body, main, section, article, header, footer, .container, .wrapper {
    max-width: 100%;
    box-sizing: border-box;
  }
  section { padding-left: 16px !important; padding-right: 16px !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Sélecteurs forts pour battre les styles inline des pages */
  h1, .hero__copy h1, h1.chromatic-text, .hero h1, .section__title {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    line-height: 1.2 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  h2, .section__title, h2.chromatic-text {
    font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    line-height: 1.25 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important; }
  p, li { font-size: 14px !important; line-height: 1.6 !important; }

  /* Tableaux scrollables horizontalement (au lieu de déborder) */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ═══════════════════════════════════════════════════════════
   COOKIE CONSENT — boutons empilés sur mobile
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .cookie-banner__card {
    margin: 0 12px 12px !important;
    padding: 18px 16px 16px !important;
    border-radius: 16px !important;
  }
  .cookie-banner__title { font-size: 1rem !important; }
  .cookie-banner__text  { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 14px !important; }
  .cookie-banner__actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .cookie-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — colonnes empilées sur mobile/tablette
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 24px !important;
    padding: 0 24px !important;
  }
  .footer-col[style*="text-align: right"] { text-align: center !important; }
  .newsletter-box {
    margin: 0 auto !important;
    max-width: 320px !important;
  }
  .social-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   GRILLES & CARTES — empilées sur mobile
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .why-grid-container,
  .start-grid,
  .pillar-grid,
  .features-grid,
  .stat-grid,
  .niveau-grid,
  .faq-side-grid,
  .comparison-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pioneer-banner__promises {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .pioneer-promise { max-width: 100% !important; flex: 1 1 auto !important; }
}

/* ═══════════════════════════════════════════════════════════
   BOUTONS HÉROS / CTA — pleine largeur sur mobile
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .hero-cta-row,
  .cta-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .hero-cta-row > a,
  .hero-cta-row > button,
  .valorys-double-btn,
  .hero-cta-secondary,
  .pioneer-banner__cta {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   IFRAME CHATBOT (sidebar)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #chatSidebar {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   IMAGES & SVG — responsive par défaut
   ═══════════════════════════════════════════════════════════ */

img:not([width]):not([height]) {
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   FORMULAIRES — inputs full-width sur mobile
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], textarea, select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important; /* évite le zoom auto iOS */
  }
}

/* ═══════════════════════════════════════════════════════════
   HAMBURGER MENU — CORRECTIFS UNIFIES MOBILE
   Fix conflits styles.css vs theme-unified.css + z-index
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    gap: 5px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(0,255,163,0.3) !important;
    border-radius: 8px !important;
    z-index: 1102 !important;
    position: relative !important;
    cursor: pointer !important;
  }
  .hamburger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    margin: 0 !important;
    transition: transform .3s ease, opacity .3s ease, background .3s ease !important;
  }
  .hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
    background: #00ffa3 !important;
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
    background: #00ffa3 !important;
  }
  .mobile-nav-overlay { z-index: 1100 !important; }
  .site-header { z-index: 1050 !important; }
}

/* Mode clair : barres visibles */
html[data-theme="light"] .hamburger {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,180,120,0.4) !important;
}
html[data-theme="light"] .hamburger span {
  background: #0b1d16 !important;
}
html[data-theme="light"] .hamburger.active span:nth-child(1),
html[data-theme="light"] .hamburger.active span:nth-child(3) {
  background: #00b478 !important;
}