/* ============================================================
   WEDDING SITE — Laetitia & Luc
   Static CSS — all design tokens & styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Inter:wght@300;400;500;600&display=swap');

/* ---- CSS Variables ---- */
:root {
  --w-bg: 42 35% 96%;
  --w-text: 20 18% 14%;
  --w-accent: 358 40% 50%;
  --w-sage: 145 18% 60%;
  --w-muted: 35 18% 86%;
  --w-muted-text: 20 12% 52%;
  --w-border: 35 16% 82%;
  --font-heading: 'Cookie', cursive;
  --font-body: 'Inter', sans-serif;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: hsl(var(--w-bg));
  color: hsl(var(--w-text));
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.15;
}

a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

::selection { background-color: hsl(var(--w-accent) / 0.18); }

:focus-visible {
  outline: 2px solid hsl(var(--w-accent));
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Utility Classes ---- */
.w-divider {
  width: 3rem;
  height: 1px;
  background-color: hsl(var(--w-accent));
  margin: 1.5rem auto;
}

.w-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--w-accent));
}

/* ---- Scroll Fade Animation ---- */
.fade-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.fade-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-section { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: all 0.5s;
  padding: 1.25rem 0;
}
.navbar.scrolled {
  padding: 0.75rem 0;
  backdrop-filter: blur(12px);
  background-color: hsl(42 35% 96% / 0.92);
  border-bottom: 1px solid hsl(35 16% 82% / 0.7);
}
.navbar-inner {
  max-width: 72rem; margin: 0 auto; padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
}
.navbar-logo {
  font-family: var(--font-heading); font-size: 1.5rem;
  transition: opacity 0.2s;
}
.navbar-logo:hover { opacity: 0.7; }

.navbar-links { display: flex; align-items: center; gap: 1.75rem; }
.navbar-links a {
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; transition: opacity 0.2s;
}
.navbar-links a:hover { opacity: 0.6; }

/* Hamburger */
.hamburger { display: none; padding: 0.5rem; }

/* Mobile overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background-color: hsl(42 35% 96% / 0.97);
  transition: opacity 0.3s;
  opacity: 0; pointer-events: none;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--font-heading); font-size: 2.25rem;
  color: hsl(20 18% 14%); transition: opacity 0.2s;
  margin: 1rem 0;
}
.mobile-menu a:hover { opacity: 0.6; }

@media (max-width: 767px) {
  .navbar-links { display: none; }
  .hamburger { display: block; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, hsl(20 18% 8% / 0.3) 0%, hsl(20 18% 8% / 0.52) 55%, hsl(20 18% 8% / 0.72) 100%);
}
.hero-content {
  position: relative; z-index: 10; padding: 0 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.hero-overline {
  font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 0.25rem; color: hsl(0 0% 99% / 0.65);
}
.hero-title {
  font-family: var(--font-heading); line-height: 0.95;
  font-size: clamp(3.5rem, 12vw, 8rem); color: hsl(0 0% 99%);
  display: flex; align-items: baseline; justify-content: center; gap: 0.25rem;
}
.hero-title .heart-icon { width: 14px; margin-left: 0.375rem; opacity: 0.8; }
@media (min-width: 768px) { .hero-title .heart-icon { width: 18px; } }

.hero-divider {
  width: 3rem; height: 1px; margin: 0.25rem 0;
  background-color: hsl(0 0% 99% / 0.4);
}
.hero-tagline {
  font-family: var(--font-heading); line-height: 1;
  font-size: clamp(1.5rem, 4vw, 2.5rem); color: hsl(0 0% 99% / 0.9);
}
.hero-date {
  font-family: var(--font-body); font-weight: 300;
  letter-spacing: 0.15em; text-transform: uppercase; margin-top: 0.25rem;
  font-size: clamp(0.8rem, 2vw, 1rem); color: hsl(0 0% 99% / 0.75);
}
.hero-cta {
  display: inline-block; margin-top: 1.25rem;
  padding: 0.875rem 2rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  background-color: hsl(var(--w-accent)); color: hsl(0 0% 99%);
  transition: transform 0.3s;
}
.hero-cta:hover, .hero-cta:focus-visible { transform: scale(1.03); }

.scroll-indicator {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.scroll-indicator .line {
  width: 1px; height: 2.5rem;
  background: hsl(0 0% 99% / 0.35);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:0.35} 50%{opacity:0.8} }

/* ---- Countdown ---- */
.countdown { display: flex; align-items: center; gap: 1.5rem; justify-content: center; margin-top: 1rem; }
@media (min-width: 768px) { .countdown { gap: 2.5rem; } }
.countdown-unit { text-align: center; }
.countdown-value {
  display: block; font-family: var(--font-heading);
  font-variant-numeric: tabular-nums; line-height: 1;
  font-size: 1.875rem; color: hsl(0 0% 99%);
}
@media (min-width: 768px) { .countdown-value { font-size: 3rem; } }
.countdown-label {
  display: block; font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; margin-top: 0.25rem;
  font-family: var(--font-body); font-weight: 300;
  color: hsl(0 0% 99% / 0.65);
}
@media (min-width: 768px) { .countdown-label { font-size: 0.65rem; } }

