/* ==========================================================================
   SIL3A 3D — Responsive media queries (mobile-first overrides)
   Breakpoints :
     - tablet  ≤ 1024px
     - mobile  ≤ 768px
     - small   ≤ 480px
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --header-h: 72px; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-visual { max-width: 520px; margin-inline: auto; aspect-ratio: 4/3; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-head { grid-template-columns: 220px 1fr; }
  .form-wrap { grid-template-columns: 1fr; }

  /* Switch nav to hamburger early — 8 menu items don't fit horizontally
     below ~1100px alongside brand + CTA. */
  .nav-list {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: rgba(10,10,10,0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-direction: column;
    gap: 0;
    padding: 1rem 1.5rem 2rem;
    border-bottom: 1px solid var(--gray-border);
    transform: translateY(-110%);
    transition: transform var(--t);
    /* sans z-index, le contenu de la page se peignait par-dessus le menu */
    z-index: 99;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav-list.open { transform: translateY(0); }
  .nav-list a {
    width: 100%;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 1rem;
    /* le panneau est noir : la couleur de texte du thème clair y était illisible.
       theme-tech.css force « .site-header a { color:#0F172A !important } » : il
       faut une spécificité supérieure ET !important pour reprendre la main. */
    color: #F4F0E8;
  }
  .site-header .nav-list a { color: #F4F0E8 !important; }
  .site-header .nav-list a:hover,
  .site-header .nav-list a:focus-visible,
  .site-header .nav-list a.active { color: #FFFFFF !important; }
  /* voile derrière le menu ouvert : la page cesse de distraire et un appui
     à côté referme naturellement */
  body.nav-ouvert::after {
    content: "";
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(0,0,0,.55);
    z-index: 98;
  }
  .nav-list a.active::after,
  .nav-list a:hover::after { display: none; }
  .nav-toggle { display: block; }
}

@media (max-width: 768px) {
  .header-cta .btn { display: none; }

  .section { padding: 3.5rem 0; }
  .hero { min-height: auto; padding: 3rem 0 4rem; }
  .hero-cta .btn { flex: 1; min-width: 160px; justify-content: center; }

  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 1.4rem 1rem; }

  .product-head { grid-template-columns: 1fr; }
  .product-media { aspect-ratio: 16/10; }
  .product-info { padding: 1.5rem; }
  .price-table-wrap { padding: 0 1rem 1.5rem; }
  .price-note { padding-inline: 1rem; }

  .cta-bar { flex-direction: column; align-items: flex-start; text-align: left; padding: 2rem 1.5rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

  .gallery { grid-template-columns: repeat(2, 1fr); gap: .8rem; }

  .float-actions { right: .8rem; bottom: .8rem; }
  .float-btn { width: 50px; height: 50px; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr; }
  form .row { grid-template-columns: 1fr; }
  .btn { padding: .8rem 1.3rem; font-size: .85rem; }
  .gallery-filters { gap: .4rem; }
  .filter-btn { padding: .45rem .85rem; font-size: .72rem; }
}

@media (min-width: 1280px) {
  h1 { font-size: 4rem; }
}