:root {
  --sage: #7a8a6f;
  --sage-dark: #5c6b52;
  --cream: #faf6ee;
  --banner-bg: #f2ead9;
  --ink: #3a3a35;
  --gold: #c9a662;
  --pen-blue: #2c3e63;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---- V2 : le header n'est plus superposé à l'image ----
   Différence structurelle avec la version actuelle : au lieu d'un
   .page-banner positionné en absolute sur <body> (donc démarrant à y=0,
   recouvert ensuite par le header opaque posé par dessus), le bandeau de
   fleurs est maintenant à l'intérieur de .banner-wrap, qui vient APRÈS le
   header dans le flux normal de la page. Le header garde une hauteur fixe
   en rem, mais comme il n'est plus jamais superposé à l'image, sa hauteur
   ne "mange" plus une fraction (variable selon la largeur d'écran) du haut
   de l'image. Plus aucune fleur ne peut donc être masquée par le header,
   quelle que soit la taille de l'écran — le bug de couplage header/image
   est supprimé à la racine plutôt que compensé au cas par cas sur mobile. */

.banner-wrap {
  position: relative;
}

.page-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-image: url("images/page-banner-v3.webp");
  /* Image large de 2400px pour 14400px de haut (ratio 1:6). Étirée à 100%
     de la largeur de la fenêtre, ses fleurs gardent exactement la même
     échelle à tout moment, du haut jusqu'en bas de .banner-wrap. */
  background-size: 100% auto;
  background-repeat: no-repeat;
  /* Décalage vertical vers le haut (en vw, proportionnel à l'échelle de
     l'image qui dépend de la largeur d'écran) pour réduire l'espace vide
     entre le bas du header et les premières fleurs. */
  background-position: center top -5vw;
  z-index: -1;
  pointer-events: none;
}

header {
  background: var(--sage);
  color: white;
  padding: 1.5rem 1rem;
  text-align: center;
}

header h1 {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 2.6rem;
  letter-spacing: 0.04em;
}

nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 0.75rem;
}