/* ============================================================
   PROGRAMME
   ============================================================ */
.programme { padding: 6rem 1.25rem; max-width: 42rem; margin: 0 auto; }
@media (min-width: 768px) { .programme { padding: 8rem 1.25rem; } }

.programme-header { text-align: center; margin-bottom: 4rem; }
.programme-header h2 {
  font-size: clamp(2.2rem, 6vw, 3.5rem); color: hsl(20 18% 14%);
  display: flex; align-items: baseline; justify-content: center; gap: 0.25rem;
}
.programme-header h2 .heart-icon { width: 14px; margin-left: 0.375rem; opacity: 0.8; }
@media (min-width: 768px) { .programme-header h2 .heart-icon { width: 16px; } }

.day-title {
  font-family: var(--font-body); font-size: 0.7rem;
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  color: hsl(var(--w-accent)); margin-bottom: 2rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid hsl(35 16% 82%);
}

.timeline { position: relative; padding-left: 2rem; }
.timeline-line {
  position: absolute; left: 0.65rem; top: 0.5rem; bottom: 0; width: 1px;
  background-color: hsl(35 18% 86%);
}
.timeline-item { position: relative; margin-bottom: 2rem; }
.timeline-dot {
  position: absolute; left: -2rem; top: 0.25rem;
  width: 0.75rem; height: 0.75rem; border-radius: 50%;
  border: 2px solid hsl(var(--w-accent));
  background-color: hsl(42 35% 96%);
}
.timeline-time {
  font-family: var(--font-body); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  color: hsl(20 12% 52%); margin-bottom: 0.125rem;
}
.timeline-title {
  font-family: var(--font-heading); font-size: 1.6rem;
  color: hsl(20 18% 14%); margin-bottom: 0.25rem;
}
.timeline-text { font-size: 0.875rem; line-height: 1.625; color: hsl(20 12% 42%); }

.days-list > li + li { margin-top: 3.5rem; }

/* ============================================================
   NOTRE RENCONTRE
   ============================================================ */
.rencontre {
  padding: 6rem 1.25rem; background-color: hsl(0 0% 100%);
}
@media (min-width: 768px) { .rencontre { padding: 8rem 1.25rem; } }

.rencontre-inner {
  max-width: 72rem; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 3rem;
}
@media (min-width: 768px) {
  .rencontre-inner { flex-direction: row; gap: 5rem; }
}
.rencontre-img {
  width: 100%; border-radius: 1rem;
  aspect-ratio: 4/5; object-fit: cover; object-position: center top;
  box-shadow: 0 20px 60px hsl(20 18% 14% / 0.12);
}
.rencontre-img-wrap, .rencontre-text { width: 100%; }
@media (min-width: 768px) { .rencontre-img-wrap, .rencontre-text { width: 50%; flex-shrink: 0; } }

.rencontre-text h2 {
  font-size: clamp(2.4rem, 6vw, 4rem); color: hsl(20 18% 14%); margin-bottom: 1rem;
}
.rencontre-text h2 .heart-icon { display: inline; width: 14px; margin-left: 0.375rem; opacity: 0.8; vertical-align: baseline; }
@media (min-width: 768px) { .rencontre-text h2 .heart-icon { width: 16px; } }
.rencontre-text .w-divider { margin: 0 0 1.5rem 0; }
.rencontre-text p { font-size: 1rem; line-height: 1.9; font-weight: 300; color: hsl(20 12% 38%); }

/* ============================================================
   LE LIEU
   ============================================================ */
.lieu { padding: 6rem 1.25rem; background-color: hsl(42 35% 96%); }
@media (min-width: 768px) { .lieu { padding: 8rem 1.25rem; } }

