/* ============================================================
   [PRÉNOM 1] & [PRÉNOM 2] — feuille de style
   ------------------------------------------------------------
   Everything you'd want to change is in the DESIGN TOKENS block
   just below. Change a value there and it propagates through the
   whole page. You shouldn't need to touch anything further down
   unless you're moving layout around.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS  ← start here
   ============================================================ */
:root {

  /* --- Colours -------------------------------------------------
     Slate ink + pale stone + a muted green. To re-theme the whole
     site, change these five values and nothing else.             */
  --ink:        #16222e;   /* deep slate — dark panels, all text  */
  --ink-soft:   #566873;   /* secondary text                      */
  --paper:      #eef0e9;   /* page background                     */
  --paper-warm: #f7f8f3;   /* cards, slightly lighter than paper  */
  --accent:     #1e5680;   /* muted green — ampersand, links      */

  /* Hairlines, derived from --ink. */
  --line:       rgba(34, 48, 58, 0.16);
  --line-light: rgba(238, 240, 233, 0.28);

  /* --- Typefaces ----------------------------------------------
     Change these two + the <link> in index.html to swap fonts.   */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  /* Script, used only for the names and the section titles. */
  --font-script:  "Alex Brush", "Snell Roundhand", "Brush Script MT", cursive;
  --font-body:    "Archivo", -apple-system, "Segoe UI", sans-serif;

  /* --- Type scale ----------------------------------------------
     clamp(min, fluid, max) — sizes grow with the viewport, so the
     page reads well on a phone and on a laptop without extra work. */
  --size-hero:    clamp(2.9rem, 11vw, 6.5rem);
  --size-title:   clamp(1.9rem, 4.5vw, 3rem);
  --size-subtitle: 1.1rem;
  --size-body:    1.0625rem;
  --size-small:   0.875rem;
  --size-eyebrow: 0.75rem;

  /* --- Spacing --------------------------------------------------
     One base unit; everything else is a multiple of it.          */
  --space:        1rem;
  --space-section: clamp(4.5rem, 10vw, 8rem);  /* vertical gap between sections */
  --measure:      68rem;   /* max content width */
  --measure-text: 34rem;   /* max width for paragraphs — keeps lines readable */

  --radius: 2px;   /* set to 0 for hard corners, 12px for soft ones */
}


/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;   /* so anchors don't hide under the nav */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 var(--space); max-width: var(--measure-text); }

a { color: inherit; }

/* Visible keyboard focus — please keep this. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Display face. WONK is a Fraunces axis that tilts a few letters;
   set it to 0 for a straighter, more formal look. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  line-height: 1.1;
  margin: 0;
}

/* The three places that get the script instead: the names in the hero, the
   same names signing off in the footer, and every section title. A script
   needs more leading than a serif — its loops would otherwise touch — and
   none of the Fraunces axes apply to it. */
.hero__names,
.signature,
.section__title {
  font-family: var(--font-script);
  font-variation-settings: normal;
  line-height: 1.25;
}

/* Small letterspaced label used above each section title. */
.eyebrow {
  font-size: var(--size-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: calc(var(--space) * 0.75);
}
.eyebrow--light { color: var(--paper); opacity: 0.7; }

.link {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  margin-top: var(--space);
  padding: 0.9em 1.9em;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }

/* On dark panels. */
.btn--light {
  background: transparent;
  color: var(--paper);
  border-color: var(--line-light);
}
.btn--light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }


/* ============================================================
   4. NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav__list {
  display: flex;
  gap: clamp(1rem, 4vw, 2.5rem);
  justify-content: center;
  margin: 0 auto;
  padding: 0.9rem var(--space);
  max-width: var(--measure);
  list-style: none;
  overflow-x: auto;               /* scrolls sideways on small phones */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav__list::-webkit-scrollbar { display: none; }
