/* ════════════════════════════════════════════════════════
   DC — MOBILE.CSS
   Responsive fixes universels — iPhone & Android
   Breakpoints : 768px (tablette) · 480px (mobile L) · 390px (mobile S)
════════════════════════════════════════════════════════ */

/* ── RESET GLOBAL ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* ── HAMBURGER BUTTON ───────────────────────────────── */
.dc-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 1001;
}
.dc-hamburger span {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.7);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
  transform-origin: center;
}
.dc-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.dc-hamburger.open span:nth-child(2) { opacity: 0; }
.dc-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── MOBILE NAV OVERLAY ─────────────────────────────── */
.dc-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: 60px;
  z-index: 998;
  background: rgba(6,6,6,0.98);
  backdrop-filter: blur(12px);
  flex-direction: column;
  padding: 32px 24px;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto;
}
.dc-nav-overlay.open { display: flex; }
.dc-nav-overlay a,
.dc-nav-overlay button {
  display: block;
  padding: 18px 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: 'Tajawal', sans-serif;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
  width: 100%;
}
.dc-nav-overlay a:hover,
.dc-nav-overlay button:hover { color: #f5f5f0; }
.dc-nav-overlay .nav-cta-mobile {
  margin-top: 20px;
  background: #f5f5f0;
  color: #080808 !important;
  border-radius: 2px;
  padding: 15px !important;
  text-align: center !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px !important;
  border: none !important;
}

/* ════════════════════════════════════════════════════════
   TABLETTE ≤ 768px
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* NAV universelle */
  .nav .nav-right,
  .nav .nav-chapters,
  nav .nav-right,
  nav .nav-actions { display: none !important; }

  .dc-hamburger { display: flex !important; }

  .nav,
  nav.nav { height: 60px !important; padding: 0 20px !important; }

  /* Dash nav */
  .dash-nav { padding: 0 20px !important; }
  .dash-nav .dash-nav-right { gap: 10px !important; }
  .dash-nav .dash-signout { font-size: 11px !important; }

  /* Page padding */
  .page,
  .container,
  .dash-container { padding-left: 20px !important; padding-right: 20px !important; }

  /* Auth pages */
  .auth-wrap { padding: 20px 16px !important; }
  .auth-card { padding: 28px 20px !important; }

  /* Hero sections — reduce top padding */
  .hero,
  [class*="hero-"] { padding-top: 100px !important; }

  /* Grilles 4 colonnes → 2 */
  .listings-grid,
  .related-grid,
  .proj-grid,
  .deals-grid,
  .stats,
  .stats-strip { grid-template-columns: repeat(2,1fr) !important; }

  /* Tables → scroll horizontal */
  .table-wrap,
  .listings-table,
  table { overflow-x: auto !important; display: block !important; width: 100% !important; }

  /* Formulaires double colonne → simple */
  .form-row,
  .sf-row { grid-template-columns: 1fr !important; gap: 12px !important; }

}

/* ════════════════════════════════════════════════════════
   MOBILE L ≤ 480px
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Typo — titres */
  h1, .hero-title,
  .page-title,
  .auth-title,
  .sec-title { font-size: clamp(28px, 8vw, 44px) !important; }

  h2 { font-size: clamp(24px, 7vw, 36px) !important; }

  /* Grilles → 1 colonne */
  .listings-grid,
  .related-grid,
  .proj-grid,
  .deals-grid,
  .stats,
  .benefits,
  .cat-grid,
  .journey-grid,
  .stats-strip { grid-template-columns: 1fr !important; }

  /* Sections padding */
  section,
  .section { padding-left: 20px !important; padding-right: 20px !important; }

  /* Cards full width */
  .card,
  .proj-card,
  .deal-card,
  .listing-card { width: 100% !important; }

  /* Formulaires */
  .form-section,
  .form-wrap,
  .sourcing-form,
  #sfFormWrap { padding: 24px 18px !important; }

  .form-field input,
  .form-field select,
  .form-field textarea,
  .sf-field input,
  .sf-field select,
  .sf-field textarea { font-size: 16px !important; /* prevent iOS zoom */ }

  /* Buttons pleine largeur */
  .auth-btn,
  .btn-primary { width: 100% !important; text-align: center !important; }

  /* Nav overlay top */
  .dc-nav-overlay { top: 60px !important; }

  /* Stats strips → 2 colonnes mini */
  .stats { grid-template-columns: 1fr 1fr !important; }

  /* Steps indicator (seller-register) */
  .steps { flex-wrap: wrap !important; gap: 10px !important; }
  .step-divider { display: none !important; }
  .step { font-size: 11px !important; }

  /* Listing grid sidebar → stack */
  .listing-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Gallery sticky → static on mobile */
  .gallery { position: static !important; top: auto !important; }

  /* Photo grid → 3 colonnes */
  .photo-grid { grid-template-columns: repeat(3,1fr) !important; }

  /* Sidebar card margin */
  .sidebar-card { padding: 20px 16px !important; }

  /* Filter tabs → wrap */
  .filter-tabs,
  .sec-filters { flex-wrap: wrap !important; gap: 6px !important; }
  .filter-tab,
  .filter-btn { font-size: 11px !important; padding: 7px 12px !important; }

  /* Breadcrumb */
  .breadcrumb { padding: 14px 20px !important; font-size: 11px !important; }

  /* Changelog timeline */
  .changelog-item,
  [class*="changelog"] { flex-direction: column !important; gap: 6px !important; }

  /* Board / classement */
  .board-row { grid-template-columns: 36px 1fr 60px !important; }
  .board-count-label { display: none !important; }
}