.lieu-inner {
  max-width: 72rem; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 3rem;
}
@media (min-width: 768px) {
  .lieu-inner { flex-direction: row-reverse; gap: 5rem; }
}
.lieu-img-wrap, .lieu-text { width: 100%; }
@media (min-width: 768px) { .lieu-img-wrap, .lieu-text { width: 50%; flex-shrink: 0; } }
.lieu-img {
  width: 100%; border-radius: 1rem;
  aspect-ratio: 4/5; object-fit: cover;
  box-shadow: 0 20px 60px hsl(20 18% 14% / 0.1);
}
.lieu-text h2 {
  font-size: clamp(2.4rem, 6vw, 4rem); color: hsl(20 18% 14%); margin-bottom: 1rem;
}
.lieu-text h2 .heart-icon { display: inline; width: 14px; margin-left: 0.375rem; opacity: 0.8; vertical-align: baseline; }
@media (min-width: 768px) { .lieu-text h2 .heart-icon { width: 16px; } }
.lieu-text .w-divider { margin: 0 0 1.5rem 0; }
.lieu-address {
  font-style: normal; font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.04em; color: hsl(20 12% 42%); margin-bottom: 1.5rem;
}
.lieu-desc { font-size: 1rem; line-height: 1.9; font-weight: 300; color: hsl(20 12% 38%); margin-bottom: 1.5rem; }
.lieu-website-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.5rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  border: 2px solid hsl(var(--w-accent)); color: hsl(var(--w-accent));
  transition: transform 0.3s; margin-bottom: 1.5rem;
}
.lieu-website-btn:hover { transform: scale(1.02); }
.lieu-map {
  border-radius: 0.75rem; overflow: hidden; height: 240px;
  box-shadow: 0 4px 24px hsl(20 18% 14% / 0.08);
}
.lieu-map iframe { border: 0; width: 100%; height: 100%; }

/* ============================================================
   INFOS PRATIQUES (FAQ)
   ============================================================ */
.infos { padding: 6rem 1.25rem; background-color: hsl(0 0% 100%); }
@media (min-width: 768px) { .infos { padding: 8rem 1.25rem; } }
.infos-inner { max-width: 42rem; margin: 0 auto; }
.infos-header { text-align: center; margin-bottom: 3.5rem; }
.infos-header h2 {
  font-size: clamp(2.2rem, 6vw, 3.5rem); color: hsl(20 18% 14%);
}
.infos-header h2 .heart-icon { display: inline; width: 14px; margin-left: 0.375rem; opacity: 0.8; vertical-align: baseline; }
@media (min-width: 768px) { .infos-header h2 .heart-icon { width: 16px; } }

.faq-list { border-top: 1px solid hsl(35 16% 82%); }
.faq-item { border-bottom: 1px solid hsl(35 16% 82%); }
.faq-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; text-align: left; background: none; border: none; cursor: pointer;
}
.faq-btn span { font-size: 1rem; font-weight: 500; color: hsl(20 18% 14%); }
.faq-chevron {
  flex-shrink: 0; width: 18px; height: 18px;
  color: hsl(var(--w-accent)); transition: transform 0.3s;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer p {
  padding-bottom: 1.25rem; font-size: 0.875rem;
  line-height: 1.9; font-weight: 300; color: hsl(20 12% 42%);
}

/* ============================================================
   RSVP
   ============================================================ */
.rsvp {
  padding: 6rem 1.25rem;
  background: linear-gradient(135deg, hsl(42 35% 94%) 0%, hsl(35 25% 92%) 100%);
}
@media (min-width: 768px) { .rsvp { padding: 8rem 1.25rem; } }
.rsvp-inner { max-width: 36rem; margin: 0 auto; text-align: center; }
.rsvp-inner h2 {
  font-size: clamp(2.4rem, 6vw, 4rem); color: hsl(20 18% 14%); margin-bottom: 1rem;
}
.rsvp-inner h2 .heart-icon { display: inline; width: 14px; margin-left: 0.375rem; opacity: 0.8; vertical-align: baseline; }
@media (min-width: 768px) { .rsvp-inner h2 .heart-icon { width: 16px; } }
.rsvp-text {
  font-size: 0.875rem; line-height: 1.9; font-weight: 300;
  color: hsl(20 12% 42%); margin-bottom: 2.5rem;
}
.rsvp-buttons { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
@media (min-width: 640px) { .rsvp-buttons { flex-direction: row; } }

.rsvp-btn-yes {
  display: inline-block; padding: 0.875rem 2.5rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  background-color: hsl(var(--w-accent)); color: hsl(0 0% 99%);
  transition: transform 0.3s; text-align: center; width: 100%;
}
@media (min-width: 640px) { .rsvp-btn-yes { width: auto; } }
.rsvp-btn-yes:hover { transform: scale(1.03); }

.rsvp-btn-no {
  display: inline-block; padding: 0.875rem 2.5rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  border: 2px solid hsl(var(--w-accent)); color: hsl(var(--w-accent));
  transition: transform 0.3s; text-align: center; width: 100%;
}
@media (min-width: 640px) { .rsvp-btn-no { width: auto; } }
.rsvp-btn-no:hover { transform: scale(1.03); }

.rsvp-contact {
  margin-top: 2rem; font-size: 0.75rem; font-weight: 300; color: hsl(20 12% 52%);
}
.rsvp-contact a {
  text-decoration: underline; text-underline-offset: 2px;
  color: hsl(var(--w-accent)); transition: opacity 0.2s;
}
.rsvp-contact a:hover { opacity: 0.7; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  padding: 3rem 1.25rem; text-align: center;
  background-color: hsl(20 18% 14%);
}
.footer-names { font-family: var(--font-heading); font-size: 1.875rem; color: hsl(0 0% 99%); margin-bottom: 0.75rem; }
.footer-date {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 300; color: hsl(0 0% 99% / 0.45); margin-bottom: 1.5rem;
}
.footer-divider {
  width: 2rem; height: 1px; margin: 0 auto 1.5rem;
  background-color: hsl(var(--w-accent) / 0.5);
}
.footer-gallery-link {
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; color: hsl(0 0% 99% / 0.55); transition: opacity 0.2s;
}
.footer-gallery-link:hover { opacity: 0.6; }
.footer-legal { margin-top: 2rem; font-size: 0.65rem; color: hsl(0 0% 99% / 0.2); }

/* ============================================================
   GALERIE PAGE
   ============================================================ */
.galerie-topbar {
  position: sticky; top: 0; z-index: 30;
  padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between;
  backdrop-filter: blur(12px);
  background-color: hsl(42 35% 96% / 0.9);
  border-bottom: 1px solid hsl(35 16% 82% / 0.6);
}
.galerie-back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em;
  color: hsl(var(--w-accent)); transition: opacity 0.2s;
}
.galerie-back:hover { opacity: 0.6; }
.galerie-logo { font-family: var(--font-heading); font-size: 1.5rem; color: hsl(20 18% 14%); }

.galerie-main { flex: 1; padding: 6rem 1.25rem; }

.galerie-section {
  max-width: 36rem; width: 100%; margin: 0 auto;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2rem;
}
.galerie-section + .galerie-section { margin-top: 6rem; }

.galerie-section h1, .galerie-section h2 {
  font-size: clamp(2.4rem, 7vw, 4rem); color: hsl(20 18% 14%); margin-bottom: 1rem;
}
.galerie-section h1 { font-size: clamp(2.8rem, 8vw, 5rem); }

.galerie-icon-circle {
  width: 4rem; height: 4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background-color: hsl(var(--w-accent) / 0.1);
}
.galerie-icon-circle svg { color: hsl(var(--w-accent)); }

.galerie-desc { font-size: 1rem; line-height: 1.9; font-weight: 300; color: hsl(20 12% 42%); }

.galerie-btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 2rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  background-color: hsl(var(--w-accent)); color: hsl(0 0% 99%);
  transition: transform 0.3s;
}
.galerie-btn:hover { transform: scale(1.03); }