.nav__list a {
  font-size: var(--size-small);
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.nav__list a:hover { color: var(--accent); }

/* ---- Divider motif (before the cagnotte) ---- */
.divider {
  display: flex;
  justify-content: center;
  padding: 0 var(--space);        /* sits between two sections: their own
                                     vertical padding centres it */
}
.divider img {
  width: min(420px, 75%);
  height: auto;
  opacity: 0.75;
}

/* ---- The cat, sitting on the top edge of the footer ---- */
.cat-perch {
  display: flex;
  justify-content: flex-end;      /* flex-start to put it on the left */
  max-width: var(--measure);
  /* pulls the cat up into the last section's bottom padding */
  margin: calc(var(--space-section) * -1.2) auto 0;
  padding: 0 var(--space);
}
.cat-perch img {
  display: block;
  /* shrinks on narrow screens, capped at 60px from ~750px up */
  width: clamp(38px, 8vw, 60px);
  height: auto;
  margin-bottom: -5px;
}

/* ---- MOTIFS (hero + RSVP) — COMMENTED OUT --------------------
   The two <img class="motif"> in index.html are commented out; the rules
   below are kept here so they can be switched back on together with them.
   (The divider motif and the cat above are NOT part of this — they stay.)
   Inner comments had their markers stripped, CSS comments don't nest.

.motif {
  display: block;
  width: 64px;
  height: auto;
  margin: 0 auto 2rem;           auto side margins — see note below
}

   Horizontal placement, phone to desktop.
   The motifs are positioned by a *fraction of their container's width*
   rather than by a fixed length, so they hold the same spot at every
   viewport. The formula puts the image's centre at F% of the container:
       margin-left: auto;
       margin-right: calc((100% - F%) - half the image width);
   To move a motif right, raise F (i.e. lower the first number below).

   Same trick as the hero motif: the wrapper shrinks to the button, so the
   browser measures the button for us and the motif hangs off its edge.

.rsvp__cta {
  position: relative;
  width: fit-content;
  max-width: 100%;
}
.motif--small {
  position: absolute;
  left: calc(100% + 1.25rem);    ← gap between button and motif
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  margin: 0;
}

.footer .motif { filter: brightness(1.5); }

   The date + address block shrinks to the width of its longest line, so
   the browser measures the address for us. The motif is then pinned just
   outside that edge and centred on the block — no guessed percentage, and
   it follows the text at any width or font size.

.hero__stamp {
  position: relative;
  width: fit-content;
  max-width: 100%;
}
.hero .motif {
  position: absolute;            out of flow: doesn't shift the button
  left: calc(100% + 1.25rem);    ← gap between text and motif
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  filter: brightness(1.35);
}

   These two motifs are tucked up alongside the text with negative margins,
   which only works while the lines they sit next to stay on one line. On a
   phone "Domaine de la Sebrandière — Gué de Velluire (85)" wraps and the
   motif lands on top of it — so below this width they're simply dropped.
   (The divider and the cat are unaffected.)

@media (max-width: 48rem) {
  .hero .motif,
  .motif--small { display: none; }
}
   ------------------------------------------------------------ */


/* ============================================================
   5. HERO — the invitation card
   The inset hairline frame is the printed-carton reference.
   ============================================================ */
.hero {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(1rem, 3vw, 2rem);
}
.hero__frame {
  border: 1px solid var(--line-light);
  /* less padding at the bottom than the top: the block sits lower in the
     frame, so there's less dark space under the button */
  padding: clamp(3rem, 12vw, 7rem) var(--space) clamp(1rem, 3vw, 2rem);
  text-align: center;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero__eyebrow {
  font-size: var(--size-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 1.5rem;
}

.hero__names {
  font-size: var(--size-hero);
  line-height: 1.05;   /* script ascenders/descenders need the room */
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Oversized ampersand in green — the one loud moment on the page. */
.hero__amp {
  /* no font-style: italic — Alex Brush has no italic cut, so the browser
     would fake one by skewing an already-slanted script */
  color: var(--accent);
  font-size: 0.75em;
  line-height: 1;
  margin: 0.1em 0;
}

.hero__date {
  font-size: var(--size-subtitle);
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}
.hero__place {
  color: var(--paper);
  opacity: 0.62;
  font-size: var(--size-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero__date, .hero__place { max-width: none; }


/* ============================================================
   6. SECTIONS
   ============================================================ */
.section {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-section) var(--space);
}
.section__title {
  font-size: var(--size-title);
  margin-bottom: var(--space);
}
.section__lead {
  color: var(--ink-soft);
  margin-bottom: calc(var(--space) * 2.5);
}

/* Dark variant — used for the RSVP block. */
.section--ink {
  background: var(--ink);
  color: var(--paper);
  max-width: none;
}
.section--ink .section__lead { color: var(--paper); opacity: 0.72; }
.rsvp { max-width: var(--measure); margin: 0 auto; }


/* ============================================================
   7. TIMELINE — the times are the structure
   ============================================================ */
.timeline { list-style: none; margin: 0; padding: 0; }

.timeline__item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space);
  padding: calc(var(--space) * 1.5) 0;
  border-top: 1px solid var(--line);
}
.timeline__item:last-child { border-bottom: 1px solid var(--line); }

.timeline__time {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--accent);
  margin: 0;
  padding-top: 0.1em;
}
.timeline__body h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.timeline__body p  { color: var(--ink-soft); margin: 0; }

@media (max-width: 34rem) {
  .timeline__item { grid-template-columns: 1fr; gap: 0.3rem; }
}


/* ============================================================
   8. COLUMNS (Venir & dormir)
   ============================================================ */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: calc(var(--space) * 2.5);
}
.col__title {
  font-size: 1.3rem;
  margin-bottom: var(--space);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.address { font-style: normal; line-height: 1.9; }

.facts { margin: 0; }
.facts dt {
  font-weight: 600;
  font-size: var(--size-small);
  letter-spacing: 0.04em;
  margin-top: var(--space);
}
.facts dd {
  margin: 0.2rem 0 0;
  color: var(--ink-soft);
  font-size: var(--size-small);
}


/* ============================================================
   9. CARDS (Autour)
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: calc(var(--space) * 2);
}
.card {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space);
}
.card__title { font-size: 1.25rem; margin: var(--space) 0 0.3rem; }
.card__meta {
  font-size: var(--size-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.card p:last-child { color: var(--ink-soft); font-size: var(--size-small); margin: 0; }


/* ============================================================
   10. PHOTO PLACEHOLDERS
   Delete this block once you've replaced every .photo div with a
   real <img class="photo" src="..." alt="">.
   ============================================================ */
.photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--paper-warm);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: var(--size-small);
  text-align: center;
  padding: var(--space);
  object-fit: cover;   /* applies once these become real <img> */
}
.photo--wide { aspect-ratio: 21 / 9; }
.photo--card { aspect-ratio: 4 / 3; }

/* ---- Real images ----
   .image shows the photo whole, at its natural proportions.
   Add a modifier only if you deliberately want it cropped. */
.image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* Optional crops, when you do want a fixed shape. */
.image--wide { aspect-ratio: 21 / 9; object-fit: cover; }
.image--card { aspect-ratio: 4 / 3;  object-fit: cover; }


.band { max-width: var(--measure); margin: 0 auto; padding: 0 var(--space); }


/* ============================================================
   11. GIFT + FOOTER
   ============================================================ */
.gift { text-align: center; }
.gift .section__lead, .gift p { margin-left: auto; margin-right: auto; }

.footer {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: calc(var(--space) * 4) var(--space);
}
.footer__sign {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0 auto var(--space);
}
.footer__contact {
  font-size: var(--size-small);
  opacity: 0.6;
  margin: 0 auto;
}
.rsvp__note { font-size: var(--size-small); opacity: 0.6; margin-top: var(--space); }


/* ============================================================
   12. ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}