/* Réinitialisation des marges et paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Importation de la police gothique */
@font-face {
    font-family: 'OldLondon';
    src: url('../fonts/OldLondon.ttf') format('truetype');
}

/* Importation de la police Cinzel Decorative */
@font-face {
    font-family: 'Cinzel Decorative';
    src: url('../fonts/CinzelDecorative-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Importation de la police Bloody */
@font-face {
    font-family: 'Bloody';
    src: url('../fonts/Bloody.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Importation de la police Vampir */
@font-face {
    font-family: 'Vampir';
    src: url('../fonts/Vampir.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Importation de la police Dracul Vintage */
@font-face {
    font-family: 'Dracul Vintage';
    src: url('../fonts/Dracul Vintage .ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Importation de la police HelveticaNeueBlack. */
@font-face {
    font-family: 'HelveticaNeueBlack';
    src: url('../fonts/HelveticaNeueBlack.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Importation de la police HelveticaNeueMedium*/
@font-face {
    font-family: 'HelveticaNeueMedium';
    src: url('../fonts/HelveticaNeueMedium.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



/* Styles de base pour le corps de la page avec image d'arrière-plan */
body {
    background-color: #343a40;
    background-image: url('../images_background/background.png'); /* Chemin vers l'image d'arrière-plan PNG */
    background-size: cover; /* Pour que l'image couvre toute la page */
    background-position: center; /* Pour centrer l'image */
    background-repeat: no-repeat; /* Pour éviter la répétition de l'image */
    color: #ffffff;
}

/* Styles pour les liens de navigation */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 1);
}

/* Modifier le cadre noir autour de la zone de navigation */
.navbar {
   position: relative;
    z-index: 1000; /* S'assure que le menu a un z-index supérieur au contenu */	
    border: 2px solid transparent;
    background-image: linear-gradient(to bottom, #660000, #990000);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    height: 40px; /* Ajuster la hauteur selon tes besoins */
    padding: 20px 10px; /* Plus de padding vertical pour agrandir la barre */
    border-radius: 5px;
    box-shadow: none;
}




/* Styles pour les boutons personnalisés */
/* Styles pour tous les boutons personnalisés, incluant le bouton Login */
.btn-custom {
    margin: 5px;
    background-color: #cc0000; /* Rouge sang foncé */
    border: 1px solid black; /* Bordure noire */
    color: white;
    padding: 5px 10px; /* Réduire le padding pour rendre les boutons plus petits */
	font-family: 'Cinzel Decorative', serif;
	font-weight: bold; /* Mettre le texte en gras */
    font-size: 1.2rem; /* Diminuer la taille du texte */
    line-height: 1.2; /* Ajuster l'espacement vertical */
    text-decoration: none; /* Enlève le soulignement */
    height: auto; /* Assure que la hauteur du bouton s'ajuste automatiquement */
    border-radius: 5px; /* Coins arrondis */
}

.btn-custom:hover {
    background-color: #990000; /* Rouge plus foncé au survol */
}

.btn-login {
    margin: 5px;
    background-color: #cc0000; /* Rouge sang foncé */
    border: 1px solid black; /* Bordure noire */
    color: white;
    padding: 5px 10px; /* Réduire le padding pour rendre les boutons plus petits */
	/*font-family: 'Cinzel Decorative', serif;*/
	font-weight: bold; /* Mettre le texte en gras */
    font-size: 0.8rem; /* Diminuer la taille du texte */
    line-height: 1.2; /* Ajuster l'espacement vertical */
    text-decoration: none; /* Enlève le soulignement */
    height: auto; /* Assure que la hauteur du bouton s'ajuste automatiquement */
    border-radius: 5px; /* Coins arrondis */
}

.btn-login:hover {
    background-color: #990000; /* Rouge plus foncé au survol */
}

/* Styles pour les nouveaux boutons noirs */
.btn-extra {
    background-color: black; /* Fond noir */
    border: 2px solid black; /* Liseré blanc */
    color: white; /* Texte en blanc */
    padding: 4px 10px; /* Même padding que les autres boutons */
    font-size: 0.8rem; /* Taille du texte comme les autres boutons */
    text-decoration: none; /* Enlève le soulignement des liens */
    border-radius: 5px; /* Coins arrondis */
    margin-right: 10px; /* Un peu d'espace entre les boutons */
}

.btn-extra:hover {
    background-color: #333; /* Légère variation au survol */
    border-color: #ddd; /* Légère variation de la bordure au survol */
}


/* Styles pour les images du carrousel */
.carousel-item img {
    max-height: 400px; /* Ajustez cette valeur selon vos besoins */
    width: auto; /* Ajustez la largeur selon vos besoins */
    object-fit: cover; /* Pour que l'image remplisse le conteneur sans déformation */
    transition: none !important; /* Suppression de la transition */
	padding: 1px;
	border: 1.5px solid #990000;
	-moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

/* Styles pour le titre du site */
.site-title {
    /*font-family: 'Cinzel Decorative', serif;*/
	font-family: 'HelveticaNeueMedium', Helvetica,Arial,sans-serif;
    color: #050000; 
    font-size: 5rem; /* Taille du texte ajustée */
    text-align: center;
    margin-top: 20px;
	text-decoration: none;
    text-shadow: 
        -1px -1px 0 white, 
        1px -1px 0 #cc0000, 
        -1px 1px 0 #cc0000, 
        1px 1px 0 #cc0000;

}



.site-title:hover {
    color: #1f1d1d; /*  couleur au survol */
    text-decoration: none; /* Empêche le soulignement */
}

/* Nouvelle classe pour le titre de la page d'accueil */
.title-homepage {
    font-family: 'Dracul Vintage', serif;
    color: #990000; /* Rouge foncé */
    font-size: 3rem; /* Taille du texte ajustée */
    text-align: center;
    margin-top: 20px;
	text-decoration: none;
    text-shadow: 
        -0.5px -0.5px 0 white, 
        0.5px -0.5px 0 white, 
        -0.5px 0.5px 0 white, 
        0.5px 0.5px 0 white;
}

/* Styles pour centrer le conteneur */
.center-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre horizontalement */
    justify-content: center; /* Centre verticalement */
    padding: 20px;
}

/* Styles pour le pied de page collant */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body {
    flex: 1;
}

footer {
    margin-top: auto;
    background-color: #343a40;
    color: #ffffff;
    text-align: center;
    padding: 10px 0;
    width: 100%;
}

/* Styles pour le sous-titre */
.subtitle {
    font-size: 1.125rem; /* Ajuste la taille du texte en rem */
    font-style: italic;
    color: #ff0000; /* Rouge sang */
    margin-left: 0; /* Ajuste la marge gauche selon vos besoins */
    margin-bottom: 20px; /* Ajuste la marge inférieure selon vos besoins */
    text-align: left; /* Aligne le texte à gauche */
}

/* Styles pour centrer le carrousel avec une largeur spécifique */
.carousel-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}

/* Styles pour le texte de bienvenue */
.welcome-text {
    margin-left: 0; /* Ajuste la marge gauche selon vos besoins */
    margin-top: 20px; /* Ajuste la marge supérieure selon vos besoins */
    margin-bottom: 20px; /* Ajuste la marge inférieure selon vos besoins */
    text-align: left; /* Aligne le texte à gauche */
}

/* Styles pour le corps du texte */
.body-text {
    margin-left: 0; /* Ajuste la marge gauche selon vos besoins */
    margin-top: 20px; /* Ajuste la marge supérieure selon vos besoins */
    margin-bottom: 20px; /* Ajuste la marge inférieure selon vos besoins */
    text-align: left; /* Aligne le texte à gauche */
}

/* Pour styliser les drapeaux */
.language-selector img {
    width: 40px;
    height: 40px;
    margin-left: 10px;
}

/* Styles pour le message de cookies */
#cookieConsent {
  position: fixed;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 1000;
}

/*________________________________________________________________________________________________________________*/
/* Styles pour la page de profil du joueur */
.player-profile {
    max-width: 900px; /* Limite la largeur maximale à 900px */
    width: 38.33%; /* Fixe la largeur à un tiers de l'écran */
    min-width: 300px; /* Largeur minimale pour la lisibilité sur petits écrans */
    margin: 20px auto; /* Centre horizontalement avec une marge verticale */
    padding: 2rem; /* Ajoute de l'espace intérieur */
    background-color: #1c1c1c; /* Fond noir pour le profil */
    border-radius: 8px; /* Coins arrondis */
    color: #ffffff; /* Texte blanc pour contraste */
    text-align: center; /* Centre le texte */
}

/* Responsivité pour les écrans plus petits */
@media (max-width: 768px) {
    .player-profile {
        width: 90%; /* Prend presque tout l'écran sur les petits appareils */
    }
}

.profile-info {
    display: flex;
    flex-direction: column; /* Dispose les éléments en colonne */
    align-items: center; /* Centre horizontalement */
    margin: 0 20px; /* Marge gauche et droite */
}

.profile-picture {
    background-color: #555;
    padding: 0.2rem;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 200px;  /* Largeur fixe de l'image de profil */
    height: 200px; /* Hauteur fixe de l'image de profil */
}

.profile-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%; /* Pour maintenir la forme circulaire */
    object-fit: cover; /* S'assure que l'image remplit le conteneur sans distorsion */
}

.player-name {
	font-family: 'Dracul Vintage', serif;
    font-size: 4rem; /* Plus grand pour le nom */
    margin-bottom: -30px; /* Espace sous le nom */
	color: white;
	text-decoration: none;
    text-shadow: 
        -0.5px -0.5px 0 #990000, 
        0.5px -0.5px 0 #990000, 
        -0.5px 0.5px 0 #990000, 
        0.5px 0.5px 0 #990000;
}

.profile-description {
    font-size: 1.5rem; /* Plus grand pour la description */
    color: #ff0000; /* Rouge sang pour le texte de la description */
    margin-top: 2rem; /* Espace au-dessus de la description */
    display: flex;
    align-items: flex-start; /* Aligne "About :" avec le début du texte */
    max-width: 600px; /* Limite explicitement la largeur maximale du conteneur */
    flex-wrap: wrap; /* Permet au contenu de se répartir sur plusieurs lignes */
    overflow: hidden; /* Empêche l'élargissement excessif */
}

.profile-details p {
    font-size: 1.2rem; /* Plus grand pour les détails */
}

/* Assure que la page est responsive */
@media (max-width: 768px) {
    .profile-row {
        flex-direction: column; /* Empile les colonnes sur les petits écrans */
    }

    .player-name {
        font-size: 1.5rem; /* Réduire pour les petits écrans */
    }

    .profile-description {
        font-size: 1rem; /* Taille réduite sur les petits écrans */
    }

    .profile-details p {
        font-size: 1rem; /* Taille réduite sur les petits écrans */
    }
}


/*________________________________________________________________________________________________________________*/
/* Styles pour la page de profil du clan */
.clan-profile {
    max-width: 900px; /* Limite la largeur maximale à 900px */
    width: 38.33%; /* Fixe la largeur à un tiers de l'écran */
    min-width: 300px; /* Largeur minimale pour la lisibilité sur petits écrans */
    margin: 20px auto; /* Centre horizontalement avec une marge verticale */
    padding: 2rem; /* Ajoute de l'espace intérieur */
    background-color: #1c1c1c; /* Fond noir pour le profil */
    border-radius: 8px; /* Coins arrondis */
    color: #ffffff; /* Texte blanc pour contraste */
    text-align: center; /* Centre le texte */
}

/* Responsivité pour les écrans plus petits */
@media (max-width: 768px) {
    .clan-profile {
        width: 90%;
    }
}

.clan-info {
    display: flex;
    flex-direction: column; /* Dispose les éléments en colonne */
    align-items: center; /* Centre horizontalement */
    margin: 0 20px; /* Marge gauche et droite */
}

.clan-picture {
    background-color: #555;
    padding: 0.2rem;
    border-radius: 8px; /* Coins arrondis à 8px pour un effet carré avec arrondis */
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 200px;  /* Largeur fixe de l'image de profil */
    height: 200px; /* Hauteur fixe de l'image de profil */
}

.clan-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px; /* Correspond au même arrondi que le conteneur */
    object-fit: cover;
}

.clan-name {
    font-family: 'Dracul Vintage', serif;
    font-size: 4rem;
    margin-bottom: 2rem;
    color: white;
    text-decoration: none;
    text-shadow: 
        -0.5px -0.5px 0 #990000, 
        0.5px -0.5px 0 #990000, 
        -0.5px 0.5px 0 #990000, 
        0.5px 0.5px 0 #990000;
}

.clan-description {
    font-size: 1.5rem;
    color: #ff0000;
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    max-width: 600px;
    flex-wrap: wrap;
    overflow: hidden;
}

.clan-details p {
    font-size: 1.2rem;
}



.clan-members-container {
    max-width: 900px; /* Même largeur que le cadre principal */
    width: 38.33%;
    min-width: 300px;
    margin: 20px auto; /* Espace entre les deux cadres */
    padding: 2rem;
    background-color: #1c1c1c;
    border-radius: 8px;
    color: #ffffff;
    text-align: center;
}

.clan-members-title {
    font-family: 'Dracul Vintage', serif;
    font-size: 2rem;
    color: white;
    margin-bottom: 1rem;
    text-align: center;
}

.clan-members-list {
    font-size: 1rem; /* Taille de police pour les noms et XP */
    color: #ffffff;
    padding-left: 0;
    text-align: left;
    list-style-type: none; /* Supprime les puces */
}

.member-name-link {
   /* font-weight: bold; /*gras*/
    font-weight: normal
    color: #0000EE; /* Bleu par défaut pour les liens */
    text-decoration: none; /* Supprime le soulignement */
}

.member-name-link:hover {
    color: #ff0000; /* Rouge au survol */
    text-decoration: underline; /* Soulignement au survol */
}

.member-total-expertise {
    margin-left: 30px; /* Ajuste la valeur pour augmenter ou diminuer l'espace */
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.pagination a {
    color: #ffffff;
    padding: 10px;
    margin: 0 5px;
    text-decoration: none;
    border: 1px solid #555;
    border-radius: 4px;
}

.pagination a:hover {
    background-color: #333;
}




/* Responsivité pour les écrans plus petits */
@media (max-width: 768px) {
    .clan-row {
        flex-direction: column; /* Empile les colonnes sur les petits écrans */
    }

    .clan-name {
        font-size: 1.5rem;
    }

    .clan-description {
        font-size: 1rem;
    }

    .clan-details p {
        font-size: 1rem;
    }
}




/* Style pour le label "About :" en blanc */
.about-label {
    color: #ffffff; /* Blanc pour le label */
	font-size: 1.2rem; /* Ajuste la taille du texte pour le label */
    flex-shrink: 0; /* Empêche "About :" de se rétrécir */
    margin-right: 10px; /* Espace entre "About :" et le texte */
    white-space: nowrap; /* Empêche le label de se casser en plusieurs lignes */	
}

/* Style pour le contenu récupéré de la base de données */
.about-content {
    color: #ff0000; /* Rouge pour le contenu de "About" */
	font-size: 1.2rem; /* Ajuste la taille du texte pour le contenu */
    flex: 1; /* Le texte prend tout l'espace restant */
    max-width: 100%; /* Assure que le texte ne dépasse pas la largeur du conteneur */
    word-break: break-word; /* Coupe les mots trop longs */
    overflow-wrap: break-word; /* Casse les mots trop longs pour ne pas dépasser */
    white-space: normal; /* Permet au texte de se casser automatiquement */
    line-height: 1.5; /* Améliore la lisibilité */	
	
}

/*________________________________________________________________________________________________________________*/
/* Styles pour la page des résultats de recherche */
.search-title {
    font-size: 2rem; /* Taille de la police pour le titre */
    color: white; /* Couleur du texte */
    margin-bottom: 20px; /* Espace en dessous du titre */
}

.search-results-container {
    margin-top: 20px; /* Espace en haut du conteneur */
    text-align: center; /* Centre les résultats */
}

.search-results-container a {
    color: white; /* Couleur du texte pour les liens */
    font-size: 1.5rem; /* Taille de la police pour les liens */
    text-decoration: underline; /* Souligner les liens */
}

/* Ajout de la classe de style pour les boutons de connexion */
.btn-login-custom {
    margin: 5px;
    background-color: #007bff; /* Bleu par défaut de Bootstrap */
    border: none;
    color: white;
    padding: 10px 20px; /* Ajuste la hauteur et la largeur */
    font-size: 1rem; /* Ajuste la taille du texte en rem */
    border-radius: 5px; /* Bordures arrondies */
}

.btn-login-custom:hover {
    background-color: #0056b3; /* Bleu plus foncé pour le survol */
}

/* Styles pour le bouton de connexion et le modal */
.user-container {
    position: relative;
}

.modal-content {
    background-color: #1c1c1c;
    color: #ffffff;
}

.modal-header, .modal-footer {
    border: none;
}

.modal-title {
    color: #ffffff;
}

.btn-close {
    filter: invert(1);
}

/* Dropdown user menu styles */
.dropdown-menu {
    background-color: #1c1c1c;
    border: none;
}

.dropdown-item {
    color: #ffffff;
}

.dropdown-item:hover {
    background-color: #343a40;
}

.edit-profile {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #1c1c1c;
    border-radius: 8px;
    color: #ffffff;
}

.edit-profile label {
    display: block;
    margin-bottom: 10px;
    color: #ff0000; /* Rouge pour les labels */
}

.edit-profile textarea,
.edit-profile input[type="file"] {
    width: 100%;
    margin-bottom: 20px;
}

.edit-profile button {
    background-color: #cc0000;
    border: none;
    color: white;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
}

.edit-profile button:hover {
    background-color: #990000;
}

/* ________________________________________________________________________________________________________________ */
/* Section de styles génériques pour des utilisations globales sur le site */

/* Gros titre */
.heading-large {
    font-size: 3rem; /* Taille de la police pour les gros titres */
    font-weight: bold; /* Texte en gras */
    color: #ffffff; /* Couleur du texte */
    text-align: center; /* Centre le texte */
    margin-bottom: 20px; /* Espace en dessous du titre */
}

/* Titre */
.heading-medium {
    font-size: 2rem; /* Taille de la police pour les titres */
    font-weight: bold; /* Texte en gras */
    color: #ff0000; /* Couleur du texte */
    text-align: left; /* Texte aligné à gauche */
    margin-bottom: 15px; /* Espace en dessous du titre */
}

/* Sous-titre */
.heading-small {
    font-size: 1.5rem; /* Taille de la police pour les sous-titres */
    font-weight: bold; /* Texte en gras */
    color: #cc0000; /* Couleur du texte */
    text-align: left; /* Texte aligné à gauche */
    margin-bottom: 10px; /* Espace en dessous du sous-titre */
}

/* Paragraphe */
.paragraph {
    font-size: 1rem; /* Taille de la police pour les paragraphes */
    color: #ffffff; /* Couleur du texte */
    line-height: 1.6; /* Hauteur de ligne pour l'espacement entre les lignes */
    margin-bottom: 15px; /* Espace en dessous du paragraphe */
    text-align: justify; /* Justifie le texte */
}

/* Texte en italique */
.text-italic {
    font-style: italic; /* Italique */
    color: #ff0000; /* Couleur du texte */
}

/* Texte souligné */
.text-underline {
    text-decoration: underline; /* Soulignement */
    color: #ffffff; /* Couleur du texte */
}

/* Texte avec couleur d'arrière-plan */
.text-highlight {
    background-color: #ffcc00; /* Couleur de fond */
    color: #000000; /* Couleur du texte */
    padding: 5px; /* Espace intérieur autour du texte */
    border-radius: 3px; /* Coins arrondis */
}

/* Liste à puces */
.bullet-list {
    list-style-type: disc; /* Type de puce */
    color: #ffffff; /* Couleur du texte */
    margin-left: 20px; /* Marge à gauche pour l'indentation */
}

/* Liste numérotée */
.numbered-list {
    list-style-type: decimal; /* Type de numérotation */
    color: #ffffff; /* Couleur du texte */
    margin-left: 20px; /* Marge à gauche pour l'indentation */
}

/* Container pour mise en page à colonnes */
.column-container {
    display: flex; /* Utilise Flexbox pour la mise en page */
    flex-wrap: wrap; /* Permet le retour à la ligne des colonnes */
    gap: 20px; /* Espace entre les colonnes */
}

.column-1 {
    flex: 100%; /* Une seule colonne prend 100% de la largeur */
}

.column-2 {
    flex: 48%; /* Deux colonnes prennent chacune 48% de la largeur */
}

.column-3 {
    flex: 30%; /* Trois colonnes prennent chacune 30% de la largeur */
}

/* Nouveaux styles ajoutés pour plus de flexibilité */

/* Styles pour différents alignements d'images */
.img-left {
    float: left;
    margin-right: 15px;
}

.img-right {
    float: right;
    margin-left: 15px;
}

/* Réinitialiser les puces de liste pour les rapprocher du texte */
.styled-list {
    list-style-type: disc;
    margin: 0;
    padding: 0;
    margin-left: 1.5rem;
    text-align: left;
}

.styled-list li {
    margin-bottom: 5px;
}

/* Styles pour centrer le texte dans les sections */
.text-center {
    text-align: center;
}

/* Ajout de styles pour une section avec des images alignées */
.section-with-image {
    display: flex;
    align-items: center;
}

.section-with-image img {
    max-width: 200px;
    margin: 0 20px;
}

.section-with-image .text {
    flex: 1;
}

/* Styles de mise en page responsive */
@media (max-width: 768px) {
    .img-left,
    .img-right {
        float: none;
        margin: 0 auto;
        display: block;
    }

    .section-with-image {
        flex-direction: column;
    }

    .section-with-image img {
        margin-bottom: 15px;
    }
}

/* ________________________________________________________________________________________________________________ */
/* Styles pour la section d'édition du profil */

/* Styles pour la section d'affichage de l'image et du nom dans le profil */
.current-profile-info {
    display: flex; /* Utiliser flexbox pour aligner les éléments horizontalement */
    align-items: center; /* Aligner verticalement le nom et l'image */
    margin-bottom: 20px; /* Espace en dessous pour le formulaire */
}

.current-profile-picture {
    width: 150px; /* Largeur du conteneur de l'image */
    height: 150px; /* Hauteur du conteneur de l'image pour une forme carrée */
    border-radius: 15px; /* Angles arrondis pour un effet carré avec bords doux */
    overflow: hidden; /* Cache les parties de l'image qui dépassent */
}

.clan-profile-img {
    width: 100%; /* Remplit tout le conteneur */
    height: 100%; /* Remplit tout le conteneur */
    object-fit: cover; /* Remplit le conteneur sans distorsion */
}


.player-name-display {
    margin-left: 20px; /* Espace entre l'image et le nom */
    color: #ffffff; /* Couleur du texte pour le nom */
}

.body-name {
    font-size: 1.8rem; /* Taille de la police pour les paragraphes */
	font-family: 'OldLondon', serif;
    color: #800080; /* Couleur du texte */	
    margin-left: 0; /* Ajuste la marge gauche selon vos besoins */
    margin-top: 20px; /* Ajuste la marge supérieure selon vos besoins */
    margin-bottom: 20px; /* Ajuste la marge inférieure selon vos besoins */
    text-align: left; /* Aligne le texte à gauche */
}

/* ________________________________________________________________________________________________________________ */
/* Styles pour le formulaire de recherche */

/* Conteneur du formulaire de recherche */
.search-container {
    position: relative; /* Positionnement relatif pour ajuster le placement */
    display: inline-block; /* Permet au formulaire de rester dans son contexte */
    margin: 10px; /* Ajoute un peu de marge autour */
}

/* Style pour l'input du formulaire de recherche */
.search-input {
    padding: 2px 10px; /* Réduire le padding pour diminuer la taille */
    font-size: 0.8rem; /* Réduire la taille du texte */
    border: 2px solid #cc0000; /* Bordure rouge foncé */
    border-radius: 5px; /* Bordure arrondie */
    outline: none; /* Retire le contour par défaut au focus */
    width: 150px; /* Ajuster la largeur de l'input */
}

/* Style pour le bouton de recherche */
.search-btn {
    padding: 2px 10px; /* Réduire le padding pour diminuer la taille du bouton */
    background-color: #cc0000; /* Couleur de fond rouge sang */
    color: #ffffff; /* Texte en blanc */
    border: 2px solid #990000; /* Bordure rouge plus foncé */
    border-radius: 5px; /* Bordure arrondie */
    font-size: 0.8rem; /* Réduire la taille du texte */
    cursor: pointer; /* Affiche un pointeur */
    margin-left: 5px; /* Un peu d'espace entre l'input et le bouton */
}

.search-btn:hover {
    background-color: #990000; /* Rouge encore plus foncé au survol */
}

}


/*________________________________________________________________________________________________________________*/
/* Barre de progression pour Vital Liquid */
/* Barre de progression pour Vital Liquid */
.vital-liquid-bar {
    margin: 10px 0 50px 0; /* Augmente ici pour plus d'espace en bas */
    text-align: center;
}

.progress {
    background-color: #2e2e2e; /* Couleur de fond de la jauge */
    border-radius: 5px;
    height: 15px;
    width: 100%; /* Changer à 80% pour s'adapter au conteneur */
    margin: 0 auto; /* Centre la barre horizontalement */
    overflow: hidden;
}

.progress-bar {
    /*background-color: #ff0000; /* Couleur de la jauge (rouge sang) */
	background-image: linear-gradient(to right, #ff0000, #660000);
    height: 100%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: width 0.3s ease;
}

/*________________________________________________________________________________________________________________*/
/*________________________________________________________________________________________________________________*/
/* Styles pour le classement des stats vampires */
.vampire-ranking-container {
    width: 52vw; /* 38% de la largeur de l'écran */
    margin: 20px auto;
    padding: 20px;
    background-color: #1a1a1a;
    border-radius: 8px;
    color: #ffffff;
    text-align: center;
}

.vampire-ranking-title {
    font-family: 'Cinzel Decorative', serif;
    color: white;
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-shadow: -1px -1px 0 #660000, 1px 1px 0 #660000;
	font-style: italic; /* Ajout pour mettre le texte en italique */
}

.vampire-row {
    display: flex;
    align-items: center;
    background-color: #333;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.vampire-rank {
    font-size: 1.5rem;
    color: #cc0000;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

.vampire-names {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vampire-name {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    color: #ffffff;
    text-decoration: none;
}

.vampire-pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.vampire-pagination-link {
    color: #ffffff;
    background-color: #990000;
    padding: 10px;
}

/* Styles pour le classement des stats lycans */

.lycan-ranking-container {
    width: 52vw;
    margin: 20px auto;
    padding: 20px;
    background-color: #1a1a1a;
    border-radius: 8px;
    color: #ffffff;
    text-align: center;
}

.lycan-ranking-title {
    font-family: 'Cinzel Decorative', serif;
    color: white;
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-shadow: -1px -1px 0 #003366, 1px 1px 0 #ff6f00;
    font-style: italic;
}

.lycan-row {
    display: flex;
    align-items: center;
    background-color: #333;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.lycan-rank {
    font-size: 1.5rem;
    color: #ff6f00;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

.lycan-names {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lycan-name {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    color: #ffffff;
    text-decoration: none;
}

.lycan-pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.lycan-pagination-link {
    color: #ffffff;
    background-color: #336600;
    padding: 10px;
    margin: 0 5px;
    border-radius: 5px;
    text-decoration: none;
}

.lycan-pagination-current {
    color: #ffffff;
    background-color: #669900;
    padding: 10px;
    margin: 0 5px;
    border-radius: 5px;
}


/* Styles pour le classement des stats hybrides */
.hybrid-ranking-container {
    width: 52vw;
    margin: 20px auto;
    padding: 20px;
    background-color: #1a1a1a;
    border-radius: 8px;
    color: #ffffff;
    text-align: center;
}

.hybrid-ranking-title {
    font-family: 'Cinzel Decorative', serif;
    color: white;
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-shadow: -1px -1px 0 #660066, 1px 1px 0 #660066;
    font-style: italic;
}

.hybrid-row {
    display: flex;
    align-items: center;
    background-color: #333;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.hybrid-rank {
    font-size: 1.5rem;
    color: #cc33cc;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

.hybrid-names {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hybrid-name {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    color: #ffffff;
    text-decoration: none;
}

.hybrid-pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.hybrid-pagination-link {
    color: #ffffff;
    background-color: #993399;
    padding: 10px;
    margin: 0 5px;
    border-radius: 5px;
    text-decoration: none;
}

.hybrid-pagination-current {
    color: #ffffff;
    background-color: #cc66cc;
    padding: 10px;
    margin: 0 5px;
    border-radius: 5px;
}

/* Styles pour le classement des stats humains */
.human-ranking-container {
    width: 52vw;
    margin: 20px auto;
    padding: 20px;
    background-color: #1a1a1a;
    border-radius: 8px;
    color: #ffffff;
    text-align: center;
}

.human-ranking-title {
    font-family: 'Cinzel Decorative', serif;
    color: white;
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-shadow: -1px -1px 0 #006600, 1px 1px 0 #006600;
    font-style: italic;
}

.human-row {
    display: flex;
    align-items: center;
    background-color: #333;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.human-rank {
    font-size: 1.5rem;
    color: #99cc00;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

.human-names {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.human-name {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    color: #ffffff;
    text-decoration: none;
}

.human-pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.human-pagination-link {
    color: #ffffff;
    background-color: #006600;
    padding: 10px;
    margin: 0 5px;
    border-radius: 5px;
    text-decoration: none;
}

.human-pagination-current {
    color: #ffffff;
    background-color: #009900;
    padding: 10px;
    margin: 0 5px;
    border-radius: 5px;
}

/* Styles pour le classement des clans */
.clan-stats-container {
    width: 52vw;
    margin: 20px auto;
    padding: 20px;
    background-color: #2d2d2d;
    border-radius: 8px;
    color: #ffffff;
    text-align: center;
}

.clan-stats-title {
    font-family: 'Cinzel Decorative', serif;
    color: #ffcc00;
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-shadow: -1px -1px 0 #333300, 1px 1px 0 #333300;
    font-style: italic;
}

.clan-stats-row {
    display: flex;
    align-items: center;
    background-color: #444;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.clan-stats-rank {
    font-size: 1.5rem;
    color: #ff9900;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

.clan-stats-name {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    color: #ffffff;
    text-decoration: none;
    margin-right: 15px; /* Ajoute de l'espace entre les noms */
}

.clan-stats-name {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    color: #ffffff;
    text-decoration: none;
}

.clan-stats-pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.clan-stats-pagination-link {
    color: #ffffff;
    background-color: #663300;
    padding: 10px;
    margin: 0 5px;
    border-radius: 5px;
    text-decoration: none;
}

.clan-stats-pagination-link:hover {
    background-color: #804000;
}

.clan-stats-pagination-current {
    color: #ffffff;
    background-color: #b35900;
    padding: 10px;
    margin: 0 5px;
    border-radius: 5px;
}



/* Styles pour le tableau des clans */
.tableauclan-main {
    margin-top: 20px;
}

.tableauclan-title {
    margin-bottom: 20px;
    font-size: 2.5rem;
}

.tableauclan-container {
    margin-top: 20px;
}

.tableauclan-table th,
.tableauclan-table td {
    text-align: center;
    padding: 12px; /* Ajoute du padding pour espacer le contenu */
}

/* Style des miniatures */
.tableauclan-table td img.tableauclan-thumbnail {
    display: block;
    margin: 0 auto;
    max-width: 100px;
}

/* Alternance de couleurs pour une meilleure lisibilité */
.tableauclan-table tr:nth-child(odd) {
    background-color: #2b2f35; /* Couleur plus contrastée pour les lignes impaires */
}

.tableauclan-table tr:nth-child(even) {
    background-color: #353a41; /* Couleur plus contrastée pour les lignes paires */
}

/* Effet au survol */
.tableauclan-table tr:hover {
    background-color: #4e545a; /* Couleur plus claire pour le survol */
}

/* Style pour épaissir les séparations des lignes */
.tableauclan-table tr {
    border-bottom: 2px solid #5b6167; /* Couleur et épaisseur pour une séparation plus nette */
}