/* ==========================================================================
   Calendrier de l'Avent - Palette de Couleurs et Variables
   ========================================================================== */
:root {
  /* Palette "Noël Traditionnel et Chaleureux" */
  --color-primary: #8B0000;      /* Rouge Bordeaux Profond (pour les boîtes, 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;
}

/* --- États 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 Écran (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; }
}

/*
==========================================
Styles pour le contenu de l'histoire (Récit)
==========================================
*/

/* Style pour les dialogues des personnages */
.dialogue {
  font-style: italic;
  color: #d42426; /* Rouge pirate */
  font-weight: bold;
}

/* Style pour les onomatopées et les actions importantes (BOOM !, CRASH !, etc.) */
.action-text {
  font-weight: bold;
  color: #1b3b6f;     /* Bleu marine profond */
  font-size: 1.2em;  /* Légèrement plus grand pour un impact visuel */
}

/*
==========================================
Styles de Contexte (pour un rendu optimal)
==========================================
*/

/* Style du conteneur principal du récit */
.story-content {
  font-size: 1.1em;
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 25px;
}

/* Style des paragraphes dans le récit pour un espacement correct */
.story-content p {
  margin-bottom: 15px;
}

/* Style de base du corps de la page (important pour la police et les couleurs) */
/*body {*/
  /*font-family: 'Roboto', serif;*/
/*  background: linear-gradient(135deg, #1b3b6f 0%, #2c5f96 50%, #1b3b6f 100%);*/
/*  color: #1b3b6f;*/
/*}*/

/*
=====================================================
    CSS DE TRANSFORMATION - STYLE PIRATE DE NOËL
=====================================================
*/

/* --- 1. Style du conteneur principal du chapitre --- */
/* On cible la classe .card pour lui donner l'apparence du .chapter original */
.card {
    background-color: rgba(244, 241, 234, 0.95) !important; /* Le !important force la priorité sur .bg-white de Bootstrap */
    color: #1b3b6f; /* Texte bleu marine */
    border: 4px solid #ffd700; /* Bordure dorée épaisse */
    border-radius: 20px; /* Coins très arrondis */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; /* Ombre portée plus marquée */
}

/* --- 2. Style du Titre du Chapitre --- */
/* On cible le h2 à l'intérieur de la .card */
.card h2 {
    font-family: 'Pirata One', cursive !important; /* Police pirate !important pour écraser le style en ligne */
    font-size: 2.8em; /* Plus grand pour plus d'impact */
    color: #1b3b6f;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    
    /* On ajoute la bordure rouge du header original */
    border-bottom: 3px solid #d42426;
    padding-bottom: 15px;
    margin-bottom: 25px; /* Espace après le titre */
}

/* --- 3. Style de la Section Mission --- */
/* On cible la div .interaction-section */
.interaction-section {
    background: linear-gradient(135deg, #d42426, #ff6b6d); /* Dégradé rouge */
    color: white;
    border: 3px solid #ffd700; /* Bordure dorée */
    border-radius: 15px; /* Coins arrondis */
    padding: 25px 20px;
    margin-top: 30px; /* Espace avant la mission */
}

/* --- 4. Style du Titre de la Mission --- */
/* On cible le h4 de la mission */
.interaction-section h4 {
    font-family: 'Pirata One', cursive;
    font-size: 1.8em; /* Taille adaptée */
    color: #ffd700; /* Couleur dorée */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Ombre pour la lisibilité */
}

/* --- 5. Style de la description de la Mission --- */
/* On cible le paragraphe de la mission */
.interaction-section p {
    color: white !important; /* !important pour écraser la classe .text-muted */
    font-style: normal !important; /* On enlève l'italique pour le remplacer par du gras */
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.6;
}

/* --- 6. Styles du Récit (Dialogue et Actions) --- */
/* Pour s'assurer qu'ils ont le bon style dans ce contexte */
.story-text .dialogue {
  font-style: italic;
  color: #d42426; /* Rouge pirate */
  font-weight: bold;
}

.story-text .action-text {
  font-weight: bold;
  color: #1b3b6f;     /* Bleu marine profond */
  font-size: 1.2em;  /* Légèrement plus grand */
}