/* ================================================================
   REPARE-MOI CI — Mobile-Only Stylesheet
   ⚠ RÈGLE ABSOLUE : chaque bloc est dans un @media query.
   Aucun style global — le desktop reste identique à l'original.
   Breakpoints : ≤1024px tablette · ≤768px mobile · ≤480px petit mobile
   ================================================================ */

/* ── Éléments additifs purs (n'existent pas dans style.css) ─ */
.mobile-bottom-nav { display: none; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ================================================================
   TABLETTE ≤ 1024px
   ================================================================ */
@media (max-width: 1024px) {

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1A1A1A;
    z-index: 400;
    max-height: 75vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    border-top: 1px solid #333;
  }

  .nav-menu.open { display: flex; }

  .nav-menu > li > a {
    padding: 14px 20px;
    font-size: 14px;
    border-bottom: 1px solid #2A2A2A;
    min-height: 52px;
    color: #ddd;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .nav-menu > li > a i.fa-chevron-down {
    margin-left: auto;
    transition: transform .2s;
  }

  .nav-menu > li.open > a i.fa-chevron-down {
    transform: rotate(180deg);
  }

  .dropdown {
    display: none;
    position: static;
    box-shadow: none;
    background: #111;
    border-radius: 0;
    padding: 0;
    border-bottom: 1px solid #2A2A2A;
  }

  .nav-menu > li.open > .dropdown { display: block; }

  .dropdown a {
    padding: 12px 28px;
    font-size: 13px;
    color: #aaa;
    border-bottom: 1px solid #1E1E1E;
  }

  .dropdown a:hover { background: #1E1E1E; color: #FF6A00; }

  .search-bar select { display: none; }
  .search-bar input  { border-radius: 8px 0 0 8px; }

  .main-nav .container {
    display: flex;
    align-items: center;
    gap: 12px;
  }

}

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

  /* Topbar */
  .topbar { display: none; }

  /* Header */
  .header-inner  { flex-wrap: wrap; gap: 8px; padding: 8px 0; }
  .logo-link     { flex: 1; }
  .logo-svg      { height: 34px !important; }
  .search-bar    { order: 3; flex: 0 0 100%; width: 100%; }
  .search-bar input { font-size: 16px; flex: 1; }
  .header-actions   { order: 2; flex-shrink: 0; }

  /* Ticker */
  .ti { font-size: 11px; padding: 0 24px; }

  /* Hero */
  .hero-v4       { padding: 20px 0 16px; }
  .hero-inner-v4 { flex-direction: column; gap: 20px; }
  .hero-v4 h1    { font-size: 22px; line-height: 1.25; }
  .hero-ctas-v4  { flex-direction: column; gap: 10px; }
  .hero-cards    { display: none; }

  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 14px;
  }

  /* Promo bar */
  .promo-bar {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 10px 16px;
  }

  /* Avantages */
  .avantages-strip .container { grid-template-columns: 1fr 1fr; }
  .av-bloc  { padding: 12px 10px; }
  .av-ico   { width: 32px; height: 32px; font-size: 14px; }
  .av-title { font-size: 11px; }
  .av-desc  { font-size: 9.5px; }

  /* Sections */
  .home-sec   { padding: 20px 0; }
  .sec-header { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }

  /* Marques */
  .brands-grid-v4 { grid-template-columns: repeat(4, 1fr); gap: 6px; }

  /* Catégories */
  .cats-grid-v4 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cat-top      { height: 72px; }

  /* Deals */
  .deals-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
  }

  /* Produits */
  .prods-grid   { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .prod-img-v4  { height: 100px; }
  .prod-body-v4 { padding: 8px; }
  .p-name       { font-size: 11px; }
  .p-price      { font-size: 14px; }

  .btn-panier   { font-size: 11px; padding: 9px 8px; min-height: 40px; }
  .btn-wa-small { font-size: 10px; padding: 8px; min-height: 36px; }

  /* Tabs marques */
  .btab-v4 { padding: 10px 14px; font-size: 12px; min-height: 44px; display: flex; align-items: center; }

  /* Pourquoi nous */
  .why-grid-v4  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .why-card-v4  { padding: 14px 12px; }
  .why-num      { font-size: 18px; }
  .why-title    { font-size: 11px; }
  .why-desc     { font-size: 9.5px; }

  /* Avis */
  .reviews-grid-v4 { grid-template-columns: 1fr; }

  /* Blog */
  .blog-grid-v4  { grid-template-columns: 1fr; }
  .blog-v4       { display: flex; flex-direction: row; }
  .blog-img-v4   { width: 100px; min-height: 90px; flex-shrink: 0; }
  .blog-title-v4 { font-size: 12px; }
  .blog-excerpt-v4 { display: none; }

  /* Compte */
  .compte-wrap    { grid-template-columns: 1fr !important; gap: 12px; }
  .compte-sidebar { position: static !important; }
  .compte-card-body { padding: 14px; }
  .stat-row       { grid-template-columns: 1fr 1fr !important; }
  .form-row       { grid-template-columns: 1fr !important; }
  .commande-row   { flex-wrap: wrap; gap: 8px; }

  .compte-nav {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid #F3F4F6;
  }

  .compte-nav::-webkit-scrollbar { display: none; }

  .compte-nav a {
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    font-size: 10.5px;
    text-align: center;
    border-bottom: none;
    border-right: 1px solid #F3F4F6;
    min-width: 70px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .compte-nav a i       { width: auto; font-size: 16px; }
  .compte-nav a.active  { border-left: none; border-bottom: 2px solid #FF6A00; }

  /* WhatsApp FAB — au-dessus bottom nav */
  .wa-fab { bottom: 72px; right: 14px; width: 52px; height: 52px; font-size: 24px; }

  /* Inputs — évite zoom iOS */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  select, textarea {
    font-size: 16px !important;
  }

  /* Bottom navigation */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #E5E7EB;
    z-index: 500;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  }

  .mobile-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    font-size: 10px;
    font-weight: 600;
    color: #9CA3AF;
    text-decoration: none;
    min-height: 56px;
  }

  .mobile-bottom-nav a.active,
  .mobile-bottom-nav a:hover { color: #FF6A00; }
  .mobile-bottom-nav a i     { font-size: 18px; }
  .mobile-bottom-nav a.wa-btn{ color: #25D366; }

  /* Espace page pour bottom nav */
  body { padding-bottom: 56px; }

  /* Utilitaire */
  .hide-mobile { display: none !important; }

}

/* ================================================================
   PETIT MOBILE ≤ 480px
   ================================================================ */
@media (max-width: 480px) {

  .hero-v4 h1 { font-size: 19px; }

  .avantages-strip .container { grid-template-columns: 1fr; }
  .av-bloc            { border-right: none !important; border-bottom: 1px solid #EBEBEB; }
  .av-bloc:last-child { border-bottom: none; }

  .brands-grid-v4  { grid-template-columns: repeat(3, 1fr); }
  .cats-grid-v4    { grid-template-columns: repeat(2, 1fr); }

  .blog-v4         { flex-direction: column; }
  .blog-img-v4     { width: 100%; height: 80px; }
  .blog-excerpt-v4 { display: block; }

  .prod-img-v4 { height: 90px; }
  .p-name      { font-size: 10.5px; }
  .p-price     { font-size: 13px; }

}

/* ================================================================
   DESKTOP ≥ 769px — Masquer éléments mobile uniquement
   ================================================================ */
@media (min-width: 769px) {
  .mobile-bottom-nav { display: none !important; }
  .show-mobile-only  { display: none !important; }
  .nav-toggle        { display: none !important; }
}