/* =====================================================================
   DOMAINE DE LA TRAXÈNE — Feuille de style
   Palette et typographies : voir proposition de direction artistique.
===================================================================== */

:root{
  color-scheme: light;

  --ivoire:        #F6F1E4;
  --blanc-casse:   #FCFAF4;
  --vert-profond:  #243B2F;
  --vert-profond-2:#1B2E24;
  --brique:        #9C4A32;
  --bordeaux:      #5B1F2A;
  --or-mat:        #A6853D;
  --or-mat-light:  #E4C878; /* variante plus claire, pour rester lisible sur fond sombre */
  --encre:         #2A241F;
  --gris-pierre:   #6E6558;
  --blanc:         #ffffff;

  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;

  --radius: 2px;
  --shadow-soft: 0 18px 45px -20px rgba(42,36,31,0.35);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; background: var(--ivoire); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--vert-profond-2);
}

p{ margin: 0 0 1.1em; max-width: 62ch; color: var(--encre); }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.eyebrow{
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-mat);
  font-weight: 600;
  margin-bottom: var(--space-1);
  display:inline-block;
}

.section{
  padding: var(--space-6) 0;
  position: relative;
  overflow: hidden;
  background: var(--ivoire); /* couleur explicite : certains navigateurs en mode sombre
    réinterprètent les fonds hérités du body, mais laissent tranquilles les fonds
    déclarés directement sur l'élément. On fixe donc le fond ici, section par section. */
}
.section--alt{ background: var(--blanc-casse); }

.section-head{
  max-width: 640px;
  margin: 0 auto var(--space-4);
  text-align: center;
}
.section-head h2{
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  position: relative;
  display:inline-block;
  padding-bottom: 0.6rem;
}
.section-head h2::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  width:0; height:1px;
  background: var(--or-mat);
  transform: translateX(-50%);
  transition: width 900ms ease;
}
.section-head.in-view h2::after{ width: 64px; }

