:root {
  --cream: #f8f4ee;
  --paper: #fffdf9;
  --ink: #2d2a26;
  --muted: color-mix(in srgb, var(--ink) 60%, var(--cream));
  --sage: #6f8160;
  --sage-dark: #4c5a42;
  --blush: #e8cfc5;
  --gold: #b08d57;
  --touch: var(--gold); /* petite touche (ex : brun bois ou corail) */
  --line: color-mix(in srgb, var(--ink) 12%, var(--cream));
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 300 17px/1.7 var(--sans); }
a { color: var(--sage-dark); }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 54px); text-align: center; margin: 0 0 8px; }
h2::after { content: '❦'; display: block; font-size: 20px; color: var(--gold); margin-top: 4px; }
[hidden] { display: none !important; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 20px; padding: 14px 28px;
  transition: background .3s, box-shadow .3s; color: #fff; }
.nav.solid { background: color-mix(in srgb, var(--cream) 95%, transparent); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--line); color: var(--ink); }
.nav-mono { font-family: var(--serif); font-size: 24px; font-style: italic; color: inherit; text-decoration: none; margin-right: auto; }
.nav nav { display: flex; gap: 22px; align-items: center; }
.nav nav a { color: inherit; text-decoration: none; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; }
.nav nav a:hover { opacity: .7; }
.nav-cta { border: 1px solid currentColor; padding: 6px 14px; border-radius: 30px; }
.nav-toggle { display: none; background: none; border: 0; color: inherit; font-size: 24px; cursor: pointer; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sage) 85%, white) 0%, var(--sage) 45%, var(--sage-dark) 100%); }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-bg.photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,28,24,.35), rgba(30,28,24,.55)); }
.hero-inner { position: relative; z-index: 2; padding: 100px 20px 60px; }
.eyebrow { letter-spacing: .35em; text-transform: uppercase; font-size: 13px; margin: 0 0 14px; opacity: .9; }
.names { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 11vw, 132px); line-height: .95; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .25em; }
.names .amp { font-style: italic; color: var(--blush); font-size: .7em; }
.hero-date { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); margin-top: 18px; text-transform: capitalize; font-style: italic; }
.hero-place { letter-spacing: .2em; text-transform: uppercase; font-size: 13px; margin-top: 6px; opacity: .85; }
.countdown { display: flex; gap: 14px; justify-content: center; margin: 34px 0 30px; }
.countdown div { min-width: 74px; padding: 10px 6px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; }
.countdown b { display: block; font-family: var(--serif); font-size: 36px; font-weight: 500; line-height: 1; }
.countdown span { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; opacity: .85; }
.btn-hero { display: inline-block; background: var(--paper); color: var(--ink); text-decoration: none; padding: 13px 32px; border-radius: 40px; border: 0;
  font: 400 13px var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.sprig { position: absolute; bottom: -10px; width: 120px; color: rgba(255,255,255,.18); z-index: 1; }
.sprig-l { left: 4%; transform: rotate(-12deg); }
.sprig-r { right: 4%; transform: scaleX(-1) rotate(-12deg); }

/* ---------- sections ---------- */
.intro { padding: 70px 20px 10px; text-align: center; }
.intro p { max-width: 640px; margin: 0 auto; font-family: var(--serif); font-size: clamp(22px, 2.6vw, 28px); font-style: italic; line-height: 1.45; color: var(--sage-dark); }
.section { padding: 80px 20px; }
.section.alt { background: var(--paper); }
.section-sub { text-align: center; color: var(--muted); margin: 0 0 30px; text-transform: capitalize; }
.section > *:not(h2):not(.section-sub) { max-width: 960px; margin-left: auto; margin-right: auto; }

.timeline { list-style: none; padding: 0; margin-top: 40px !important; max-width: 640px !important; position: relative; }
.timeline::before { content: ''; position: absolute; left: 92px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 76px 1fr; gap: 34px; padding: 14px 0; position: relative; }
.timeline li::before { content: ''; position: absolute; left: 88px; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--touch); box-shadow: 0 0 0 4px var(--cream); }
.timeline .time { font-family: var(--serif); font-size: 26px; text-align: right; color: var(--sage-dark); }
.timeline h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0; line-height: 1.3; }
.timeline .place { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.timeline p { margin: 4px 0 0; }

.places { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 30px !important; }
.place-card, .card { background: var(--cream); border: 1px solid var(--line); border-radius: 4px; padding: 30px; text-align: center; }
.section:not(.alt) .card { background: var(--paper); }
.place-card .label { font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }
.place-card h3, .card h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; margin: 6px 0 6px; }
.place-card a, .card a { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 30px !important; }
.info-grid .card { text-align: left; }
.info-grid .ico { font-size: 22px; color: var(--gold); }
.info-grid p { margin: 0; white-space: pre-line; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 30px !important; }
.cards .dist { color: var(--muted); font-size: 14px; }

