/* ===========================
   RESET & BASE
   =========================== */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; width:100%; overflow-x:hidden; font-family:'Segoe UI', sans-serif; }
a { text-decoration:none; }

/* ===========================
   HERO / BACKGROUND
   =========================== */
.page-background{
  position:relative; width:100%; height:100vh;
  background:center/cover no-repeat;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; color:#fff8dc;
}
.page-background .container{ width:100%; max-width:1600px; margin:0 auto; padding:0 1rem; }

/* ===========================
   NAVIGATION (DESKTOP par défaut)
   =========================== */
.nav{
  position:absolute; top:2rem; left:0; right:0; z-index:1000;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:0 2rem;
}
.nav-left h2{ font-size:1.2rem; text-shadow:1px 1px 4px rgba(0,0,0,.7); }

.nav-center{ display:flex; justify-content:center; gap:2rem; }
.nav-center a,
.nav-right .btn{
  color:#fff8dc; font-weight:600; text-shadow:1px 1px 4px rgba(0,0,0,.7); transition:color .3s;
}
.nav-center a:hover, .nav-right .btn:hover{ color:#fff8dc; }

.nav-right{ justify-self:end; }
.nav-right .btn{
  background:transparent; border:2px solid rgba(255,255,255,.8); color:#fff8dc;
  padding:.5rem 1rem; border-radius:4px; transition: background .3s, color .3s, border-color .3s;
}
.nav-right .btn:hover{ background:rgba(255,255,255,.9); color:#000; border-color:#fff; }

/* ====== Bouton burger (nouvelle classe .burger-btn) ====== */
.burger-btn{ display:none; } /* caché en desktop */

/* ===========================
   FORMULAIRES & MESSAGES
   =========================== */
.login-form{
  display:flex; flex-direction:column; gap:1rem;
  background:rgba(0,0,0,.6); padding:2rem; border-radius:8px; width:100%; max-width:400px;
}
.login-form input{ padding:.75rem; border:none; border-radius:4px; }
.login-form button{
  padding:.75rem; border:none; border-radius:4px; background:#fff8dc; color:#000; font-weight:700; cursor:pointer;
}
.error{
  color:#ffdddd; background:rgba(255,0,0,.7); padding:.75rem; border-radius:4px; margin-bottom:1rem;
  max-width:400px; text-align:center;
}
.success{ color:#ddffdd; background:rgba(0,128,0,.5); padding:1rem; border-radius:4px; text-align:center; margin-bottom:1rem; }

/* RSVP */
.rsvp-form{
  display:flex; flex-direction:column; gap:0;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:2rem; border-radius:8px; max-width:1000px; margin:2rem auto;
}
.rsvp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 2rem; }
.form-group{ display:flex; flex-direction:column; gap:.5rem; }
.form-group label{ font-weight:600; color:#fff8dc; }
.form-group input, .form-group select, .form-group textarea{ padding:.75rem; border:none; border-radius:4px; font-size:1rem; }
.submit-btn{ margin:1.5rem auto 0; padding:.75rem 1.5rem; font-size:1rem; }

/* ===========================
   HEBERGEMENTS / LOCATIONS — CARROUSELS
   =========================== */
.hebergement-carousel-wrapper,
.locations-carousel-wrapper,
.rsvp-carousel-wrapper{
  position:relative; display:flex; align-items:center; margin:2rem 0; width:100%;
}

.hebergement-carousel,
.locations-carousel,
.rsvp-carousel{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  gap:1rem; padding:1rem 0;
  -ms-overflow-style:none; scrollbar-width:none;
}
.hebergement-carousel::-webkit-scrollbar,
.locations-carousel::-webkit-scrollbar,
.rsvp-carousel::-webkit-scrollbar{ display:none; }

.hebergement-card,
.location-card{
  flex:0 0 300px; max-width:320px;
  background:rgba(0,0,0,.6); color:#fff8dc;
  border-radius:8px; padding:1rem; scroll-snap-align:start; box-shadow:0 4px 10px rgba(0,0,0,.3);
}
.hebergement-card h2{ margin:0 0 .5rem; font-size:1.25rem; text-shadow:1px 1px 4px rgba(0,0,0,.7); }
.hebergement-card .type{ font-style:italic; margin-bottom:.5rem; }
.hebergement-card p{ margin:.25rem 0; font-size:.9rem; }

.carousel-btn{
  display:none; /* mobile: cachées */
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.7); border:none; color:#fff8dc; font-size:2rem;
  padding:.25rem .5rem; border-radius:50%; cursor:pointer; z-index:10;
}
.prev-btn{ left:-1rem; } .next-btn{ right:-1rem; }

/* ===========================
   AGENDA / LIEUX
   =========================== */
#schedule ul{ list-style:none; max-width:600px; margin:0 auto; padding:0; }
#schedule li{ padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.2); }
.locations-grid{ display:grid; grid-template-columns:1fr; gap:2rem; }
.location{ background:rgba(0,0,0,.4); border-radius:8px; padding:1rem; color:#fff; }
.map iframe{ width:100%; height:200px; border:0; border-radius:6px; }

/* Onglets Agenda */
.hidden{ display:none !important; }
.agenda-tabs.container{ display:flex; justify-content:center; align-items:center; gap:1rem; margin:1rem 0; }
.tab-btn{
  padding:.5rem 1.5rem; border:2px solid #fff8dc; background:transparent; color:#fff8dc; border-radius:4px; cursor:pointer;
  transition:background .3s, color .3s, border-color .3s;
}
.tab-btn:hover{ background:#fff8dc; color:#000; border-color:#fff8dc; }
.page-background{ padding-top:6rem; } /* place le contenu sous la nav */

/* ===========================
   GUEST FORM (petits blocs)
   =========================== */
.guest-form{ margin-bottom:8px; text-align:center; color:#000; }
.guest-form header{ margin-bottom:6px; font-size:1rem; }
.guest-form-row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:10px;
  background:rgba(255,255,255,.6); padding:8px 12px; border-radius:8px;
}
.guest-form-row label{ display:flex; flex-direction:column; text-align:left; min-width:120px; color:#000; }
.guest-form-actions{ display:flex; gap:6px; }
.guest-form-actions button, .guest-form-actions a{ white-space:nowrap; }

.nav-center .disabled{ color:rgba(255,255,255,.5); cursor:not-allowed; text-shadow:1px 1px 4px rgba(0,0,0,.7); }

/* ===========================
   RESPONSIVE
   =========================== */

/* 1) Affichage tablette/desktop pour les grilles */
@media (min-width:768px){
  .agenda ul{ grid-template-columns:1fr 1fr; }
  .locations-grid{ grid-template-columns:1fr 1fr; }
}

/* 2) Flèches des carrousels visibles dès 769px */
@media (min-width:769px){
  .carousel-btn{ display:block; }
  .prev-btn{ left:-3rem; } .next-btn{ right:-3rem; }
}

/* 3) Réduction des colonnes RSVP en mobile */
@media (max-width:768px){
  .rsvp-grid{ grid-template-columns:1fr; }
  .rsvp-form{ margin:1rem; }
  .submit-btn{ width:100%; text-align:center; }
}

/* 4) NAV MOBILE — burger actif jusqu’à 1024px */
@media (max-width:1024px){
  /* Bouton burger (haut-droite, pastille sombre) */
  .burger-btn{
    position:fixed; top:12px; right:12px; z-index:2000;
    display:inline-flex; align-items:center; gap:8px;
    padding:.55rem .9rem; border-radius:999px; white-space:nowrap;
    background:rgba(0,0,0,.62); color:#fff; border:1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); box-shadow:0 8px 18px rgba(0,0,0,.25);
    cursor:pointer; transition:background .18s ease, transform .02s ease;
  }
  .burger-btn:hover{ background:rgba(0,0,0,.72); }
  .burger-btn:active{ transform:translateY(1px); }
  .burger-btn span{ all:unset; display:inline-block; }
  .burger-btn .icon{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; line-height:0; }
  .burger-btn .icon svg{ display:block; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55)); }
  .burger-btn .label{ font-weight:800; font-size:.95rem; line-height:1; margin-top:1px; text-shadow:0 1px 2px rgba(0,0,0,.35); }

  /* Drawer : liens repliés par défaut */
  .nav-center{
    display:none; position:fixed; left:12px; right:12px; top:64px;
    padding:12px; border-radius:14px; z-index:1500;
    background:rgba(0,0,0,.55); color:#fff;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:0 14px 28px rgba(0,0,0,.28);
    flex-direction:column; gap:10px;
  }
  .nav.nav--open .nav-center{ display:flex; }
  .nav-center a{ color:#fff; font-weight:600; }

  /* Masquer .nav-right en mobile (le bouton ira dans le drawer si besoin) */
  .nav-right{ display:none; }
  body.menu-open{ overflow:hidden; }
}

/* 5) Burger caché au-delà de 1024px */
@media (min-width:1025px){
  .burger-btn{ display:none !important; }
}