/* ════════════════════════════════════════════════════════
   MOBILE S ≤ 390px (iPhone 12/13/14/15 · Samsung S21+)
════════════════════════════════════════════════════════ */
@media (max-width: 390px) {

  /* Typo encore réduite */
  h1, .hero-title, .page-title { font-size: 28px !important; line-height: 1.1 !important; }
  h2, .sec-title, .listing-title { font-size: 24px !important; }
  .listing-price { font-size: 32px !important; }

  /* Nav + page padding minimal */
  .nav, nav.nav { padding: 0 16px !important; }
  .page, .container, .dash-container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Formulaires */
  .form-section,
  #sfFormWrap { padding: 20px 16px !important; }

  /* Auth */
  .auth-card { padding: 24px 16px !important; }
  .auth-wrap { padding: 16px !important; }

  /* Hero padding réduit */
  .hero { padding-top: 88px !important; padding-left: 16px !important; padding-right: 16px !important; }

  /* Stat mini */
  .stat-card, .stat-mini { padding: 16px 12px !important; }
  .stat-val, .stat-mini-val { font-size: 28px !important; }

  /* Upgrade buttons pleine largeur */
  .upgrade-btn { min-width: unset !important; }

  /* Photo grid → 2 colonnes sur très petit */
  .photo-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* Catégories buttons */
  #catButtons { grid-template-columns: repeat(2,1fr) !important; }

  /* Conciergerie stats strip */
  #form-section > div:nth-child(3) { flex-direction: column !important; }
}

/* ════════════════════════════════════════════════════════
   LANDSCAPE MOBILE ≤ 768px + landscape
════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) {
  .hero { padding-top: 80px !important; padding-bottom: 40px !important; }
  .dc-nav-overlay { top: 60px; }
}

/* ════════════════════════════════════════════════════════
   FIXES SPÉCIFIQUES PAR PAGE
════════════════════════════════════════════════════════ */

/* ── MARKETPLACE ── */
@media (max-width: 768px) {
  .filter-bar { flex-wrap: wrap !important; gap: 10px !important; padding: 14px 20px !important; }
  .filter-price { flex-wrap: wrap !important; width: 100% !important; }
  .filter-price input { width: 80px !important; min-width: 0 !important; }
  .brand-tags { padding: 10px 20px !important; gap: 6px !important; }
  .brand-tag { font-size: 10px !important; padding: 6px 10px !important; }
  .pagination { flex-wrap: wrap !important; gap: 4px !important; padding: 0 20px !important; }
  .listings-hero { padding: 100px 20px 40px !important; }
}
@media (max-width: 480px) {
  .listings-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .card-img { height: 200px !important; }
}

/* ── LISTING DETAIL ── */
@media (max-width: 768px) {
  .listing-grid { gap: 24px !important; }
  .gallery-thumbs { gap: 6px !important; }
  .gallery-thumb { width: 52px !important; height: 52px !important; }
  .inquiry-card, #inquiryCard { padding: 20px !important; }
}

