:root{
  /* 🎨 Palette Burgundy */
  --bg: #F6EFE9;
  --paper: #EADFD4;
  --ink: #4A0F1D;
  --muted: #7A4A52;
  --accent: #6B1F2B;
  --accent-dark: #4A0F1D;
  --gold: #B48B63;

  --elev: 0 10px 30px rgba(0,0,0,.08);
  --radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: var(--bg);
}

/* Police Soria (fallback auto si non présente) */
@font-face{
  font-family:"Soria";
  src:url('./assets/fonts/soria.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

a{
  color:var(--accent);
  text-decoration:none;
}

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

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* ===== Header ===== */
.header{
  position:sticky;
  top:0;
  z-index:999;
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:66px;
}

.brand{
  font-weight:600;
  letter-spacing:.08em;
  color:var(--accent-dark);
}

.menu{
  display:flex;
  gap:20px;
  font-size:15px;
}

.menu a{
  padding:8px 10px;
  border-radius:10px;
}

.menu a:hover{
  }

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:100vh;
  background: url('./assets/hero.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
}


.hero::before,






.hero > .container{
  position:relative;
  z-index:1;
}

.tag{
  display:inline-block;
  padding:6px 14px;
  border:1px solid rgba(107,31,43,.35);
  border-radius:999px;
  background:#fff;
  box-shadow:var(--elev);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--accent);
}

h1{
  margin:16px 0 8px;
  font-size:56px;
  line-height:1.05;
  font-weight:600;
  color:var(--accent-dark);
}

.subtitle{
  color:var(--muted);
}

/* ===== Countdown ===== */
.countdown{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:20px;
}

.countdown .box{
  min-width:72px;
  padding:10px 8px;
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--elev);
}

.countdown .num{
  font-size:22px;
  font-weight:700;
  color:var(--accent-dark);
}

.countdown .lbl{
  font-size:11px;
  color:var(--muted);
}

/* ===== Sections ===== */
.section{
  padding:80px 0;
}

.card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  box-shadow:var(--elev);
}

.split{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:32px;
}

@media (max-width:900px){
  .split{grid-template-columns:1fr}
  h1{font-size:40px}
}

.kv{
  padding:28px;
}

.kv h2{
  margin:0 0 12px;
  font-size:36px;
  color:var(--accent-dark);
}

.kv p{
  color:var(--muted);
}

/* ===== Details ===== */
.detail-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:14px;
}

@media (max-width:900px){
  .detail-list{grid-template-columns:1fr}
}

.detail{
  padding:16px;
  border-radius:14px;
  border:1px dashed rgba(107,31,43,.35);
  background:linear-gradient(
    180deg,
    rgba(234,223,212,.7),
    rgba(255,255,255,.95)
  );
}

.detail strong{
  display:block;
  font-size:14px;
  letter-spacing:.06em;
  color:var(--accent);
}

.detail span{
  display:block;
  margin-top:6px;
  font-weight:600;
  color:var(--accent-dark);
}

/* ===== Timeline ===== */
.timeline{
  padding:24px;
}

.items{
  display:grid;
  gap:14px;
}

.item{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:16px;
  align-items:start;
  padding:16px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  background:#fff;
}

@media (max-width:700px){
  .item{grid-template-columns:1fr}
}

.time{
  font-weight:700;
  letter-spacing:.06em;
  color:var(--accent);
}

.place{
  font-weight:600;
  color:var(--accent-dark);
}

.note{
  color:var(--muted);
}

/* ===== Buttons ===== */
.button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:var(--paper);
  font-weight:700;
  color:var(--accent-dark);
  cursor:pointer;
}

.button.primary{
  background:linear-gradient(135deg, #6B1F2B, #4A0F1D);
  color:#fff;
  border:none;
}

/* ===== Gallery ===== */
.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  padding:8px;
  border-radius:16px;
  overflow:hidden;
}

@media (max-width:700px){
  .gallery{grid-template-columns:1fr 1fr}
}

/* ===== Footer ===== */
.footer{
  text-align:center;
  padding:34px 20px;
  color:var(--muted);
}

.hidden{display:none!important}


h1, h2, h3{font-family:"Playfair Display", serif;}



