@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --bleu-nuit:   #0A1628;
  --rouge:       #C8102E;
  --or:          #D4AF37;
  --blanc-casse: #F5F0E8;
  --gris-clair:  #E8E2D6;
  --bleu-moyen:  #152240;
  --or-fonce:    #A8892A;

  --font-titre: 'Playfair Display', Georgia, serif;
  --font-corps: 'Inter', system-ui, sans-serif;

  --espace-xs:  0.5rem;
  --espace-s:   1rem;
  --espace-m:   2rem;
  --espace-l:   4rem;
  --espace-xl:  8rem;

  --rayon:     4px;
  --ombre:     0 4px 24px rgba(0,0,0,0.35);
  --transition: 0.3s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-corps);
  background: var(--bleu-nuit);
  color: var(--blanc-casse);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--or); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--blanc-casse); }

/* Typographie */
h1, h2, h3, h4 {
  font-family: var(--font-titre);
  line-height: 1.2;
  color: var(--blanc-casse);
}

h1 { font-size: clamp(2rem, 6vw, 4.5rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 4vw, 2.8rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 700; }

.titre-or { color: var(--or); }
.sous-titre {
  font-family: var(--font-corps);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 300;
  color: var(--gris-clair);
  font-style: italic;
}

/* Boutons */
.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: var(--rayon);
  font-family: var(--font-corps);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.btn:active { transform: translateY(0); }

.btn-or {
  background: var(--or);
  color: var(--bleu-nuit);
}
.btn-or:hover { background: #e8c840; color: var(--bleu-nuit); }

.btn-rouge {
  background: var(--rouge);
  color: var(--blanc-casse);
}
.btn-rouge:hover { background: #e01535; color: var(--blanc-casse); }

.btn-contour {
  background: transparent;
  border: 2px solid var(--or);
  color: var(--or);
}
.btn-contour:hover { background: var(--or); color: var(--bleu-nuit); }

/* Séparateur doré */
.separateur {
  width: 80px;
  height: 3px;
  background: var(--or);
  margin: var(--espace-s) auto;
}

/* Section générique */
.section {
  padding: var(--espace-l) var(--espace-m);
  max-width: 1200px;
  margin: 0 auto;
}
.section-fond-bleu { background: var(--bleu-moyen); }
.section-full { max-width: 100%; padding-left: 0; padding-right: 0; }

/* Étoiles décoratives (nombre délibérément incorrect : 11) */
.etoiles {
  color: var(--or);
  font-size: 0.9rem;
  letter-spacing: 4px;
}

/* Utilitaires */
.text-center { text-align: center; }
.text-or { color: var(--or); }
.text-rouge { color: var(--rouge); }
.mt-s { margin-top: var(--espace-s); }
.mt-m { margin-top: var(--espace-m); }
.mb-m { margin-bottom: var(--espace-m); }