/* =====================================================================
   SAMAR & MALO — main.css
   Sections numérotées identiques à front-page.php et main.js.
   Cmd/Ctrl+F « 06 » pour sauter à la section Programme, etc.
   ===================================================================== */


/* =====================================================================
   00 · RÉGLAGES — ███ CHANGE COULEURS / POLICES / TAILLES ICI ███
   ===================================================================== */
:root {
  /* — Couleurs — */
  --ivoire:      #F7F2EA;   /* fond principal */
  --blanc:       #FCFAF6;   /* fond clair secondaire */
  --champagne:   #EFE7D8;   /* fond chaud alterné */
  --sauge-fonce: #5C6B52;   /* titres + bandes sombres */
  --sauge:       #7E927C;   /* accents */
  --sauge-clair: #A9B7A3;   /* accents doux */
  --rose:        #E8C3C7;   /* accent floral */
  --vieux-rose:  #D9A4AD;   /* boutons / accents soutenus */
  --lavande:     #D8C9EA;
  --peche:       #F3D1C2;
  --taupe:       #C9BBAE;   /* bordures */
  --gris:        #8C857D;   /* texte secondaire */
  --encre:       #3D4438;   /* texte courant */

  /* — Polices — */
  --display: "Cormorant Garamond", Georgia, serif;  /* titres */
  --body:    "EB Garamond", Georgia, serif;          /* texte */

  /* — Tailles (clamp = responsive automatique) — */
  --t-xs: clamp(.78rem, .74rem + .2vw, .88rem);
  --t-sm: clamp(1rem, .95rem + .25vw, 1.18rem);
  --t-1:  clamp(1.3rem, 1.15rem + .7vw, 1.7rem);
  --t-2:  clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
  --t-3:  clamp(2.4rem, 1.8rem + 3vw, 4.4rem);
  --t-4:  clamp(3.4rem, 2.2rem + 6vw, 7rem);

  /* — Espacements & divers — */
  --gutter:  clamp(1.2rem, .8rem + 2vw, 3rem);
  --pad-y:   clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --maxw:    1180px;
  --shadow:  0 22px 50px -30px rgba(0,0,0,.35);
  --ease:    cubic-bezier(.22,.61,.36,1);
}


/* =====================================================================
   01b · BASE (éléments génériques)
   ===================================================================== */
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ivoire); color: var(--encre);
  font-family: var(--body); font-size: var(--t-sm); line-height: 1.75;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; color: var(--sauge-fonce); line-height: 1.08; margin: 0; }
p { margin: 0 0 1rem; }
::selection { background: var(--rose); color: var(--sauge-fonce); }
:focus-visible { outline: 2px solid var(--sauge); outline-offset: 3px; }

.container { width: min(var(--maxw), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.section { padding-block: var(--pad-y); position: relative; }
.section--ivoire    { background: var(--ivoire); }
.section--blanc     { background: var(--champagne); }
.section--champagne { background: var(--champagne); }
.section--sauge     { background: var(--sauge-fonce); color: var(--ivoire); }
.section--sauge h2, .section--sauge h3 { color: var(--ivoire); }
.center { text-align: center; }

/* éléments réutilisables */
.eyebrow { font-family: var(--display); font-size: var(--t-xs); letter-spacing: .42em; text-transform: uppercase; color: var(--sauge); font-weight: 600; display: block; }
.section--sauge .eyebrow { color: var(--sauge-clair); }
.sprig { display: block; width: 100px; margin: 1rem auto; color: var(--sauge); }
.section--sauge .sprig { color: var(--sauge-clair); }
.title-block { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.title-block h2 { font-size: var(--t-3); margin-top: .4rem; font-style: italic; }
.signature { font-family: var(--display); font-style: italic; font-size: var(--t-1); color: var(--sauge); margin-top: 1.2rem; }

/* boutons */
.btn { display: inline-block; font-family: var(--display); letter-spacing: .26em; text-transform: uppercase; font-size: var(--t-xs); font-weight: 600; padding: .95rem 2.4rem; border: 1px solid currentColor; background: transparent; color: var(--sauge-fonce); cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease), transform .2s var(--ease); }
.btn:hover { background: var(--sauge-fonce); color: var(--ivoire); transform: translateY(-2px); }
.btn--solid { background: var(--vieux-rose); border-color: var(--vieux-rose); color: var(--blanc); }
.btn--solid:hover { background: var(--sauge-fonce); border-color: var(--sauge-fonce); }
.link { font-family: var(--display); letter-spacing: .22em; text-transform: uppercase; font-size: var(--t-xs); font-weight: 600; color: var(--sauge); border-bottom: 1px solid var(--sauge-clair); padding-bottom: 3px; transition: color .3s, border-color .3s; }
.link:hover { color: var(--vieux-rose); border-color: var(--vieux-rose); }

/* animation d'apparition au scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }


/* =====================================================================
   HEADER · navigation
   ===================================================================== */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--gutter); transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.site-header.scrolled { background: rgba(247,242,234,.92); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(126,146,124,.25); }
.brand { font-family: var(--display); font-size: 1.6rem; letter-spacing: .12em; color: var(--ivoire); transition: color .4s var(--ease); }
.brand span { opacity: .55; font-weight: 300; }
.scrolled .brand { color: var(--sauge-fonce); }
.nav-list { list-style: none; display: flex; gap: clamp(1rem, 2.5vw, 2.6rem); margin: 0; padding: 0; }
.nav-list a { font-family: var(--display); font-size: var(--t-xs); letter-spacing: .28em; text-transform: uppercase; color: var(--ivoire); font-weight: 600; position: relative; transition: color .3s var(--ease); }
.scrolled .nav-list a { color: var(--sauge-fonce); }
.nav-list a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: currentColor; transition: width .35s var(--ease); }
.nav-list a:hover::after { width: 100%; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; z-index: 110; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--ivoire); margin: 5px 0; transition: .35s var(--ease); }
.scrolled .nav-toggle span { background: var(--sauge-fonce); }


/* =====================================================================
   01 · HERO
   ===================================================================== */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; color: var(--ivoire); padding: clamp(5rem,8vh,8rem) var(--gutter) clamp(3rem,6vh,5rem); overflow: hidden; background: var(--champagne); }
