/* ==========================================================================
   Calendrier de l'Avent - Palette de Couleurs et Variables
   ========================================================================== */
:root {
  /* Palette "No�0�5l Traditionnel et Chaleureux" */
  --color-primary: #8B0000;      /* Rouge Bordeaux Profond (pour les bo�0�6tes, en-t��tes) */
  --color-primary-transparent: rgba(139, 0, 0, 0.5); 
  --color-secondary: #013220;    /* Vert Sapin (pour les succ��s, boutons, liens) */
  --color-accent: #D4AF37;       /* Or Vieilli (pour les bordures, titres) */
  --color-text-light: #FFFDD0;   /* Cr��me / Ivoire (pour les textes sur fond sombre) */
  --color-disabled-bg: #6c757d;  /* Gris Doux (pour les jours bloqu��s) */
  --color-disabled-border: #8d99ae; /* Gris Clair (bordure des jours bloqu��s) */
  
  /* Police Sp��ciale */
  --font-special: 'Mountains of Christmas', cursive;
}


/* ==========================================================================
   Styles G��n��raux (Body, Fond, Neige)
   ========================================================================== */
body {
  /* Note : Le fond d'��cran est g��r�� dynamiquement dans base.html. */
  /* Ces styles peuvent ��tre supprim��s si tout est dans base.html, */
  /* mais il est bon d'avoir un "fallback" au cas o��. */
  background-color: #0a3142; /* Un fond sombre si l'image ne charge pas */
  position: relative;
  color: #333; /* Couleur de texte par d��faut pour le contenu normal */
  font-family: Arial, sans-serif; /* Police lisible par d��faut */
}

/* --- Animation Neige --- */
@keyframes snowfall {
  from { transform: translateY(-100vh) translateX(0); }
  to   { transform: translateY(100vh) translateX(20px); }
}

.snowflake {
  position: fixed;
  top: -10px;
  color: rgba(255, 255, 255, 0.8);
  animation: snowfall linear infinite;
  pointer-events: none;
  z-index: 1000;
}


/* ==========================================================================
   Page Principale - Grille du Calendrier
   ========================================================================== */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px; /* Un peu plus d'espace */
    padding: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.calendar-day {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--color-primary-transparent), #a42a28);
    border: 3px solid var(--color-accent);
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0,0,0,0.2);
    color: var(--color-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-align: center;
}

.day-number {
    font-family: var(--font-special);
    font-size: 3rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.rest-icon {
    font-size: 2.2rem;
    opacity: 0.8;
}

/* --- �0�7tats des Jours --- */
.calendar-day:not(.locked):not(.rest-day):hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    border-color: #fff;
}

.calendar-day.locked,
.calendar-day.rest-day {
    background: linear-gradient(135deg, var(--color-disabled-bg), #8d99ae);
    border-color: var(--color-disabled-border);
    cursor: not-allowed;
    filter: saturate(0.8);
}

.calendar-day.locked::after {
    content: '\1F512';
    position: absolute;
    bottom: 15px;
    font-size: 1.5rem;
    opacity: 0.7;
}


/* ==========================================================================
   Composants de l'Interface (Navbar, Boutons, Alertes)
   ========================================================================== */

/* --- Barre de Navigation --- */
nav.navbar {
    background-color: var(--color-primary) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

nav.navbar .navbar-brand {
    font-family: var(--font-special);
    font-size: 1.8rem;
    color: var(--color-accent) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
nav.navbar .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}
nav.navbar .nav-link:hover {
    color: #fff !important;
}

/* --- Boutons --- */
.btn-christmas {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
}
.btn-christmas:hover {
    background-color: #024b2b; /* Vert plus fonc�� au survol */
    border-color: #024b2b;
    color: #fff;
}

/* --- Alertes --- */
.alert {
    border-radius: 8px;
    border: none;
    color: #fff;
}
.alert-success { background-color: var(--color-secondary); }
.alert-warning { background-color: var(--color-accent); color: #333; }
.alert-danger { background-color: var(--color-primary); }
.alert-info { background-color: #4FB0C6; } /* Gardons un bleu pour l'info */


/* ==========================================================================
   Page de Contenu du Jour (day.html)
   ========================================================================== */
.photo-container {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* --- Animation de R��v��lation --- */
.reveal-container {
    position: relative;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    overflow: hidden;
}
.reveal-container img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain; /* Remplit l'espace sans d��former, peut couper les bords */
    transition: opacity 1.2s ease, transform 1.2s ease;
}
.reveal-container .reveal-overlay { z-index: 2; transform: scale(1); }
.reveal-container .reveal-photo { z-index: 1; transform: scale(0.9); opacity: 0; }
.reveal-container.revealed .reveal-overlay { transform: scale(1.1); opacity: 0; }
.reveal-container.revealed .reveal-photo { transform: scale(1); opacity: 1; }


/* ==========================================================================
   Administration
   ========================================================================== */
.card-header {
    background-color: var(--color-primary) !important;
    color: var(--color-text-light) !important;
}

.form-check-input:checked {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}


/* ==========================================================================
   Styles pour la Modale Plein �0�7cran (Lightbox)
   ========================================================================== */

/* Le fond semi-transparent qui couvre toute la page */
.fullscreen-modal {
  display: none; /* Cach�� par d��faut */
  position: fixed; /* Reste en place m��me si on scrolle */
  z-index: 1050; /* Doit ��tre au-dessus de tout le reste */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85); /* Fond noir avec 85% d'opacit�� */
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease; /* Petite animation d'apparition */
}

/* L'image elle-m��me, �� l'int��rieur de la modale */
.fullscreen-modal-content {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain; /* Garde les proportions de l'image */
}

/* Le bouton pour fermer (le 'X') */
.fullscreen-modal-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}
.fullscreen-modal-close:hover {
  color: #bbb;
}

/* Le curseur sur les images cliquables pour indiquer l'action */
.fullscreen-trigger {
    cursor: zoom-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.christmas-decoration {
    position: absolute; /* Indispensable pour que top/left fonctionnent */
    font-size: 3rem;    /* Taille des émojis */
    z-index: 0;         /* Pour rester en arrière-plan */
    pointer-events: none; /* IMPORTANT : permet de cliquer au travers (sur les jours) */
    animation: float 6s ease-in-out infinite; /* Petite animation optionnelle sympa */
}

/* Animation optionnelle pour faire flotter doucement les décorations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}