/* ========================================
   OPTIMISATIONS RESPONSIVE - QUAPLIX
   ======================================== */

/* Reset du padding-top global sur mobile */
@media (max-width: 768px) {
  body {
    padding-top: 0 !important;
  }
}

/* ========================================
   HEADER RESPONSIVE
   ======================================== */

/* Menu mobile - Container des boutons */
@media (max-width: 768px) {
  .mobile-cta-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .mobile-cta {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    font-size: 18px !important;
  }
  
  .mobile-cta-secondary {
    background: transparent !important;
    color: #374151 !important;
    border: 2px solid #e5e7eb !important;
  }
  
  .mobile-cta-secondary:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
  }
}

/* ========================================
   PAGES RESPONSIVE
   ======================================== */

/* Page de connexion */
@media (max-width: 768px) {
  .connection-page .fixed.left-4.top-4 {
    left: 12px !important;
    top: 12px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
  }
  
  .connection-page .fixed.left-4.top-4 span {
    display: none !important;
  }
  
  .connection-page main {
    padding-top: 60px !important;
    padding-bottom: 20px !important;
  }
  
  .connection-page .max-w-md {
    max-width: 100% !important;
    margin: 0 16px !important;
  }
  
  .connection-page .p-6.sm\:p-8 {
    padding: 16px !important;
  }
  
  .connection-page .px-6.pb-6.sm\:px-8.sm\:pb-8 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 16px !important;
  }
}

@media (max-width: 480px) {
  .connection-page .fixed.left-4.top-4 {
    left: 8px !important;
    top: 8px !important;
    padding: 6px 10px !important;
  }
  
  .connection-page main {
    padding-top: 50px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  .connection-page .max-w-md {
    margin: 0 8px !important;
  }
  
  .connection-page .text-2xl {
    font-size: 1.5rem !important;
  }
  
  .connection-page .text-xl {
    font-size: 1.25rem !important;
  }
}

/* Dashboard pages */
@media (max-width: 1024px) {
  .dashboard-page .max-w-7xl,
  .dashboard-page .max-w-6xl {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  .dashboard-page .grid.grid-cols-1.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  .dashboard-page .lg\:col-span-2 {
    grid-column: 1 !important;
  }
}

@media (max-width: 768px) {
  .dashboard-page main {
    padding-top: 80px !important;
  }
  
  .dashboard-page .flex.flex-col.gap-4.sm\:flex-row.sm\:items-center.sm\:justify-between {
    flex-direction: column !important;
    gap: 16px !important;
  }
  
  .dashboard-page .flex.flex-wrap.items-center.gap-3 {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .dashboard-page .text-3xl {
    font-size: 1.75rem !important;
  }
  
  .dashboard-page .text-2xl {
    font-size: 1.5rem !important;
  }
  
  .dashboard-page .grid.grid-cols-1.gap-4.sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  .dashboard-page .grid.grid-cols-2.gap-4 {
    grid-template-columns: 1fr !important;
  }
  
  .dashboard-page .px-3\.5.py-2\.5,
  .dashboard-page .px-4.py-2\.5 {
    padding: 12px !important;
  }
  
  .dashboard-page .px-6.py-4 {
    padding: 16px !important;
  }
}

@media (max-width: 480px) {
  .dashboard-page .mx-auto.max-w-7xl,
  .dashboard-page .mx-auto.max-w-6xl {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  .dashboard-page .text-3xl {
    font-size: 1.5rem !important;
  }
  
  .dashboard-page .text-2xl {
    font-size: 1.25rem !important;
  }
  
  .dashboard-page .text-lg {
    font-size: 1rem !important;
  }
  
  .dashboard-page .px-3\.5.py-2\.5,
  .dashboard-page .px-4.py-2\.5 {
    padding: 8px !important;
  }
  
  .dashboard-page .px-6.py-4 {
    padding: 12px !important;
  }
  
  .dashboard-page .gap-3 {
    gap: 6px !important;
  }
  
  .dashboard-page .gap-4 {
    gap: 12px !important;
  }
}

/* ========================================
   FORCE LES STYLES RESPONSIVE
   ======================================== */

/* Force l'application des styles responsive */
@media (max-width: 768px) {
  /* Header mobile */
  .header-container {
    height: 70px !important;
    padding: 0 16px !important;
  }
  
  .nav-menu,
  .cta-button {
    display: none !important;
  }
  
  .mobile-menu-toggle {
    display: block !important;
  }
  
  .logo-icon {
    width: 40px !important;
    height: 40px !important;
  }
  
  .logo-text {
    font-size: 24px !important;
  }
  
  .mobile-menu {
    padding: 20px !important;
  }
}

@media (max-width: 480px) {
  .header-container {
    height: 60px !important;
    padding: 0 12px !important;
  }
  
  .logo-icon {
    width: 36px !important;
    height: 36px !important;
  }
  
  .logo-text {
    font-size: 20px !important;
    margin-left: 12px !important;
  }
  
  .mobile-menu {
    padding: 16px !important;
  }
  
  .mobile-nav .nav-link {
    padding: 14px 0 !important;
    font-size: 16px !important;
  }
  
  .mobile-cta {
    padding: 14px 20px !important;
    font-size: 16px !important;
  }
}