.hero__bg { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255,255,255,0) 0%, rgba(255,255,255,0)), var(--hero-image) center/cover; transform: scale(1.08); animation: heroZoom 16s ease-out forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero__card {
  position: relative;
  z-index: 1;
  background: rgba(252,250,246,.12);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(252,250,246,.5);
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 6vw, 5rem);
  width: 38vw;                    /* ⬅ proportionnel à la largeur de l'écran */
  max-width: 800px;               /* ⬅ mais pas au-delà de 620px */
  min-width: 300px;               /* ⬅ ni en dessous de 300px */
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6);
}.hero__intro { font-family: var(--display); letter-spacing: .4em; text-transform: uppercase; font-size: var(--t-xs); margin-bottom: 1.4rem; }
.hero__names { color: var(--ivoire); font-size: var(--t-4); font-style: italic; line-height: .98; }
.hero__names .write { display: block; }
.hero__amp { display: block; font-size: var(--t-2); font-style: italic; margin: .2rem 0; opacity: .85; }
.hero__date { margin-top: 1.6rem; font-family: var(--display); letter-spacing: .3em; text-transform: uppercase; font-size: var(--t-1); }
.hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-family: var(--display); letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; color: var(--ivoire); display: flex; flex-direction: column; align-items: center; gap: .5rem; z-index: 1; }
.hero__scroll::after { content: ""; width: 1px; height: 38px; background: var(--ivoire); }
.brand img {
  height: 50px;
  width: auto;
  display: block;
}
.scrolled .brand img { filter: none; }
.sprig--hero {
  width: 70px;
}


/* — animations du hero (apparition + écriture) — */
.anim { opacity: 0; animation: fade 1s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.write { opacity: 0; animation: write 1.4s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes write { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
.hero__scroll.anim { animation: fade 1s var(--ease) forwards, bob 2.4s ease-in-out 5s infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }


/* =====================================================================
   02 · INTRO (image ou vidéo)
   ===================================================================== */
.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.6fr 1.4fr;   /* texte plus petit, photo plus grande */
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;             /* ⬅ ajoute une hauteur fixe au conteneur */
} 
.intro__media { grid-column: 1; grid-row: 1 / span 2;     /* la vidéo prend toute la hauteur à gauche */ display: flex; align-items: stretch;}
.intro__video {
  width: 80%;
  height: 80%;
  max-width: none;
  object-fit: contain;
}
.intro__text {
  grid-column: 2;
  grid-row: 1;
  text-align: center;
  align-self: start;
}
.intro__photo {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: -2rem;   /* ajuste cette valeur pour remonter plus ou moins */
  margin-left: 2.5rem;   /* ajuste cette valeur pour remonter plus ou moins */


}
.intro__photo img {
  width: 90%;
  object-fit: contain;
}


/* =====================================================================
   03 · TRIO DE CARTES
   ===================================================================== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,4vw,3.5rem); text-align: center; }
.card__icon { height: 130px; display: grid; place-items: center; margin-bottom: 1rem; }
.card__icon img { max-height: 130px; width: auto; }
.card h3 { font-family: var(--display); letter-spacing: .18em; text-transform: uppercase; font-size: var(--t-sm); }
.card p { font-style: italic; color: var(--gris); margin: .5rem 0 1rem; }


/* =====================================================================
   04 · ELLE A DIT OUI (polaroïds)
   ===================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,5rem); align-items: center; }
.polaroids { position: relative; min-height: 360px; }
.polaroid { background: var(--blanc); padding: 12px 12px 46px; box-shadow: var(--shadow); border: 1px solid rgba(201,187,174,.4); }
.polaroid img { aspect-ratio: 3/4; object-fit: cover; background: var(--taupe); }
.polaroid figcaption { font-family: var(--display); font-style: italic; text-align: center; margin-top: .6rem; color: var(--gris); font-size: var(--t-xs); }
.polaroids .polaroid { position: absolute; width: 58%; }
.polaroid--1 { top: 0; left: -1.5rem; transform: rotate(-5deg); z-index: 2; }
.polaroid--2 { bottom: 0; right: 0; transform: rotate(4deg); z-index: 1; }
.split__text h2 { font-size: var(--t-3); font-style: italic; text-align : center; }


/* =====================================================================
   05 · SAVE THE DATE
   ===================================================================== */
.std { background: var(--ivoire), var(--std-image) center/cover; }
.framed { background: var(--blanc); border: 1px solid var(--taupe); outline: 1px solid var(--taupe); outline-offset: 8px; padding: clamp(2rem,5vw,4rem); text-align: center; max-width: 560px; margin-inline: auto; box-shadow: var(--shadow); }
.framed h2 { font-size: var(--t-2); font-style: italic; }


/* =====================================================================
   06 · PROGRAMME
   ===================================================================== */
.programme {
  display: flex;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  text-align: center;
  width: 100vw;                              /* pleine largeur écran */
  margin-left: calc(50% - 50vw);             /* annule le centrage du container */
  margin-right: calc(50% - 50vw);
  padding-inline: clamp(2rem, 6vw, 6rem);    /* un peu d'air sur les bords */
  box-sizing: border-box;

}
.programme__item { flex:1; }
.programme__icon { width: 150px; height: 150px; margin: 0 auto .9rem; color: var(--ivoire); }
.programme__time { font-family: var(--display); font-size: var(--t-1); font-style: italic; display: block; }
.programme__label { font-family: var(--display); letter-spacing: .2em; text-transform: uppercase; font-size: var(--t-xs); opacity: .85; }
.prog-day { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.prog-day:last-child { margin-bottom: 0; }
.prog-day__date {
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-2);
  color: var(--ivoire);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}
/* petit filet décoratif de part et d'autre de la date */
.prog-day__date::before,
.prog-day__date::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--sauge-clair);
  vertical-align: middle;
  margin: 0 1rem;
}

/* =====================================================================
   07 · DRESS CODE
   ===================================================================== */
.swatches { display: flex; justify-content: center; gap: .8rem; margin-top: 1.4rem; }
.swatches span { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(61,68,56,.18); box-shadow: inset 0 0 0 4px var(--blanc); }

.dresscode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
}
.dresscode .framed {
  height: 420px;               /* remplace aspect-ratio: 1/1 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* texte part du haut */
  padding: clamp(2.5rem, 5vw, 4.5rem);
}
.dresscode__photo {
  display: flex;
  justify-content: center;
}
.dresscode__photo img {
  width: 90%;
  object-fit: contain;
}

