@font-face{font-family:'Great Vibes';src:url(fonts/great-vibes.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(fonts/cormorant-garamond.woff2) format('woff2');font-weight:300 700;font-display:swap}

:root{
  --fond:#F7EFE3; --encre:#5E3820; --titre:#7A4527; --accent:#B07A4F;
  --creme:#EAD6BE; --filet:#C9A27F; --filet-doux:#DCC3A6;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fond)}
body{font-family:'Cormorant Garamond',Georgia,serif;color:var(--encre);-webkit-text-size-adjust:100%}
a{color:var(--encre)}

.page{width:100%;max-width:440px;min-height:100vh;min-height:100dvh;margin:0 auto;padding:32px 24px;
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}

.manuscrit{font-family:'Great Vibes',cursive;font-weight:400;color:var(--titre)}
h1.manuscrit{margin:0;font-size:48px;line-height:1.05}
.noms{margin:0;font-size:22px;font-weight:600}
.pastille{padding:9px 24px;border-radius:999px;background:var(--creme);font-size:21px;font-weight:600}
p{margin:0}

/* platine */
.platine{position:relative;width:250px;height:210px}
.disque{position:absolute;left:30px;top:0;width:200px;height:200px;border-radius:50%;
  background:repeating-radial-gradient(circle,#2A211C 0 3px,#3B302A 3px 5px);
  box-shadow:0 6px 18px rgba(60,35,20,.25);display:flex;align-items:center;justify-content:center;
  animation:spin 6s linear infinite}
.macaron{width:74px;height:74px;border-radius:50%;background:var(--creme);display:flex;align-items:center;justify-content:center}
.figurine{position:absolute;bottom:0;width:84px;height:84px;border-radius:50%;object-fit:cover;
  border:3px solid var(--fond);box-shadow:0 0 0 2px var(--accent)}
.figurine.gauche{left:0}.figurine.droite{right:0}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.disque{animation:none}}

/* compte à rebours */
.rebours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:14px 0}
.rebours div{display:flex;flex-direction:column;gap:2px}
.rebours div+div{border-left:1px solid var(--filet-doux)}
.rebours b{font-size:36px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.rebours span{font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.jour-j{font-size:30px;font-weight:700;color:var(--titre);padding:14px 0}

/* page du lieu */
.surtitre{font-size:16px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--titre)}
.photo-lieu{width:100%;height:190px;object-fit:cover;border-radius:95px 95px 16px 16px;border:4px solid var(--creme)}
.nom-lieu{font-size:28px;font-weight:700;line-height:1.1}
.adresse{font-size:19px}
.boutons{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:auto}
.bouton{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;
  font-size:19px;font-weight:700;text-decoration:none;border:2px solid var(--encre)}
.bouton.plein{background:var(--encre);color:var(--fond)}
.bouton.vide{color:var(--encre)}