/* ====== Page calendrier (côté utilisatrice) ====== */
.page {
  position: relative; z-index: 4;
  max-width: 1280px; margin: 0 auto; padding: 0 20px 60px;
  display: grid; grid-template-columns: 290px 1fr; gap: 28px; align-items: start;
}

/* Colonne gauche : lettre + illustration */
.side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 20px; }
.letter {
  position: relative; transform: rotate(-2deg);
  background: linear-gradient(170deg, #fdf3ea, #f6e2d3);
  padding: 34px 24px 26px; color: var(--ink);
  font-family: var(--font-hand); font-size: 1.22rem; line-height: 1.45; text-align: center;
  box-shadow: 0 14px 30px rgba(90, 10, 35, .28), inset 0 0 40px rgba(200, 150, 120, .25);
  clip-path: polygon(0 2%, 6% 0, 14% 1.5%, 24% 0, 36% 1%, 48% 0, 60% 1.5%, 72% 0, 84% 1%, 94% 0, 100% 2%, 99% 20%, 100% 40%, 99% 60%, 100% 80%, 99% 98%, 92% 100%, 80% 98.5%, 66% 100%, 52% 98.5%, 38% 100%, 24% 98.5%, 10% 100%, 0 98%, 1% 78%, 0 56%, 1% 34%, 0 14%);
}
.letter .pin { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 34px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.letter .greet { font-weight: 700; font-size: 1.35rem; margin-bottom: 10px; }
.letter .body { white-space: pre-line; }
.letter .sign { margin-top: 14px; font-size: 1.9rem; font-weight: 700; color: var(--burgundy); }
.letter .sign::after { content: ''; display: block; width: 60%; height: 2px; margin: 2px auto 0; background: linear-gradient(90deg, transparent, var(--wine), transparent); }

.illustration { position: relative; }
.illustration img { width: 100%; border-radius: 22px; display: block; box-shadow: 0 14px 30px rgba(90, 10, 35, .3); border: 4px solid rgba(255, 248, 246, .8); }
.gifts { display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding-top: 10px; }

/* En-tête */
.main { text-align: center; }
.hero h1 {
  font-family: var(--font-title); font-weight: 400; margin: 0;
  font-size: clamp(2.8rem, 6vw, 5rem); color: #fff6f8; line-height: 1.1;
  text-shadow: 0 0 18px rgba(255, 170, 200, .8), 0 3px 0 rgba(80, 0, 25, .35);
}
.hero p { font-family: var(--font-hand); font-size: clamp(1.2rem, 2.2vw, 1.7rem); color: #fff1f5; margin: 4px 0 26px; text-shadow: 0 2px 6px rgba(80, 0, 25, .4); }

/* Grille des 24 cases */
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.8vw, 22px); perspective: 900px; }
.tile {
  --bg: var(--burgundy); --fg: #fff4f0; --deco: var(--gold);
  position: relative; aspect-ratio: 1.05; border: none; cursor: pointer; padding: 0;
  border-radius: var(--radius);
  background: var(--bg);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(160deg, rgba(255,255,255,.12), rgba(0,0,0,.12));
  box-shadow: 0 8px 18px rgba(80, 5, 30, .28), inset 0 0 0 2px rgba(255, 220, 170, .35), inset 0 -6px 12px rgba(0,0,0,.12);
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s;
  font-family: var(--font-num); color: var(--fg);
}
.tile.c-cream { --bg: var(--cream); --fg: var(--ink); --deco: #c98a4a; }
.tile.c-pink { --bg: var(--pink); --fg: var(--ink); --deco: #b5793a; }
.tile:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: 0 16px 28px rgba(80, 5, 30, .35), inset 0 0 0 2px rgba(255, 220, 170, .5); }
.tile:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.tile .num { font-size: clamp(1.6rem, 3.4vw, 2.7rem); font-weight: 700; position: absolute; inset: 0; display: grid; place-items: center; }
.tile .bow { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 56%; max-width: 74px; filter: drop-shadow(0 3px 3px rgba(80,0,20,.3)); }
.tile:nth-child(odd) .bow { left: 70%; width: 42%; }
.tile .deco { position: absolute; bottom: 9%; right: 10%; width: 18%; color: var(--deco); }
.tile .deco2 { position: absolute; top: 18%; left: 11%; width: 10%; color: var(--deco); opacity: .65; }
.tile .lock { position: absolute; bottom: 8%; right: 9%; width: 15%; color: var(--deco); }
.tile.locked .deco { right: 30%; }
.tile.opened::after {
  content: '✓'; position: absolute; top: 8px; left: 10px; font: 700 .8rem var(--font-ui);
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--burgundy-dark);
}
.tile.today {
  box-shadow: 0 0 0 3px var(--gold-light), 0 0 30px 8px rgba(255, 210, 120, .75), 0 10px 22px rgba(80, 5, 30, .35);
  animation: glow 2s ease-in-out infinite;
}
@keyframes glow { 50% { box-shadow: 0 0 0 3px var(--gold-light), 0 0 45px 14px rgba(255, 210, 120, .9), 0 10px 22px rgba(80, 5, 30, .35) } }
.tile.shake { animation: shake .5s; }
@keyframes shake { 20% { transform: translateX(-7px) rotate(-3deg) } 40% { transform: translateX(7px) rotate(3deg) } 60% { transform: translateX(-5px) } 80% { transform: translateX(5px) } }
.tile.appear { animation: pop .6s backwards cubic-bezier(.2, 1.5, .4, 1); animation-delay: calc(var(--i) * 35ms); }
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(20px) } }

/* Bouton principal + compte à rebours */
.cta { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta .btn { font-family: var(--font-hand); font-size: 1.6rem; padding: 14px 40px; box-shadow: 0 10px 26px rgba(79, 11, 32, .4), inset 0 0 0 2px rgba(255, 220, 170, .4); }
.cta .btn svg { width: 30px; }
.countdown { font-family: var(--font-hand); font-size: 1.25rem; color: var(--burgundy-dark); background: rgba(255, 245, 248, .7); padding: 4px 16px; border-radius: 999px; }
.countdown b { font-family: var(--font-ui); font-size: 1rem; letter-spacing: 1px; }

/* Bouton musique */
.music-btn { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 52px; height: 52px; border-radius: 50%; padding: 0; justify-content: center; font-size: 1.4rem; }
.music-btn.playing { animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(217, 164, 65, .25) } }

/* Barre d'aperçu admin */
.preview-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px; background: rgba(40, 4, 16, .92); color: #fff; font-size: .9rem;
  backdrop-filter: blur(6px);
}
.preview-bar input { font: inherit; border-radius: 8px; border: none; padding: 5px 8px; }
.preview-bar .label { color: var(--gold-light); font-weight: 600; }

/* Responsive */
@media (max-width: 980px) {
  .page { grid-template-columns: 1fr; }
  .side { position: static; order: 2; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .letter { max-width: 340px; }
  .illustration { max-width: 300px; }
}
@media (max-width: 640px) {
  .page { padding: 0 16px 80px; }
  .grid { grid-template-columns: repeat(4, 1fr); gap: 22px 10px; }
  .topbar { justify-content: center; font-size: 1rem; }
  .side { flex-direction: column; align-items: center; }
  .cta .btn { font-size: 1.35rem; padding: 12px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}