/* Advent page styles (moved from inline) */
body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  background: linear-gradient(180deg, #ffeef2 0%, #fff 60%);
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  text-align: center;
}

.title {
  font-size: 34px;
  font-weight: 800;
  color: #c02739;
  margin-top: 26px;
  font-family:'Dancing Script';
}

.subtitle {
  font-size: 15px;
  margin-top: 6px;
  color: #8b4a55;
}

.calendar {
  width: 100%;
  padding: 8px 12px 28px;
  box-sizing: border-box;
}

.day {
  background: white;
  border-radius: 12px;
  padding: 16px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(120,90,120,0.06);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  user-select: none;
  color: #6b3750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.day.locked {
  opacity: .55;
  background: #f3f3f3;
  cursor: not-allowed;
}

.day.opened {
  background: #fff0f5;
  color: #c02739;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(170,100,130,0.08);
}

.day:hover:not(.locked) { transform: translateY(-4px); box-shadow: 0 12px 34px rgba(140,80,110,0.12); }

/* Grid styling: anchors */
.advent-wrapper { width:100%; max-width:720px; margin: 0 auto; padding: 10px 14px; box-sizing: border-box; }
.advent-grid {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
  max-width:640px;
  margin: 0 auto;
  padding: 6px;
}
.advent-grid .day { display:flex; align-items:center; justify-content:center; background:white; border-radius:12px; padding:14px; font-weight:700; color:#6b3750; text-decoration:none; }
.advent-grid .day.notopened {background:#f7f3f5 }
.advent-grid .day.locked { opacity:.45; pointer-events:none; cursor:default; background:#f7f3f5 }

@media (min-width:760px){
  .advent-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width:420px){
  .advent-grid { grid-template-columns: repeat(4, 1fr); gap:8px }
  .advent-grid .day { padding:12px; font-size:15px }
}

.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 200;
}

.modal {
  background: white;
  padding: 25px;
  border-radius: 14px;
  max-width: 85%;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  animation: pop .25s ease-out;
}

@keyframes pop {
  from { transform: scale(.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}


.day {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 16px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(120,90,120,0.06);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  user-select: none;
  color: #6b3750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  overflow: hidden;
}

/* Image de paquet cadeau sur les jours non ouverts */
.day.notopened::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../images/paquet.png') center/cover no-repeat;
  opacity: 0.9;
  border-radius: 12px;
  transition: opacity .3s ease;
  z-index: 0;
}

.day span {
  position: relative;
  z-index: 1; /* pour que le numéro soit au-dessus du paquet cadeau */
}

.btn{padding:10px 14px; border-radius:14px; border:none; font-weight:700; cursor:pointer; box-shadow: 0 6px 18px rgba(107,55,80,0.08); background:linear-gradient(180deg,var(--accent),#ff8fb6); color:#6b3750; transform:translateY(0); transition:transform .14s ease}
.btn:active{transform:translateY(2px)}
.btn.secondary{background:transparent; border:1px solid rgba(107,55,80,0.06); color:var(--muted)}
.back { margin-top:18px; display:inline-block }