nav a {
  color: white;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

nav a:hover, nav a.active {
  border-bottom: 1px solid var(--gold);
}

main a {
  color: var(--sage-dark);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 2px;
}

main a:hover {
  color: var(--gold);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* ---- Zone du titre, calée sur la partie "bandeau" de page-banner.webp ---- */

.hero-text-wrap {
  aspect-ratio: 12 / 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 9rem 2rem 2rem;
}

.hero-banner-text {
  text-align: center;
}

.hero-banner-text .announce {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.hero-banner-text .date {
  font-size: 1.5rem;
  color: var(--sage-dark);
  margin-bottom: 0.5rem;
}

.hero-banner-text .lieu {
  font-size: 1.05rem;
  opacity: 0.85;
}

.countdown {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  color: var(--gold);
  font-style: italic;
}

section { margin-bottom: 2.5rem; }

main p {
  text-align: justify;
  color: #161613;
}

h2 {
  font-weight: normal;
  color: var(--sage-dark);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

.sub-section {
  margin-bottom: 1.5rem;
}

.sub-section h3 {
  font-weight: bold;
  font-size: 1rem;
  color: var(--sage-dark);
  margin-bottom: 0.3rem;
}

.timeline-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.timeline-item .heure {
  min-width: 70px;
  font-weight: bold;
  color: var(--sage-dark);
}

form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

label { font-weight: bold; font-size: 0.95rem; }

input[type="text"], input[type="number"], select, textarea {
  padding: 0.6rem;
  border: 1px solid #ccc4b3;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  background: white;
}

.radio-group, .checkbox-group {
  display: flex;
  gap: 1.5rem;
  font-weight: normal;
}

button {
  background: var(--sage);
  color: white;
  border: none;
  padding: 0.8rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.03em;
}

button:hover { background: var(--sage-dark); }

.message {
  margin-top: 1rem;
  padding: 0.8rem;
  border-radius: 4px;
  display: none;
}

.message.success { background: #e3ecdd; color: var(--sage-dark); display: block; }
.message.error { background: #f3d9d9; color: #8a3b3b; display: block; }

/* ---- Collage photo façon polaroids, légendes à la main ---- */

.collage-section {
  padding: 1rem 0 2rem;
}

.collage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Empêche les polaroids d'une même rangée de s'étirer pour s'aligner sur
     le plus haut d'entre eux (comportement par défaut de align-items) :
     chaque polaroid garde sa propre hauteur naturelle, identique pour
     les 4, indépendamment des marges qui créent l'effet "en vrac". */
  align-items: flex-start;
  gap: 0;
  max-width: 460px;
  margin: 1rem auto 0;
}

.polaroid {
  width: 190px;
  background: white;
  padding: 10px 10px 0;
  border: 1px solid #e8ddc8;
  box-shadow: 0 6px 18px rgba(58, 58, 53, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.polaroid img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

.polaroid figcaption {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat', cursive;
  /* Taille fluide : reste à 1.5rem sur les écrans larges, se réduit sur
     les écrans étroits pour que les légendes les plus longues (ex. "Lago
     Maggiore") restent sur une seule ligne au lieu de passer à la ligne. */
  font-size: clamp(0.85rem, 4.5vw, 1.5rem);
  color: var(--pen-blue);
  line-height: 1;
  white-space: nowrap;
  padding: 0 4px;
}

.photo-1 { transform: rotate(-6deg); margin: 0 -16px 14px 0; z-index: 1; }
.photo-2 { transform: rotate(5deg); margin: 10px 0 14px -16px; z-index: 2; }
.photo-3 { transform: rotate(4deg); margin: -10px -16px 0 0; z-index: 1; }
.photo-4 { transform: rotate(-5deg); margin: 0 0 0 -16px; z-index: 2; }

/* ---- Section de clôture ---- */

.closing {
  text-align: center;
  padding-top: 1rem;
}

.closing p {
  /* "main p" impose text-align: justify pour le texte de Bienvenue ; on
     rétablit explicitement le centrage ici pour cette phrase courte. */
  text-align: center;
  font-style: italic;
  color: var(--sage-dark);
  font-size: 1.1rem;
}

footer {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ---- Responsive ----
   Le header reste solide (var(--sage)) à toutes les tailles d'écran : plus
   besoin de le rendre plus petit ou transparent pour "laisser passer" les
   fleurs, puisqu'il ne les recouvre jamais. Les ajustements mobiles
   restants ne concernent donc plus que la lisibilité du texte par-dessus
   les fleurs (padding fixe généreux + ombre portée) et sa taille. */

@media (max-width: 560px) {
  .page-banner {
    /* Fresque spécifique mobile : fleurs réduites de 40 % (même ratio,
       pas d'étirement) et décalées de 75 px vers le bas. Uniquement sur
       mobile : le bandeau desktop (page-banner.webp) est inchangé. */
    background-image: url("images/page-banner-mobile-40-v3.webp");
  }

  .hero-text-wrap {
    /* Le ratio 12/3 est pensé pour les écrans larges ; sur mobile le texte
       (4 lignes) a besoin de plus de hauteur que ce ratio ne le permet.
       On désactive le ratio et on utilise un padding fixe à la place :
       la boite s'ajuste simplement à son contenu. Marges latérales fixes
       plus généreuses pour que le texte ne touche plus les bords des
       fleurs sur les petits écrans. */
    aspect-ratio: unset;
    padding: 3.3rem 2.2rem 1.5rem;
  }

  header {
    padding: 1rem 1rem;
  }

  header h1 {
    font-size: 1.6rem;
  }

  nav {
    gap: 1.2rem;
    margin-top: 0.5rem;
  }

  nav a {
    font-size: 0.85rem;
  }

  .hero-banner-text .announce {
    font-size: 0.9rem;
  }

  .hero-banner-text .date {
    font-size: 1.1rem;
  }

  .hero-banner-text .lieu {
    font-size: 0.85rem;
  }

  .countdown {
    font-size: 0.85rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  /* Padding fixe (pas de vw) pour que le texte garde un espace confortable
     et lisible par rapport aux fleurs, quelle que soit la largeur exacte
     de l'écran. Marges latérales encore un peu plus larges pour que les
     bords du texte ne se superposent plus aux fleurs sur téléphone. */
  main {
    padding: 2.5rem 3.2rem;
  }

  main p {
    font-size: 0.85rem;
  }

  /* Marges latérales du bloc Bienvenue : 3.2rem -> 3.8rem, sans toucher
     aux polaroïds (qui compensent le padding de main). */
  main > section:first-child {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  .collage-section {
    /* Compense l'écart entre le padding actuel de main (3.2rem) et le
       padding d'origine (1.8rem) pour que les polaroids gardent la même
       largeur qu'avant, indépendamment des marges ajoutées pour le texte. */
    margin-left: -1.4rem;
    margin-right: -1.4rem;
  }

  .collage {
    max-width: 100%;
  }

  .polaroid {
    width: 44%;
  }

  .polaroid img {
    height: 150px;
  }

  .photo-1 { margin: 0 -10px 20px 0; }
  .photo-2 { margin: 10px 0 20px -10px; }
  .photo-3 { margin: -12px -10px 0 0; }
  .photo-4 { margin: 0 0 0 -10px; }
}

/* ---- Halo crème d'origine derrière les lettres (à la place du contour) ---- */

.hero-banner-text .announce,
.hero-banner-text .date,
.hero-banner-text .lieu,
.countdown {
  text-shadow: 0 1px 12px rgba(250, 246, 238, 0.8);
}

main p {
  text-shadow: 0 1px 10px rgba(250, 246, 238, 0.9), 0 0 4px rgba(250, 246, 238, 0.9);
}

h2,
.closing p,
footer {
  text-shadow: 0 1px 10px rgba(250, 246, 238, 0.9);
}

/* ---- Page RSVP : fresque de cépages (à la place des fleurs) ---- */

.page-banner.page-banner-rsvp {
  background-image: url("images/page-banner-rsvp.webp");
}

@media (max-width: 560px) {
  .page-banner.page-banner-rsvp {
    /* Version mobile : planches 50 % plus petites que sur desktop. */
    background-image: url("images/page-banner-rsvp-mobile.webp");
  }
}

/* ---- Esquisse de la Chartreuse sous la signature du pied de page ----
   L'image a des marges transparentes : le bâtiment occupe ~87 % de sa
   largeur (320 px -> ~280 px sur desktop ; 41,3vw -> ~36 % de l'écran
   sur mobile). */

footer .chartreuse {
  display: block;
  width: 320px;
  max-width: none;
  height: auto;
  margin: 1.2rem auto 0;
}

@media (max-width: 560px) {
  footer .chartreuse {
    width: 41.3vw;
  }
}

/* ---- Infos pratiques : vignette Google Maps du lieu ---- */

.map-embed {
  margin-top: 1rem;
  border: 1px solid #e8ddc8;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(58, 58, 53, 0.12);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

.map-link {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  text-align: right;
}

@media (max-width: 560px) {
  .map-embed iframe {
    height: 240px;
  }
}

/* ===== Desktop (>=1101px) : mêmes fresques que la v1 ===== */
/* RSVP : habillage latéral (photos + illustrations de cépages), desktop uniquement */
.rsvp-wrap{position:relative;}
.side-photos.classic{position:absolute;top:1.6rem;display:flex;flex-direction:column;gap:1rem;width:190px;z-index:0;}
.side-photos.classic.left{left:calc(50% - 640px + 50px);}
.side-photos.classic.right{right:calc(50% - 640px + 50px);}
.side-photos.classic .pol{background:#fff;padding:8px 8px 22px;border:1px solid #e8ddc8;box-shadow:0 6px 18px rgba(58,58,53,.18);}
.side-photos.classic .pol img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;}
.side-photos.classic .pol:nth-child(1){transform:rotate(-4deg);margin-left:6px}
.side-photos.classic .pol:nth-child(2){transform:rotate(3deg);margin-left:-6px}
.side-photos.classic .pol:nth-child(3){transform:rotate(-2.5deg);margin-left:4px}
.side-photos.classic.right .pol:nth-child(1){transform:rotate(3.5deg);margin-left:-4px}
.side-photos.classic.right .pol:nth-child(2){transform:rotate(-3deg);margin-left:6px}
.side-photos.classic.right .pol:nth-child(3){transform:rotate(2.5deg);margin-left:-6px}
.side-photos.classic .plate{width:174px;margin:-10px 0 -10px 8px;border:0;box-shadow:none;background:none;}
.side-photos.classic .plate img{display:block;width:100%;height:auto;transform:scale(.75);transform-origin:50% 50%;}
.side-photos.classic .plate:nth-child(2){transform:rotate(2.5deg)}
.side-photos.classic.right .plate:nth-child(1){transform:rotate(-2deg)}
.side-photos.classic.right .plate:nth-child(3){transform:rotate(3deg)}
@media (max-width:1100px){.side-photos.classic{display:none;}}


/* ===== Mobile / tablette : fresques v2 (12 visuels par côté) ===== */
/* RSVP : habillage latéral (photos + illustrations de cépages) */
.rsvp-wrap{position:relative;}
.side-photos.alt{position:absolute;top:1.6rem;bottom:1.6rem;display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:128px;z-index:0;}
.side-photos.alt > :nth-child(n+7){display:none;}
.side-photos.alt.left{left:calc(50% - 640px + 80px);}
.side-photos.alt.right{right:calc(50% - 640px + 80px);}
.side-photos.alt figure{margin:0;}
.side-photos.alt .pol{width:112px;background:#fff;padding:5px 5px 14px;border:1px solid #e8ddc8;box-shadow:0 4px 12px rgba(58,58,53,.18);}
.side-photos.alt .pol img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;}
.side-photos.alt .plate{width:120px;}
.side-photos.alt .plate img{display:block;width:100%;height:auto;}
.side-photos.alt .pol:nth-child(6n+1),.side-photos.alt .pol:nth-child(6n+5){transform:rotate(-4deg)}
.side-photos.alt .pol:nth-child(6n+3){transform:rotate(3deg)}
.side-photos.alt .pol:nth-child(6n+2),.side-photos.alt .pol:nth-child(6n+6){transform:rotate(3.5deg)}
.side-photos.alt .pol:nth-child(6n+4){transform:rotate(-3deg)}
.side-photos.alt .plate:nth-child(6n+2){transform:rotate(2.5deg)}
.side-photos.alt .plate:nth-child(6n+4){transform:rotate(-2deg)}
.side-photos.alt .plate:nth-child(6n+6){transform:rotate(3deg)}
.side-photos.alt .plate:nth-child(6n+1){transform:rotate(-2deg)}
.side-photos.alt .plate:nth-child(6n+3){transform:rotate(3deg)}
.side-photos.alt .plate:nth-child(6n+5){transform:rotate(-3deg)}
@media (min-width:561px) and (max-width:1100px){
.side-photos.alt{width:110px;} .side-photos.alt.left{left:2vw;} .side-photos.alt.right{right:2vw;}
.side-photos.alt .pol{width:96px;padding:4px 4px 12px;} .side-photos.alt .plate{width:104px;}
main{padding-left:150px;padding-right:150px;}
}
/* Mobile : marges du texte identiques à la v1 (main 3.2rem), fresques réduites pour tenir dedans */
@media (max-width:560px){
.side-photos.alt{width:12vw;top:1rem;bottom:auto;justify-content:flex-start;gap:1rem;}
.side-photos.alt > :nth-child(n+7){display:block;}
.side-photos.alt.left{left:.6vw;} .side-photos.alt.right{right:.6vw;}
.side-photos.alt .pol{width:10vw;padding:1.5px 1.5px 5px;box-shadow:0 1px 4px rgba(58,58,53,.2);}
.side-photos.alt .plate{width:12vw;}
}

@media (min-width:1101px){.side-photos.alt{display:none;}}

/* Mobile : textes et champs du formulaire alignés sur le texte de l'accueil (0,85 rem) */
@media (max-width:560px){
label{font-size:.85rem;}
input[type="text"],input[type="number"],select,textarea{font-size:.85rem;padding:.4rem .5rem;}
.radio-group,.checkbox-group{font-size:.85rem;}
button{font-size:.9rem;padding:.65rem;}
main form p{font-size:.85rem !important;}
main form p[style*="opacity"]{font-size:.75rem !important;}
}

/* Mobile : widget reCAPTCHA réduit (304 px -> ~268 px) pour tenir dans la largeur du texte */
@media (max-width:560px){
.g-recaptcha{width:304px;transform:scale(.88);transform-origin:0 0;margin-bottom:-9px;}
}

/* Mobile : intitulés du formulaire en gras, 0,75 rem */
@media (max-width:560px){
label{font-size:.75rem;font-weight:bold;}
}

/* Mobile : déroulé de la journée à la même taille que le reste du texte (0,85 rem) */
@media (max-width:560px){
.timeline-item{font-size:.85rem;gap:.8rem;}
.timeline-item .heure{min-width:56px;}
}

/* Mobile : photos masquées mais leur place reste vide, les illustrations gardent leur position */
@media (max-width:560px){
.side-photos.alt .pol{visibility:hidden;}
}

/* Test v2 : une illustration sur deux remplacée par une photo (mobile) */
@media (max-width:560px){
.side-photos.alt .pol.show{visibility:visible;}
}