/* =========================================
   STYLE GLOBAL & TYPOGRAPHIE
   ========================================= */
:root {
  --bg: #ffffff;
  --white: #ffffff;
  --ink: #141414;
  --muted: #6f6b63;
  --line: #e3dfd6;
  --gold: #b39a63;
  --radius: 20px;
  --header-h: 150px; /* Ajusté pour laisser respirer le logo */
}

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

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  padding-top: var(--header-h);
  line-height: 1.6;
}

h1, h2, h3, .nav-left, .nav-right {
  font-family: 'Cormorant Garamond', serif;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }

/* =========================================
   HEADER UNIFIÉ (Position Fixe & Alignement)
   ========================================= */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* Force le logo au centre exact */
  align-items: center; /* Aligne le texte et le logo sur la même ligne */
  padding: 0 60px;
}

.nav-left, .nav-right {
  display: flex;
  gap: 25px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-right { justify-content: flex-end; }
.nav-left a:hover, .nav-right a:hover { color: var(--gold); }

/* Style du Logo Image */
.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    height: 200px; /* Taille harmonieuse */
    width: auto;
    display: block;
    object-fit: contain;
}

/* Responsive Mobile */
@media (max-width: 900px) {
  :root { --header-h: auto; }
  .header { 
    grid-template-columns: 1fr; 
    padding: 20px;
    gap: 15px;
    position: relative;
  }
  .nav-left, .nav-right { justify-content: center; font-size: 12px; }
  body { padding-top: 0; }
}