/* Styles pour la galerie de personnages */
.gallery-title {
    text-align: center;
    font-size: 1.8rem;
    color: #fff;
    margin: 40px 0 20px 0;
}
.character-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.character-card {
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    width: 120px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.character-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.character-card a {
    text-decoration: none;
    color: #ccc;
    display: block;
    padding: 15px;
}
.character-card-icon {
    width: 74px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #444;
    margin-bottom: 10px;
    object-fit: cover;
}
.character-card-name {
    font-weight: 500;
}

/* Styles pour le Tooltip Tippy.js */
.tippy-box[data-theme~='pangya'] {
    background-color: #1f1f1f;
    border: 1px solid #2ECC71;
    color: #fff;
    border-radius: 8px;
}
.tippy-box[data-theme~='pangya'] .tippy-arrow {
    color: #2ECC71;
}
.char-tooltip {
    text-align: center;
}
.char-tooltip img {
    width: 100px;
    height: 100px;
    display: block;
    margin-bottom: 5px;
}
.char-tooltip-name {
    font-weight: bold;
    font-size: 1.1rem;
}

/* Amélioration de la typographie du texte */
.text-page-section .text-content h3 {
    color: #2ECC71; /* Vert signature pour les titres principaux */
    border-left: 4px solid #2ECC71;
    padding-left: 15px;
    font-size: 1.5rem;
    margin-top: 40px;
}
.text-page-section .text-content h4 {
    color: #e1e8ed; /* Blanc cassé pour les sous-titres */
    font-size: 1.2rem;
    margin-top: 25px;
    font-style: italic;
}
.text-page-section .text-content p {
    line-height: 1.7; /* Plus d'espace entre les lignes */
    color: #b0b0b0; /* Un gris plus clair pour le corps du texte */
}

/* Style pour les noms de personnages interactifs */
a.character-link,
a.character-link:visited { /* On s'assure que les liens visités ont le même style */
    color: #f39c12;         /* "Or" par défaut */
    text-decoration: none;  /* Pas de soulignement */
    font-weight: normal;    /* On retire le gras du lien lui-même */
    transition: color 0.2s ease;
}

/* Le <strong> à l'intérieur du lien est celui qui porte le gras */
a.character-link strong {
    font-weight: 700;       /* C'est la valeur standard pour "bold" */
	color: #f39c12; 
	text-decoration: none; 
}

/* Comportement au survol */
a.character-link:hover {
    color: #f1c40f;         /* "Or" plus vif */
	
	
}
/* On ne souligne que le <strong> au survol, pas le lien entier */
a.character-link:hover strong {
    text-decoration: underline;
	color: #f1c40f; 
}

/* --- NOUVELLE STRUCTURE POUR LES SECTIONS DE L'HISTOIRE --- */

.story-section-card {
    display: flex;         /* On active Flexbox ! */
    align-items: center;   /* Centre les éléments verticalement */
    gap: 30px;             /* Espace entre l'image et le texte */
    margin: 40px 0;        /* Espace vertical entre les sections */
    background-color: #2a2a2a; /* Fond de la carte */
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #3a3a3a;
}

/* Variante pour inverser l'ordre : texte à droite, image à gauche */
.story-section-card.reverse {
    flex-direction: row-reverse;
}

.story-card-image {
    flex: 1;              /* L'image prend 1 part de l'espace */
    min-width: 250px;     /* Empêche l'image de devenir trop petite */
    max-width: 400px;     /* Limite la taille maximale de l'image */
}
.story-card-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block; /* Évite les marges fantômes sous l'image */
}

.story-card-text {
    flex: 2;              /* Le texte prend 2 parts, il sera plus large que l'image */
}

/* On s'assure que les paragraphes dans les cartes ont un bon espacement */
.story-card-text p {
    margin-bottom: 1em; /* Espace entre les paragraphes */
}
.story-card-text p:last-child {
    margin-bottom: 0; /* Pas de marge pour le dernier paragraphe */
}

/* Le clear-float n'est plus nécessaire avec Flexbox */
.clear-float { display: none; }

/* Style pour la dernière image en pleine largeur */
.story-full-width-image {
    margin: 40px 0;
    text-align: center;
}
.story-full-width-image img {
    max-width: 500px; /* Limite la largeur pour ne pas être trop massive */
    width: 100%;
    height: auto;
}

/* ========================================================== */
/* ===         RESPONSIVE POUR LES PETITS ÉCRANS          === */
/* ========================================================== */
/* Ces règles ne s'appliqueront que si la largeur de l'écran est de 768px ou moins (tablettes et mobiles) */

@media (max-width: 768px) {

    /* On change la direction de la flexbox en colonne */
    .story-section-card,
    .story-section-card.reverse {
        flex-direction: column; /* Les éléments s'empilent verticalement */
    }

    /* L'image prend maintenant toute la largeur et est plus petite */
    .story-card-image {
        max-width: 100%; /* L'image peut prendre toute la largeur de la carte */
        order: 1; /* L'image apparaît en premier, avant le texte */
    }
    
    /* Le texte prend aussi toute la largeur */
    .story-card-text {
        order: 2; /* Le texte apparaît après l'image */
    }
}