/* ---------- Reveal on scroll (one signature motion) ---------- */
.reveal{
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity 750ms cubic-bezier(.2,.7,.2,1), transform 750ms cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{ opacity: 1; transform: translateY(0) scale(1); }

/* Staggered entrance for grouped items (gallery, airport cards, timeline) */
.gallery figure, .airports .airport-card, .timeline-item{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.gallery.in-view figure, .airports.in-view .airport-card, .timeline.in-view .timeline-item{
  opacity: 1; transform: translateY(0);
}
.gallery.in-view figure:nth-child(1){ transition-delay: 0ms; }
.gallery.in-view figure:nth-child(2){ transition-delay: 90ms; }
.gallery.in-view figure:nth-child(3){ transition-delay: 180ms; }
.gallery.in-view figure:nth-child(4){ transition-delay: 270ms; }
.gallery.in-view figure:nth-child(5){ transition-delay: 360ms; }
.airports.in-view .airport-card:nth-child(1){ transition-delay: 0ms; }
.airports.in-view .airport-card:nth-child(2){ transition-delay: 120ms; }
.airports.in-view .airport-card:nth-child(3){ transition-delay: 240ms; }
.timeline.in-view .timeline-item:nth-child(1){ transition-delay: 0ms; }
.timeline.in-view .timeline-item:nth-child(2){ transition-delay: 90ms; }
.timeline.in-view .timeline-item:nth-child(3){ transition-delay: 180ms; }
.timeline.in-view .timeline-item:nth-child(4){ transition-delay: 270ms; }

/* ---------- Header ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 60;
  padding: 1.35rem 0;
  transition: background 400ms ease, padding 400ms ease, box-shadow 400ms ease;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.nav-wrapper{ display:flex; align-items:center; gap: var(--space-3); }
.header-right{ display:flex; align-items:center; gap: 0.7rem; }
.site-header.solid{
  background: rgba(246,241,228,0.92);
  backdrop-filter: blur(6px);
  padding: 0.85rem 0;
  box-shadow: 0 2px 20px rgba(42,36,31,0.08);
}
.brand{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--blanc);
  text-decoration:none;
  letter-spacing: 0.02em;
}
.site-header.solid .brand{ color: var(--vert-profond-2); }

.main-nav{ display:none; align-items:center; gap: var(--space-3); }
.main-nav a{
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration:none;
  color: var(--blanc);
  opacity: 0.9;
  position: relative;
  padding-bottom: 3px;
}
.site-header.solid .main-nav a{ color: var(--vert-profond-2); }
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--or-mat); transform: scaleX(0); transform-origin:left;
  transition: transform 300ms ease;
}
.main-nav a:hover::after, .main-nav a:focus-visible::after{ transform: scaleX(1); }

.main-nav a.nav-cta{
  background: var(--or-mat); color: var(--vert-profond-2) !important; opacity:1;
  padding: 0.5rem 1.1rem; border-radius: 999px; letter-spacing: 0.08em;
  transition: background 200ms ease, transform 200ms ease;
}
.main-nav a.nav-cta::after{ display:none; }
.main-nav a.nav-cta:hover{ background: var(--or-mat-light); transform: translateY(-1px); }
.site-header.solid .main-nav a.nav-cta{ color: var(--blanc) !important; background: var(--vert-profond); }
.site-header.solid .main-nav a.nav-cta:hover{ background: var(--vert-profond-2); }

.mobile-nav a.nav-cta{
  background: var(--vert-profond); color: var(--blanc); padding: 0.6rem 1.6rem; border-radius:999px; font-size:1.2rem;
}

.floating-rsvp{
  position: fixed; bottom: 1.1rem; right: 1.1rem; z-index: 55;
  background: var(--vert-profond); color: var(--blanc); text-decoration:none;
  padding: 0.85rem 1.4rem; border-radius: 999px; font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase;
  box-shadow: 0 10px 25px -8px rgba(20,17,13,0.45);
  opacity:0; transform: translateY(14px); pointer-events:none;
  transition: opacity 300ms ease, transform 300ms ease, background 200ms ease;
}
.floating-rsvp.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.floating-rsvp:hover{ background: var(--vert-profond-2); }
@media (min-width: 860px){ .floating-rsvp{ display:none; } }

.lang-switch{
  display:flex; gap:2px; align-items:center;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px; padding: 3px;
  backdrop-filter: blur(6px);
  transition: background 300ms ease, border-color 300ms ease;
}
.site-header.solid .lang-switch{ background: rgba(36,59,47,0.08); border-color: rgba(36,59,47,0.25); }
.lang-switch .lang-btn{
  display:flex; align-items:center; gap:0.4rem;
  background:none; border:none; cursor:pointer;
  padding: 0.35rem 0.7rem; border-radius:999px;
  color: var(--blanc); font-family: var(--font-body); font-size: 0.82rem; letter-spacing:0.03em;
  transition: background 200ms ease, color 200ms ease;
}
.site-header.solid .lang-switch .lang-btn{ color: var(--vert-profond-2); }
.lang-switch .lang-btn .flag{ font-size:1.05rem; line-height:1; }
.lang-switch .lang-btn.active{
  background: var(--blanc); color: var(--vert-profond-2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.site-header.solid .lang-switch .lang-btn.active{ background: var(--vert-profond); color: var(--blanc); }

.nav-toggle{
  display:inline-flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 6px;
}
.nav-toggle span{ width:22px; height:1px; background: var(--blanc); display:block; }
.site-header.solid .nav-toggle span{ background: var(--vert-profond-2); }

.mobile-nav{
  position: fixed; inset:0; background: var(--ivoire); z-index: 70;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--space-3);
  transform: translateY(-100%); transition: transform 450ms ease;
}
.mobile-nav.open{ transform: translateY(0); }
.mobile-nav a{
  font-family: var(--font-display); font-size: 1.6rem; text-decoration:none; color: var(--vert-profond-2);
}
.mobile-nav-close{
  position:absolute; top:1.4rem; right:1.4rem; background:none; border:none; font-size:1.6rem; cursor:pointer; color: var(--vert-profond-2);
}

@media (min-width: 860px){
  .main-nav{ display:flex; }
  .nav-toggle{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  min-height: 100svh;
  display:flex; align-items:flex-end;
  position: relative;
  overflow: hidden;
  color: var(--blanc);
}
.hero-bg{
  position:absolute; inset: -2%;
  background: url("../assets/img/hero-nuit.jpg") center/cover no-repeat;
  animation: heroZoom 24s ease-out forwards;
  z-index: 0;
}
@keyframes heroZoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.13); }
}
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0.25) 32%, rgba(6,5,4,0.92) 100%),
    radial-gradient(ellipse at center 78%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 60%);
}
.hero-inner{
  position:relative; z-index:2;
  width:100%;
  padding: var(--space-6) var(--space-3) var(--space-5);
  text-align:center;
  text-shadow: 0 3px 22px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
}
.hero-names, .hero-intro, .hero-meta{
  opacity: 0;
  animation: heroRise 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-names{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.9rem, 9.5vw, 6.4rem);
  margin: 0 0 var(--space-2);
  color: var(--blanc);
  animation-delay: 0.15s;
}
.hero-intro{
  max-width: 34ch; margin: 0 auto var(--space-3);
  font-size: 1.08rem;
  color: rgba(255,255,255,0.96);
  animation-delay: 0.45s;
}
.hero-meta{
  display:flex; flex-direction:column; align-items:center; gap: 0.4rem;
  font-size: 0.88rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600;
  animation-delay: 0.7s;
}
.hero-meta .wed-note{
  font-family: var(--font-body); text-transform:none; letter-spacing:0.02em; font-size: 0.87rem;
  color: var(--or-mat-light, #E4C878);
  font-style: italic; margin-top: 0.4rem; font-weight:400;
}
@keyframes heroRise{
  from{ opacity:0; transform: translateY(22px); }
  to{ opacity:1; transform: translateY(0); }
}
.hero-scroll{
  position:absolute; bottom: 1.6rem; left:50%; transform: translateX(-50%);
  z-index:2;
  font-size: 0.72rem; letter-spacing:0.18em; text-transform:uppercase; color: var(--blanc);
  display:flex; flex-direction:column; align-items:center; gap:0.4rem;
  opacity:0; animation: heroRise 1s ease forwards; animation-delay: 1.1s;
}
.hero-scroll::after{
  content:""; width:1px; height:26px; background: rgba(255,255,255,0.75);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%,100%{ transform: scaleY(0.4); opacity:0.4;} 50%{ transform: scaleY(1); opacity:1; } }

/* ---------- Countdown ---------- */
.countdown{ background: var(--vert-profond-2); color: var(--blanc); padding: var(--space-4) 0; }
.countdown-title{ text-align:center; font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase; color: rgba(255,255,255,0.8); margin-bottom: var(--space-3); }
.countdown-grid{ display:flex; justify-content:center; gap: clamp(1.2rem, 6vw, 3.5rem); flex-wrap: wrap; }
.countdown-item{ text-align:center; }
.countdown-num{ font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.4rem); line-height:1; display:inline-block; transition: transform 200ms ease; }
.countdown-num.pulse{ transform: scale(1.14); color: var(--or-mat); }
.countdown-label{ font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color: rgba(255,255,255,0.75); margin-top:0.5rem; }
.countdown-today{ text-align:center; font-family: var(--font-display); font-style:italic; font-size:1.3rem; color: var(--blanc); }

/* ---------- Story (placeholder) ---------- */
.story-block{ text-align:left; max-width: 640px; margin: 0 auto; }
.story-block .story-lede{ font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--vert-profond-2); }
.story-photo{ margin: var(--space-4) 0; }
.story-photo img{
  width:100%; height:auto; max-width:100%; display:block;
  object-fit: contain; border-radius: 0;
  border: 1px solid rgba(42,36,31,0.08);
}
.story-photo figcaption{
  margin-top: 0.7rem; text-align:center;
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--vert-profond-2);
}

