/* =====================================================
   LUXURIA CLUB - RESPONSIVE ULTRA-OPTIMISÉ
   Mobile First - Optimisé pour tous les appareils
   ===================================================== */

/* ============================================
   VARIABLES GLOBALES
   ============================================ */
:root {
  --mobile-padding: 16px;
  --tablet-padding: 24px;
  --desktop-padding: 32px;
  --touch-target: 44px;
  --mobile-gap: 16px;
  --tablet-gap: 24px;
}

/* ============================================
   MOBILE FIRST - TOUS LES ÉCRANS MOBILES (<= 767px)
   ============================================ */
@media (max-width: 767px) {
  /* ========== BASE & RESET ========== */
  * {
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.2);
  }

  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* ========== CONTAINER & SPACING ========== */
  .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: var(--mobile-padding) !important;
    padding-right: var(--mobile-padding) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  section,
  [class*="section"] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .py-32,
  [class*="py-32"] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .py-20,
  [class*="py-20"] {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .py-16,
  [class*="py-16"] {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  /* ========== TYPOGRAPHIE RESPONSIVE ========== */
  h1,
  h1.text-5xl,
  h1.text-7xl,
  h1[class*="text-5xl"],
  h1[class*="text-7xl"],
  h1.md\:text-7xl {
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }

  h2,
  h2.text-6xl,
  h2.text-7xl,
  h2[class*="text-6xl"],
  h2[class*="text-7xl"],
  h2.md\:text-7xl {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  h3,
  h3.text-4xl,
  h3.text-5xl,
  h3[class*="text-4xl"],
  h3[class*="text-5xl"] {
    font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }

  p,
  p.text-xl,
  p.text-2xl,
  p[class*="text-xl"],
  p[class*="text-2xl"],
  p.md\:text-2xl {
    font-size: clamp(0.9375rem, 4vw, 1.125rem) !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
  }

  /* ========== GRID - FORCE 1 COLONNE MOBILE ========== */
  .grid,
  .grid-cols-1,
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  [class*="grid-cols"],
  .grid.grid-cols-1,
  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.grid-cols-4,
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4,
  .grid.xl\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-gap) !important;
  }

  /* ========== FLEX - FORCE COLUMN MOBILE ========== */
  .flex,
  .flex-row,
  .flex.flex-row,
  .flex.md\:flex-row,
  .flex.sm\:flex-row,
  .flex-col.sm\:flex-row {
    flex-direction: column !important;
  }

  .flex.flex-col > *,
  .flex.flex-row > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  .flex.flex-row > *:last-child {
    margin-bottom: 0 !important;
  }

  /* ========== PADDING & MARGIN ========== */
  .p-12,
  [class*="p-12"] {
    padding: var(--mobile-padding) !important;
  }

  .p-8,
  [class*="p-8"] {
    padding: 14px !important;
  }

  .px-10,
  .px-8,
  .px-6,
  .px-4,
  [class*="px-10"],
  [class*="px-8"],
  [class*="px-6"],
  [class*="px-4"] {
    padding-left: var(--mobile-padding) !important;
    padding-right: var(--mobile-padding) !important;
  }

  .py-4,
  .py-3,
  [class*="py-4"],
  [class*="py-3"] {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .mb-20,
  .mb-12,
  .mb-8,
  [class*="mb-20"],
  [class*="mb-12"],
  [class*="mb-8"] {
    margin-bottom: 16px !important;
  }

  .mt-20,
  .mt-12,
  [class*="mt-20"],
  [class*="mt-12"] {
    margin-top: 16px !important;
  }

  .gap-12,
  .gap-8,
  .gap-6,
  [class*="gap-12"],
  [class*="gap-8"],
  [class*="gap-6"] {
    gap: var(--mobile-gap) !important;
  }

  /* ========== BOUTONS & ZONES TACTILES ========== */
  button,
  .btn,
  a[role="button"],
  a[class*="bg-gradient"],
  a[class*="border-2"],
  input[type="submit"],
  input[type="button"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 20px !important;
    font-size: 1rem !important;
    min-height: var(--touch-target) !important;
    min-width: var(--touch-target) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Boutons côte à côte - Stack vertical */
  .flex.flex-row button,
  .flex.flex-row a[class*="bg-gradient"],
  .flex.flex-row .btn {
    margin-bottom: 12px !important;
  }

  /* ========== HEADER MOBILE ========== */
  header {
    padding: 12px 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
  }

  header .container,
  header nav {
    padding-left: var(--mobile-padding) !important;
    padding-right: var(--mobile-padding) !important;
  }

  header img,
  header .logo {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
  }

  /* Navigation mobile - Menu hamburger */
  nav ul {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Menu mobile dropdown */
  .lg\:hidden {
    display: block !important;
  }

  .lg\:flex {
    display: none !important;
  }

  /* ========== HERO BANNER MOBILE ========== */
  .hero-banner {
    min-height: 100svh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }

  .hero-image {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100vh !important;
    max-height: 100svh !important;
    object-fit: contain !important;
    object-position: center center !important;
    z-index: 0 !important;
  }

  .hero-offset {
    margin-top: -24px !important;
    padding-top: 0 !important;
  }

  .hero-offset .max-w-6xl > div,
  section.hero-offset .max-w-6xl > div {
    padding: var(--mobile-padding) !important;
    border-radius: 16px !important;
    margin-left: var(--mobile-padding) !important;
    margin-right: var(--mobile-padding) !important;
  }

  /* ========== CARTES ========== */
  [class*="rounded-3xl"],
  [class*="rounded-2xl"] {
    border-radius: 16px !important;
  }

  /* ========== MAX-WIDTH ========== */
  .max-w-3xl,
  .max-w-4xl,
  .max-w-6xl,
  .max-w-2xl {
    max-width: 100% !important;
    padding-left: var(--mobile-padding) !important;
    padding-right: var(--mobile-padding) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ========== IMAGES ========== */
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* ========== FORMULAIRES MOBILE ========== */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="file"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px var(--mobile-padding) !important;
    font-size: 1rem !important;
    min-height: var(--touch-target) !important;
    border-radius: 12px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }

  /* ========== MODALES MOBILE ========== */
  .modal,
  [class*="modal"],
  [class*="Modal"] {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin: 16px !important;
    padding: var(--mobile-padding) !important;
    border-radius: 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ========== CHAT FLOTTANT MOBILE ========== */
  .chat-floating,
  [class*="chat"] {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    right: 16px !important;
    bottom: 16px !important;
    border-radius: 16px !important;
  }

  /* ========== FOOTER MOBILE ========== */
  footer {
    padding: 24px var(--mobile-padding) !important;
  }

  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ========== ICÔNES & ESPACEMENTS ========== */
  .w-20,
  .h-20,
  [class*="w-20"],
  [class*="h-20"] {
    width: 48px !important;
    height: 48px !important;
  }

  .text-3xl,
  [class*="text-3xl"] {
    font-size: 1.5rem !important;
  }

  .text-4xl,
  .text-5xl,
  .text-6xl,
  [class*="text-4xl"],
  [class*="text-5xl"],
  [class*="text-6xl"] {
    font-size: clamp(1.75rem, 7vw, 2.25rem) !important;
  }

  /* ========== UTILITAIRES ========== */
  .hidden-mobile,
  .only-desktop {
    display: none !important;
  }

  .only-mobile {
    display: block !important;
  }
}

/* ============================================
   TRÈS PETITS ÉCRANS (<= 374px)
   ============================================ */
@media (max-width: 374px) {
  :root {
    --mobile-padding: 12px;
    --mobile-gap: 12px;
  }

  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  h1 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }

  h2 {
    font-size: clamp(1.375rem, 6vw, 1.875rem) !important;
  }

  section,
  .py-32 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .p-12 {
    padding: 12px !important;
  }

  button,
  .btn {
    padding: 12px 16px !important;
    font-size: 0.9375rem !important;
  }
}

/* ============================================
   MOBILES GRANDS (480px - 767px)
   ============================================ */
@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --mobile-padding: 20px;
    --mobile-gap: 20px;
  }

  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Grid 2 colonnes sur grands mobiles */
  .grid-cols-2,
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--mobile-gap) !important;
  }

  section,
  .py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .hero-offset .max-w-6xl > div {
    padding: 24px !important;
  }
}

