@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Josefin+Sans:wght@200;300;400&display=swap');

:root {
  --bordeaux: #7a1e2e;
  --bordeaux-dark: #5a1520;
  --cream: #f5f0e8;
  --cream-dark: #ede5d5;
  --text: #2a1a1e;
  --text-light: #6b4a50;
  --header-height: 72px;
  --nav-height: 50px;
  --top-offset: 122px; /* header + nav */
}

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

body {
  background: var(--cream);
  color: var(--text);
  font-family: 'Cormorant Garamond', serif;
  min-height: 100vh;
  padding-top: var(--top-offset);
}

/* =====================
   HEADER — Charlotte & Maxime (toujours visible)
   ===================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--bordeaux);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 16px rgba(90,21,32,0.3);
}

.site-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 400;
  color: var(--cream);
  letter-spacing: 0.03em;
  line-height: 1;
}

.site-header h1 em {
  font-style: italic;
}

/* =====================
   NAV — menu (toujours visible sous le header)
   ===================== */
.site-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 199;
  background: var(--cream);
  height: var(--nav-height);
  border-bottom: 1px solid rgba(122,30,46,0.18);
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.site-nav a {
  text-decoration: none;
  color: var(--text-light);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--bordeaux);
  border-bottom-color: var(--bordeaux);
  background: rgba(122,30,46,0.04);
}

.site-nav a.active {
  color: var(--bordeaux);
  border-bottom-color: var(--bordeaux);
  font-weight: 400;
}

/* =====================
   PAGE HEADER (titre de section)
   ===================== */
.page-header {
  text-align: center;
  padding: 56px 40px 36px;
}

.page-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 400;
  color: var(--bordeaux);
  margin-bottom: 6px;
}

.ornament {
  color: var(--bordeaux);
  opacity: 0.35;
  font-size: 20px;
  display: block;
  margin: 14px auto 0;
}

/* =====================
   UTILITIES
   ===================== */
.section-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-title::before,
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(122,30,46,0.22);
}

.badge {
  background: var(--bordeaux);
  color: var(--cream);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.2em;
  padding: 11px 28px;
  text-transform: uppercase;
  display: inline-block;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 650px) {
  :root { --header-height: 56px; --nav-height: 44px; --top-offset: 100px; }
  .site-nav { overflow-x: auto; justify-content: flex-start; padding: 0 4px; }
  .site-nav a { padding: 0 14px; font-size: 10px; }
}

/* =====================
   BOUTON FR / EN
   ===================== */
#lang-toggle {
  position: fixed;
  top: 0;
  right: 20px;
  height: var(--header-height);
  background: none;
  border: none;
  color: rgba(245,240,232,0.7);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  cursor: pointer;
  z-index: 201;
  padding: 0 4px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

#lang-toggle::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(245,240,232,0.3);
  margin-right: 4px;
}

#lang-toggle:hover {
  color: var(--cream);
}

@media (max-width: 650px) {
  #lang-toggle { right: 10px; font-size: 10px; }
}