/* ...existing CSS from the original <style> block (no change in rules) ... */
:root{
  /* Palette demandée */
  --bg:#FFEADC;                 /* Fond dominant */
  --panel:#ffffff;
  --fg:#463a37;
  --muted:#7c6f6b;
  --border:#f1ddd3;

  --primary:#E67527;            /* Couleur texte/accent */
  --primary-strong:#c9621f;     /* Variante foncée */

  --shadow: 0 10px 25px rgba(0,0,0,.06);
  --shadow-soft: 0 6px 16px rgba(0,0,0,.05);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 "Arapey", Georgia, serif; letter-spacing:.02em;
}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:auto;padding:0 20px}

/* Header */
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.1) blur(8px);
  background:rgba(255,234,220,.92);
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s ease, background-color .25s ease;
}
header.scrolled{box-shadow:0 6px 18px rgba(0,0,0,.06);background:rgba(255,234,220,.97)}
nav{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font: 36px/1 "Great Vibes", cursive; color:var(--primary); white-space:nowrap}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{padding:.3rem .1rem;font-weight:700;letter-spacing:.03em}
.hamb{display:none;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer}
.hamb[aria-expanded="true"]{transform:rotate(90deg)}
@media (max-width:860px){
  .hamb{display:block}
  .nav-links{
    position:absolute;left:0;right:0;top:60px;display:none;flex-direction:column;
    gap:12px;padding:12px 20px;background:rgba(255,234,220,.98);
    border-bottom:1px solid var(--border);
  }
  .nav-open .nav-links{display:flex}
}

/* Boutons */
.btn{
  position:relative;display:inline-block;padding:.8rem 1.1rem;border-radius:999px;
  border:1px solid var(--border);font-weight:700;background:var(--panel);
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-strong)}

.card{
  border:1px solid var(--border);border-radius:18px;padding:18px;background:var(--panel);
  box-shadow:var(--shadow);backdrop-filter:saturate(1.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.08)}

/* HERO (lisibilité conservée) */
.hero{
  position:relative;overflow:hidden;min-height:58vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background: url("ImageChateau.jpg") center/cover no-repeat;
  color:#fff;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.14) 60%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.20) 35%, rgba(255,234,220,.88) 100%);
}
.hero-inner{position:relative;z-index:1;padding:86px 0 36px}

.title-plaque{
  display:inline-block;max-width:min(95vw,900px);
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  padding:18px 22px;border-radius:18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.22), inset 0 0 6px rgba(255,255,255,.04);
}
.sub{
  display:inline-block;margin-bottom:10px;padding:.2rem .6rem;border-radius:999px;
  font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;background:rgba(230,117,39,.28);border:1px solid rgba(230,117,39,.45);
  box-shadow:0 1px 6px rgba(0,0,0,.15);
}
.names{
  font: clamp(42px, 6.8vw, 88px) / 1.05 "Great Vibes", cursive;
  margin:6px 0 0 0; color:var(--primary);
  text-shadow: 0 10px 22px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.45);
  -webkit-text-stroke: .3px rgba(0,0,0,.20);
}
.event-lines{
  display:inline-block;margin-top:12px;padding:.55rem .85rem;border-radius:12px;
  background: rgba(0,0,0,.18);
  color:#fff; backdrop-filter: blur(3px);
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.22);
}
.event-lines .line + .line{
  margin-top:.35rem;padding-top:.35rem;border-top:1px solid rgba(255,255,255,.18);
}

