/* ==========================================================================
   Fabien & Rachel — feuille de style unique, mobile-first.
   Points de rupture : 48em (768px) tablette, 64em (1024px) desktop.
   ========================================================================== */

/* ---------- Polices (auto-hébergées, sous-ensemble latin) ---------- */
@font-face {
  font-family: "Pinyon Script";
  src: url("../assets/fonts/pinyon-script.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Quattrocento";
  src: url("../assets/fonts/quattrocento-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Quattrocento";
  src: url("../assets/fonts/quattrocento-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("../assets/fonts/roboto-mono.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}

/* ---------- Jetons de design ---------- */
:root {
  /* Couleurs relevées sur la maquette */
  --c-paper: #f0e6da;
  --c-paper-light: #f5eee4;
  --c-green: #686b41;
  --c-ink: #5b5a3c;          /* texte olive foncé sur papier */
  --c-ink-soft: #7a7660;
  --c-line: #807a72;          /* frise chronologique */
  --c-white: #fffdf9;

  /* Palette « dress code » */
  --c-olive: #656540;
  --c-sage: #96a482;
  --c-sand: #d4c0a7;
  --c-taupe: #9f8d82;
  --c-brown: #7a5a46;

  /* Typographie */
  --f-script: "Pinyon Script", "Snell Roundhand", cursive;
  --f-serif: "Quattrocento", Georgia, "Times New Roman", serif;
  --f-mono: "Roboto Mono", ui-monospace, Menlo, monospace;

  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-small: 0.8rem;
  --fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --fs-script: clamp(3rem, 2rem + 4.5vw, 5.5rem);

  /* Mise en page */
  --gutter: clamp(1rem, 4vw, 4rem);
  --section-pad: clamp(3.5rem, 8vw, 7rem);
  --max-w: 72rem;
  --radius: 999px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.15; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Sections & fonds texturés ---------- */
.section {
  padding: var(--section-pad) var(--gutter);
  text-align: center;
}
.section > * { max-width: var(--max-w); margin-inline: auto; }

.section--paper {
  background: var(--c-paper) url("../assets/img/texture-paper.webp") center / cover;
}
.section--green {
  background: var(--c-green) url("../assets/img/texture-green.webp") center / cover;
  color: var(--c-paper-light);
}

.section-title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
}
.script-title {
  font-family: var(--f-script);
  font-size: var(--fs-script);
  line-height: 1;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  padding: 0.7em 1.8em;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn--outline {
  border: 1.5px solid currentColor;
  color: var(--c-ink);
  background: transparent;
}
.btn--outline:hover,
.btn--outline:focus-visible { background: var(--c-ink); color: var(--c-paper-light); }
.btn--light { color: var(--c-paper-light); text-decoration: underline; text-underline-offset: 3px; }
.btn--light:hover,
.btn--light:focus-visible { background: var(--c-paper-light); color: var(--c-green); }
.btn--solid {
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-green);
  color: var(--c-paper-light);
  font-family: var(--f-serif);
}
.btn--solid:hover,
.btn--solid:focus-visible { background: var(--c-ink); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Timbre-poste (bord dentelé en CSS pur) ---------- */
.stamp {
  --r: 7px;                       /* rayon des perforations */
  padding: calc(var(--r) * 2.2);
  background: var(--c-green);
  -webkit-mask:
    radial-gradient(var(--r), #0000 97%, #000) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
          mask:
    radial-gradient(var(--r), #0000 97%, #000) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}
.stamp img {
  width: 100%;
  border: 3px solid var(--c-white);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ---------- Cadres ornementaux extraits de la maquette ----------
   Les valeurs de slice correspondent à l'épaisseur de bordure des images (en px). */
.frame-scallop {
  border: clamp(10px, 1.6vw, 16px) solid transparent;
  border-image: url("../assets/img/frame-scallop.webp") 62 stretch;
  padding: clamp(6px, 1vw, 10px);
  background: var(--c-paper-light) padding-box;   /* passe-partout crème */
}
.frame-scallop img { width: 100%; }
.frame-lace {
  border-style: solid;
  border-color: transparent;
  border-width: clamp(18px, 3vw, 32px) clamp(19px, 3.2vw, 34px);
  border-image: url("../assets/img/frame-lace.webp") 128 136 round;
  background: var(--c-paper) url("../assets/img/texture-paper.webp") center / cover;
  background-clip: padding-box;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: 1.5rem;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}
.hero__art,
.hero__content { grid-area: 1 / 1; }

.hero__art {
  align-self: center;
  width: min(100%, 60rem);
  margin-inline: auto;
}
.hero__art img {
  /* mobile : recadrage portrait centré sur le couple */
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* L'aquarelle a son propre fond papier : on fond les bords dans la page */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, #0000 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, #0000 100%);
}

.hero__content {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__names {
  font-family: var(--f-script);
  font-size: clamp(2.5rem, 13vw, 8rem);   /* tient sur une ligne jusqu'à 320px */
  line-height: 1;
  white-space: nowrap;
}
.hero__amp { font-size: 0.7em; }
.hero__tagline {
  margin: 0.1em 0 1.6em;
  font-size: clamp(1.1rem, 0.8rem + 1.6vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.hero__content .btn { background: rgb(240 230 218 / .55); }

.hero__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  max-width: none;
  width: 100%;
}
.hero__meta p { margin: 0; }

/* ==========================================================================
   COMPTE À REBOURS
   ========================================================================== */
.countdown { padding-top: clamp(2rem, 5vw, 4rem); }
.countdown__title {
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.countdown__timer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.25rem, 1.5vw, 0.75rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 2.6ch; }
.countdown__value,
.countdown__sep {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  margin-top: 0.4rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.countdown__stamp { width: min(70vw, 17rem); }

/* ==========================================================================
   RÉCEPTION
   ========================================================================== */
.reception .script-title { margin-bottom: clamp(2rem, 5vw, 4rem); }
.reception__grid {
  display: grid;
  gap: 2.5rem;
  text-align: left;
}
.reception__text h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.reception__text p { margin-bottom: 2rem; opacity: .92; }
.reception__text .btn { margin-top: 0.5rem; }

/* ==========================================================================
   TENUE
   ========================================================================== */
.attire > p { max-width: 42rem; }
.attire__subtitle {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  text-transform: uppercase;
}
.palette {
  list-style: none;
  padding: 0;
  margin: 1rem auto 2rem;
  display: flex;
  justify-content: center;
  gap: clamp(0.35rem, 1vw, 0.5rem);
}
.palette li {
  width: clamp(3rem, 10vw, 4.5rem);
  aspect-ratio: 1;
  background: var(--swatch);
}
.attire__figures { width: min(80vw, 22rem); }

/* ==========================================================================
   DÉROULÉ — mobile : frise verticale / desktop : frise horizontale
   ========================================================================== */
.timeline {
  --dot: 12px;
  list-style: none;
  padding: 0;
  margin-top: 2.5rem;
  position: relative;
  max-width: 22rem;
}
/* ligne verticale */
.timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--dot) / 2 - 1.5px);
  top: 2rem; bottom: 2rem;
  width: 3px;
  background: var(--c-line);
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.25rem;
  align-items: center;
  padding: 1rem 0 1rem calc(var(--dot) + 1.25rem);
  text-align: left;
  text-transform: uppercase;
  font-size: 0.85rem;
}
/* point */
.timeline__item::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: var(--dot); height: var(--dot);
  margin-top: calc(var(--dot) / -2);
  border-radius: 50%;
  background: var(--c-line);
}
.timeline__item img {
  grid-row: 1 / 3;
  width: auto;
  max-width: 100%;
  max-height: 5rem;
  justify-self: center;
}
.timeline__item time { align-self: end; }
.timeline__item span { align-self: start; }

/* ==========================================================================
   RSVP
   ========================================================================== */
.rsvp__deadline { font-weight: 700; font-size: 0.9rem; letter-spacing: 0.03em; }
.rsvp__card {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
  padding: clamp(1.25rem, 4vw, 3rem);
  color: var(--c-ink);
  text-align: left;
  max-width: 56rem;
}
.rsvp__form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field__label { padding: 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; }
.field input[type="text"],
.field textarea {
  width: 100%;
  padding: 0.75em 1.1em;
  border: 1px solid transparent;
  border-radius: 1.2rem;
  background: var(--c-white);
  font: inherit;
  color: inherit;
}
.field textarea { resize: vertical; min-height: 4.5rem; }
.field input:focus-visible,
.field textarea:focus-visible { outline: none; border-color: var(--c-green); }

.choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55em 1.1em;
  border-radius: var(--radius);
  background: var(--c-white);
  cursor: pointer;
}
.choice + .choice { margin-top: 0.5rem; }
.choice input { accent-color: var(--c-green); margin: 0; }
.choice:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--c-green); }

/* Étapes du parcours RSVP (js/rsvp.js) */
.rsvp__intro { margin: 0; }
.rsvp__hello { font-size: 1.3rem; outline: none; }
.rsvp__guests { display: grid; gap: 1.5rem; }
.rsvp__guest .field__label { font-weight: 700; }
.rsvp__error { margin: 0; color: var(--c-brown); font-weight: 700; }
.rsvp__error:empty { display: none; }
.rsvp__link {
  justify-self: center;
  padding: 0.25em;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn--solid:disabled { opacity: .6; cursor: progress; }

.check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1.1em;
  cursor: pointer;
}
.check input { accent-color: var(--c-green); margin: 0; width: 1.1em; height: 1.1em; }

.rsvp__stamp {
  --r: 6px;
  width: min(55vw, 16rem);
  justify-self: center;
  transform: rotate(8deg);
  order: -1;            /* mobile : photo au-dessus du formulaire */
}
.rsvp__stamp img { aspect-ratio: 3 / 4; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__grid {
  display: grid;
  gap: 2rem 4rem;
  margin-top: 2rem;
  text-align: left;
}
.faq__item h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.faq__item p { color: var(--c-ink-soft); }

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.footer {
  padding: 2rem var(--gutter) 3rem;
  text-align: center;
}
.footer__sign { font-size: 2.5rem; margin: 0; }

/* ==========================================================================
   ≥ 768px — tablette
   ========================================================================== */
@media (min-width: 48em) {
  .hero { min-height: min(100svh, 56rem); }
  .hero__art img { aspect-ratio: auto; }

  .hero__meta {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .reception__grid {
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
  }

  .rsvp__card { grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
  .rsvp__stamp { order: 0; width: min(100%, 17rem); }

  .faq__grid { grid-template-columns: 1fr 1fr; }
  /* lecture en colonnes comme sur la maquette : 01-02 à gauche, 03-04 à droite */
  .faq__grid { grid-auto-flow: column; grid-template-rows: auto auto; }
}

/* ==========================================================================
   ≥ 1024px — desktop : frise horizontale
   ========================================================================== */
@media (min-width: 64em) {
  .timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: var(--max-w);
    margin-top: 4rem;
  }
  .timeline::before {
    left: 10%; right: 10%;
    top: 7.5rem; bottom: auto;
    width: auto; height: 3px;
    margin-top: -1.5px;
  }
  .timeline__item {
    grid-template-columns: 1fr;
    grid-template-rows: 6rem 3rem auto auto;
    justify-items: center;
    padding: 0;
    text-align: center;
    row-gap: 0;
  }
  .timeline__item::before { left: 50%; top: 7.5rem; margin-left: calc(var(--dot) / -2); }
  .timeline__item img { grid-row: 1; align-self: end; max-height: 5.5rem; }
  .timeline__item time { grid-row: 3; }
  .timeline__item span { grid-row: 4; }
}