/* ==========================================================================
   Electro Taofik — Optimisations mobiles (chargé EN DERNIER, surcharge tout)
   ========================================================================== */

* { -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: hidden; }
body { font-size: 14px; }
img { max-width: 100%; }

/* ==========================================================================
   ≤ 900px (tablette / petit écran)
   ========================================================================== */
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr !important; gap: 18px !important; }
  .auth-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .hero-slideshow { min-height: 540px; }
}

/* ==========================================================================
   ≤ 768px (mobile)
   ========================================================================== */
@media (max-width: 768px) {

  /* ---- En-tête ---- */
  .header-main { gap: 10px; padding: 10px 0; flex-wrap: wrap; }
  .logo-img { width: 38px; height: 38px; }
  .logo-text { font-size: 16px; }
  .logo-text small { font-size: 9px; }
  .header-actions { gap: 8px; }
  .header-actions .btn-ghost { display: none; }
  .cart-btn { padding: 9px 13px; font-size: 13px; }
  .cart-count { min-width: 20px; height: 20px; font-size: 11px; }
  .nav-toggle { width: 40px; height: 40px; }

  /* Barre supérieure */
  .topbar { font-size: 12px; }
  .topbar-in { padding: 6px 0; justify-content: center; gap: 6px; }
  .topbar-left span:first-child { display: none; }

  /* Navigation mobile : cadres empilés, scrollables si besoin */
  .main-nav .container { flex-direction: column; padding: 8px 0; gap: 6px; }
  .main-nav a { padding: 12px 16px; font-size: 14px; border-radius: 10px; text-align: left; }
  .main-nav { max-height: 70vh; overflow-y: auto; }

  /* Bandeau revendeur */
  .reseller-banner { font-size: 12px; line-height: 1.55; }

  /* ---- Hero diaporama ---- */
  .hero-slideshow { min-height: 470px; }
  .hero-inner { padding: 40px 0; }
  .hero-title { font-size: clamp(24px, 7.2vw, 34px); letter-spacing: -.5px; line-height: 1.15; }
  .hero-sub { font-size: 14px; line-height: 1.55; }
  .hero-kicker { font-size: 11px; padding: 6px 13px; }
  .hero-cta { flex-direction: column; gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-badges { gap: 14px; margin-top: 22px; }
  .hero-badge { font-size: 12px; }
  .hero-badge .ico { width: 36px; height: 36px; font-size: 17px; }

  /* ---- Sections ---- */
  .section { padding: 38px 0; }
  .section-head { margin-bottom: 20px; }
  .section-title { font-size: 22px; }
  .section-sub { font-size: 13.5px; }
  .link-more { font-size: 13px; }

  /* ---- Produits ---- */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product-body { padding: 11px 12px 14px; }
  .product-name { font-size: 13px; min-height: 36px; }
  .product-desc { display: none; }
  .price-now { font-size: 16px; }
  .price-old { font-size: 12px; }
  .product-actions .btn { padding: 10px 8px; font-size: 13px; min-height: 42px; }
  .stock-line { font-size: 11px; }
  .badge { font-size: 10px; padding: 3px 9px; }
  .product-img { padding: 10px; }

  /* ---- Carrousel ---- */
  .carousel-card { flex: 0 0 74%; min-width: 0; }
  .car-arrow { width: 40px; height: 40px; }

  /* ---- Bandeau promo ---- */
  .promo-banner { padding: 22px 18px; border-radius: 16px; text-align: center; justify-content: center; }
  .promo-banner h3 { font-size: 19px; }
  .promo-banner p { font-size: 13px; }
  .promo-banner .btn { width: 100%; justify-content: center; }

  /* ---- Pourquoi nous ---- */
  .features { grid-template-columns: 1fr 1fr; gap: 10px; }
  .feature { padding: 18px 14px; }
  .feature-ico { width: 42px; height: 42px; }
  .feature-ico svg { width: 21px; height: 21px; }

  /* ---- En-tête de page interne ---- */
  .page-hero { padding: 26px 0; }
  .page-hero h1 { font-size: 23px; }
  .breadcrumb { font-size: 12px; }

  /* ---- Filtres catalogue ---- */
  .filters { padding: 10px 12px; gap: 8px; }
  .filter-select { min-width: 120px; }
  .filter-select select, .filter-select input { padding: 9px 12px; font-size: 13px; }

  /* ---- Panier / commande ---- */
  .cart-table { font-size: 13px; }
  .cart-table th, .cart-table td { padding: 10px 8px; }
  .cart-item img { width: 46px; height: 46px; }
  .cart-item .nm { font-size: 12.5px; }
  .qty-stepper button { width: 32px; height: 32px; font-size: 15px; }
  .qty-stepper input { width: 38px; font-size: 13px; }
  .cart-summary { padding: 18px; position: static; }

  /* ---- Formulaires / cartes ---- */
  .card { padding: 18px 16px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-input { font-size: 16px; padding: 11px 13px; }
  .btn { min-height: 44px; }

  /* ---- Connexion ---- */
  .auth-wrap { padding: 26px 0; }
  .auth-card { padding: 24px 18px; }
  .auth-card h1 { font-size: 20px; }

  /* ---- Pied de page ---- */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; padding: 36px 0 26px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 6px; }

  /* ---- Tableau de bord revendeur ---- */
  .dash-head { flex-direction: column; align-items: stretch; }
  .dash-head .btn { justify-content: center; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card .value { font-size: 20px; }
  .stat-card .value small { font-size: 12px; }

  /* ---- Facture ---- */
  .invoice { padding: 20px 16px; border-radius: 12px; }
  .invoice-top { flex-direction: column; gap: 14px; }
  .invoice-doc { text-align: left; }
  .invoice-doc h2 { font-size: 22px; }
  .invoice-brand img { width: 52px; height: 52px; }
  .invoice-brand .nm { font-size: 19px; }
  .invoice-client { grid-template-columns: 1fr; }
  .invoice-table { font-size: 12px; }
  .invoice-table th, .invoice-table td { padding: 9px 8px; }
  .invoice-total { justify-content: stretch; }
  .invoice-total-box { width: 100%; }

  /* ---- Back-office ---- */
  .admin-topbar { padding: 12px 16px; }
  .admin-topbar h1 { font-size: 16px; }
  .admin-content { padding: 16px 14px 60px; }
  .admin-user { font-size: 12px; padding: 6px 10px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .actions { width: 100%; flex-wrap: wrap; }
  .toolbar .actions .btn { flex: 1; justify-content: center; }
  .kpi { padding: 14px; }
  .kpi .kpi-ico { width: 40px; height: 40px; font-size: 20px; }
  .kpi .value { font-size: 19px; }
  .alert-strip { flex-direction: column; }
  .alert-card { padding: 14px 16px; }
  .table { font-size: 13px; }
  .table-wrap { border-radius: 12px; }
  .admin-form { padding: 18px 16px; }
  .pay-progress-labels { font-size: 12px; }

  /* ---- Bouton WhatsApp flottant ---- */
  .wa-float { width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .wa-float svg { width: 29px; height: 29px; }
}

/* ==========================================================================
   ≤ 400px (très petits écrans)
   ========================================================================== */
@media (max-width: 400px) {
  .products-grid { gap: 8px; }
  .price-now { font-size: 15px; }
  .carousel-card { flex: 0 0 84%; }
  .features { grid-template-columns: 1fr; }
  .hero-slideshow { min-height: 430px; }
  .hero-badge .ico { width: 32px; height: 32px; font-size: 15px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { padding: 14px; }
}