/* Définition des variables CSS pour les couleurs */
:root {
    --color-dark-gothic: #1A1A1A; /* Très sombre, presque noir */
    --color-gothic-light: #E0E0E0; /* Texte clair pour contraste */
    --color-accent-crimson: #B22222; /* Rouge profond pour les accents */
    --color-border-dark-subtle: #333333; /* Bordures discrètes */
    --color-dark-panel: #282828; /* Fond pour les panneaux/cartes */
    --color-darker-panel-hover: #3A3A3A; /* Effet hover plus sombre */
    --color-dark-crimson: #8B0000; /* Nouveau: Rouge cramoisi plus foncé pour la surbrillance */

    /* Nouveaux dégradés pour les bulles "Nos Veillées" - Camaïeu de gris-bleu/gris-violet */
    --veillee-grad-1-start: #2A2A35; /* Gris très foncé avec une pointe de bleu */
    --veillee-grad-1-end: #1F1F28;
    --veillee-grad-2-start: #32323D;
    --veillee-grad-2-end: #252530;
    --veillee-grad-3-start: #3A3A45;
    --veillee-grad-3-end: #2D2D38;
    --veillee-grad-4-start: #42424D;
    --veillee-grad-4-end: #353540;
    --veillee-grad-5-start: #4A4A55;
    --veillee-grad-5-end: #3D3D48;

    /* Couleurs pour les titres des bulles "Nos Veillées" - Camaïeu de rouges */
    --veillee-title-1: #E04040; /* Rouge légèrement plus clair */
    --veillee-title-2: #D03030;
    --veillee-title-3: #C02020;
    --veillee-title-4: #B01010;
    --veillee-title-5: #A00000; /* Rouge plus foncé */

    /* Couleurs pour l'équipe de conte */
    --conteur-aka-color: #9CA3AF; /* Gris clair pour 'aka' */
    --conteur-merlin-pseudo: #A78BFA; /* Violet pastel */
    --conteur-emilie-pseudo: #87CEEB; /* Bleu pastel plus visible */
    --conteur-milan-pseudo: #FFB347; /* Orange pastel (ancienne couleur de Merlin) */

    /* Couleurs spécifiques pour les clans */
    --color-brujah: #DC143C; /* Crimson */
    --color-gangrel: #0a541c; /* Vert foncé / Chasseur */
    --color-malkavian: #e6c831; /* Jaune / Folie */
    --color-nosferatu: #733b03; /* Marron foncé / Ombre */
    --color-toreador: #ca3097; /* Magenta / Art */
    --color-tremere: rgb(55, 0, 151); /* Violet foncé / Magie */
    --color-ventrue: #4169E1; /* RoyalBlue / Noblesse */
    --color-assamite: #D2B48C; /* Tan / Désert */
}

/* Assure que html et body prennent toute la hauteur de la fenêtre */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lora', serif; /* Police par défaut pour le corps */
    background-color: var(--color-dark-gothic);
    /* Ajout d'une couleur de fond directe et d'une bordure pour le débogage */
    background-color: #1A1A1A !important; /* Force le fond sombre */
    /* border: 5px solid red; */ /* Bordure rouge pour confirmer le chargement du CSS - COMMENTED OUT */
    color: var(--color-gothic-light);
    line-height: 1.6;
    min-height: 100vh; /* Assure que le body est au moins de la hauteur de la vue */
    display: flex; /* Nécessaire pour flex-direction: column sur le body */
    flex-direction: column;
}

.font-cinzel-decorative {
    font-family: 'Cinzel Decorative', cursive; /* Police pour les titres */
}
.font-playfair-display {
    font-family: 'Playfair Display', serif; /* Nouvelle police pour la navigation */
    font-weight: 700; /* Rendre la police plus audacieuse */
}

/* Styles Tailwind personnalisés via CSS */
.bg-dark-gothic { background-color: var(--color-dark-gothic); }
.text-gothic-light { color: var(--color-gothic-light); }
.text-accent-crimson { color: var(--color-accent-crimson); }
.border-dark-subtle { border-color: var(--color-border-dark-subtle); }
.bg-dark-panel { background-color: var(--color-dark-panel); }
.hover\:bg-darker-panel:hover { background-color: var(--color-darker-panel-hover); }
.shadow-gothic { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15); }

/* Correction: Définit la couleur du texte pour .text-dark-gothic */
/* Cette règle n'est plus nécessaire si text-gothic-light est utilisé directement sur les éléments */
/* .text-dark-gothic { color: var(--color-dark-gothic) !important; } */


/* Styles pour les sections */
section {
    min-height: calc(100vh - 8rem); /* Assure que les pages ont une hauteur minimale */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Applique un rembourrage en haut de l'élément main pour compenser l'en-tête fixe */
main {
    padding-top: var(--header-height, 0px); /* Utilise la variable JS pour le padding */
}

/* Animations subtiles */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hover-scale:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease-in-out;
}

/* Pour cacher les pages non actives */
.page-hidden {
    display: none;
}

/* Style pour le bandeau d'en-tête qui disparaît */
.header-fixed-hidden {
    transform: translateY(-100%);
}

/* Styles pour l'événement en surbrillance (rouge foncé et blanc) */
.highlighted-event {
    background-color: var(--color-dark-crimson) !important; /* Fond rouge cramoisi plus foncé */
    color: white !important; /* Texte blanc */
    border-color: #FFFFFF !important; /* Bordure blanche */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important; /* Ombre blanche */
}
.highlighted-event .text-accent-crimson {
    color: white !important; /* Le titre reste blanc sur le fond rouge */
}

