/* ================================
   Variables par défaut = thème lumineux
================================ */
:root {
  --bg: #fefdfb;
  --surface: #ffffff;
  --text: #2d2d2d;
  --muted: #5c5c5c;
  --accent: #e76f51;   /* orange coucher de soleil */
  --accent-2: #2a9d8f; /* bleu lagon */
  --card-radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.1);
  --transition: .6s cubic-bezier(.2,.7,.2,1);
}

* { margin:0; padding:0; box-sizing:border-box }
html, body { height:100% }
body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(180deg, #fceabb 0%, #fefdfb 100%);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 1s ease, color 1s ease, filter 1s ease;
}

/* ================================
   Header
================================ */
.site-header {
  position: sticky; top:0; z-index:50;
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: background 1s ease, border-color 1s ease;
}
.logo { font-weight:700; letter-spacing:.5px }
.nav a, .nav button {
  color: var(--text); text-decoration:none; margin-left:14px;
  background:transparent; border:none; cursor:pointer; font-weight:600;
  padding:8px 12px; border-radius:10px; transition: background .25s,color .25s;
}
.nav a:hover, .nav button:hover { background: rgba(0,0,0,.05); }

/* Boutons */
.btn, .btn-alt {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; padding:10px 16px; border:none; border-radius:999px; cursor:pointer;
  font-weight:700; letter-spacing:.2px; box-shadow: var(--shadow);
  transition: transform .2s ease, filter .2s ease, background 0.8s ease;
}
.btn:hover, .btn-alt:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ================================
   Hero
================================ */
.hero {
  position:relative; min-height:72vh; display:grid; place-items:center;
  padding:80px 24px 32px;
}
.hero-media {
  position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:0 0 32px 32px;
}
.hero-media img {
  width:100%; height:100%; object-fit:cover;
  filter: saturate(1.3) contrast(1.05) brightness(1.05);
  transform: scale(1.025);
  transition: transform 2s ease, filter 1.2s ease;
}
.hero-content { max-width:800px; text-align:center }
.hero h1 { font-size: clamp(2rem, 5vw, 4rem); line-height:1.1; letter-spacing:.5px }
.hero p { margin:14px auto 26px; color: var(--muted); max-width:700px }

/* ================================
   Sections
================================ */
.section { padding:64px 24px }
.gallery h2, .contact h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom:18px }
.grid {
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid img {
  width:100%; height:320px; object-fit:cover; border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  filter: saturate(1.15) brightness(1.05);
  transition: transform .5s ease, filter .6s ease, box-shadow .5s ease;
}
.grid img:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,.25); }

/* Contact */
.contact form {
  max-width:520px; margin: 0 auto; display:flex; flex-direction:column; gap:12px;
}
.contact input, .contact textarea {
  background: #fff; border:1px solid rgba(0,0,0,.1);
  border-radius: 12px; color: var(--text); padding:14px 16px; font-size:16px;
  transition: border .25s ease, box-shadow .25s ease;
}
.contact textarea { min-height:140px; resize:vertical }
.contact input:focus, .contact textarea:focus {
  outline:none; border-color: var(--accent-2);
  box-shadow: 0 0 0 6px rgba(42,157,143,.15);
}

/* Footer */
.footer {
  padding:26px; text-align:center; color: var(--muted);
  border-top:1px solid rgba(0,0,0,.05);
  transition: color 0.8s ease, border-color 0.8s ease;
}

/* ================================
   Transition
================================ */
body.transitioning {
  filter: blur(6px) brightness(0.9);
}

/* ================================
   Thème Vintage (après transition)
================================ */
body.vintage {
  --bg: #1a1410;
  --surface: #2a1f1a;
  --text: #f5e9da;
  --muted: #bba58b;
  --accent: #c9974c; /* doré/cuivre */
  --accent-2: #8c5c3c; /* brun chaud */
  background: radial-gradient(1200px 800px at 70% 0%, #2a1f1a, #1a1410 70%);
  font-family: 'Lora', serif;
  color: var(--text);
}

/* Vintage header */
body.vintage .site-header {
  background: rgba(40, 30, 20, 0.85);
  border-bottom: 1px solid rgba(201,151,76,0.3);
}
body.vintage .nav a, 
body.vintage .nav button { color: var(--text); }
body.vintage .nav a:hover, 
body.vintage .nav button:hover { background: rgba(201,151,76,0.15); }

/* Vintage hero */
body.vintage .hero-media img {
  filter: sepia(0.6) contrast(1.15) brightness(0.9);
}
body.vintage .hero h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: #fffdf5; /* blanc crème clair */
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
body.vintage .hero p { color: var(--muted); }

/* Vintage gallery */
body.vintage .grid img {
  filter: sepia(0.5) contrast(1.1) brightness(0.9);
  border: 2px solid rgba(201,151,76,0.25);
}

/* Vintage buttons */
body.vintage .btn, 
body.vintage .btn-alt {
  background: linear-gradient(135deg, #c9974c, #8c5c3c);
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
}

/* Vintage contact form */
body.vintage .contact input, 
body.vintage .contact textarea {
  background: #241a15;
  border: 1px solid rgba(201,151,76,0.3);
  color: var(--text);
}
body.vintage .contact input:focus, 
body.vintage .contact textarea:focus {
  border-color: #c9974c;
  box-shadow: 0 0 0 6px rgba(201,151,76,.15);
}

/* Vintage footer */
body.vintage .footer {
  color: #c2b097;
  border-top: 1px solid rgba(201,151,76,0.3);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .grid img { height:240px }
}