/* Noces d'émeraude : sapin d'hiver, givre, émeraude, une pointe d'or */
:root {
  --fond: #f3f6f3;
  --carte: #ffffff;
  --encre: #1c2b26;
  --doux: #5d6e67;
  --ligne: #d5e0da;
  --emeraude: #17785a;
  --emeraude-fonce: #0f5541;
  --or: #b48a3c;
  --nuit: #142420;
  --titre: "Young Serif", Georgia, "Times New Roman", serif;
  --texte: "Figtree", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #111a17; --carte: #18241f; --encre: #e6eee9; --doux: #9db0a7;
    --ligne: #2a3b34; --emeraude: #3fb48b; --emeraude-fonce: #7fd3b2; --or: #d4ad62; --nuit: #0a1210;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 17px/1.6 var(--texte); }
a { color: var(--emeraude); }
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid var(--or); outline-offset: 2px;
}
.muted { color: var(--doux); font-weight: 400; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-size: 1.6rem; color: var(--emeraude-fonce); margin-bottom: .8rem; }

/* En-tête */
.hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(180,138,60,.25), transparent 40%),
    linear-gradient(160deg, #1d5a47 0%, var(--nuit) 75%);
  color: #f1f5f2;
  padding: 4.5rem 16px 3.5rem;
}
.hero-in { max-width: 760px; margin: 0 auto; }
.eyebrow { color: #e0c287; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 600; margin: 0 0 1rem; }
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); max-width: 14ch; }
.dates { margin: 1.4rem 0 0; font-size: 1.1rem; border-left: 2px solid #e0c287; padding-left: .9rem; }

main {
  max-width: 920px; margin: 0 auto; padding: 2.5rem 16px 3rem;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem 3rem;
}
@media (max-width: 720px) { main { grid-template-columns: minmax(0, 1fr); } }

.lettre p { margin: 0 0 1rem; max-width: 62ch; }
.signature { font-family: var(--titre); font-size: 1.15rem; margin-top: 1.4rem !important; }

.lieu { align-self: start; border-top: 2px solid var(--or); padding-top: 1rem; }
.adresse { margin: 0 0 1rem; }
.liens { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.liens a { font-weight: 600; text-underline-offset: 3px; }
.liens a::after { content: " →"; }

/* Formulaire */
.formulaire, .tablee { grid-column: 1 / -1; }
.formulaire { background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; padding: 2rem clamp(16px, 4vw, 2.5rem); }
.consigne { margin: 0 0 1.5rem; color: var(--doux); }
form { display: grid; gap: 1.2rem; }
.champ { display: grid; gap: .35rem; border: 0; padding: 0; margin: 0; min-width: 0; }
label, legend { font-weight: 600; font-size: .95rem; padding: 0; }
legend { margin-bottom: .35rem; }
input, select, textarea {
  font: inherit; color: var(--encre); background: var(--fond);
  border: 1px solid var(--ligne); border-radius: 8px; padding: .65rem .8rem; width: 100%;
}
textarea { resize: vertical; }
.ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; }
.ligne .large { grid-column: span 2; }
@media (max-width: 480px) { .ligne .large { grid-column: auto; } }

.choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.pastille { position: relative; font-weight: 500; }
.pastille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastille span {
  display: inline-block; padding: .5rem 1rem; border: 1px solid var(--ligne); border-radius: 999px;
  background: var(--fond); cursor: pointer; transition: background .15s, border-color .15s;
}
.pastille input:checked + span { background: var(--emeraude); border-color: var(--emeraude); color: #fff; }
.pastille input:focus-visible + span { outline: 3px solid var(--or); outline-offset: 2px; }

button {
  justify-self: start; font: 600 1rem var(--texte); color: #fff; background: var(--emeraude);
  border: 0; border-radius: 999px; padding: .85rem 1.8rem; cursor: pointer;
}
button:hover { background: var(--emeraude-fonce); }
@media (prefers-color-scheme: dark) { button, .pastille input:checked + span { color: var(--nuit); } }

.message { padding: .8rem 1rem; border-radius: 8px; margin: 0 0 1.2rem; font-weight: 500; }
.message.ok { background: color-mix(in srgb, var(--emeraude) 14%, transparent); color: var(--emeraude-fonce); }
.message.err { background: #f8e1dc; color: #8a2a17; }
.piege { position: absolute; left: -9999px; }

/* Ce qui est prévu */
.compteur { margin: 0 0 1.2rem; color: var(--doux); }
.nombre { font-family: var(--titre); font-size: 2.2rem; color: var(--or); vertical-align: -.15em; margin-right: .2rem; font-variant-numeric: tabular-nums; }
.plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.plat { border-top: 1px solid var(--ligne); padding-top: .7rem; }
.plat h3 { font-size: 1.2rem; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; }
.plat .nb { font-family: var(--texte); font-size: .85rem; font-weight: 600; color: var(--emeraude); font-variant-numeric: tabular-nums; }
.plat.vide .nb { color: var(--doux); }
.plat ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; font-size: .95rem; }
.plat p { margin: 0; font-size: .95rem; }

footer { text-align: center; color: var(--doux); font-family: var(--titre); padding: 2rem 16px 3rem; }

/* Admin */
.admin { max-width: 1200px; margin: 0 auto; padding: 2rem 16px; }
.admin h1 { font-size: 2rem; margin-bottom: 1rem; }
.tableau { overflow-x: auto; border: 1px solid var(--ligne); border-radius: 10px; background: var(--carte); }
.tableau table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tableau th, .tableau td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau th { background: var(--fond); white-space: nowrap; }
.resume { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 1.2rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }