/* RESET SIMPLE */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Quicksand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Fond de Noël */
  background: #228B22 url("../images/motif.jpg") repeat;
  min-height: 100vh;
  color: #222;
}

/* PAGE GLOBALE */
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

/* HEADER - Zone "Calendrier de l'Avent" */
.header {
  text-align: center;
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 16px;
  /* Fond rouge de Noël PALE */
  background: #D84C4C; 
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.header h1 {
  font-size: 2.4rem;
  margin-bottom: 4px;
  color: #fff; /* Texte en blanc */
}

.subtitle {
  font-size: 1rem;
  opacity: 0.95;
  color: #fff; /* Texte en blanc */
}

.today-info {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #fff; /* Texte en blanc */
}

/* SECTION MOIS - Zone "Décembre" */
.month-info {
  text-align: center;
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 14px;
  /* Fond vert sapin UNI */
  background: #1D7133;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  color: #fff; /* Texte en blanc */
}

.month-info h2 {
  font-size: 1.7rem;
  margin-bottom: 4px;
}

.month-info p {
  font-size: 0.95rem;
}

/* CALENDRIER GLOBAL - Conteneur principal */
.calendar-wrapper {
  /* Fond vert sapin UNI */
  background: #1D7133;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Ligne des jours de la semaine */
.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
  /* Ligne de séparation en blanc */
  border-bottom: 2px solid #ffffff;
}

.weekday {
  font-size: 0.9rem;
  font-weight: 700;
  padding: 6px 4px;
  /* Texte en blanc */
  color: #ffffff;
}

/* Grille des jours (vrai quadrillage) */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* Lignes de quadrillage en blanc */
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
}

/* CASES GÉNÉRALES */
.day-cell {
  position: relative;
  min-height: 80px;
  /* Lignes de quadrillage en blanc */
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  padding: 4px;
  display: flex;
  flex-direction: column;
  /* Rendre la case transparente pour voir le fond vert du wrapper */
  background: transparent;
}

@media (min-width: 768px) {
  .day-cell {
    min-height: 100px;
  }
}

/* Numéro de jour en haut à gauche */
.day-number-top {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 4px;
  /* Texte en blanc */
  color: #ffffff;
}

/* Contenu au centre (bouton Avent) */
.day-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bouton pour les jours de l'Avent */
.day-card {
  position: relative;
  border-radius: 10px;
  border: none;
  padding: 6px 4px;
  width: 100%;
  height: 100%;
  /* Dégradé rouge de Noël */
  background: linear-gradient(135deg, #FF4545, #AC1610);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-card-inner {
  text-align: center;
}

.day-card-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff; /* Texte en blanc */
}

/* États des boutons */
.day-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.day-card.locked {
  background: linear-gradient(135deg, #d1d5db, #e5e7eb);
  cursor: not-allowed;
  opacity: 0.7;
}

.day-card.locked:hover {
  transform: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.day-card.past {
  opacity: 0.9;
}

.day-card.today {
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.7), 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* Icônes */
.day-card.locked::after {
  content: "╳"; /* Utilisé U+2573 (Diagonal Cross) */
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.9rem;
  /* Force le symbole en noir */
  color: #000; 
}

.day-card.today::after {
  content: "♡"; /* MODIFICATION : Utilisé U+2661 (White Heart Suit) */
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.9rem;
  /* Force le cœur en noir */
  color: #000; 
}

/* Cases hors Avent ou vides */
.day-cell.other-month {
  /* Rendre la case transparente pour que le fond vert soit uniforme */
  background: transparent;
  /* Texte très clair pour les jours hors-mois */
  color: #c9c9c9;
}

/* FOOTER */
.footer {
  margin-top: 24px;
  text-align: center;
  font-size: 0.85rem;
  color: #6b7280;
}

/* POPUP */
.popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.popup.hidden {
  display: none;
}

.popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.popup-content {
  position: relative;
  z-index: 1;
  max-width: 420px;
  width: 90%;
  /* Fond rouge de Noël PALE */
  background: #D84C4C; 
  border-radius: 18px;
  padding: 20px 20px 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  /* Assurer le contraste pour le texte par défaut */
  color: #fff;
}

.popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  color: #fff; /* Rendre la croix visible sur le fond rouge */
}

#popup-title {
  margin-bottom: 12px;
  color: #fff; /* Rendre le titre visible */
}