/* ---- cadre avec photo en fond de boîte ---- */
.framed--photo {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(180px + 1.6rem);
  display: flex;                        /* ⬅ redéclare le flex */
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;          /* ⬅ contenu part du haut */                        /* texte part du haut, pas du centre */
}
.framed__photo {
  position: absolute;                                   /* sort du flux */
  bottom: 0;                                            /* colle au bas du cadre */
  left: 0;
  right: 0;
  height: 180px;                                        /* ajuste selon le rendu voulu */
  background-size: cover;
  background-position: center;
}
.framed__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.2);
}

/* =====================================================================
   08 · LIEU
   ===================================================================== */
/* =====================================================================
   08 · LIEU (carrousel 2 lieux)
   ===================================================================== */
.venue-slider { position: relative; }
.venue-slide {
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s var(--ease);
  pointer-events: none;
}
.venue-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.venue-slide__img {
  background: var(--taupe) center/cover;
  min-height: 340px;
}
.venue-slide__card {
  background: var(--blanc);
  border: 1px solid var(--taupe);
  padding: clamp(1.8rem, 4vw, 3rem);
  align-self: center;
  box-shadow: var(--shadow);
}
.venue-slide__time {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-2);
  color: var(--sauge-fonce);
  display: block;
  margin-bottom: .4rem;
}
.venue-slide__card h3 { font-size: var(--t-2); font-style: italic; margin: .2rem 0 .6rem; }

/* puces */
.venue-dots {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin-top: 2rem;
}
.venue-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid var(--sauge);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .3s var(--ease);
}
.venue-dot.is-active { background: var(--sauge); }
/* zoom sur la photo du château (2ème slide) */
.venue-slide:nth-child(2) .venue-slide__img {
  background-size: 110%;
}

/* =====================================================================
   08b · PRÉPAREZ VOTRE VENUE
   ===================================================================== */
.venue-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.venue-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  background: var(--blanc);
  border: 1px solid var(--taupe);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.venue-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.venue-card__icon {
  width: 100px;
  height: 100px;
  color: var(--sauge);
  margin-bottom: 1.2rem;
}
.venue-card__icon img { width: 100%; height: 100%; }
.venue-card h3 {
  font-family: var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--t-sm);
  margin-bottom: .5rem;
}
.venue-card p {
  font-style: italic;
  color: var(--gris);
  margin-bottom: 1.2rem;
}
.venue-card__link {
  font-family: var(--display);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--sauge);
  border-bottom: 1px solid var(--sauge-clair);
  padding-bottom: 3px;
  transition: color .3s, border-color .3s;
}
.venue-card:hover .venue-card__link {
  color: var(--vieux-rose);
  border-color: var(--vieux-rose);
}


/* =====================================================================
   09 · RSVP + COMPTE À REBOURS
   ===================================================================== */
.rsvp { text-align: center; color : var(--blanc);}
.rsvp h2 { font-size: var(--t-3); font-style: italic;}
.deadline { font-family: var(--display); letter-spacing: .2em; text-transform: uppercase; font-size: var(--t-s); color: var(--blanc); }
.countdown { display: flex; justify-content: center; gap: clamp(1rem,4vw,3rem); margin: 2rem auto 0; }
.countdown__unit { text-align: center; min-width: 84px; display: flex; flex-direction: column; align-items: center; }
.countdown__num { font-family: var(--display); font-size: var(--t-3); line-height: 1; color: var(--ivoire); font-variant-numeric: tabular-nums; }
.countdown__label { font-family: var(--display); letter-spacing: .25em; text-transform: uppercase; font-size: var(--t-xs); color: var(--sauge-clair); margin-top: .4rem; }
.countdown__msg { text-align: center; margin-top: 1rem; color: var(--sauge-clair); font-style: italic; }
.rsvp-form { max-width: 620px; margin: 2.5rem auto 0; display: grid; gap: 1.4rem; text-align: left; }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; font-size: var(--t-xs); color: var(--ivoire); font-weight: 600; }
.field input, .field select, .field textarea { font-family: var(--body); font-size: var(--t-sm); padding: .8rem 1rem; background: rgba(252,250,246,.96); border: 1px solid var(--sauge-clair); border-radius: 2px; color: var(--encre); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--rose); outline-offset: 1px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-feedback { font-style: italic; text-align: center; min-height: 1.4em; color: var(--peche); }
.form-feedback.error { color: var(--rose); }
.guest-row { margin-top: 1rem; }
.guest-row__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: .4rem;
}
@media (max-width: 480px) {
  .guest-row__inputs { grid-template-columns: 1fr; }
}


/* =====================================================================
   10 · CITATION
   ===================================================================== */
.quote { display: grid; grid-template-columns: auto 1px 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; max-width: 820px; margin-inline: auto; }
.quote__art img { max-width: 150px; }
.quote__rule { width: 1px; background: var(--taupe); height: 70%; align-self: center; }
.quote blockquote { margin: 0; font-family: var(--display); font-style: italic; font-size: var(--t-2); color: var(--sauge-fonce); line-height: 1.3; }
.quote cite { display: block; margin-top: 1rem; font-family: var(--display); letter-spacing: .2em; text-transform: uppercase; font-size: var(--t-xs); font-style: normal; color: var(--gris); }


/* =====================================================================
   11 · WITH LOVE
   ===================================================================== */
.withlove { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,5rem); align-items: center; }
.withlove__photo { width: 100%; max-width: 420px; margin: 0 auto; transform: rotate(-2deg); }
.withlove__photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.withlove__text { text-align: center; }
.withlove__text h2 { font-size: var(--t-3); font-style: italic; }