/* ── CONCIERGERIE ── */
@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .hero-card { max-width: 100% !important; }
  .cat-cards-grid { grid-template-columns: 1fr 1fr !important; }
  .journey-grid { grid-template-columns: repeat(2,1fr) !important; gap: 16px !important; }
  .form-wrap { grid-template-columns: 1fr !important; gap: 40px !important; }
  .form-left { display: none; } /* hide left copy on mobile — form only */
}
@media (max-width: 480px) {
  .cat-cards-grid { grid-template-columns: 1fr !important; }
  .journey-grid { grid-template-columns: 1fr !important; }
  .proof-strip { grid-template-columns: repeat(2,1fr) !important; gap: 0 !important; }
}

/* ── DC CRÉATIONS ── */
@media (max-width: 768px) {
  .strip-inner { flex-direction: column !important; gap: 16px !important; align-items: center !important; }
  .strip-sep { display: none !important; }
  .proj-grid { grid-template-columns: 1fr !important; }
  .proj-card.featured { grid-column: auto !important; }
}

/* ── SELLER REGISTER ── */
@media (max-width: 480px) {
  .benefits { grid-template-columns: 1fr !important; }
  .page-eyebrow { font-size: 10px !important; }
}

/* ── SELLER DASHBOARD ── */
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .listings-table th:nth-child(n+4),
  .listings-table td:nth-child(n+4) { display: none !important; }
  .listing-name-col { gap: 10px !important; }
  .listing-thumb, .listing-thumb-empty { width: 40px !important; height: 40px !important; flex-shrink: 0 !important; }
  .listing-name { font-size: 12px !important; }
}

/* ── ADMIN MARKETPLACE ── */
@media (max-width: 768px) {
  .tab-nav { padding: 0 16px !important; overflow-x: auto !important; white-space: nowrap !important; }
  .stats-strip { grid-template-columns: repeat(2,1fr) !important; }
  .sec-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}
@media (max-width: 480px) {
  .stats-strip { grid-template-columns: 1fr !important; }
  .seller-card, .card { padding: 16px !important; }
  .card-actions { flex-direction: column !important; }
  .act-btn { text-align: center !important; min-width: unset !important; }
}

/* ── DASHBOARD ── */
@media (max-width: 480px) {
  .steps-row { grid-template-columns: 1fr !important; gap: 8px !important; }
  .step-item { flex-direction: row !important; gap: 12px !important; padding: 12px !important; }
  .dash-title { font-size: 32px !important; }
  .dash-header { margin-bottom: 28px !important; }
}

/* ── PROFIL ── */
@media (max-width: 480px) {
  .upgrade-row { flex-direction: column !important; }
  .plan-info-row { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
}

/* ── CLASSEMENT ── */
@media (max-width: 480px) {
  .board-row { grid-template-columns: 32px 1fr 60px !important; gap: 8px !important; }
  .board-rank { font-size: 18px !important; }
  .board-count { font-size: 20px !important; }
  .my-stats { flex-direction: column !important; gap: 8px !important; }
}

/* ── NOUVEAUTES ── */
@media (max-width: 480px) {
  .changelog-date-col { min-width: 56px !important; font-size: 10px !important; }
  .changelog-title { font-size: 16px !important; }
  .dash-container { padding: 24px 16px 60px !important; }
}

/* ── ADMIN ── */
@media (max-width: 768px) {
  .admin-toolbar { flex-wrap: wrap !important; gap: 8px !important; }
  .admin-toolbar input[type="text"],
  .admin-toolbar input[type="search"] { width: 100% !important; }
  .admin-toolbar select,
  .admin-toolbar button { flex: 1 !important; min-width: 0 !important; }
  .admin-table-wrap { overflow-x: auto !important; }
  .admin-stats { gap: 8px !important; }
}
@media (max-width: 480px) {
  .admin-stats { grid-template-columns: 1fr 1fr !important; }
}

/* ── PAYMENT SUCCESS ── */
@media (max-width: 480px) {
  .create-account-block { padding: 20px 16px !important; }
  .ca-benefits { gap: 10px !important; }
}

/* ── FORM INPUTS — prevent iOS auto-zoom (font-size >= 16px) ── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea { font-size: 16px !important; }
}

/* ── LIGHTBOX / MODAL — full screen on mobile ── */
@media (max-width: 768px) {
  .modal { width: 95% !important; max-width: none !important; padding: 24px 18px !important; }
  .lightbox-img { max-width: 100vw !important; max-height: 85vh !important; }
  .lightbox-nav { display: none !important; }
}

/* ── FLOATING WHATSAPP ── */
@media (max-width: 768px) {
  [id*="whatsapp-float"],
  .whatsapp-float,
  a[href*="wa.me"][style*="fixed"] { bottom: 16px !important; right: 16px !important; }
}