#popup-body {
  font-size: 1rem;
  line-height: 1.5;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .header h1 {
    font-size: 2rem;
  }

  .weekday {
    font-size: 0.8rem;
  }

  .day-cell {
    min-height: 70px;
  }

  .day-card-label {
    font-size: 0.8rem;
  }
}
/* --- Ajouts port webapp NAS --- */
.day-card.done::after { content: "✦"; color:#ffe08a; }
.day-card .day-card-label.locked-label { opacity:.85; }
.day-card.has-content .day-card-inner::before { content:"✦"; display:block; font-size:1.1rem; color:#ffe08a; margin-bottom:2px; }

#popup-body img { max-width:100%; border-radius:12px; margin:10px 0; display:block; }
#popup-body p { margin-bottom:10px; white-space:pre-wrap; }
#popup-body .avent-link {
  display:inline-flex; align-items:center; gap:8px; margin-top:6px;
  background:#1D7133; color:#fff; text-decoration:none; font-weight:600;
  padding:10px 16px; border-radius:12px;
}
#popup-body .avent-link:hover { filter:brightness(1.1); }
#popup-body .empty { opacity:.85; font-style:italic; }
.popup-locked #popup-body { text-align:center; }

/* ============ v2 : login enfant + finitions fêtes de fin d'année ============ */
:root{ --or:#ffe08a; --or2:#f6c453; --rouge:#D84C4C; --rouge2:#AC1610; --vert:#1D7133; --vert2:#228B22; }

/* Neige */
.snow{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.flake{position:absolute;top:-5vh;color:#fff;opacity:.85;user-select:none;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg)}}
.page{position:relative;z-index:2}

/* Guirlande dorée sous le header */
.garland{height:6px;border-radius:6px;margin:-14px auto 18px;max-width:960px;
  background:repeating-linear-gradient(90deg,var(--or) 0 10px,var(--rouge) 10px 20px,var(--vert2) 20px 30px);
  box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* Écran de connexion */
.login-screen{max-width:400px;margin:6vh auto;background:rgba(255,255,255,.97);border-radius:22px;
  padding:30px 26px;box-shadow:0 18px 50px rgba(0,0,0,.35);text-align:center}
.login-screen .snowman{font-size:3rem;line-height:1}
.login-screen h1{color:var(--rouge2);font-size:1.6rem;margin:6px 0 2px}
.login-screen p.hint{color:#777;font-size:.9rem;margin-bottom:16px}
.login-screen label{display:block;text-align:left;font-size:.82rem;color:#555;font-weight:600;margin:10px 0 4px}
.login-screen input{width:100%;font:inherit;background:#faf6ee;border:1px solid #e4dccb;border-radius:12px;padding:12px 14px}
.login-screen button{width:100%;font:inherit;font-weight:700;border:none;border-radius:12px;padding:13px;margin-top:16px;
  background:linear-gradient(135deg,var(--rouge),var(--rouge2));color:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(172,22,16,.35)}
.login-screen button:hover{filter:brightness(1.06)}
.login-screen .err{color:#c33;font-size:.85rem;min-height:1.1em;margin-top:10px;font-weight:600}

/* Barre utilisateur */
.userbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  max-width:960px;margin:0 auto 10px;color:#fff}
.userbar .hello{font-weight:700}
.userbar button{font:inherit;font-size:.85rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.5);
  color:#fff;border-radius:999px;padding:6px 14px;cursor:pointer}
.userbar button:hover{background:rgba(255,255,255,.28)}

/* Portes du calendrier : brillance dorée + ouverture */
.day-card{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.day-card.has-content .day-card-inner::before{content:"✦";display:block;font-size:1.05rem;color:var(--or);margin-bottom:2px;
  text-shadow:0 0 6px rgba(255,224,138,.8)}
.day-card.opened{background:linear-gradient(135deg,#2a9d54,#1D7133)}
.day-card.opened::after{content:"✦";color:var(--or)}
.day-card.locked{filter:grayscale(.3)}
.day-card.locked::before{content:"🔒";position:absolute;top:4px;left:6px;font-size:.8rem}
.day-card.today{animation:glow 1.8s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 3px rgba(255,224,138,.5),0 4px 10px rgba(0,0,0,.25)}
  50%{box-shadow:0 0 0 5px rgba(255,224,138,.9),0 6px 16px rgba(0,0,0,.3)}}