/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--ivoire); text-align: center; padding: clamp(2.5rem,5vw,4rem) var(--gutter) 2rem; border-top: 1px solid var(--taupe); }
.footer-names { font-family: var(--display); font-size: var(--t-1); letter-spacing: .2em; color: var(--sauge-fonce); }
.footer-date { font-family: var(--display); letter-spacing: .3em; text-transform: uppercase; font-size: var(--t-xs); color: var(--gris); margin-top: .4rem; margin-bottom : 1.5rem }
.footer-tel { font-family: var(--sauge); letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-xs); color: var(--sauge); margin-top: .4rem; }
.footer-tel a:hover {
  color: var(--vieux-rose);
  border-color: var(--vieux-rose);
}
.footer-social { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.footer-social a { width: 42px; height: 42px; border: 1px solid var(--taupe); border-radius: 50%; display: grid; place-items: center; color: var(--sauge); transition: background .3s, color .3s; }
.footer-social a:hover { background: var(--sauge); color: var(--ivoire); }
.footer-social svg { width: 18px; height: 18px; }
.footer-credit { margin-top: 2rem; font-size: .72rem; letter-spacing: .1em; color: var(--taupe); }

/* =====================================================================
   PAGES INTÉRIEURES (guides pratiques)
   ===================================================================== */
.page-hero {
  min-height: 46vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ivoire);
  padding: 8rem var(--gutter) 4rem;
  background: linear-gradient(rgba(61,68,56,.55), rgba(61,68,56,.55)), var(--page-hero-img, var(--sauge-fonce)) center/cover;
}
.page-hero h1 { color: var(--ivoire); font-size: var(--t-3); font-style: italic; }
.page-hero .eyebrow { color: var(--blanc); margin-bottom: .8rem; }
.page-hero p { max-width: 46ch; margin: 1rem auto 0; }

.page-body { padding-block: var(--pad-y); }

/* une rubrique (Loger, Manger, etc.) */
.rubrique { margin-bottom: clamp(3rem, 6vw, 5rem); }
.rubrique__head { text-align: center; margin-bottom: 2.5rem; }
.rubrique__head h2 { font-size: var(--t-2); font-style: italic; }