.couple-gallery{ display:grid; gap: var(--space-3); grid-template-columns: 1fr; margin-top: var(--space-4); }
@media (min-width: 700px){ .couple-gallery{ grid-template-columns: 1fr 1fr; } }
.couple-gallery figure{
  margin:0; opacity:0; transform: translateY(18px);
  transition: opacity 650ms ease, transform 650ms ease;
}
.couple-gallery.in-view figure{ opacity:1; transform: translateY(0); }
.couple-gallery.in-view figure:nth-child(1){ transition-delay: 0ms; }
.couple-gallery.in-view figure:nth-child(2){ transition-delay: 120ms; }
.couple-gallery.in-view figure:nth-child(3){ transition-delay: 240ms; }
.couple-gallery.in-view figure:nth-child(4){ transition-delay: 360ms; }
.couple-gallery img{
  width:100%; height:auto; display:block; object-fit: contain; border-radius:0;
  border: 1px solid rgba(42,36,31,0.08); transition: transform 900ms ease;
}
.couple-gallery figure:hover img{ transform: scale(1.03); }
.couple-gallery figcaption{
  margin-top: 0.8rem; text-align:center;
  font-family: var(--font-display); font-style: italic; font-size: 1.08rem;
  color: var(--vert-profond-2);
}
.story-block .eyebrow{ display:block; }

