/* LUXURIA - Base + Layout responsive-safe (sans JS) */

/* 1) Reset léger et variables */
:root {
  --lux-black: #0A0A0A;
  --lux-velvet: #1A1A1A;
  --lux-gold: #D4AF37;
  --lux-gold-600: #B8860B;
  --lux-cream: #F8F8FF;
  --lux-silver: #C0C0C0;
  --text: #EAEAEA;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--lux-black);
  color: var(--text);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typographie responsive */
h1 { font-weight: 700; font-family: "Playfair Display", serif; font-size: clamp(2rem, 2.2rem + 2vw, 4.5rem); line-height: 1.1; }
h2 { font-weight: 700; font-family: "Playfair Display", serif; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem); line-height: 1.2; }
h3 { font-weight: 600; font-size: clamp(1.25rem, 1rem + 1vw, 2rem); line-height: 1.3; }
p, li { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.125rem); }

/* 2) Conteneur fluide */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* 3) Médias fluides */
img, video, iframe { max-width: 100%; height: auto; display: block; }

/* 4) Grilles utilitaires (fallback si pas Tailwind) */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Visibilité utilitaire */
.hidden-mobile { display: initial; }
.only-desktop { display: initial; }

/* 5) Cartes */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(6px);
}

/* 6) Header/navigation responsive-safe */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,10,10,0.92);
}
nav a { color: var(--text); text-decoration: none; }
nav a:hover { color: var(--lux-gold); }

/* 7) Sections */
section { padding: 48px 0; }
.section-hero { padding: 72px 0; }

/* 7b) Hero banner (desktop par défaut) */
.hero-banner {
  position: relative;
  background-position: center center;
  background-size: cover;
  padding-top: calc(env(safe-area-inset-top, 0px));
  overflow: hidden;
  width: 100%;
}

/* Image plein écran pilotée (s'adapte automatiquement) */
.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* remplit sans déformer */
  object-position: center center; /* point focal par défaut */
  display: block;
  z-index: 0;
}

/* 8) Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 12px 20px; border-radius: 999px; border: 1px solid transparent;
  background: var(--lux-gold); color: #141414; font-weight: 600; cursor: pointer;
}
.btn:hover { filter: brightness(1.05); }
.btn-outline { background: transparent; border-color: var(--lux-gold); color: var(--lux-gold); }

/* 9) Tables/Overflow */
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; text-align: left; }

/* 10) Modales */
.modal { width: 100%; max-width: 640px; margin-inline: auto; }

/* 11) Chat flottant (préserve lisibilité mobile) */
.chat-floating { max-width: 420px; width: calc(100% - 24px); right: 12px; bottom: 12px; }

/* 12) Utilitaires spacing */
.mt-0{margin-top:0}.mt-8{margin-top:2rem}.mt-12{margin-top:3rem}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}
.px-0{padding-left:0;padding-right:0}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-0{padding-top:0;padding-bottom:0}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}

/* 13) Accessibilité touch */
@media (hover: none) {
  .btn:hover { filter: none; }
}