/* ===========================================================
   CALENDRIER COQUIN — planche de velours, petites portes dorées
   =========================================================== */
body.calendrier {
  --theme: #c2185b;
  --theme-2: #ff8fab;
  --or: #f2c46b;
  --panneau: rgba(40, 10, 24, 0.86);
  background: #1d0b14;
}
.fond-cal {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 143, 171, 0.18), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(242, 196, 107, 0.12), transparent 45%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 14px),
    radial-gradient(800px 600px at 50% 30%, #4a1530, #1d0b14 75%);
}
.calendrier .marque h1 em { font-family: 'Great Vibes', cursive; font-weight: 400; font-size: 1.2em; color: var(--theme-2); }
.ruban { position: relative; width: 84px; height: 84px; margin: 0 auto; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(145deg, #ff8fab, #c2185b); box-shadow: 0 14px 30px rgba(194, 24, 91, 0.45); transform: rotate(-6deg); }
.ruban::before, .ruban::after { content: ''; position: absolute; background: var(--or); }
.ruban::before { left: 50%; top: 0; bottom: 0; width: 10px; transform: translateX(-50%); }
.ruban::after { top: 50%; left: 0; right: 0; height: 10px; transform: translateY(-50%); }
.ruban span { position: relative; z-index: 1; font-family: 'Great Vibes', cursive; font-size: 2.6rem; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); background: rgba(194, 24, 91, 0.9); border-radius: 50%; width: 52px; height: 52px; display: grid; place-items: center; line-height: 1; }

/* ---------- Liste des calendriers ---------- */
.choix-cal { justify-content: flex-start; }
.choix-cal .back-to-site { margin-bottom: 0; }
.liste-cal { display: grid; gap: 10px; padding-bottom: 20px; }
.cal-choix {
  --c: var(--theme-2);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, rgba(30, 8, 18, 0.9)), rgba(30, 8, 18, 0.9));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.cal-choix:hover { box-shadow: 0 10px 30px -10px var(--c); }
.cal-choix:active { transform: scale(0.98); }
.cal-choix .pastille-cal { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem; background: color-mix(in srgb, var(--c) 30%, transparent); }
.cal-choix .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cal-choix b { font-size: 1rem; }
.cal-choix small { color: var(--muted); font-size: 0.8rem; line-height: 1.3; }
.cal-choix .avance { font-size: 0.72rem; font-weight: 700; color: var(--c); }
.cal-choix .mini-barre { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 4px; }
.cal-choix .mini-barre span { display: block; height: 100%; background: var(--c); }
.cal-choix .niveau { flex: none; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--c); }

/* ---------- Calendrier ---------- */
.ecran-calendrier { gap: 8px; }
.progression { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; flex: none; }
.progression span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--theme), var(--or)); transition: width 0.6s ease; }
.etat-cal { margin: 0; text-align: center; font-size: 0.85rem; color: var(--muted); flex: none; }
.planche {
  --c: var(--theme-2);
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: clamp(5px, 1.6vw, 9px);
  padding: clamp(8px, 2.5vw, 14px);
  border-radius: 22px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 35%, #3a0c22), #22070f);
  border: 3px solid var(--or);
  box-shadow: 0 0 0 6px rgba(242, 196, 107, 0.15), 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.5);
}
.porte-case { position: relative; perspective: 500px; min-height: 0; }
.porte-case .fond {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: clamp(1rem, 3.4dvh, 1.6rem);
  background: radial-gradient(circle, rgba(255, 220, 160, 0.25), rgba(0, 0, 0, 0.45));
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.7);
}
.porte {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(242, 196, 107, 0.7);
  background: linear-gradient(150deg, #fff5e6, #f0d9b5);
  color: #8a1c44;
  font-family: 'Great Vibes', cursive;
  font-size: clamp(1.3rem, min(6vw, 4dvh), 2rem);
  line-height: 1;
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(.4, 1.4, .5, 1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.porte::after { content: ''; position: absolute; right: 12%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--or); box-shadow: 0 0 4px var(--or); }
.porte-case.verrouillee .porte { background: linear-gradient(150deg, #4a2034, #2a0f1c); color: rgba(255, 220, 230, 0.35); border-color: rgba(242, 196, 107, 0.2); cursor: not-allowed; }
.porte-case.aujourdhui .porte { animation: appel 1.6s ease-in-out infinite; border-color: #fff; }
@keyframes appel { 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 24px var(--or); transform: scale(1.04); } }
.porte-case.ouverte .porte { transform: rotateY(-105deg); animation: none; }
.porte-case.ouverte .fond { cursor: pointer; }
.porte-case.faite .fond::after { content: '✓'; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font-size: 0.8rem; font-weight: 800; color: #5cf09a; text-shadow: 0 0 6px rgba(0, 0, 0, 0.8); }
.porte-case.secoue .porte { animation: refus 0.4s ease; }
@keyframes refus { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.lien-reset { background: none; border: 0; color: var(--muted); font-size: 0.75rem; text-decoration: underline; cursor: pointer; flex: none; padding: 2px; }

/* ---------- Défi du jour ---------- */
.voile { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(15, 4, 10, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fondu 0.3s ease; }
.voile[hidden] { display: none !important; }
.defi-carte {
  width: 100%;
  max-width: 380px;
  padding: 26px 22px 18px;
  border-radius: 26px;
  text-align: center;
  color: #3a0d22;
  background: radial-gradient(400px 200px at 50% 0%, rgba(242, 196, 107, 0.4), transparent 70%), linear-gradient(170deg, #fffaf4, #f7e6dc);
  box-shadow: 0 0 80px -10px var(--or), inset 0 0 0 2px var(--or), inset 0 0 0 8px #fffaf4, inset 0 0 0 9px rgba(242, 196, 107, 0.6);
  animation: ouvre 0.6s cubic-bezier(.2, 1.3, .4, 1);
}
.defi-jour { font-family: 'Great Vibes', cursive; font-size: 2.4rem; color: #c2185b; line-height: 1; }
.defi-texte { font-family: var(--serif); font-weight: 700; font-size: clamp(1.3rem, 6vw, 1.7rem); line-height: 1.25; margin: 12px 0 20px; }
.defi-actions { display: grid; gap: 8px; }
.defi-actions .btn.ghost { color: #6b2a45; border-color: rgba(107, 42, 69, 0.3); }
@keyframes ouvre { from { transform: perspective(800px) rotateY(-70deg) scale(0.7); opacity: 0; } }
@keyframes fondu { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .porte-case.aujourdhui .porte { animation: none; }
}