/* ---------- Domaine ---------- */
.domaine-grid{ display:grid; gap: var(--space-3); grid-template-columns: 1fr; }
.domaine-text p:last-of-type{ margin-bottom:0; }
.gallery{
  display:grid; gap: var(--space-2);
  grid-template-columns: 1fr;
  margin-top: var(--space-4);
}
.gallery figure{ margin:0; overflow:hidden; border: 1px solid rgba(42,36,31,0.08); }
.gallery img{ width:100%; height:100%; object-fit:cover; transition: transform 900ms ease; }
.gallery figure:hover img{ transform: scale(1.035); }
.gallery .tall{ grid-row: span 2; }
.gallery .tall img{ height:100%; }

@media (min-width: 700px){
  .gallery{ grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; }
  .gallery figure:nth-child(1){ grid-column: span 4; grid-row: span 2; }
  .gallery figure:nth-child(2){ grid-column: span 2; grid-row: span 1; }
  .gallery figure:nth-child(3){ grid-column: span 2; grid-row: span 1; }
  .gallery figure:nth-child(4){ grid-column: span 3; grid-row: span 2; }
  .gallery figure:nth-child(5){ grid-column: span 3; grid-row: span 2; }
}

/* ---------- Full-bleed divider images ---------- */
.divider-img{
  width:100%; height: clamp(220px, 38vw, 440px); object-fit:cover;
  margin: 0;
}

/* ---------- Program ---------- */
.timeline{ max-width: 520px; margin: 0 auto; }
.timeline-item{
  display:flex; align-items:baseline; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(42,36,31,0.1);
}
.timeline-item:last-child{ border-bottom:none; }
.timeline-item .t-label{ font-family: var(--font-display); font-size:1.15rem; flex:1; color: var(--encre); }
.timeline-item .t-time{ font-size:0.85rem; letter-spacing:0.06em; color: var(--gris-pierre); }
.timeline-item .t-time.tbd{ font-style: italic; }
.program-note{ text-align:center; color: var(--gris-pierre); font-size:0.95rem; margin-top: var(--space-3); }

/* ---------- Infos pratiques ---------- */
.infos-grid{ display:grid; gap: var(--space-4); }
.address-card{
  background: var(--blanc); border:1px solid rgba(42,36,31,0.08);
  padding: var(--space-3); text-align:center;
}
.address-card strong{ display:block; font-family: var(--font-display); font-size:1.2rem; margin-bottom:0.3rem; color: var(--vert-profond-2); }
.address-card span{ color: var(--encre); }