/* Countdown */
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:540px;margin:22px auto 8px}
.box{border:1px solid var(--border);border-radius:16px;padding:14px;text-align:center;background:rgba(255,255,255,.95);box-shadow:0 8px 22px rgba(0,0,0,.10)}
.num{font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:1.7rem;font-weight:700;color:#2b221f}
.lbl{font-size:.78rem;color:#6d5d59;margin-top:4px}
.after-count{margin-top:10px;display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.venue{font-weight:700;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6)}

section{padding:56px 0}
.section-title{text-align:center;margin-bottom:16px}
#rsvp .container-narrow{max-width:900px;margin:0 auto}

.grid{display:grid;gap:16px}

.after-count {margin-top: 20px; /* ajuste la valeur comme tu veux */}

/* Global rule: applies on mobile AND desktop */
.grid-4 {
  margin-top: 16px; 
}

@media (min-width:900px){ 
  .grid-3{grid-template-columns:repeat(3,1fr)} 
  .grid-2{grid-template-columns:repeat(2,1fr)} 
  
  /* Desktop specific: width and centering */
  .grid-4 {
    grid-template-columns: 1fr;
    width: calc((100% - 16px) / 2);
    margin: 16px auto 0; /* Keeps the top margin, adds centering */
  }
}


/* Slider */
.slider-zone{position:relative}
.slider-wrap{overflow:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:0}
.slider{display:flex;gap:16px;padding-bottom:6px;justify-content:center}
.slide{flex:0 0 auto;width:min(95vw,1100px);aspect-ratio:21/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);scroll-snap-align:center}
.slide img{width:100%;height:100%;object-fit:cover}
.slider-nav{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:0 10px}
.nav-btn{pointer-events:auto;border:0;border-radius:999px;width:44px;height:44px;font-size:20px;font-weight:700;background:var(--primary);color:#fff;box-shadow:var(--shadow-soft);display:grid;place-items:center;cursor:pointer;transition:transform .15s ease}
.nav-btn:hover{transform:translateY(-1px)}
.nav-btn:disabled{opacity:.35;cursor:not-allowed}

footer{border-top:1px solid var(--border);padding:28px 0;text-align:center;color:var(--muted);
  background:linear-gradient(to bottom, rgba(230,117,39,.08), transparent 35%)}

input,textarea,select{width:100%;padding:.7rem .85rem;border:1px solid var(--border);border-radius:12px;background:transparent;color:inherit;transition:border-color .2s ease, box-shadow .2s ease}
input:focus,textarea:focus,select:focus{outline:none;border-color:color-mix(in oklab, var(--primary) 35%, white);box-shadow:0 0 0 4px color-mix(in oklab, var(--primary) 18%, white)}
label{font-size:.92rem;color:var(--muted);display:block;margin:6px 0 2px}
/* Tous les labels du formulaire RSVP */
#rsvp label {font-size: .92rem;   /* conserve la taille existante */
  color: black;        /* texte noir */
  display: block;
  margin: 6px 0 2px}

/* Hébergements */
.stay{display:flex; gap:14px; align-items:center;}
.stay-thumb{
  flex:0 0 64px; width:64px; height:64px; border-radius:12px; overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-soft); background:#f8f6f5;
}
.stay-thumb img{width:100%;height:100%;object-fit:cover}
.stay-body{flex:1 1 auto}
.stay-body small{color:var(--muted)}

/* RSVP – layout 2 colonnes propre */
.rsvp-card{ padding:28px; border-radius:18px; background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow); }
.rsvp-grid{ display:grid; gap:24px; align-items:center; }
@media (min-width:900px){ .rsvp-grid{ grid-template-columns: 1.3fr .9fr; } }
.rsvp-list{ margin:0; padding:0; list-style:none; line-height:1.9; color:var(--fg); }
.rsvp-list li::before{ content:"•"; margin-right:.6rem; color:var(--primary); }
.rsvp-cta{ text-align:center; }
.rsvp-cta .btn{ font-size:1rem; padding:1rem 1.4rem; }
.rsvp-help{ margin-top:.75rem; color:var(--muted); font-size:.9rem; }

/* Justification des textes infos pratiques */
  #infospratiques p {text-align: justify;}
  #contacts small {text-align: justify;}
  
/* Conteneur du bouton et de l'image */
.toggle-photo-wrapper {
  text-align: center;
  margin: 20px 0;
  position: relative; /* permet de positionner le bouton au-dessus */}

/* Bouton + / − */
#togglePhotoBtn {
  position: absolute; /* fixe le bouton au même endroit */
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* centre horizontalement */
  z-index: 2; /* reste au-dessus de l'image */
  padding: 8px 16px;
  font-size: 20px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background-color: var(--primary);
  color: white;
}

/* Boîte de l'image */
.photo-box {
  margin-top: 50px; /* espace pour que l'image n'empiète pas sur le bouton */
  padding: 12px;
  border: 2px solid var(--primary);
  border-radius: 12px;
  display: inline-block;
  max-width: 90%; /* la boîte ne dépasse jamais 90% de l'écran */
}

/* Masquer la boîte */
.photo-box.hidden {
  display: none;
}

/* Image à l'intérieur */
.photo-small {
  width: 100%;  /* s'adapte à la largeur de la boîte */
  height: auto; /* garde les proportions */
  display: block;
  margin: 0 auto;
  max-width: 400px; /* optionnel : limite la taille sur grand écran */
}