/* Styles pour les bulles de la section "Nos Veillées" - Camaïeu de gris-bleu/gris-violet */
.veillee-card-1 { background-image: linear-gradient(to bottom right, var(--veillee-grad-1-start), var(--veillee-grad-1-end)); }
.veillee-card-2 { background-image: linear-gradient(to bottom right, var(--veillee-grad-2-start), var(--veillee-grad-2-end)); }
.veillee-card-3 { background-image: linear-gradient(to bottom right, var(--veillee-grad-3-start), var(--veillee-grad-3-end)); }
.veillee-card-4 { background-image: linear-gradient(to bottom right, var(--veillee-grad-4-start), var(--veillee-grad-4-end)); }
.veillee-card-5 { background-image: linear-gradient(to bottom right, var(--veillee-grad-5-start), var(--veillee-grad-5-end)); }

/* Styles pour les titres des bulles "Nos Veillées" */
.text-veillee-title-1 { color: var(--veillee-title-1); }
.text-veillee-title-2 { color: var(--veillee-title-2); }
.text-veillee-title-3 { color: var(--veillee-title-3); }
.text-veillee-title-4 { color: var(--veillee-title-4); }
.text-veillee-title-5 { color: var(--veillee-title-5); }

/* Couleurs pour l'équipe de conte avec !important pour forcer l'application */
.text-conteur-aka-color { color: var(--conteur-aka-color) !important; }
.text-conteur-merlin-pseudo { color: var(--conteur-merlin-pseudo) !important; }
.text-conteur-emilie-pseudo { color: var(--conteur-emilie-pseudo) !important; }
.text-conteur-milan-pseudo { color: var(--conteur-milan-pseudo) !important; }

/* Classes Tailwind pour les couleurs de clan */
.text-brujah { color: var(--color-brujah) !important; }
.text-gangrel { color: var(--color-gangrel) !important; }
.text-malkavian { color: var(--color-malkavian) !important; }
.text-nosferatu { color: var(--color-nosferatu) !important; }
.text-toreador { color: var(--color-toreador) !important; }
.text-tremere { color: var(--color-tremere) !important; }
.text-ventrue { color: var(--color-ventrue) !important; }
.text-assamite { color: var(--color-assamite) !important; } /* Couleur pour Assamite */

/* Classes pour les fonds des cartes Who's Who (elles utiliseront bg-dark-gothic directement) */
/* Supprimé: .bg-whos-who-card { ... } */
/* Supprimé: .text-whos-who-card { ... } */

/* Styles pour le liseré coloré autour des images de profil dans Who's Who */
/* Appliqué directement sur l'image avec border-4 et la classe spécifique */
.whos-who-img-border-brujah { border-color: var(--color-brujah) !important; }
.whos-who-img-border-gangrel { border-color: var(--color-gangrel) !important; }
.whos-who-img-border-malkavian { border-color: var(--color-malkavian) !important; }
.whos-who-img-border-nosferatu { border-color: var(--color-nosferatu) !important; }
.whos-who-img-border-toreador { border-color: var(--color-toreador) !important; }
.whos-who-img-border-tremere { border-color: var(--color-tremere) !important; }
.whos-who-img-border-ventrue { border-color: var(--color-ventrue) !important; }
.whos-who-img-border-assamite { border-color: var(--color-assamite) !important; }


/* Styles spécifiques pour la modale */
#eventModalOverlay {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    /* Utilise flex pour centrer le contenu, mais est caché par défaut */
    display: flex;
}
/* La classe 'hidden' de Tailwind utilise display: none !important.
   Nous devons la surcharger pour permettre la transition d'opacité. */
#eventModalOverlay.hidden {
    display: none; /* Masque l'overlay complètement quand il n'est pas utilisé */
}
#eventModalOverlay.show {
    opacity: 1;
}

#eventModal {
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
    padding: 2.5rem; /* Augmente le padding */
    margin: 1rem; /* Marge pour les petits écrans */
}
#eventModalOverlay.show #eventModal {
    transform: scale(1);
}

/* Styles pour le contenu Markdown généré */
#characterOutput h1, #characterOutput h2, #characterOutput h3, #characterOutput h4, #characterOutput h5, #characterOutput h6 {
    font-family: 'Cinzel Decorative', cursive; /* Titres Markdown avec la bonne police */
    color: var(--color-accent-crimson);
    margin-top: 1em;
    margin-bottom: 0.5em;
    line-height: 1.2;
}
#characterOutput h1 { font-size: 2em; }
#characterOutput h2 { font-size: 1.75em; }
#characterOutput h3 { font-size: 1.5em; }
#characterOutput p {
    margin-bottom: 1em;
}
#characterOutput ul, #characterOutput ol {
    list-style-position: inside;
    margin-bottom: 1em;
    padding-left: 1.5em;
}
#characterOutput ul {
    list-style-type: disc;
}
#characterOutput ol {
    list-style-type: decimal;
}
#characterOutput strong {
    color: var(--color-gothic-light); /* Rendre le texte en gras plus visible */
}

/* Styles pour l'animation de soulignement des liens de navigation */
nav a {
    position: relative;
    overflow: hidden;
    padding-bottom: 5px; /* Espace pour le soulignement */
    font-family: 'Playfair Display', serif; /* Nouvelle police pour les liens de navigation */
    font-weight: 700; /* Rendre la police plus audacieuse */
}

nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent-crimson); /* Couleur du soulignement */
    transition: width 0.3s ease-in-out;
}

nav a:hover::after {
    width: 100%;
}

/* Styles pour la section Who's Who pour assurer la même hauteur des cartes */
#whos-who .grid {
    align-items: stretch; /* Permet aux éléments de la grille de s'étirer pour avoir la même hauteur */
}