@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Merriweather:wght@700&display=swap');

:root{ --carousel-h: 300px; }

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; background:#fff; color:#000; line-height:1.6; }

/* NAVBAR */
.navbar-top{ position: sticky; top: 0; z-index: 1000; height: 60px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.navbar-top::before{ content:""; position:absolute; inset:0; background:#fff; z-index:0; }
.brush-wrap{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.nav-links{ position:relative; z-index:2; text-align:center; }
.brush-left, .brush-center, .brush-right{ position:absolute; top:0; height:60px; background-repeat:no-repeat; background-size:contain; }
.brush-left{ left:8%; width:63px; background-image:url('brush_left.png'); background-position:left center; }
.brush-right{ right:8%; width:63px; background-image:url('brush_right.png'); background-position:right center; }
.brush-center{ left:calc(8% + 63px); right:calc(8% + 63px); background-image:url('brush_center.png'); background-repeat:no-repeat; background-position:center center; background-size:100% 60px; }

/* Liens du menu : serif gras */
.nav-links a{ font-family:'Merriweather', Georgia, 'Times New Roman', serif; font-weight:700; color:#fff; text-decoration:none; margin:0 1rem; font-size:1.05rem; letter-spacing:.02em; padding:.1rem .25rem; border-radius:4px; }
.nav-links a:hover{ text-decoration:underline; }
.nav-links a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Bouton hamburger — visible par défaut */
.nav-toggle{
  position: absolute; left: 12px; top: 12px; z-index: 3;
  width: 44px; height: 36px; display: block;
  align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 6px;
}
.nav-toggle:focus-visible{ outline: 2px solid #000; outline-offset: 2px; }
.nav-toggle .bar{ display:block; width:24px; height:2px; background:#000; margin:3px 0; transition: transform .3s ease, opacity .3s ease; }

/* HEADER */
.header-left-image .header-content{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2rem; padding:1.6rem 1rem; animation: fadeDown 1.1s ease-out both; }
.fairepart-left{ max-width:180px; height:auto; }
.header-text-right h1{ font-family:'Great Vibes', cursive; font-size:2.6rem; margin:0; }
.header-text-right .date{ margin-top:.25rem; font-size:1.2rem; }

/* MAIN */
main{ padding:2rem 2rem; animation: fadeIn 1.3s ease-out .2s both; }
section{ scroll-margin-top:80px; animation: fadeInUp 1s ease-out both; }
h2{ font-family:'Great Vibes', cursive; font-size:2rem; color:#cc2f2f; margin:0 0 .75rem 0; }
.gmap-link{ color:#cc2f2f; text-decoration:none; }
.gmap-link:hover{ text-decoration:underline; }

/* CAROUSEL layered crossfade */
.carousel{ max-width: 980px; margin: 0 auto; }
.carousel-viewport.three-up{ position: relative; height: var(--carousel-h); overflow: hidden; }
.carousel-layer{
  position:absolute; inset:0;
  display:flex; justify-content:center; align-items:flex-end;
  gap:10px;
  opacity:0; transition: opacity 1s ease-in-out;
}
.carousel-layer img{
  border-radius:12px; object-fit:cover; width:auto;
  height: calc(var(--carousel-h) - 60px); /* latérales */
  opacity:.75; transition: height .6s ease, opacity .6s ease;
}
.carousel-layer img.active{ height: var(--carousel-h); opacity:1; }

/* Encadré pratique + illustration */
.adresses-block{ display:flex; align-items:stretch; gap:2rem; }
.encadre-pratique{ background:#f7f7f7; border:1px solid #cc2f2f; border-radius:10px; padding:1.2rem 1.2rem; flex:1 1 0; }
.encadre-pratique h3{ margin:0 0 .6rem 0; font-size:1.1rem; font-weight:700; }
.encadre-pratique ul{ margin:0; padding-left:1.1rem; }
.encadre-pratique li{ margin:.6rem 0; }
.encadre-pratique li::marker{ color:#cc2f2f; }

.adresses-illustration{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.heart-image{ height:196px; width:auto; display:block; object-fit:contain; }

/* Separators */
.section-separator{ width:80%; height:2px; background-color:rgba(204,47,47,0.5); margin:2rem auto; border-radius:1px; }

/* FOOTER */
footer{ background:#000; color:#fff; text-align:center; padding:1rem; font-size:.95rem; }
footer a{ color:#fff; text-decoration:underline; }

/* Animations */
@keyframes fadeDown{ from{opacity:0; transform:translateY(-16px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* --- MOBILE NAV PATCH --- */
@media (max-width: 780px){
  .navbar-top{ height:auto; min-height:60px; overflow:visible; }
  .navbar-top.menu-open .brush-wrap{ display:none; }

  .nav-links{
    position:absolute; left:0; right:0; top:60px;
    display:none; flex-direction:column; gap:.25rem;
    padding:.75rem 1rem 1rem; background:rgba(0,0,0,0.85);
    border-bottom-left-radius:10px; border-bottom-right-radius:10px;
    z-index:5;
  }
  .nav-links a{ color:#fff; display:block; margin:.2rem 0; font-size:1rem; text-align:left; }
  .nav-links.open{ display:flex; }

  .nav-toggle.active .bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
  .nav-toggle.active .bar:nth-child(2){ opacity:0; }
  .nav-toggle.active .bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }
}

/* Cache le bouton en desktop */
@media (min-width: 781px){
  .nav-toggle{ display:none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .header-content, main, section{ animation:none !important; }
}

/* Responsive tweak carrousel */
@media (max-width: 860px){
  :root{ --carousel-h: 260px; }
}
@media (max-width: 768px){
  .header-left-image .header-content{ flex-direction:column; text-align:center; gap:1rem; }
  .fairepart-left{ max-width:140px; }
  .header-text-right h1{ font-size:2.1rem; }
  .header-text-right .date{ font-size:1.05rem; }
  .nav-links a{ margin:0 .6rem; font-size:1rem; display:inline-block; }
  main{ padding:1.25rem; }
}
@media (max-width: 480px){
  .nav-links a{ display:block; margin:.25rem 0; }
  .header-text-right h1{ font-size:1.8rem; }
  .header-text-right .date{ font-size:.95rem; }
  body{ line-height:1.65; }
}