.wed-callout{ background: var(--vert-profond); color: var(--blanc); padding: var(--space-3); text-align:center; }
.wed-callout h3{ color: var(--blanc); font-size:1.3rem; }
.wed-callout p{ margin:0 auto; color: var(--blanc); opacity:0.95; }

.airports{ display:grid; gap: var(--space-2); grid-template-columns: 1fr; }
.airport-card{
  border:1px solid rgba(42,36,31,0.12); padding: var(--space-2) var(--space-3);
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); flex-wrap:wrap;
  background: var(--blanc);
}
.airport-card .a-name{ font-family: var(--font-display); font-size:1.05rem; color: var(--encre); }
.airport-card .a-meta{ font-size:0.85rem; color: var(--gris-pierre); }
.airport-card .a-link{
  font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
  border-bottom: 1px solid var(--or-mat); color: var(--vert-profond-2); padding-bottom:2px; white-space:nowrap;
}
.airports-disclaimer{ text-align:center; font-size:0.85rem; color: var(--gris-pierre); margin-top: var(--space-2); }
.car-tip{ text-align:center; margin-top: var(--space-3); font-size:0.95rem; color: var(--encre); }

@media (min-width: 700px){ .airports{ grid-template-columns: 1fr 1fr 1fr; } .airport-card{ flex-direction:column; align-items:flex-start; text-align:left; } }

/* ---------- Accommodation ---------- */
.choice-group{ display:flex; flex-direction:column; gap: 0.75rem; max-width: 480px; margin: var(--space-3) auto 0; }
.choice-option{
  display:flex; align-items:center; gap:0.75rem;
  border: 1px solid rgba(42,36,31,0.18); padding: 0.9rem 1.1rem; cursor:pointer;
  background: var(--blanc);
  transition: border-color 200ms ease;
}
.choice-option:hover{ border-color: var(--or-mat); }
.choice-option input{ accent-color: var(--vert-profond); width:18px; height:18px; }
.acc-capacity{ text-align:center; font-size:0.85rem; color: var(--gris-pierre); margin-top: var(--space-2); }
.acc-disclaimer, .acc-deadline{ text-align:center; font-size:0.88rem; color: var(--gris-pierre); max-width: 520px; margin: 0.4rem auto 0; }

