/* ============================================================
   MARINE NGOUBAS WEDDING – STYLES DE BASE
   Variables, reset, typographie, boutons, utilitaires
   ============================================================ */

/* ==============================
   1. VARIABLES GLOBALES
   ============================== */
:root {
  /* Couleurs */
  --cream:       #fcfaf6;
  --sand:        #f8f3ec;
  --sand-deep:   #f0e9dd;
  --sand-warm:   #ebe2d0;
  --ink:         #1b1614;
  --gold:        #9a7b3f;
  --gold-soft:   #c9b48a;
  --rose:        #c08486;
  --rose-soft:   #e4b8bd;
  --rose-d:      #9a4f5b;

  /* Transitions */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Typographies */
  --body: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --h1:   "Playfair Display", Georgia, serif;
  --h2:   "Plantagenet Cherokee", "Plantagenet", Georgia, "Times New Roman", serif;
}

/* ==============================
   2. RESET
   ============================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body);
  letter-spacing: -.006em;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* ==============================
   3. TYPOGRAPHIE
   ============================== */
h1 {
  font-family: var(--h1);
  font-weight: 400;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--h2);
  font-weight: 400;
  letter-spacing: -.006em;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==============================
   4. ACCESSIBILITÉ
   ============================== */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ==============================
   5. BOUTONS
   ============================== */
.btn {
  display: inline-block;
  padding: 15px 34px;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: .04em;
  position: relative;
  overflow: hidden;
  z-index: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color .6s var(--ease), border-color .6s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .6s var(--ease);
  z-index: -1;
}

.btn:hover {
  color: #fff;
}

.btn:hover::before {
  transform: none;
}

/* Variante sombre */
.btn.dark {
  background: var(--ink);
  color: #fff;
}
.btn.dark::before {
  background: var(--gold);
}

/* Variante fantôme (fond transparent sur fond sombre) */
.btn.ghost {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.btn.ghost::before {
  background: #fff;
}
.btn.ghost:hover {
  color: var(--ink);
}

/* ==============================
   6. LAYOUT – CONTENEURS
   ============================== */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-narrow {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==============================
   7. TITRES DE SECTION
   ============================== */
.sec-h {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
  margin-bottom: 22px;
}

/* Petit label éditorial au-dessus des titres */
.eyebrow {
  font-family: var(--h1);
  font-style: italic;
  font-size: 17px;
  color: var(--gold);
  margin-bottom: 14px;
  display: inline-block;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-3px);
}

/* ==============================
   8. ANIMATIONS DE RÉVÉLATION
   ============================== */

/* Révélation au scroll – ajouter .rv sur les éléments à animer */
.rv {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 1.4s var(--ease),
    transform 1.4s var(--ease);
  transition-delay: var(--d, 0s);
}

.rv.in {
  opacity: 1;
  transform: none;
}

/* Animation d'entrée au chargement – pour les heroes */
.load > * {
  opacity: 0;
  transform: translateY(26px);
  animation: rise 1.4s var(--ease) forwards;
}

.load h1 { animation-delay: .3s; }
.load h2 { animation-delay: .55s; }
.load p  { animation-delay: .8s; }
.load p + p { animation-delay: 1s; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* ==============================
   9. SECTIONS (contour générique)
   ============================== */
section {
  position: relative;
}

/* ==============================
   10. PRÉFÉRENCES UTILISATEUR
   ============================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .rv,
  .load > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==============================
   11. RESPONSIVE GLOBAL
   ============================== */
@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
}