/* Maison Sia Kē — soirée des 5 ans. Prolongement écran du carton : papier, bleu marine, lavande. */
:root {
  color-scheme: light;
  --paper: #f2f1ee;
  --ink: #2a4864;          /* bleu marine du titre et du logotype (relevé sur le carton) */
  --ink-soft: #52667a;
  --lavender: #69659c;     /* encre de l'illustration */
  --line: rgba(42, 72, 100, 0.35);
  --field: rgba(255, 255, 255, 0.55);
  --error: #9b2c2c;
  --serif: "Times New Roman", Times, "Liberation Serif", "Noto Serif", Georgia, serif;
  --measure: 34rem;
  --diamond-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 0 8 4 4 8 0 4z' fill='%232a4864'/%3E%3C/svg%3E");
}

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

html { -webkit-text-size-adjust: 100%; }

[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  /* grain papier, généré (aucun fichier à charger) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .35 0 0 0 0 .35 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.5;
  text-align: center;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

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

/* ——— Invitation ——— */

.invitation {
  max-width: 42rem;
  margin: 0 auto;
  padding: max(2.25rem, env(safe-area-inset-top)) 16px 2rem;
}

.masthead h1 { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.cinq-ans { width: min(62vw, 17rem); }
.logo { width: min(40vw, 10.5rem); }

.arc { display: block; margin: 2.25rem -16px 0; }
.arc img { display: block; width: 100%; }

.invite {
  max-width: var(--measure);
  margin: 1.75rem auto 0;
  font-size: 1.1875rem;
  line-height: 1.45;
  text-wrap: balance;
}

.date {
  margin: 1.5rem 0 0;
  font-size: clamp(1.75rem, 7.4vw, 2.5rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.15;
}

.details { margin-top: 1.25rem; }
.details p { margin: 0.35rem 0; font-size: 1.1875rem; }

/* filet orné du carton : ◆ ─── texte ─── ◆ */
.rule { display: flex; align-items: center; gap: 0.9rem; }
.rule::before, .rule::after {
  content: "";
  flex: 1;
  min-width: 1.5rem;
  height: 8px;
}
.rule::before {
  background: var(--diamond-url) 0 50% / 8px 8px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 14px 50% / calc(100% - 14px) 1px no-repeat;
}
.rule::after {
  background: var(--diamond-url) 100% 50% / 8px 8px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 50% / calc(100% - 14px) 1px no-repeat;
}

/* Sur téléphone, l'adresse passe sur toute la largeur : le filet orné se place au-dessus. */
@media (max-width: 29.99rem) {
  .rule::before, .rule::after { display: none; }
  .rule { display: block; }
  .details::before {
    content: "";
    display: block;
    width: min(14rem, 60%);
    height: 8px;
    margin: 0 auto 0.9rem;
    background:
      var(--diamond-url) 0 50% / 8px 8px no-repeat,
      var(--diamond-url) 100% 50% / 8px 8px no-repeat,
      linear-gradient(var(--ink), var(--ink)) 50% 50% / calc(100% - 28px) 1px no-repeat;
  }
}

.capacity { margin: 1.5rem 0 0; color: var(--ink-soft); font-size: 1rem; letter-spacing: 0.02em; }

.cta { margin: 1.75rem 0 0.5rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 2rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.button:hover { background: #213a51; text-decoration: none; }
.button[disabled] { opacity: 0.6; cursor: progress; }
.button-quiet { background: transparent; color: var(--ink); }
.button-quiet:hover { background: rgba(42, 72, 100, 0.08); }

.text-button {
  border: 0; background: none; padding: 0.5rem; color: var(--ink);
  font: inherit; font-size: 1rem; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}

.closed-note { font-style: italic; }

/* ——— Formulaire ——— */

.rsvp { max-width: 30rem; margin: 1.5rem auto 0; text-align: left; }
@media (prefers-reduced-motion: no-preference) {
  .rsvp:not([hidden]), .result:not([hidden]) { animation: appear 0.35s ease-out; }
}
@keyframes appear { from { opacity: 0; transform: translateY(6px); } }

.row { display: grid; gap: 0 1rem; }
@media (min-width: 34rem) { .row { grid-template-columns: 1fr 1fr; } }

.field { display: block; margin: 0 0 1.1rem; border: 0; padding: 0; min-width: 0; }
.field > span, .field legend { display: block; margin-bottom: 0.35rem; font-size: 1rem; }
.field legend { padding: 0; }

input[type="text"], input:not([type]), input[type="email"], input[type="tel"], select {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem; /* ≥ 16px : évite le zoom automatique sur iPhone */
}
input:focus { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: 0; }
input[aria-invalid="true"] { border-color: var(--error); }

.hint { display: block; margin-top: 0.3rem; color: var(--ink-soft); font-size: 0.9375rem; }
.error { display: block; color: var(--error); font-size: 0.9375rem; }
.error:empty { display: none; }
.form-error { margin: 0 0 1rem; padding: 0.75rem 1rem; border-left: 2px solid var(--error); color: var(--error); background: rgba(155, 44, 44, 0.05); }

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.choices { display: grid; gap: 0.5rem; }
@media (min-width: 34rem) { .choices { grid-template-columns: 1fr 1fr; } }

.segmented label, .choices label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--field);
  cursor: pointer;
  font-size: 1.0625rem;
  line-height: 1.25;
}
.segmented label:has(:checked), .choices label:has(:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.segmented label:has(:focus-visible), .choices label:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

input[type="radio"], input[type="checkbox"] { accent-color: var(--ink); width: 1.1rem; height: 1.1rem; margin: 0; flex: none; }

.check { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0.25rem 0 1.25rem; font-size: 1rem; cursor: pointer; }
.check input { margin-top: 0.2rem; }
.check small { color: var(--ink-soft); }

.media-note { margin: 0 0 1.25rem; font-size: 1rem; font-style: italic; text-align: center; }
.turnstile:empty { display: none; }
.turnstile { display: flex; justify-content: center; margin-bottom: 1rem; }

.rsvp .button { width: 100%; }

.legal-note { margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.45; text-align: center; }

/* ——— Résultat ——— */

.result { max-width: 30rem; margin: 2rem auto 0; outline: none; }
.result h2 { margin: 0 0 0.75rem; font-size: 1.75rem; font-weight: normal; line-height: 1.2; }
.result p { margin: 0.5rem 0; }
.result .actions { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.result .choice-buttons { display: grid; gap: 0.75rem; margin-top: 1.25rem; }

/* ——— Pages serveur (gestion de réservation) ——— */

.card { max-width: 30rem; margin: 0 auto; padding: 3rem 16px; }
.manage-logo img { width: 9.5rem; }
.manage h1 { margin: 2rem 0 1rem; font-size: 1.75rem; font-weight: normal; line-height: 1.25; }
.manage .date { font-size: 1.5rem; margin-top: 1.25rem; }
.manage .info { margin: 0.25rem 0; }
.manage form { margin: 1rem 0; }
.manage .actions { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin: 1.75rem 0; }
.manage hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0 1rem; }
.small { font-size: 0.9375rem; }
.muted { color: var(--ink-soft); }

/* ——— Pied de page ——— */

.footer {
  max-width: 42rem;
  margin: 3rem auto 0;
  padding: 1.5rem 16px max(2rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.footer p { margin: 0.3rem 0; }
.legal-links { margin-top: 0.75rem !important; }

/* ——— Pages légales ——— */

.legal { max-width: 40rem; margin: 0 auto; padding: 2.5rem 16px 3rem; text-align: left; font-size: 1.0625rem; }
.legal .back { display: inline-block; margin-bottom: 1rem; }
.legal h1 { font-size: 1.9rem; font-weight: normal; margin: 3rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.legal h1:first-of-type { border-top: 0; margin-top: 1rem; }
.legal h2 { font-size: 1.3rem; margin: 2rem 0 0.5rem; }
.legal h3 { font-size: 1.1rem; margin: 1.5rem 0 0.4rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; display: block; overflow-x: auto; }
.legal th, .legal td { border: 1px solid var(--line); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
.legal blockquote { margin: 1rem 0; padding: 0.25rem 1rem; border-left: 2px solid var(--line); color: var(--ink-soft); }
.legal hr { display: none; }

@media (min-width: 48rem) {
  body { font-size: 1.1875rem; }
  .invitation { padding-top: 3.5rem; }
  .arc { margin-left: 0; margin-right: 0; }
}

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
}