/* ---------- Modal ---------- */
.modal-overlay{
  position: fixed; inset:0; background: rgba(20,17,13,0.55); z-index: 100;
  display:flex; align-items:center; justify-content:center; padding: var(--space-2);
  opacity:0; pointer-events:none; transition: opacity 350ms ease;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{
  background: var(--ivoire); max-width: 460px; width:100%; padding: var(--space-4) var(--space-3);
  position:relative; text-align:center; box-shadow: var(--shadow-soft);
  transform: translateY(12px); transition: transform 350ms ease;
}
.modal-overlay.open .modal-box{ transform: translateY(0); }
.modal-close{
  position:absolute; top:0.8rem; right:0.9rem; background:none; border:none; font-size:1.3rem; cursor:pointer; color: var(--gris-pierre);
}
.modal-box h3{ font-size:1.5rem; }
.modal-choices{ display:flex; flex-direction:column; gap:0.6rem; margin: var(--space-3) 0 var(--space-2); }
.modal-choices button{
  font-family: var(--font-body); font-size:0.95rem; padding:0.8rem 1rem; border:1px solid var(--vert-profond);
  background: var(--vert-profond); color: var(--blanc); cursor:pointer; transition: background 200ms ease, transform 200ms ease;
}
.modal-choices button.secondary{ background: transparent; color: var(--vert-profond); }
.modal-choices button:hover{ background: var(--vert-profond-2); transform: translateY(-1px); }
.modal-choices button.secondary:hover{ background: rgba(36,59,47,0.06); }
.modal-box{ animation: modalPop 450ms cubic-bezier(.2,.8,.2,1); }
@keyframes modalPop{ from{ opacity:0; transform: translateY(18px) scale(0.97);} to{ opacity:1; transform: translateY(0) scale(1);} }
.modal-later{ background:none; border:none; text-decoration:underline; color: var(--gris-pierre); font-size:0.85rem; cursor:pointer; }
.modal-fine{ font-size:0.78rem; color: var(--gris-pierre); margin-top: var(--space-2); }

/* ---------- RSVP form ---------- */
.rsvp-intro{ text-align:center; max-width:520px; margin:0 auto var(--space-4); color: var(--gris-pierre); }
form.rsvp{ max-width: 620px; margin:0 auto; background: var(--blanc); padding: var(--space-4) var(--space-3); border:1px solid rgba(42,36,31,0.08); }
.form-row{ display:grid; gap: var(--space-2); margin-bottom: var(--space-2); }
@media (min-width: 560px){ .form-row.two{ grid-template-columns: 1fr 1fr; } }
.field label{ display:block; font-size:0.8rem; letter-spacing:0.05em; margin-bottom:0.35rem; color: var(--vert-profond-2); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field textarea, .field select{
  width:100%; padding: 0.8rem 0.9rem; border:1px solid rgba(42,36,31,0.22);
  background: var(--ivoire); font-family: var(--font-body); font-size:1rem; color: var(--encre);
  border-radius: var(--radius);
}
.field input::placeholder, .field textarea::placeholder, .phone-input input::placeholder{
  color: var(--gris-pierre); opacity: 1; /* certains navigateurs appliquent sinon une opacité/teinte
  système imprévisible au texte d'exemple, on la fixe nous-mêmes. */
}
.field textarea{ resize: vertical; min-height:90px; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{ outline: 2px solid var(--or-mat); outline-offset:1px; }
.field-error{ color: var(--bordeaux); font-size:0.8rem; margin-top:0.3rem; display:none; }
.field.has-error input, .field.has-error select{ border-color: var(--bordeaux); }
.field.has-error .field-error{ display:block; }

.divider-line{ border:none; border-top:1px solid rgba(42,36,31,0.12); margin: var(--space-3) 0; }
.subsection-title{ font-family: var(--font-display); font-size:1.15rem; margin-bottom: var(--space-2); }

.phone-input{
  display:flex; align-items:stretch;
  border: 1px solid rgba(42,36,31,0.22); background: var(--ivoire);
}
.phone-input:focus-within{ outline: 2px solid var(--or-mat); outline-offset: 1px; }
.phone-code-toggle{
  display:flex; align-items:center; gap:0.4rem; flex:0 0 auto;
  padding: 0 0.8rem; background: rgba(36,59,47,0.06); border:none; border-right: 1px solid rgba(42,36,31,0.15);
  cursor:pointer; font-family: var(--font-body); font-size:0.92rem; color: var(--vert-profond-2); white-space:nowrap;
}
.phone-code-toggle:hover{ background: rgba(36,59,47,0.12); }
.phone-code-toggle .flag{ font-size:1.05rem; }
.phone-input input#phone{
  border:none; background:transparent; flex:1 1 auto; min-width:0;
  padding: 0.8rem 0.9rem; font-family: var(--font-body); font-size:1rem; color: var(--encre);
}
.phone-input input#phone:focus-visible{ outline:none; }
.field.has-error .phone-input{ border-color: var(--bordeaux); }

.add-partner-btn{
  background:none; border:1px dashed var(--or-mat); color: var(--vert-profond-2);
  padding:0.7rem 1rem; font-family: var(--font-body); cursor:pointer; width:100%;
  font-size:0.92rem;
}
.partner-fields{ display:none; margin-top: var(--space-2); }
.partner-fields.open{ display:block; }
.remove-partner{ background:none; border:none; text-decoration:underline; color: var(--gris-pierre); font-size:0.82rem; cursor:pointer; margin-top:0.4rem; }

.stepper{ display:flex; align-items:center; gap: 0.9rem; }
.stepper button{
  width:38px; height:38px; border:1px solid var(--vert-profond); background: var(--blanc-casse);
  font-size:1.2rem; cursor:pointer; color: var(--vert-profond-2); line-height:1;
}
.stepper button:hover{ background: var(--vert-profond); color: var(--blanc); }
.stepper output{ font-family: var(--font-display); font-size:1.3rem; min-width: 2ch; text-align:center; }

.children-ages{ display:none; flex-wrap:wrap; gap: 0.9rem; margin-top: 0.9rem; }
.children-ages.show{ display:flex; }
.child-age-field{ display:flex; flex-direction:column; gap:0.35rem; }
.child-age-field label{ font-size:0.75rem; color: var(--gris-pierre); }
.age-input{
  display:flex; align-items:stretch; width:max-content;
  border:1px solid rgba(42,36,31,0.22); background: var(--ivoire); border-radius:0;
}
.age-input:focus-within{ outline: 2px solid var(--or-mat); outline-offset:1px; }
.age-input input{
  width: 50px; flex: 0 0 auto; margin:0; padding: 0.55rem 0.4rem; border:none; background:transparent;
  font-family: var(--font-body); font-size:0.95rem; color: var(--encre); text-align:center;
}
.age-input input[type=number]{ -moz-appearance: textfield; }
.age-input input::-webkit-outer-spin-button, .age-input input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.age-input input:focus-visible{ outline:none; }
.age-suffix{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; white-space:nowrap; margin:0;
  padding: 0 0.65rem; font-size:0.8rem; letter-spacing:0.02em;
  color: var(--vert-profond-2); background: rgba(36,59,47,0.06);
  border-left: 1px solid rgba(42,36,31,0.15);
}

.radio-list{ display:flex; flex-direction:column; gap:0.6rem; }
.radio-list label{ display:flex; align-items:center; gap:0.6rem; font-size:0.95rem; cursor:pointer; color: var(--encre); }
.radio-list input{ accent-color: var(--vert-profond); width:17px; height:17px; }

.submit-btn{
  width:100%; padding: 1rem; background: var(--vert-profond); color: var(--blanc); border:none;
  font-family: var(--font-body); font-size:1rem; letter-spacing:0.04em; cursor:pointer; margin-top: var(--space-3);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.submit-btn:hover{ background: var(--vert-profond-2); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(36,59,47,0.55); }
.submit-btn:active{ transform: translateY(0); }
.submit-btn:disabled{ opacity:0.6; cursor:default; }
.form-status{ text-align:center; margin-top: var(--space-2); font-size:0.9rem; }
.form-status.error{ color: var(--bordeaux); }

.confirmation-box{ display:none; text-align:center; max-width: 520px; margin:0 auto; }
.confirmation-box.show{ display:block; }
.confirmation-box h3{ font-size:1.7rem; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--vert-profond-2); color: rgba(255,255,255,0.85); padding: var(--space-4) 0; text-align:center; font-size:0.85rem; position:relative; overflow:hidden; }
.site-footer .brand-line{ font-family: var(--font-display); font-style:italic; font-size:1.2rem; color: var(--blanc); margin-bottom:0.4rem; }

/* ---------- Focus visibility (accessibilité) ---------- */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--or-mat); outline-offset: 2px;
}

/* ---------- Motif floral discret (décoratif uniquement) ---------- */
.rose-motif{
  position:absolute; pointer-events:none; z-index:0;
  color: var(--vert-profond); opacity: 0.14; object-fit: contain;
}
.rose-motif--histoire{ top: -18px; right: -14px; width: 170px; height: 170px; }
.rose-motif--domaine{ bottom: -24px; left: -18px; width: 190px; height: 190px; transform: scaleX(-1); }
.rose-motif--rsvp{ bottom: -28px; right: -18px; width: 210px; height: 210px; }
.rose-motif--footer{ top: 8px; left: -16px; width: 150px; height: 150px; color: var(--or-mat-light); opacity: 0.09; }