/* ============================================
   TABLETTES (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --tablet-padding: 24px;
    --tablet-gap: 24px;
  }

  .container {
    max-width: 740px !important;
    padding-left: var(--tablet-padding) !important;
    padding-right: var(--tablet-padding) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-banner {
    min-height: 85vh !important;
    height: 85vh !important;
  }

  /* Grid 2 colonnes sur tablette */
  .grid-cols-2,
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--tablet-gap) !important;
  }

  .grid-cols-3,
  .md\:grid-cols-3,
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--tablet-gap) !important;
  }

  .grid-cols-4,
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--tablet-gap) !important;
  }

  /* Flex row sur tablette */
  .flex.md\:flex-row {
    flex-direction: row !important;
  }

  .flex.md\:flex-row > * {
    width: auto !important;
    margin-bottom: 0 !important;
  }

  section,
  .py-32 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .hero-offset {
    margin-top: -40px !important;
  }

  /* Typographie tablette */
  h1 {
    font-size: clamp(2.5rem, 6vw, 3.5rem) !important;
  }

  h2 {
    font-size: clamp(2rem, 5vw, 3rem) !important;
  }

  /* Boutons - Peuvent être côte à côte */
  .flex.sm\:flex-row button,
  .flex.md\:flex-row button {
    width: auto !important;
    margin-right: 12px !important;
    margin-bottom: 0 !important;
  }

  .flex.sm\:flex-row button:last-child,
  .flex.md\:flex-row button:last-child {
    margin-right: 0 !important;
  }
}

/* ============================================
   ORIENTATION PAYSAGE MOBILE
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-banner {
    min-height: 100vh !important;
    height: 100vh !important;
  }

  .hero-image {
    object-position: center 40% !important;
  }

  .hero-offset {
    margin-top: -20px !important;
  }

  section,
  .py-32 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  header {
    padding: 8px 0 !important;
  }
}

/* ============================================
   OPTIMISATIONS TOUCH
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  button,
  .btn,
  a,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: var(--touch-target) !important;
    min-width: var(--touch-target) !important;
    cursor: pointer !important;
  }

  /* Désactiver les effets hover sur mobile */
  *:hover {
    transform: none !important;
  }

  * {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Scroll smooth */
  html {
    scroll-behavior: smooth !important;
  }
}

/* ============================================
   DESKTOP (1024px+)
   ============================================ */
@media (min-width: 1024px) {
  .only-mobile {
    display: none !important;
  }

  .hidden-mobile,
  .only-desktop {
    display: block !important;
  }
}