/* grille de cartes-lieux */
.places {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
.place {
  background: var(--blanc);
  border: 1px solid var(--taupe);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.place__img {
  aspect-ratio: 4/3;
  background: var(--taupe) center/cover;
}
.place__body { padding: 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.place__town {
  font-family: var(--display);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  color: var(--sauge);
  margin-bottom: .3rem;
}
.place h3 { font-size: var(--t-1); font-style: italic; margin-bottom: .5rem; }
.place p { color: var(--gris); font-size: .95rem; margin-bottom: 1rem; }
.place__link {
  margin-top: auto;
  font-family: var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--sauge);
  border-bottom: 1px solid var(--sauge-clair);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color .3s, border-color .3s;
}
.place__link:hover { color: var(--vieux-rose); border-color: var(--vieux-rose); }

.back-link {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  color: var(--sauge);
}

/* =====================================================================
   PAGES BLOG (articles longue traîne)
   ===================================================================== */
.blog-body {
  max-width: 760px;              /* largeur de lecture confortable */
  margin-inline: auto;
  padding-block: var(--pad-y);
}
.blog-intro {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--gris);
  text-align: center;
  margin-bottom: 3.5rem;
  line-height: 1.7;
}

/* une section d'article */
.post {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.post__town {
  font-family: var(--display);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  color: var(--sauge);
  display: block;
  margin-bottom: .3rem;
}
.post h2 {
  font-size: var(--t-2);
  font-style: italic;
  margin-bottom: 1.2rem;
}
.post h3 {
  font-size: var(--t-1);
  font-style: italic;
  margin: 2.5rem 0 1rem;
  color: var(--sauge-fonce);
}
.post p { margin-bottom: 1.2rem; line-height: 1.8; }
.post a {
  color: var(--sauge);
  border-bottom: 1px solid var(--sauge-clair);
  transition: color .3s, border-color .3s;
}
.post a:hover { color: var(--vieux-rose); border-color: var(--vieux-rose); }

/* image d'article avec légende */
.post figure { margin: 2rem 0; }
.post figure img {
  width: 100%;
  border-radius: 4px;
  box-shadow: var(--shadow);
  object-fit: cover;
}
.post figure figcaption {
  text-align: center;
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--gris);
  margin-top: .6rem;
}

/* séparateur entre grandes sections */
.post-divider {
  border: 0;
  height: 1px;
  background: var(--taupe);
  max-width: 120px;
  margin: clamp(3rem, 6vw, 5rem) auto;
}

/* encadré "bon à savoir" */
.callout {
  background: var(--champagne);
  border-left: 3px solid var(--sauge);
  padding: 1.6rem 1.8rem;
  margin: 2.5rem 0;
  border-radius: 0 4px 4px 0;
}
.callout h3 { margin-top: 0; font-size: var(--t-1); }
.callout p:last-child { margin-bottom: 0; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-list { position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; background: var(--ivoire); transform: translateX(100%); transition: transform .45s var(--ease); }
  .nav-list.open { transform: none; }
  .nav-list a { color: var(--sauge-fonce); font-size: var(--t-1); letter-spacing: .22em; }
  .split, .location, .venue-slide, .withlove, .dresscode { grid-template-columns: 1fr; }
  .intro {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .intro__media { grid-column: 1; grid-row: 1; order: 1; }
  .intro__text  { grid-column: 1; grid-row: 2; order: 2; }
  .intro__photo { grid-column: 1; grid-row: 3; order: 3; }
  .intro__video { max-height: 400px; }
  .polaroids { min-height: 480px; max-width: 380px; margin-inline: auto; }
  .cards { grid-template-columns: 1fr; gap: 2.5rem; }
  .programme { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .quote { grid-template-columns: 1fr; text-align: center; }
  .quote__rule { display: none; }
  .quote__art img { margin-inline: auto; }
  .venue-cards { grid-template-columns: 1fr; gap: 2rem; }

}
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
  .countdown { gap: .8rem; }
  .countdown__unit { min-width: 60px; }
}


/* =====================================================================
   ACCESSIBILITÉ · mouvement réduit
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .anim, .write { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
/* =====================================================================
   RESPONSIVE PATCH — Samar & Malo
   À coller à la FIN de main.css, après les @media existants.
   Ne touche pas au comportement sur 15" (≈ 1440px).
   ===================================================================== */


/* =====================================================================
   GRAND ÉCRAN — ≥ 1600px
   Problèmes : hero card trop large, titres géants, splits trop étirés,
   RSVP form trop étroit vs le reste.
   ===================================================================== */
@media (min-width: 1600px) {

  /* — Typographie — plafonner les tailles sur très grand écran */
  :root {
    --t-3: 3.6rem;   /* était clamp(2.4rem … 4.4rem) → max à 3.6 pour éviter le 4K */
    --t-4: 5.5rem;   /* était clamp(3.4rem … 7rem)   → 7rem = 112px, beaucoup trop */
  }

  /* — Hero card — 38vw devient énorme sur 2560px */
  .hero__card {
    width: 30vw;
    max-width: 680px;
  }

  /* — Splits & layouts 2 colonnes — plafonner le gap */
  .split,
  .withlove {
    gap: clamp(3rem, 4vw, 5rem);
    max-width: 1100px;
    margin-inline: auto;
  }

  /* — Dresscode — recentrer */
  .dresscode {
    max-width: 1000px; /* déjà défini, mais on renforce */
  }

  /* — RSVP form — légèrement plus large sur grand écran */
  .rsvp-form {
    max-width: 760px;
  }

  /* — Venue slider — empêcher les images de s'étirer indéfiniment */
  .venue-slide__img {
    max-height: 560px;
  }

  /* — Cards & venue-cards — plafonner la largeur des cellules */
  .venue-cards {
    max-width: 1100px;
    margin-inline: auto;
  }

  .cards {
    max-width: 1100px;
    margin-inline: auto;
  }

  /* — Places (pages intérieures) — éviter les cartes trop larges */
  .places {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    max-width: 1100px;
    margin-inline: auto;
  }
}

/* =====================================================================
   TRÈS GRAND ÉCRAN — ≥ 2000px (4K, ultra-wide)
   ===================================================================== */
@media (min-width: 2000px) {

  :root {
    --t-3: 3.2rem;
    --t-4: 4.8rem;
    --maxw: 1400px;  /* container un peu plus large pour remplir l'écran */
  }

  .hero__card {
    width: 24vw;
    max-width: 720px;
  }

  /* Programme pleine largeur — limiter l'étirement des icônes */
  .programme {
    padding-inline: clamp(4rem, 10vw, 12rem);
  }

  .programme__icon {
    width: 120px;
    height: 120px;
  }
}


/* =====================================================================
   TABLETTE PAYSAGE / INTERMÉDIAIRE — 880px → 1024px
   La grille 2 colonnes tient mais certains éléments se compressent.
   ===================================================================== */
@media (min-width: 880px) and (max-width: 1024px) {

  /* Hero card — éviter qu'il prenne trop de hauteur */
  .hero__card {
    width: 52vw;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.2rem, 4vw, 3rem);
  }

  /* Venue slide — l'image ne doit pas être écrasée */
  .venue-slide {
    grid-template-columns: 1fr 1fr;
  }

  /* Dresscode — un peu moins de gap */
  .dresscode {
    gap: clamp(2rem, 4vw, 4rem);
  }

  /* Cards trio — passer à 2 colonnes si les cartes deviennent minuscules */
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =====================================================================
   TABLETTE PORTRAIT — 640px → 880px
   Zone souvent oubliée entre mobile et desktop.
   ===================================================================== */
@media (min-width: 640px) and (max-width: 880px) {

  /* Hero card — largeur fixe plus raisonnable */
  .hero__card {
    width: min(72vw, 500px);
  }

  /* Intro — 2 colonnes égales à partir de 640 */
  .intro {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .intro__media { grid-column: 1; grid-row: 1 / span 2; order: unset; }
  .intro__text  { grid-column: 2; grid-row: 1;            order: unset; }
  .intro__photo { grid-column: 2; grid-row: 2;            order: unset; }

  /* Cards — 2 colonnes */
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  /* Venue-cards — 2 colonnes */
  .venue-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Programme — 3 ou 4 items en ligne, icônes réduites */
  .programme {
    flex-wrap: wrap;
    padding-inline: clamp(1rem, 4vw, 3rem);
  }
  .programme__item {
    flex: 1 1 calc(50% - 1rem);
    min-width: 140px;
  }
  .programme__icon {
    width: 100px;
    height: 100px;
  }
}


/* =====================================================================
   MOBILE — < 640px (complète le @media < 880px existant)
   ===================================================================== */
@media (max-width: 640px) {

  /* — Hero — carte compacte sur mobile */
  .hero__card {
    width: calc(100% - 2 * var(--gutter));
    min-width: unset;
    padding: 1.6rem 1.2rem;
  }

  /* — Hero names — pas de débordement */
  .hero__names {
    font-size: clamp(2.8rem, 9vw, 4rem);
  }

  /* — Programme — scroll horizontal élégant au lieu de flex cassé */
  .programme {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-inline: var(--gutter);
    gap: 1.5rem;
  }
  .programme__icon {
    width: 80px;
    height: 80px;
  }
  .programme__time {
    font-size: var(--t-sm);
  }

  /* — Polaroïds — forcer une hauteur plus petite */
  .polaroids {
    min-height: 320px;
  }
  .polaroid { width: 52%; }

  /* — Framed — padding réduit */
  .framed {
    padding: 1.4rem;
    outline-offset: 5px;
  }
  .dresscode .framed {
    height: auto;
    min-height: 280px;
  }

  /* — Countdown — unités plus serrées */
  .countdown {
    gap: .5rem;
  }
  .countdown__unit {
    min-width: 52px;
  }
  .countdown__num {
    font-size: clamp(1.8rem, 7vw, 2.8rem);
  }

  /* — Quote — texte plus petit */
  .quote blockquote {
    font-size: var(--t-1);
  }

  /* — Venue cards — 1 colonne (déjà dans le 880 existant, on renforce) */
  .venue-cards {
    grid-template-columns: 1fr;
  }

  /* — Page hero — padding top réduit */
  .page-hero {
    padding-top: 6rem;
    min-height: 36vh;
  }

  /* — Swatches — plus petites sur mobile */
  .swatches span {
    width: 28px;
    height: 28px;
  }

  /* — Footer — */
  .footer-names {
    font-size: 1.3rem;
  }
}


/* =====================================================================
   TRÈS PETIT — < 380px (iPhone SE, petits Android)
   ===================================================================== */
@media (max-width: 380px) {

  .hero__card {
    padding: 1.2rem 1rem;
  }

  .hero__names {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  .programme {
    grid-template-columns: 1fr;  /* 1 seule colonne sur tout petit écran */
  }

  .countdown__unit {
    min-width: 44px;
  }

  .btn {
    padding: .85rem 1.4rem;
    font-size: .72rem;
  }

  .cards {
    grid-template-columns: 1fr;
  }
}/* =====================================================================
   CORRECTIFS MOBILE — Samar & Malo
   À coller APRÈS le responsive-patch.css.
   ===================================================================== */


/* =====================================================================
   FIX 1 · MENU MOBILE — onglets alignés
   Cause : letter-spacing ajoute un espace fantôme à droite de chaque mot,
   ce qui décale le centre optique. + pas de largeur commune.
   ===================================================================== */
@media (max-width: 880px) {

  .nav-list {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;       /* garde le centrage du bloc */
    gap: 2rem;
    background: var(--ivoire);
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    padding: 0;
    margin: 0;
  }

  /* chaque <li> occupe la même largeur → alignement parfait */
  .nav-list li {
    width: 100%;
    text-align: center;
  }

  .nav-list a {
    display: inline-block;
    color: var(--sauge-fonce);
    font-size: var(--t-1);
    letter-spacing: .22em;
    /* compense l'espace fantôme du letter-spacing sur le dernier caractère */
    text-indent: .22em;
    padding: .4rem 0;
  }

  /* le soulignement au hover doit rester centré */
  .nav-list a::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .nav-list a:hover::after { width: 100%; }
}


/* =====================================================================
   FIX 2 · POLAROÏDS — "Elle a dit oui"
   Cause : .polaroid reste en position:absolute avec width:58% sur un
   conteneur qui n'a plus de largeur suffisante en 1 colonne.
   Solution : repasser en flux normal (grille 2 colonnes côte à côte).
   ===================================================================== */
@media (max-width: 880px) {

  .polaroids {
    position: static;          /* annule le contexte absolute */
    min-height: 0;
    max-width: 100%;
    margin-inline: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    align-items: start;
    padding-block: 1rem;       /* de l'air pour les rotations */
  }

  .polaroids .polaroid {
    position: static;          /* ⬅ le point clé */
    width: 100%;
    top: auto; left: auto; right: auto; bottom: auto;
  }

  /* on garde le charme des rotations, mais plus légères */
  .polaroid--1 { transform: rotate(-3deg); }
  .polaroid--2 { transform: rotate(3deg); margin-top: 1.5rem; }

  .polaroid { padding: 10px 10px 36px; }
}

/* sur très petit écran, les polaroïds s'empilent */
@media (max-width: 480px) {
  .polaroids {
    grid-template-columns: 1fr;
    max-width: 300px;
    gap: 1.8rem;
  }
  .polaroid--2 { margin-top: 0; }
}


/* =====================================================================
   FIX 3 · DRESS CODE — la photo recouvre le texte
   Cause : .framed__photo est en position:absolute; bottom:0, et sur mobile
   .dresscode .framed passe en height:auto → la photo remonte sur le texte.
   Solution : sortir la photo du flux absolu, la placer sous le texte.
   ===================================================================== */
@media (max-width: 880px) {

  .dresscode .framed,
  .framed--photo {
    height: auto;
    min-height: 0;
    padding-bottom: 0;         /* ⬅ annule le calc(180px + 1.6rem) */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* le contenu texte garde son padding */
  .framed--photo > *:not(.framed__photo) {
    padding-inline: 0;
  }

  .framed__photo {
    position: static;          /* ⬅ le point clé : repasse dans le flux */
    height: 200px;
    width: calc(100% + 2 * clamp(2.5rem, 5vw, 4.5rem));
    margin-left: calc(-1 * clamp(2.5rem, 5vw, 4.5rem));
    margin-top: 2rem;
    margin-bottom: calc(-1 * clamp(2.5rem, 5vw, 4.5rem));
    flex-shrink: 0;
  }
}

/* si le padding du framed change sur petit écran, on recalcule */
@media (max-width: 640px) {
  .framed__photo {
    width: calc(100% + 2 * 1.4rem);
    margin-left: -1.4rem;
    margin-bottom: -1.4rem;
    height: 170px;
  }
}


/* =====================================================================
   FIX 4 · LIEUX — le château apparaît en double
   Cause : dans le @media 880px, `.venue-slide { grid-template-columns: 1fr }`
   ré-écrit la règle mais le slide inactif retrouve un `position: relative`
   hérité, donc les deux slides s'empilent dans le flux.
   Solution : re-forcer position/opacity/visibility avec la même spécificité.
   ===================================================================== */
@media (max-width: 880px) {

  /* le slide inactif reste TOTALEMENT hors flux */
  .venue-slide {
    grid-template-columns: 1fr;
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    height: 0;                 /* ⬅ ceinture + bretelles */
    overflow: hidden;
  }

  .venue-slide.is-active {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    height: auto;
    overflow: visible;
  }

  /* le conteneur doit avoir une hauteur pilotée par le slide actif */
  .venue-slider {
    position: relative;
    min-height: 0;
  }

  .venue-slide__img {
    min-height: 240px;
    aspect-ratio: 4 / 3;
  }

  /* le zoom du château ne doit s'appliquer qu'au slide visible */
  .venue-slide:nth-child(2) .venue-slide__img {
    background-size: cover;
  }
  .venue-slide:nth-child(2).is-active .venue-slide__img {
    background-size: 110%;
  }

  .venue-slide__card {
    align-self: stretch;
    padding: 1.5rem;
  }
}
/* =====================================================================
   CORRECTIFS COUNTDOWN + CENTRAGE — Samar & Malo
   À coller APRÈS mobile-fixes.css.
   ===================================================================== */


/* =====================================================================
   FIX A · LA CAUSE RACINE DU DÉCENTRAGE
   `.programme` utilise width:100vw + margin-left:calc(50% - 50vw).
   Or 100vw INCLUT la scrollbar (≈15px), alors que le container parent
   ne la compte pas. Résultat : la section déborde à droite, et
   `overflow-x:hidden` sur <body> masque le débordement sans le corriger
   → la page semble décalée vers la gauche.

   Solution : utiliser 100% + la technique du "full bleed" sans vw.
   ===================================================================== */
.programme {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-inline: clamp(1rem, 4vw, 4rem);
  box-sizing: border-box;
}

/* Si vous tenez au fond pleine largeur sur desktop, appliquez-le à la
   SECTION parente (qui est déjà pleine largeur), pas à .programme.
   La section .section--sauge fait déjà le travail. */


/* =====================================================================
   FIX B · SUPPRIMER LE DÉCALAGE DE SCROLLBAR GLOBALEMENT
   ===================================================================== */
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;   /* réserve la place, plus de saut de layout */
}


/* =====================================================================
   FIX C · COUNTDOWN — trop gros sur mobile
   ===================================================================== */
@media (max-width: 640px) {

  .countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
  }

  .countdown__unit {
    min-width: 0;              /* ⬅ laisse la grille décider */
    width: 100%;
  }

  .countdown__num {
    font-size: 1.9rem;         /* valeur fixe : plus de clamp qui explose */
    line-height: 1.1;
  }

  .countdown__label {
    font-size: .58rem;
    letter-spacing: .12em;     /* réduit, sinon "SECONDES" déborde */
    margin-top: .3rem;
    text-indent: .12em;        /* compense l'espace fantôme */
  }
}

@media (max-width: 400px) {
  .countdown {
    gap: .25rem;
    max-width: 300px;
  }
  .countdown__num {
    font-size: 1.55rem;
  }
  .countdown__label {
    font-size: .52rem;
    letter-spacing: .08em;
    text-indent: .08em;
  }
}

@media (max-width: 340px) {
  .countdown {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem .5rem;
    max-width: 220px;
  }
  .countdown__num { font-size: 1.8rem; }
}


/* =====================================================================
   FIX D · CENTRAGE — éléments qui échappent au flux
   ===================================================================== */
@media (max-width: 880px) {

  /* Hero card — min-width:300px force un débordement sur écrans étroits */
  .hero__card {
    min-width: 0;
    margin-inline: auto;
  }

  /* Polaroïds — le passage en grid a fait perdre le centrage */
  .polaroids {
    margin-inline: auto;
    justify-items: center;
  }

  /* Framed / dresscode — recentrer explicitement */
  .framed,
  .dresscode .framed {
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
  }

  /* Cards & venue-cards — centrage du contenu des cellules */
  .cards,
  .venue-cards,
  .places {
    justify-items: center;
    width: 100%;
  }
  .card,
  .venue-card,
  .place {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
  }

  /* RSVP form — le grid text-align:left décentre le bloc lui-même */
  .rsvp-form {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }

  /* Venue slider — le slide absolu peut sortir du container */
  .venue-slider {
    width: 100%;
    overflow: hidden;
  }

  /* Quote — l'image doit être centrée quand la grille passe en 1 col */
  .quote {
    justify-items: center;
  }

  /* Withlove — la photo tournée déborde sans marge */
  .withlove__photo {
    margin-inline: auto;
    max-width: min(100%, 340px);
  }

  /* Blog / pages intérieures */
  .blog-body,
  .page-body {
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--gutter);
  }
}


/* =====================================================================
   FIX E · GARDE-FOU ANTI-DÉBORDEMENT
   Empêche n'importe quel enfant de pousser la page latéralement.
   ===================================================================== */
@media (max-width: 880px) {
  .container {
    width: 100%;
    padding-inline: var(--gutter);
    box-sizing: border-box;
    margin-inline: auto;
  }

  /* aucun élément ne peut dépasser son parent */
  .section > *,
  .container > * {
    max-width: 100%;
  }
}
/* =====================================================================
   CORRECTIFS · vidéo, texte intro, box lieux
   À coller APRÈS countdown-centering-fixes.css.
   ===================================================================== */


/* =====================================================================
   FIX 1 · VIDÉO NON CENTRÉE — "Nous nous marions"
   Cause : .intro__media est un flex sans justify-content, et .intro__video
   fait 80% de large → les 20% restants tombent tous à droite.
   ===================================================================== */
.intro__media {
  display: flex;
  align-items: center;        /* était stretch : la vidéo s'étirait */
  justify-content: center;    /* ⬅ le point clé */
}

.intro__video {
  width: 80%;
  height: auto;               /* height:80% n'a pas de sens sans hauteur parent définie */
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
  display: block;
}


/* =====================================================================
   FIX 2 · TEXTE "elle a dit miaou" NON CENTRÉ
   Cause : .split__text h2 a text-align:center, mais le <p> qui suit
   hérite du .split__text parent qui n'a aucun text-align.
   ===================================================================== */
.split__text {
  text-align: center;         /* ⬅ centre le bloc entier, pas juste le h2 */
}

.split__text p {
  max-width: 52ch;            /* longueur de ligne confortable */
  margin-inline: auto;        /* recentre le paragraphe lui-même */
}

/* le bouton / lien éventuel sous le texte reste centré */
.split__text .btn,
.split__text .link,
.split__text .signature {
  margin-inline: auto;
}


/* =====================================================================
   FIX 3 · TEXTE DES LIEUX COUPÉ DANS LA BOX
   Cause : .venue-slide a overflow:hidden (ajouté au fix précédent pour
   masquer le slide inactif) + .venue-slide__card en align-self:center.
   Le texte qui dépasse la hauteur du slide est rogné.

   Solution : ne mettre overflow:hidden QUE sur le slide inactif,
   et laisser la carte grandir librement.
   ===================================================================== */

/* on annule l'overflow sur le slide ACTIF, à toutes les tailles */
.venue-slide.is-active {
  overflow: visible;
  height: auto;
}

/* le slide inactif garde l'overflow pour rester invisible */
.venue-slide:not(.is-active) {
  overflow: hidden;
}

/* la carte ne doit jamais rogner son contenu */
.venue-slide__card {
  overflow: visible;
  height: auto;
  min-height: 0;
  align-self: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.venue-slide__card p {
  margin-bottom: .8rem;
  overflow-wrap: break-word;   /* les noms longs ne débordent plus */
  hyphens: auto;
}

.venue-slide__card h3 {
  overflow-wrap: break-word;
  line-height: 1.2;
}


/* ---- mobile : la carte prend toute la largeur, sous l'image ---- */
@media (max-width: 880px) {

  .venue-slide.is-active {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;   /* image auto, carte auto */
    align-items: start;              /* ⬅ était stretch : forçait des hauteurs égales */
    gap: 0;
    overflow: visible;
  }

  .venue-slide__img {
    min-height: 220px;
    aspect-ratio: 4 / 3;
    width: 100%;
  }

  .venue-slide__card {
    align-self: start;               /* ⬅ pas de centrage vertical sur mobile */
    width: 100%;
    height: auto;
    padding: 1.6rem 1.4rem;
    box-shadow: none;
    border-top: none;                /* la carte prolonge l'image */
  }

  /* le slider doit suivre la hauteur du contenu, pas la contraindre */
  .venue-slider {
    overflow: visible;
    min-height: 0;
  }

  /* on garde le slide inactif hors du flux, sans overflow sur le parent */
  .venue-slide:not(.is-active) {
    position: absolute;
    inset: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}


/* =====================================================================
   FIX 4 · INTRO — centrage global sur mobile
   ===================================================================== */
@media (max-width: 880px) {

  .intro__media {
    justify-content: center;
    width: 100%;
  }

  .intro__video {
    width: min(100%, 480px);
    max-height: 420px;
    margin-inline: auto;
  }

  .intro__text {
    text-align: center;
    width: 100%;
  }
  .intro__text p {
    max-width: 52ch;
    margin-inline: auto;
  }

  /* la photo intro avait des marges négatives calées pour le desktop */
  .intro__photo {
    margin-top: 0;
    margin-left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .intro__photo img {
    width: min(90%, 420px);
    margin-inline: auto;
  }
}
/* =====================================================================
   CORRECTIF · CADRE DES LIEUX collé à droite
   À coller APRÈS intro-venue-fixes.css.
   ===================================================================== */


/* =====================================================================
   OPTION A (recommandée) — le cadre respire des deux côtés
   Le cadre garde sa bordure complète et se détache des bords.
   ===================================================================== */
@media (max-width: 880px) {

  .venue-slide__card {
    border: 1px solid var(--taupe);   /* bordure sur les 4 côtés */
    width: auto;                      /* ⬅ n'était plus contraint par 100% */
    margin-inline: 0;                 /* le container gère déjà la gouttière */
    box-sizing: border-box;
  }

  /* on rétablit l'ombre légère pour détacher le cadre du fond */
  .venue-slide__card {
    box-shadow: var(--shadow);
  }
}


/* =====================================================================
   OPTION B — si vous voulez que le cadre reste pleine largeur
   mais avec une marge intérieure et une bordure droite visible.
   Décommentez ce bloc et commentez l'option A ci-dessus.
   ===================================================================== */
/*
@media (max-width: 880px) {
  .venue-slider {
    padding-inline: .5rem;
  }
  .venue-slide__card {
    border: 1px solid var(--taupe);
    border-right-width: 1px;
    width: 100%;
    box-sizing: border-box;
  }
}
*/


/* =====================================================================
   GARDE-FOU · vérifier que rien ne dépasse
   Si le cadre touche encore le bord, c'est que box-sizing manque
   quelque part dans la chaîne.
   ===================================================================== */
.venue-slider,
.venue-slide,
.venue-slide__card,
.venue-slide__img {
  box-sizing: border-box;
  max-width: 100%;
}


/* =====================================================================
   Bonus · sur desktop aussi, la carte peut coller le bord droit
   du container quand la grille 1.3fr / .9fr est serrée.
   ===================================================================== */
@media (min-width: 881px) {
  .venue-slide {
    padding-right: 2px;   /* laisse la place à l'outline/ombre */
  }
}
/* =====================================================================
   CORRECTIF · cadre des lieux collé au bord droit (mobile)
   Remplace venue-border-fix.css. À coller en DERNIER.
   ===================================================================== */

@media (max-width: 880px) {

  /* 1 · Le slider ne doit pas laisser un enfant absolu l'élargir. */
  .venue-slider {
    position: relative;
    overflow: hidden;      /* ⬅ contient le slide inactif */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  /* 2 · Le slide actif est une grille simple, sans padding parasite. */
  .venue-slide.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* ⬅ minmax(0,…) : évite le
                                                 débordement des enfants
                                                 dans une grille           */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow: visible;
  }

  /* 3 · L'image et la carte remplissent la cellule, sans dépasser. */
  .venue-slide__img,
  .venue-slide__card {
    width: 100%;
    max-width: 100%;
    min-width: 0;          /* ⬅ le défaut `auto` d'un item grid le laisse
                               grossir au-delà de sa cellule               */
    box-sizing: border-box;
    margin: 0;
  }

  /* 4 · La carte : bordure complète, visible des 4 côtés. */
  .venue-slide__card {
    border: 1px solid var(--taupe);
    box-shadow: var(--shadow);
    padding: 1.6rem 1.4rem;
    align-self: start;
    height: auto;
  }

  /* 5 · Le slide inactif ne participe à aucune mesure. */
  .venue-slide:not(.is-active) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
  }
}


@media (max-width: 880px) {
  .venue-slider {
    padding-inline: 4px;
  }
}


@media (max-width: 880px) {
  .venue-slide__img {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
  }
  .venue-slide__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

@media (max-width: 880px) {

  /* le header doit dominer toute la page */
  .site-header {
    z-index: 1000;
  }

  /* panneau latéral droit, pleine hauteur */
  .nav-list {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;                    /* ⬅ annule le inset: 0 */
    width: min(78vw, 320px);
    z-index: 999;                  /* ⬅ le point clé */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0 1.5rem;
    box-sizing: border-box;

    background: var(--ivoire);
    box-shadow: -20px 0 50px -30px rgba(0,0,0,.5);
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    overflow-y: auto;
  }

  .nav-list.open {
    transform: none;
  }

  /* le bouton reste au-dessus du panneau pour pouvoir refermer */
  .nav-toggle {
    z-index: 1001;
    position: relative;
  }

  /* le burger devient une croix quand le menu est ouvert */
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* et il reste visible sur le fond ivoire du panneau ouvert */
  .nav-toggle.open span { background: var(--sauge-fonce); }
}

/* empêche le scroll de la page derrière le menu ouvert */
body.nav-open {
  overflow: hidden;
}

@media (max-width: 880px) {

  /* le bouton se colle davantage au bord droit */
  .nav-toggle {
    display: block;
    z-index: 1001;
    position: relative;
  }

  /* le panneau reprend le plein écran */
  .nav-list {
    position: fixed;
    inset: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }

  .site-header {
    z-index: 1000;
  }
}
@media (max-width: 880px) {
  .nav-toggle,
  .nav-list {
    display: none !important;
  }
}