.gallery { columns: 3 240px; column-gap: 12px; margin-top: 30px !important; max-width: 1100px !important; }
.gallery figure { margin: 0 0 12px; break-inside: avoid; cursor: zoom-in; overflow: hidden; border-radius: 3px; }
.gallery img { width: 100%; display: block; transition: transform .5s; }
.gallery figure:hover img { transform: scale(1.03); }
.lightbox { position: fixed; inset: 0; background: rgba(20,18,16,.92); z-index: 50; display: grid; place-items: center; padding: 20px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 85vh; }
.lightbox p { color: #eee; text-align: center; font-family: var(--serif); font-size: 20px; font-style: italic; }

.faq { max-width: 720px !important; margin-top: 30px !important; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 4px; }
.faq summary { font-family: var(--serif); font-size: 23px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::after { content: '+'; color: var(--touch); }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 8px 0 0; white-space: pre-line; }

/* ---------- RSVP ---------- */
.rsvp { background: linear-gradient(180deg, var(--cream), color-mix(in srgb, var(--cream) 85%, var(--sage))); }
.rsvp-form { max-width: 560px !important; display: flex; flex-direction: column; gap: 16px; background: var(--paper); padding: 36px; border: 1px solid var(--line); border-radius: 4px; }
.rsvp-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
.rsvp-form label.inline { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
.rsvp-form input:not([type=radio]):not([type=checkbox]), .rsvp-form select, .rsvp-form textarea {
  font: 400 16px var(--sans); color: var(--ink); border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 8px 2px; border-radius: 0; }
.rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus { outline: none; border-bottom-color: var(--sage); }
.rsvp-form textarea { border: 1px solid var(--line); padding: 8px; resize: vertical; }
.rsvp-form .choice { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rsvp-form .choice legend { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.rsvp-form .choice label { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); font-size: 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.rsvp-form .choice label:has(input:checked) { border-color: var(--sage); background: color-mix(in srgb, var(--sage) 10%, var(--paper)); }
input[type=radio], input[type=checkbox] { accent-color: var(--sage); }
.rsvp-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rsvp-form .if-yes { display: none; flex-direction: column; gap: 16px; }
.rsvp-form.yes .if-yes { display: flex; }
.rsvp-form .btn-hero { background: var(--sage); color: #fff; align-self: center; margin-top: 8px; }
.form-msg { text-align: center; margin: 0; min-height: 1em; }
.thanks { text-align: center; padding: 30px 10px; }
.thanks h3 { font-family: var(--serif); font-size: 34px; font-weight: 400; margin: 0 0 8px; }

/* ---------- footer ---------- */
.footer { text-align: center; padding: 60px 20px 40px; background: var(--sage-dark); color: color-mix(in srgb, white 88%, var(--sage-dark)); }
.foot-names { font-family: var(--serif); font-size: 40px; font-style: italic; }
.footer a { color: inherit; }
.admin-link { display: inline-block; margin-top: 24px; font-size: 12px; opacity: .45; letter-spacing: .1em; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { padding: 12px 16px; }
  .nav-toggle { display: block; }
  .nav nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--cream); color: var(--ink); padding: 16px; gap: 14px; box-shadow: 0 10px 20px rgba(0,0,0,.08); }
  .nav.open nav { display: flex; }
  .section { padding: 60px 16px; }
  .countdown { gap: 8px; }
  .countdown div { min-width: 62px; }
  .countdown b { font-size: 28px; }
  .timeline::before { left: 66px; }
  .timeline li { grid-template-columns: 54px 1fr; gap: 26px; }
  .timeline li::before { left: 62px; }
  .timeline .time { font-size: 21px; }
  .rsvp-form { padding: 24px 18px; }
  .sprig { width: 70px; }
  .hero-portrait { width: 150px; margin-bottom: 18px; }
}

/* Photo d'accueil : médaillon par défaut (fond visible), plein écran en option */
.hero-portrait { margin: 0 auto 26px; width: clamp(170px, 24vw, 260px); aspect-ratio: 4 / 5; border-radius: 999px 999px 14px 14px;
  overflow: hidden; border: 5px solid color-mix(in srgb, var(--paper) 85%, transparent); box-shadow: 0 18px 40px rgba(0,0,0,.22), 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root:not(.hero-full) .hero-bg { display: none; }
.hero-full .hero-portrait { display: none; }

/* Option « ne pas utiliser la 1re photo en couverture » */
.no-hero-photo .hero-bg, .no-hero-photo .hero-portrait { display: none; }

.music { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 30px !important; }
.music h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0 0 10px; text-align: center; }
.music iframe { width: 100%; height: 352px; border: 0; border-radius: 12px; }

/* recherche de chansons */
.song-field { position: relative; display: flex; flex-direction: column; gap: 8px; }
.song-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin-top: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.12); max-height: 330px; overflow-y: auto; }
.song-opt { display: flex; gap: 12px; align-items: center; width: 100%; padding: 8px 12px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.song-opt:hover, .song-opt:focus { background: color-mix(in srgb, var(--sage) 10%, var(--paper)); outline: none; }
.song-opt img, .song-opt .ph { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--line); }
.song-opt b { display: block; font-weight: 500; }
.song-opt span span { font-size: 13px; color: var(--muted); }
.song-none { padding: 12px; font-size: 14px; color: var(--muted); }
.song-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.song-picked:empty { display: none; }
.song-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border: 1px solid var(--line); border-radius: 30px; background: color-mix(in srgb, var(--sage) 8%, var(--paper)); font-size: 13.5px; }
.song-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.song-chip b { font-weight: 500; }
.song-chip button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 12px; padding: 2px 4px; }

/* ---------- motif de fond (Apparence du site › Motif) ---------- */
.motif-page body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--motif-color); opacity: var(--motif-op);
  -webkit-mask: var(--motif) 0 0 / var(--motif-size) repeat; mask: var(--motif) 0 0 / var(--motif-size) repeat; }
.motif-page .section.alt { background: color-mix(in srgb, var(--paper) 72%, transparent); }
.motif-page .rsvp { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sage) 14%, transparent)); }
.motif-hero .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-color: #fff; opacity: calc(var(--motif-op) * 1.3);
  -webkit-mask: var(--motif) 0 0 / var(--motif-size) repeat; mask: var(--motif) 0 0 / var(--motif-size) repeat; }
/* image personnelle : affichée telle quelle, sans recoloration */
.motif-custom body::before, .motif-custom .hero::after { background: var(--motif) 0 0 / var(--motif-size) repeat; -webkit-mask: none; mask: none; }