@font-face { font-family: "Christmas"; src: url(fonts/mountains-of-christmas-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Christmas"; src: url(fonts/mountains-of-christmas-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url(fonts/fredoka-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url(fonts/fredoka-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --red: #c0392b; --red-dark: #7b1414; --green: #146b3a; --green-dark: #0b3d22;
  --gold: #f4c430; --cream: #fff8ec; --ink: #3b1f12; --snow: #ffffff;
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Fredoka", system-ui, sans-serif; color: var(--ink); min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.08) 0 2px, transparent 3px) 0 0/60px 60px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.06) 0 1.5px, transparent 2.5px) 0 0/45px 45px,
    linear-gradient(160deg, var(--red-dark), #4a0d0d 45%, var(--green-dark));
  background-attachment: fixed; padding-bottom: 110px; overflow-x: hidden;
}
h1, h2, h3, .xmas { font-family: "Christmas", "Fredoka", cursive; font-weight: 700; }
a { color: var(--red); }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

#snow { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }

/* ---------- En-tete et guirlande ---------- */
.top { position: relative; z-index: 20; background: linear-gradient(var(--green), var(--green-dark)); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.garland { list-style: none; margin: 0; padding: 0 10px; height: 26px; display: flex; justify-content: space-between; overflow: hidden;
  background: radial-gradient(ellipse at 50% -40%, transparent 60%, #222 61% 64%, transparent 65%) 0 0/60px 26px repeat-x; }
.garland li { width: 11px; height: 18px; border-radius: 50%; margin-top: 8px; animation: blink 1.6s infinite; }
.garland li:nth-child(4n)   { background: #ff3b3b; box-shadow: 0 0 12px #ff3b3b; animation-delay: .0s; }
.garland li:nth-child(4n+1) { background: #ffd93b; box-shadow: 0 0 12px #ffd93b; animation-delay: .4s; }
.garland li:nth-child(4n+2) { background: #3bff7a; box-shadow: 0 0 12px #3bff7a; animation-delay: .8s; }
.garland li:nth-child(4n+3) { background: #3bb8ff; box-shadow: 0 0 12px #3bb8ff; animation-delay: 1.2s; }
@keyframes blink { 50% { opacity: .25; box-shadow: none; } }

.top-inner { display: flex; align-items: center; gap: 16px; padding: 6px 18px 10px; flex-wrap: wrap; }
.brand h1 { margin: 0; color: var(--gold); font-size: clamp(28px, 5vw, 46px); text-shadow: 2px 2px 0 var(--red-dark), 0 0 18px rgba(244,196,48,.5); }
.brand p { margin: 0; color: #e8f5e9; font-size: 14px; }
.countdown { margin-left: auto; display: flex; gap: 8px; }
.countdown .cd { background: var(--cream); border-radius: 12px; padding: 4px 10px; text-align: center; min-width: 58px; box-shadow: inset 0 -3px 0 #e0c9a6; }
.countdown .cd b { display: block; font-size: 24px; color: var(--red); line-height: 1.1; }
.countdown .cd small { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.countdown .cd-label { color: var(--gold); align-self: center; font-family: "Christmas"; font-size: 20px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.4); color: #fff; border-radius: 50%; width: 42px; height: 42px; font-size: 20px; }
.icon-btn:hover { background: rgba(255,255,255,.3); }
.me-chip { display: inline-flex; align-items: center; gap: 6px; color: #fff; background: rgba(0,0,0,.25); border-radius: 30px; padding: 3px 12px 3px 3px; font-weight: 600; }
.me-chip button { background: none; border: none; color: #ffd; text-decoration: underline; font-size: 12px; }

.nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px; background: repeating-linear-gradient(45deg, var(--red) 0 14px, #fff 14px 28px); padding-top: 6px; }
.nav a { text-decoration: none; color: var(--ink); background: var(--cream); padding: 8px 14px; border-radius: 14px 14px 0 0; font-weight: 600; font-size: 15px; }
.nav a.active { background: #fff; color: var(--red); box-shadow: 0 -3px 0 var(--gold) inset; }
.badge { background: var(--red); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; }

/* ---------- Contenu ---------- */
main { position: relative; z-index: 10; max-width: 1100px; margin: 22px auto; padding: 0 14px; }
.card { background: var(--cream); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); position: relative; }
.card.candy { border: 8px solid transparent; background:
  linear-gradient(var(--cream), var(--cream)) padding-box,
  repeating-linear-gradient(45deg, var(--red) 0 12px, #fff 12px 24px) border-box; }
.card h2 { margin: 0 0 10px; color: var(--green); font-size: 34px; }
.card h3 { margin: 6px 0; color: var(--red); font-size: 24px; }
.muted { color: #7a6555; font-size: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }

.btn { border: none; border-radius: 30px; padding: 9px 18px; font-weight: 600; font-size: 15px; background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-dark); transition: transform .1s; }
.btn:hover { transform: translateY(-1px) scale(1.03); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn.green { background: var(--green); box-shadow: 0 3px 0 var(--green-dark); }
.btn.gold { background: var(--gold); color: var(--ink); box-shadow: 0 3px 0 #b8901a; }
.btn.ghost { background: transparent; color: var(--red); box-shadow: none; border: 2px solid var(--red); }
.btn.small { padding: 5px 12px; font-size: 13px; }

input, textarea, select { font-family: inherit; font-size: 16px; padding: 10px 12px; border-radius: 12px; border: 2px solid #e0c9a6; background: #fff; color: var(--ink); width: 100%; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244,196,48,.35); }
label { font-weight: 600; font-size: 14px; display: block; margin: 8px 0 4px; }

.avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; flex: none; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.avatar.big { width: 72px; height: 72px; font-size: 40px; }

/* ---------- Connexion ---------- */
.login { max-width: 480px; margin: 40px auto; text-align: center; }
.login .big-santa { font-size: 90px; animation: wobble 2.5s infinite ease-in-out; display: inline-block; }
@keyframes wobble { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) scale(1.05); } }
.code-input { font-size: 32px; letter-spacing: 10px; text-align: center; font-weight: 600; }

/* ---------- Calendrier de l'Avent ---------- */
.advent { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.door { aspect-ratio: 1; border-radius: 14px; border: 3px dashed rgba(255,255,255,.6); font-family: "Christmas"; font-size: 44px; color: #fff; position: relative;
  text-shadow: 2px 2px 0 rgba(0,0,0,.35); transition: transform .2s; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.door small { font-family: "Fredoka"; font-size: 12px; text-shadow: none; }
.door:nth-child(6n) { background: linear-gradient(135deg, #c0392b, #922b21); }
.door:nth-child(6n+1) { background: linear-gradient(135deg, #1e8449, #145a32); }
.door:nth-child(6n+2) { background: linear-gradient(135deg, #b9770e, #7e5109); }
.door:nth-child(6n+3) { background: linear-gradient(135deg, #2471a3, #1a5276); }
.door:nth-child(6n+4) { background: linear-gradient(135deg, #884ea0, #5b2c6f); }
.door:nth-child(6n+5) { background: linear-gradient(135deg, #117a65, #0b5345); }
.door:hover { transform: rotate(-3deg) scale(1.06); }
.door.locked { filter: saturate(.5) brightness(.8); }
.door.locked::after { content: "🔒"; position: absolute; top: 6px; right: 8px; font-size: 18px; }
.door.opened { border-style: solid; border-color: var(--gold); }
.door.opened::after { content: "⭐"; position: absolute; top: 6px; right: 8px; font-size: 18px; }
.door.special::before { content: "🎂"; position: absolute; bottom: 6px; left: 8px; font-size: 20px; }
.door.today { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(244,196,48,.6); } }
.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-8px) rotate(-4deg); } 75% { transform: translateX(8px) rotate(4deg); } }

.media-box { text-align: center; }
.media-box img, .media-box video { max-width: 100%; max-height: 62vh; border-radius: 12px; border: 8px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); transform: rotate(-1.5deg); }
.day-text { font-size: 18px; margin: 14px 0 0; text-align: center; }

/* ---------- Lettre ---------- */
.parchment { background: #fdf1d8 repeating-linear-gradient(transparent 0 31px, #e8cfa2 31px 32px); border-radius: 6px; padding: 26px 30px; box-shadow: inset 0 0 40px rgba(150,100,40,.25); }
.parchment textarea, .parchment .letter-read { background: transparent; border: none; font-family: "Christmas"; font-size: 24px; line-height: 32px; min-height: 420px; resize: vertical; box-shadow: none; padding: 0; white-space: pre-wrap; }
.save-state { font-size: 13px; color: var(--green); }

/* ---------- Listes ---------- */
.gift-list { display: grid; gap: 12px; }
.gift { background: #fff; border-radius: 14px; padding: 14px 16px; border-left: 8px solid var(--green); box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.gift.taken { border-left-color: #999; background: #f4f0ea; }
.gift.mine-res { border-left-color: var(--gold); }
.gift h4 { margin: 0; font-size: 19px; }
.gift .meta { font-size: 14px; color: #7a6555; margin-top: 3px; }
.gift .stars { color: var(--gold); letter-spacing: 2px; text-shadow: 0 1px 0 #b8901a; }
.gift .status { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 13px; font-weight: 600; background: #eee; }
.pill.free { background: #d5f5e3; color: var(--green); }
.pill.taken { background: #e5e0d8; color: #6b5f52; }
.pill.mine { background: #fdebd0; color: #9a5b00; }
.gauge { height: 14px; border-radius: 10px; background: #eadfcd; overflow: hidden; min-width: 160px; flex: 1; }
.gauge > div { height: 100%; background: repeating-linear-gradient(45deg, var(--red) 0 10px, #e74c3c 10px 20px); transition: width .4s; }

.family-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.member { text-decoration: none; color: inherit; background: #fff; border-radius: 16px; padding: 16px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.15); transition: transform .2s; }
.member:hover { transform: translateY(-4px) rotate(-1deg); }
.member b { display: block; font-size: 20px; margin-top: 6px; }

/* ---------- Tchat ---------- */
.chat-box { height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px; background: #fff; border-radius: 14px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 85%; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg .bubble { background: #f2ece2; border-radius: 16px 16px 16px 4px; padding: 8px 12px; white-space: pre-wrap; word-break: break-word; }
.msg.me .bubble { background: #d5f5e3; border-radius: 16px 16px 4px 16px; }
.msg .who { font-size: 12px; font-weight: 600; color: #7a6555; }
.msg .del { background: none; border: none; color: #b00; font-size: 12px; visibility: hidden; }
.msg:hover .del { visibility: visible; }

/* ---------- Menu ---------- */
.menu-cat { margin-bottom: 18px; }
.menu-item { display: flex; align-items: center; gap: 10px; background: #fff; padding: 10px 12px; border-radius: 12px; margin: 6px 0; }
.menu-item.leader { background: #fff6d6; border: 2px solid var(--gold); }
.vote-btn { border: none; background: #f2ece2; border-radius: 20px; padding: 6px 12px; font-size: 16px; font-weight: 600; }
.vote-btn.on { background: var(--red); color: #fff; }
.voters { display: flex; }
.voters .avatar { width: 26px; height: 26px; font-size: 14px; margin-left: -6px; border-width: 2px; }

/* ---------- Fenetres modales ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(20,5,5,.6); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 14px; }
.modal { background: var(--cream); border-radius: 20px; max-width: 680px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 22px; position: relative; animation: pop .25s; }
.modal .close { position: absolute; top: 8px; right: 12px; border: none; background: none; font-size: 28px; }
@keyframes pop { from { transform: scale(.7) rotate(-4deg); opacity: 0; } }

.toast { position: fixed; bottom: 120px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; padding: 12px 22px; border-radius: 30px; z-index: 200; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.4); }

/* ---------- Bouton Ho Ho Ho et sol ---------- */
.hohoho { position: fixed; right: 18px; bottom: 26px; z-index: 70; border: none; background: radial-gradient(circle at 35% 30%, #ff6b5b, var(--red) 60%, var(--red-dark)); color: #fff; border-radius: 50%; width: 92px; height: 92px; font-size: 40px; box-shadow: 0 6px 0 var(--red-dark), 0 10px 25px rgba(0,0,0,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.hohoho span { font-family: "Christmas"; font-size: 15px; font-weight: 700; }
.hohoho:hover { animation: wobble .6s infinite; }
.ground { position: fixed; left: 0; right: 0; bottom: 0; height: 46px; z-index: 30; pointer-events: none;
  background: radial-gradient(ellipse at 10% 0, #fff 0 30%, transparent 31%) 0 0/140px 30px repeat-x, linear-gradient(#f4f8ff, #dfe9f5); }

/* Elements animes */
.fx { position: absolute; will-change: transform; user-select: none; }
.walker { position: fixed; bottom: 26px; font-size: 42px; z-index: 40; pointer-events: auto; cursor: pointer; }
.walker .say { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 12px; padding: 2px 8px; font-size: 14px; white-space: nowrap; font-weight: 600; }
.santa-pop { position: fixed; bottom: -120px; left: 30px; font-size: 90px; z-index: 65; transition: bottom .6s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.santa-pop.up { bottom: 20px; }
.santa-pop .bubble { position: absolute; left: 90%; top: -10px; background: #fff; color: var(--red); font-family: "Christmas"; font-weight: 700; font-size: 26px; padding: 4px 14px; border-radius: 18px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.3); }

@media (max-width: 700px) {
  .countdown { margin-left: 0; width: 100%; justify-content: center; }
  .countdown .cd { min-width: 48px; }
  .nav a { font-size: 13px; padding: 7px 9px; }
  .hohoho { width: 72px; height: 72px; font-size: 30px; }
  .advent { grid-template-columns: repeat(4, 1fr); }
  .door { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }