/* ============================================================ Districtachat — Responsive storefront À charger APRÈS site.css et quality.css : (dans index.html, juste après quality.css) N'affecte que les petits écrans (media queries max-width). ============================================================ */ /* ============================================================ 1. CONFORT GLOBAL — tablette et en dessous ============================================================ */ @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; max-height: none !important; overflow: visible !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 760px */ .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; } } /* ============================================================ 2. EN-TÊTE, BARRE UTILITAIRE & NAV — tablette / grand mobile ============================================================ */ @media (max-width: 768px){ /* --- On coupe le "sticky" en dessous de 768px --- L'en-tête tient désormais sur 2 à 3 lignes ; le méga-menu, resté collé à top:74px, venait chevaucher le bas de l'en-tête au défilement. En mode statique le problème disparaît et on récupère de la hauteur d'écran. */ .hd { position: static !important; } .nav { position: static !important; top: auto !important; } /* ---------- BARRE UTILITAIRE (contacts + devise) ---------- Le ressort .sep (flex:1) désorganisait la barre une fois repliée : les contacts et le sélecteur de devise se mélangeaient. On le neutralise, on centre les contacts, et la devise passe seule sur sa propre ligne. */ .util { font-size: 12px; } .util .wrap { flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; height: auto; padding-top: 7px; padding-bottom: 7px; } .util .sep { display: none !important; } .util .pill { gap: 6px; } .util .pill .txt { font-size: 12px; } .util .socials { gap: 8px; } .util .cur-box { margin-left: 0 !important; width: 100% !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px; margin-top: 2px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.10); /* sépare nettement de la ligne contacts */ } .util .cur-sel { height: 34px; /* cible tactile confortable */ font-size: 13px; padding: 0 12px; } /* ---------- EN-TÊTE : lignes empilées proprement ---------- */ .hd .wrap { gap: 12px !important; padding-top: 10px; padding-bottom: 10px; } .hd .hd-row-top { gap: 10px; flex-wrap: wrap; } .hd .hd-row-top .hd-right { width: 100%; min-width: 0; margin-left: 0; } /* ---------- BANDEAU DE MODE : plus de débordement ---------- La pilule arrondie (padding:3px + glider absolu) débordait dès que les 4 boutons se repliaient. On la transforme en grille 2×2 de vrais boutons pleine largeur ; le glider animé est masqué et l'état actif est peint directement sur le bouton. */ .modewrap { width: 100%; padding-left: 0 !important; border-left: none !important; } .modeswitch { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; align-items: stretch; } .modeswitch .glider { display: none !important; } .modeswitch button { width: 100%; min-height: 46px; padding: 10px 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); color: var(--indigo); font-size: 13px; line-height: 1.15; white-space: normal; text-align: center; display: flex; align-items: center; justify-content: center; } .modeswitch button.on { background: var(--indigo); color: #fff; border-color: var(--indigo); } .modeswitch.pro button.on { background: var(--karite); border-color: var(--karite); } /* ---------- LIGNE 2 : recherche + actions ---------- */ .hd .hd-row-mid { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .hd .hd-row-mid .search { order: 1; width: 100%; flex: 1 1 100% !important; max-width: none !important; } .hd .hd-row-mid .hd-actions { order: 2; justify-content: flex-end !important; gap: 20px; min-width: 0 !important; } /* ---------- MÉGA-MENU / NAV : défilement horizontal ---------- */ .nav .wrap { height: auto; gap: 2px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 4px; padding-bottom: 4px; } .nav .wrap::-webkit-scrollbar { height: 0; } .nav-item { flex: 0 0 auto; } .nav-item > button { height: 46px; white-space: nowrap; padding: 0 14px; border-bottom-width: 3px; } .nav .promo { display: none; } /* "Livraison rapide" flottant casserait le défilement */ /* ---------- GRILLES & COMPOSANTS ---------- */ .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; } } /* ============================================================ 3. SMARTPHONE ============================================================ */ @media (max-width: 560px){ /* Gouttière latérale resserrée (16px) */ .wrap { padding-left: 16px !important; padding-right: 16px !important; } .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; } /* Bandeau de mode : reste en 2 colonnes (4 boutons = 2×2, propre) */ /* PDP : miniatures qui défilent horizontalement */ .gallery .thumbs { display: flex !important; overflow-x: auto; gap: 8px; } .gallery .thumbs .t { flex: 0 0 64px; } /* Recherche un peu plus haute pour le tactile */ .hd .search input { height: 44px; } /* Titres un peu plus compacts */ h1 { line-height: 1.15; } } /* ============================================================ 4. CIBLES TACTILES CONFORTABLES ============================================================ */ @media (max-width: 768px){ .btn { min-height: 44px; } .iconbtn { padding: 8px 10px; min-height: 44px; justify-content: center; } .util .soc { width: 34px; height: 34px; } }