/* =============================================
   MODERNA — mobile-fixes.css
   Corrections responsive mobile uniquement
   NE PAS modifier — s'applique UNIQUEMENT
   sur écrans < 768px
   ============================================= */

@media (max-width: 768px) {

  /* ── FIX PRINCIPAL : bande blanche à droite ── */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* ── TOPBAR ── */
  .topbar {
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 7px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── NAVBAR ── */
  nav {
    width: 100%;
    max-width: 100vw;
  }

  .nav-top {
    padding: 0 4%;
    height: 54px;
  }

  /* Cacher la recherche desktop sur mobile */
  .nav-search {
    display: none;
  }

  /* Logo centré et plus compact */
  .nav-logo-name {
    font-size: 20px;
    letter-spacing: 6px;
  }

  .nav-logo-sub {
    font-size: 8px;
    letter-spacing: 2px;
  }

  /* Actions nav plus serrées */
  .nav-actions {
    width: auto;
    gap: 12px;
  }

  /* Cacher le menu desktop sur mobile */
  .nav-menu {
    display: none !important;
  }

  /* Empêcher la nav de déborder */
  nav, nav * {
    max-width: 100vw;
  }

  .dropdown {
    display: none !important;
  }

  /* ── HERO ── */
  .hero {
    height: 80vh;
    min-height: 500px;
  }

  .slide-content {
    left: 5%;
    right: 5%;
    max-width: 100%;
    bottom: 10%;
  }

  .slide-content h1 {
    font-size: clamp(36px, 10vw, 56px);
    margin-bottom: 14px;
  }

  .slide-content p {
    font-size: 14px;
    max-width: 100%;
    margin-bottom: 24px;
  }

  .slide-tag {
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 14px;
  }

  .hero-label {
    display: none;
  }

  /* ── MARQUEE ── */
  .marquee-band {
    padding: 9px 0;
  }

  /* ── CATEGORIES GRID ── */
  .categories-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cat-info h3 {
    font-size: 20px;
    letter-spacing: 2px;
  }

  /* ── PRODUITS ── */
  .products-section {
    padding: 0 3% 60px;
  }

  .products-filter {
    gap: 6px;
    margin-bottom: 32px;
    padding: 0 2%;
  }

  .filter-btn {
    font-size: 10px;
    padding: 8px 14px;
    letter-spacing: 1px;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .product-name {
    font-size: 15px;
  }

  .product-info-top {
    padding: 10px 10px 8px;
  }

  .product-price-block {
    padding: 8px 10px;
  }

  /* ── SECTION MARQUE ── */
  .brand-section {
    grid-template-columns: 1fr;
  }

  .brand-img {
    min-height: 320px;
  }

  .brand-text {
    padding: 40px 24px;
  }

  .brand-desc {
    max-width: 100%;
  }

  /* ── VIDEO SECTION ── */
  .video-section {
    height: 50vh;
  }

  .video-overlay h2 {
    font-size: clamp(26px, 7vw, 40px);
    margin-bottom: 16px;
  }

  /* ── SECTION HEADER ── */
  .section-header {
    padding: 52px 5% 32px;
  }

  /* ── SERVICES ── */
  .services-band {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 48px 5%;
  }

  /* ── NEWSLETTER ── */
  .newsletter-section {
    padding: 52px 5%;
  }

  .newsletter-form {
    flex-direction: column;
    gap: 0;
  }

  .newsletter-form input {
    border-right: 1px solid var(--light);
    border-bottom: none;
  }

  .newsletter-form button {
    padding: 14px;
    width: 100%;
  }

  /* ── FOOTER ── */
  footer {
    padding: 52px 5% 28px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 36px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .footer-legal {
    gap: 14px;
    flex-wrap: wrap;
  }

  /* ── CART SIDEBAR ── */
  .cart-sidebar {
    width: 100vw;
    right: -100vw;
  }

  /* ── MODAL PRODUIT ── */
  .modal-box {
    max-height: 95vh;
    margin: 0;
    border-radius: 0;
  }

  .modal-grid {
    grid-template-columns: 1fr;
  }

  .modal-info {
    padding: 24px 20px;
    border-left: none;
    border-top: 1px solid var(--light);
  }

  .modal-main-img-wrap img {
    height: 320px;
  }

  /* ── CATALOGUE ── */
  .catalogue-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .filter-bar {
    top: 54px;
    padding: 0 3%;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .count-label {
    display: none;
  }

  /* ── TOAST ── */
  #toastContainer {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }

  .toast {
    text-align: center;
  }

  /* ── SCROLL TOP ── */
  .scroll-top {
    bottom: 20px;
    left: 16px;
    width: 38px;
    height: 38px;
  }
}

/* Très petits écrans (< 380px) */
@media (max-width: 380px) {
  .nav-logo-name {
    font-size: 17px;
    letter-spacing: 4px;
  }

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

  .product-name {
    font-size: 13px;
  }

  .categories-grid {
    grid-template-columns: 1fr;
  }
}