.galerie-copy-link {
  font-size: 0.75rem; text-decoration: underline; opacity: 0.7;
  color: hsl(20 12% 42%); transition: opacity 0.2s;
}
.galerie-copy-link:hover { opacity: 1; }

.galerie-grid {
  width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 1rem;
}
@media (min-width: 768px) { .galerie-grid { grid-template-columns: repeat(4, 1fr); } }
.galerie-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 0.75rem; }

.galerie-note { font-size: 0.75rem; font-weight: 300; color: hsl(20 12% 55%); }

.galerie-footer {
  padding: 2rem 0; text-align: center;
  border-top: 1px solid hsl(35 16% 82%);
}
.galerie-footer p {
  font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 300; color: hsl(20 12% 55%);
}

/* ========================================
   AMÉLIORATIONS DESIGN (AJOUT FIN DE FICHIER)
======================================== */

/* ===== HERO : resserrer les textes ===== */
.hero-content h1 {
  line-height: 0.95;
  margin-bottom: 0.3rem;
}

.hero-content p {
  margin: 0.3rem 0;
}

/* ===== BOUTON : effet hover plus élégant ===== */
button,
.btn {
  transition: all 0.2s ease;
}

button:hover,
.btn:hover {
  filter: brightness(0.92);
}

/* ===== NAVIGATION : état actif ===== */
.nav-link {
  position: relative;
}

.nav-link.is-active {
  color: var(--w-accent);
}

.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--w-accent);
  border-radius: 2px;
}

/* ===== PROGRAMME : lisibilité ===== */
.programme-day {
  margin-top: 2rem;
}

.programme-time {
  font-weight: 600;
  color: var(--w-accent);
}

/* ===== TEXTE : confort lecture ===== */
@media (min-width: 900px) {
  .text-block {
    max-width: 60ch;
  }
}

/* ===== FAQ : meilleure zone cliquable ===== */
.faq-button {
  padding: 1rem;
  width: 100%;
}

/* ===== GALERIE : texte info ===== */
.hint {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: -0.5rem;
}

/* ===== ANIMATION DOUCE AU SCROLL ===== */
.fade-section {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.6s ease;
}

.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}