/* === DESIGN CLUB PRIVÉ PREMIUM === */
:root {
  --gold: #bfa76a; /* doré mat */
  --gold-dark: #8c7a4f;
  --black: #101012;
  --anthracite: #232326;
  --white: #f5f5f3;
  --grey: #b0b0b0;
  --border: #282828;
  --radius: 18px;
  --shadow: 0 6px 32px rgba(0,0,0,0.45);
}

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  margin: 0;
  min-height: 100vh;
  letter-spacing: 0.01em;
}

header.main_haeder {
  background: linear-gradient(90deg, var(--anthracite) 60%, var(--black) 100%);
  box-shadow: var(--shadow);
  border-bottom: 2px solid var(--gold);
  padding: 0 32px;
}
.header-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* === BOUTONS === */
.btn, .btn-primary, .btn.rounded-pill {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  color: var(--black);
  border: none;
  border-radius: var(--radius);
  padding: 14px 36px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 2px 12px rgba(191,167,106,0.10);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.btn:hover, .btn-primary:hover {
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  color: var(--white);
  box-shadow: 0 4px 24px rgba(191,167,106,0.18);
}
.bg-primary {
  background: var(--gold) !important;
  color: var(--black) !important;
}
.border-snow {
  border: 2px solid var(--white) !important;
}
.color-secondary {
  color: var(--gold-dark) !important;
}
.color-white {
  color: var(--white) !important;
}

/* === FORMULAIRES === */
.form-group {
  margin-bottom: 22px;
}
.form-control {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--anthracite);
  color: var(--white);
  font-size: 1rem;
  transition: border 0.2s, box-shadow 0.2s;
  box-shadow: none;
}
.form-control:focus {
  border: 1.5px solid var(--gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(191,167,106,0.10);
}
input::placeholder, textarea::placeholder {
  color: var(--grey);
  opacity: 1;
}

/* === TITRES ET TEXTES === */
h1, h2, h3, h4, h5 {
  color: var(--gold);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.5em;
}
.txt_gradient {
  background: linear-gradient(90deg, var(--gold), var(--white) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.color-primary {
  color: var(--gold) !important;
}

p, li, label, span, a {
  color: var(--white);
  font-size: 1em;
  line-height: 1.7;
}
a {
  color: var(--gold-dark);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* === BLOCS ET MODALS === */
.modal-content {
  background: var(--anthracite);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--white);
  border: 1.5px solid var(--gold-dark);
}
.modal-header, .modal-footer {
  border: none;
  background: transparent;
}

.cover, .content_text, .npPage_introDefault, .swiper-slide, .swiper-container {
  background: none;
  color: var(--white);
  border-radius: var(--radius);
}

/* === UTILITAIRES === */
.rounded-pill {
  border-radius: 999px !important;
}
.d-flex {
  display: flex !important;
}
.justify-content-end {
  justify-content: flex-end !important;
}
.align-items-center {
  align-items: center !important;
}
.w-100 {
  width: 100% !important;
}
.m-0 {
  margin: 0 !important;
}
.h-52 {
  height: 52px !important;
}
.padding-t-70 {
  padding-top: 70px !important;
}
.margin-b-20 {
  margin-bottom: 20px !important;
}
.absolute {
  position: absolute !important;
}
.right-0 {
  right: 0 !important;
}
.padding-r-20 {
  padding-right: 20px !important;
}

/* === SWIPER ET AUTRES COMPOSANTS === */
.swiper-container {
  width: 100%;
  padding-bottom: 30px;
}
.swiper-slide {
  background: none;
  color: var(--white);
}
.swiper-pagination-bullet-active {
  background: var(--gold) !important;
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
  header.main_haeder { padding: 0 8px; }
  .btn, .btn-primary { padding: 12px 16px; font-size: 0.95rem; }
  .modal-content { padding: 10px; }
  h1, h2, h3 { font-size: 1.2em; }
}