/* ============================================================
   District Achat — Responsive storefront
   À charger APRÈS site.css et quality.css :
     <link rel="stylesheet" href="/assets/responsive.css">
   (dans index.html, juste après quality.css)
   N'affecte que les petits écrans (media queries max-width).
   ============================================================ */

/* Confort global mobile : images fluides, pas de débordement horizontal */
@media (max-width: 1024px){
  html, body { overflow-x: hidden; }
  img { max-width: 100%; height: auto; }

  /* Hero : texte + visuel l'un sous l'autre */
  .hero .wrap { grid-template-columns: 1fr !important; gap: 22px !important; padding-top: 28px !important; padding-bottom: 32px !important; }
  .hero h1 { font-size: 34px !important; }

  /* Catalogue : filtres au-dessus, produits en dessous */
  .catlayout { grid-template-columns: 1fr !important; }
  .facets { position: static !important; width: 100% !important; display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .facets > div[style*="margin-top"] { grid-column: 1 / -1; }

  /* Univers : 2 colonnes */
  .univers { grid-template-columns: repeat(2, 1fr) !important; }

  /* Bandeau valeurs : 2 colonnes */
  .valstrip .wrap { grid-template-columns: repeat(2, 1fr) !important; }

  /* Méga-menu : largeur écran au lieu de 1010px */
  .nav .mega { width: calc(100vw - 24px) !important; left: 12px !important;
               grid-template-columns: 1fr 1fr !important; }
  .nav .mega .feat { grid-column: auto !important; }

  /* Fiche produit : galerie puis infos */
  .pdp-grid { grid-template-columns: 1fr !important; }

  /* Tableau de bord pro : une colonne */
  .dashgrid { grid-template-columns: 1fr !important; }
  .dash .head { flex-direction: column !important; align-items: flex-start !important; gap: 12px; }

  /* Pied de page : colonnes empilées 2 par 2 */
  .ft .cols { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; }
}

/* ---- Tablette / grand mobile ---- */
@media (max-width: 768px){
  /* En-tête : logo + recherche + actions sur plusieurs lignes */
  .hd .wrap { flex-wrap: wrap !important; height: auto !important; gap: 12px !important; padding-top: 10px; padding-bottom: 10px; }
  .hd .search { order: 3; flex: 1 1 100% !important; max-width: none !important; }
  .hd-actions { margin-left: auto; gap: 4px !important; }
  .modewrap { padding-left: 0 !important; border-left: none !important; }
  .modeswitch { flex-wrap: wrap; gap: 6px; }

  /* Barre utilitaire : compacte, éléments qui reviennent à la ligne */
  .util .wrap { flex-wrap: wrap; gap: 8px 14px; height: auto; padding-top: 6px; padding-bottom: 6px; }
  .util .sep { display: none; }
  .util .hide { display: none; }

  /* Grille produits : 2 colonnes */
  .pgrid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Panier : tiroir pleine largeur */
  .drawer { width: 100% !important; max-width: 420px; }

  /* Modales : quasi plein écran, défilables */
  .auth-modal, .modal { width: 94vw !important; max-width: 560px !important;
                        max-height: 90vh !important; overflow: auto !important; }

  /* Barre d'outils catalogue : passe à la ligne */
  .toolbar { flex-direction: column !important; align-items: stretch !important; gap: 10px; }
  .toolbar .sortsel { justify-content: flex-end; }

  /* En-tête de section : titre au-dessus du lien */
  .section-head { flex-direction: column !important; align-items: flex-start !important; gap: 10px; }
}

/* ---- Smartphone ---- */
@media (max-width: 560px){
  .hero h1 { font-size: 28px !important; }
  .univers { grid-template-columns: 1fr !important; }
  .valstrip .wrap { grid-template-columns: 1fr !important; }
  .facets { grid-template-columns: 1fr !important; }
  .nav .mega { grid-template-columns: 1fr !important; }
  .ft .cols { grid-template-columns: 1fr !important; }

  /* Grille produits : 1 colonne large, lisible */
  .pgrid { grid-template-columns: 1fr !important; }

  /* PDP : miniatures qui défilent horizontalement */
  .gallery .thumbs { display: flex !important; overflow-x: auto; gap: 8px; }
  .gallery .thumbs .t { flex: 0 0 64px; }

  /* Devise / interrupteur : pleine largeur */
  .hd .search input { height: 42px; }
  .modeswitch { width: 100%; justify-content: space-between; }

  /* Titres un peu plus compacts */
  h1 { line-height: 1.15; }
}

/* Zone tactile confortable pour les boutons sur mobile */
@media (max-width: 768px){
  .btn { min-height: 42px; }
  .iconbtn { padding: 8px 10px; }
}