/* ===== Modern UX layer ===== */
:root{
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 64px;

  --ring: 0 0 0 4px rgba(107,31,43,.18);
  --elev-2: 0 18px 50px rgba(0,0,0,.10);
}

.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  padding:10px 14px;
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.1);
  box-shadow: var(--elev);
}
.skip-link:focus{left:10px; z-index:2000; outline:none; box-shadow: var(--ring), var(--elev);}

.header{border-bottom:1px solid rgba(0,0,0,.08);}
.nav{gap:14px;}
.menu-toggle{
  display:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-size:18px;
  line-height:1;
  box-shadow: var(--elev);
  cursor:pointer;
}
.menu-toggle:focus{outline:none; box-shadow: var(--ring), var(--elev);}

.menu a:focus{outline:none; box-shadow: var(--ring);}
a.button:focus{outline:none; box-shadow: var(--ring), var(--elev);}

.hero{
  position:relative;
  min-height:100vh;
  background: url('./assets/hero.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero .tag{}
.actions{
  margin-top: var(--space-6);
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.button{transition: transform .12s ease, box-shadow .12s ease, background .12s ease;}
.button:hover{transform: translateY(-1px); box-shadow: var(--elev-2);}
.button.primary:hover{filter: brightness(1.02);}

.section{padding: var(--space-8) 0;}
.section + .section{border-top: 1px solid rgba(0,0,0,.06);}
.card{box-shadow: var(--elev-2);}

.split{gap: var(--space-7);}
.kv{padding: var(--space-7);}
.timeline{padding: var(--space-7);}

.item{transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;}
.item:hover{
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
  border-color: rgba(107,31,43,.18);
}

.detail-list{gap: var(--space-4);}
.detail{padding: var(--space-5);}

.gallery{
  gap:10px;
  padding:10px;
  border:1px solid rgba(0,0,0,.06);
}

.footer{padding: 42px 20px;}

/* ===== Responsive nav ===== */
@media (max-width: 820px){
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center;}
  .menu{
    position: absolute;
    top: 66px;
    right: 14px;
    left: 14px;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border:1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: var(--elev-2);
  }
  .menu.open{display:flex;}
  .menu a{padding:12px 12px; font-size:16px;}
  .nav{position:relative;}
  .brand{font-size:14px;}
  h1{font-size:42px;}
}
@media (max-width: 480px){
  h1{font-size:36px;}
  .hero{
  position:relative;
  min-height:100vh;
  background: url('./assets/hero.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
}

  .countdown .box{min-width:66px;}
}


/* RSVP spacing fix */
.rsvp-card{
  padding: 34px !important;
}
@media (max-width: 700px){
  .rsvp-card{
    padding: 22px !important;
  }
}


/* RSVP clean & modern */
.rsvp-section {
  background-color: #f7f4f2;
  text-align: center;
}

.rsvp-section .container {
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.rsvp-text {
  max-width: 720px;
  margin: 0 auto 1.2rem;
  line-height: 1.7;
}

.btn-primary {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.9rem 2.4rem;
  background-color: #6b1f2b;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 500;
}

.btn-primary:hover {
  background-color: #531822;
}


/* Hero subtle fade to cream (keeps photo natural, less "loud") */
.hero{
  position: relative;
  overflow: hidden;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.10) 35%,
    rgba(248,242,236,0.55) 70%,
    rgba(248,242,236,0.95) 100%
  );
}
/* Ensure hero content stays above overlay */
.hero > *{
  position: relative;
  z-index: 1;
}



/* Text shield for hero content (Option 1) */
.hero-content{
  background: rgba(248,242,236,0.78);
  padding: 2.5rem 3rem;
  border-radius: 18px;
  max-width: 720px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

@media (max-width: 768px){
  .hero-content{
    padding: 2rem 1.5rem;
    margin: 0 1rem;
  }
}


/* Top bar color inversion */
header,
.top-bar,
.site-header {
  background-color: #6b1f2b; /* burgundy */
}

header a,
header nav a,
.site-header a {
  color: #f8f2ec; /* cream */
}

header a:hover,
header nav a:hover {
  opacity: 0.85;
}