/* Importation des polices Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:wght@400;700&display=swap');

/* Styles Généraux */
body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(to bottom, #5f1e1e, #7a2a2a, #a03b3b); /* Dégradé de bleus océaniques plus doux */
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    scroll-behavior: smooth;
}

/* En-tête */
header {
    background-color: #471a1a; /* Bleu foncé subtil pour l'en-tête */
    color: #ffffff;
    padding: 40px 20px;
    text-align: center;
    border-bottom: 3px solid #ed6d6d; /* Bordure bleu clair, comme un horizon */
}

header h1 {
    font-family: 'Press Start 2P', cursive;
    font-size: 2.8em;
    margin-bottom: 10px;
    text-shadow: 2px 2px #ba3e3e; /* Ombre bleue moins prononcée */
}

header .server-name {
    color: #f69d9d; /* Bleu très clair, comme le reflet du ciel sur l'eau */
}

header p {
    font-size: 1.2em;
    font-style: italic;
    color: #bbbbbb;
}

/* Conteneur principal */
main {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
}

/* Conteneur du calendrier (pour un mois) */
.calendar-container {
    background-color: rgba(71, 26, 26, 0.8); /* Bleu foncé légèrement transparent */
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 50px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); /* Ombre adoucie */
    border: 1px solid rgba(246, 157, 157, 0.2); /* Bordure discrète */
}

.calendar-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 2.2em;
    color: #ed6d6d; /* Bleu ciel pour le titre du mois */
    text-align: center;
    margin-bottom: 40px;
    text-shadow: 1px 1px #ba3e3e; /* Ombre plus douce */
    padding-bottom: 15px;
    border-bottom: 2px dashed #ed6d6d; /* Bordure plus fine */
}

/* Grille du calendrier */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.day-name {
    font-family: 'Press Start 2P', cursive;
    background-color: #ba3e3e; /* Bleu moyen pour les noms des jours */
    padding: 10px 5px;
    text-align: center;
    font-size: 0.9em;
    border-radius: 5px;
    color: #ffffff;
    text-shadow: 1px 1px #8c2b2b;
}

.day {
    background-color: #7d2d2d; /* Bleu plus clair pour les jours */
    border: 1px solid #5f1e1e;
    border-radius: 8px;
    min-height: 120px;
    padding: 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.day.empty {
    background-color: rgba(45, 82, 125, 0.4); /* Jours vides plus transparents */
    border: 1px dashed rgba(30, 58, 95, 0.5);
    visibility: visible;
}

.date-number {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.5em;
    color: #f69d9d; /* Bleu très clair pour le numéro du jour */
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 1;
    text-shadow: 1px 1px #ed6d6d;
}

.day.has-event {
    background-color: #ba3e3e; /* Un bleu légèrement différent quand il y a un événement */
    border: 1px solid #ed6d6d; /* Bordure bleu ciel pour les jours avec événement */
    box-shadow: 0 0 10px rgba(237, 109, 109, 0.2); /* Légère lueur adoucie */
}

.event-details {
    margin-top: 30px;
    font-size: 0.9em;
    width: 100%;
    overflow-y: auto;
    max-height: calc(100% - 40px);
    padding-right: 5px;
}

.event-details p {
    margin: 5px 0;
    color: #cccccc;
    line-height: 1.3;
}

/* Tags d'événements (couleurs ajustées pour le thème subtil) */
.event-tag {
    display: inline-block;
    background-color: #955555; /* Bleu-gris plus doux pour les tags */
    color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.7em;
    margin-right: 5px;
    margin-bottom: 3px;
    text-transform: uppercase;
    font-weight: bold;
    white-space: nowrap;
}

/* Couleurs spécifiques pour les tags (adaptées au thème océan subtil) */
.event-tag.annuler { background-color: #750505; }
.event-tag.end { background-color: rgba(138, 43, 226, 0.8); }   
.event-tag.noel { background-color: rgba(255, 80, 80, 0.8); }   

/* --- STYLE SPÉCIFIQUE POUR L'EVENT ENDER DRAGON --- */
.day.ender-dragon-event {
    background-image: url('images/ender_dragon_bg.png'); /* Chemin vers ton image */
    background-size: cover; /* L'image couvrira toute la surface */
    background-position: center; /* Centre l'image */
    color: #fff; /* Texte blanc pour contraster avec le fond sombre de l'image */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Ombre pour rendre le texte plus lisible */
    border: 1px solid #9370DB; /* Une bordure violette pour l'End */
    box-shadow: 0 0 15px rgba(147, 112, 219, 0.5); /* Une lueur violette */
}

.day.ender-dragon-event .date-number {
    color: #FFEA00; /* Un jaune plus éclatant pour le numéro du jour */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.day.ender-dragon-event .event-time {
    color: #FFEA00; /* La même couleur éclatante pour l'heure */
}

/* --- STYLE POUR NOËL --- */
.day.noel {
    background-image: url(''); /* Chemin vers ton image */
    background-size: cover; /* L'image couvrira toute la surface */
    background-position: center; /* Centre l'image */
    color: #fff; /* Texte blanc pour contraster avec le fond sombre de l'image */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Ombre pour rendre le texte plus lisible */
    border: 1px solid #db7070; /* Une bordure violette pour l'End */
    box-shadow: 0 0 15px rgba(219, 112, 112, 0.5); /* Une lueur violette */
}

.day.noel .date-number {
    color: #ff0000; /* Un jaune plus éclatant pour le numéro du jour */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.day.noel .event-time {
    color: #ff0000; /* La même couleur éclatante pour l'heure */
}

/* --- FIN DU STYLE SPÉCIFIQUE --- */

/* Pied de page */
footer {
    background-color: #471a1a; /* Bleu foncé subtil pour le pied de page */
    color: #ffffff;
    text-align: center;
    padding: 30px 20px;
    margin-top: 50px;
    border-top: 3px solid #ed6d6d;
    font-size: 0.9em;
}

footer p {
    margin: 5px 0;
}

a {
    color: white;
}

/* Media Queries pour la responsivité */
@media (max-width: 768px) {
    header h1 {
        font-size: 2em;
    }
    .calendar-title {
        font-size: 1.8em;
    }
    .calendar-grid {
        gap: 5px;
    }
    .day {
        min-height: 100px;
        padding: 5px;
    }
    .date-number {
        font-size: 1.2em;
        top: 3px;
        right: 5px;
    }
    .event-details {
        margin-top: 20px;
        font-size: 0.8em;
    }
    .event-tag {
        font-size: 0.6em;
        padding: 2px 4px;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.5em;
    }
    header p {
        font-size: 1em;
    }
    .calendar-title {
        font-size: 1.5em;
    }
    .day-name {
        font-size: 0.8em;
    }
}