/* Styles généraux */
/* global.css */
div.rating-container {
margin-bottom: 30px !important;
}

body {
    padding-top: 110px !important; /* Ajoutez un padding en haut pour compenser la hauteur du menu */
    font-family: 'Rajdhani', sans-serif !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    background-size: cover !important; /* Pas besoin de cover, on veut la répéter */
    background-position: 0 0 !important; /* Position d'origine en haut à gauche */
    background-attachment: fixed !important; /* Garde l'image fixe lors du défilement */
    background-repeat: repeat !important; /* Fond répété */
    display: flex !important;
    flex-direction: column !important;
    min-height: 90vh !important; /* Assure que le body prend au moins toute la hauteur de l'écran */
    z-index: -1;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.35;
    background-image: url('../images/background/background_site.webp');
    background-size: cover !important; /* Pas besoin de cover */
    background-position: center !important; /* Position d'origine en haut à gauche */
    background-repeat: no-repeat !important; /* Répétition de l'image */
    z-index: -2; /* Assure que l'overlay est derrière tout le contenu */
}


/* Styles sur tablettes */
@media screen and (max-width: 1024px) {
    body::before {
    background-repeat: repeat !important;
    background-size: 100% !important; /* Élargir l'image sur les tablettes pour garder une bonne couverture */
    background-position: center;
    background-size: cover !important; /* Cela garantit que l'image de fond couvre toute la zone */
    }
}

/* Styles sur mobiles */
@media screen and (max-width: 768px) {
    body::before {
    background-repeat: repeat !important;
    background-size: cover !important; /* Cela garantit que l'image de fond couvre toute la zone */
    background-size: 100% !important; /* Réduire l'image pour les petits écrans comme les mobiles */
    background-position: center;
    }
}

/* Animation de rotation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden; /* Empêche tout défilement horizontal sur la page */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    flex: 1; /* Permet au contenu de prendre toute la hauteur disponible */
}

strong {
    color: #a35aff; /* 🔥 Remplace par la couleur de ton choix */
}

h1 {
    color: #cca402 !important; /* 🔥 Remplace par la couleur de ton choix */
}

h2 {
    color: #cca402; /* 🔥 Remplace par la couleur de ton choix */
}

h3 {
    color: #a35aff; /* 🔥 Remplace par la couleur de ton choix */
}

label {
    font-weight: bold;
    color: #a35aff;
}

.form-label {
    font-weight: bold;
    color: #a35aff;
}

.form-check-label {
    color: #ffffff !important; /* Remplace par la couleur de ton choix */
}

.form-check-input:checked {
    background-color: #790404; /* Rouge */
    border-color: #790404; /* Bordure rouge */
}

p.form-control-plaintext {
    color: #ffffff !important; /* Remplace #FF0000 par la couleur souhaitée */
}

p.text-muted.text-center {
    color: #ffffff !important; /* Remplace #FF0000 par la couleur souhaitée */

}

p {
    color: #ffffff !important; /* Remplace #FF0000 par la couleur souhaitée */

}

small.text-muted {
color:#bcb9b9 !important;
}

.card a {
    text-decoration: none; /* Enlève le soulignement du lien */
    color: inherit; /* Garde la couleur de texte du parent (pas de couleur spécifique pour les liens) */
}

#photo-limit-message {
    color: #ffffff !important; /* Remplacez par la couleur souhaitée */
}

p.small.text-muted {
    color: #ffffff !important; /* Remplacez par la couleur souhaitée */
}


span.rating-count {
    color: #a35aff !important; /* Remplace #FF0000 par la couleur souhaitée */
}

/* Styles pour les messages d'alerte */
.alert-custom {
    max-width: 400px; /* Limite la largeur */
    margin: 10px auto; /* Centre le message */
    padding: 12px 15px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}



/* 📌 Changer la couleur de tous les boutons .btn-primary */
.menu button {
    background-color: #790404 !important; /* 🔥 Change la couleur ici */
    border-color: #a80303 !important; /* 🔥 Bordure assortie */
    color: white !important; /* 🔥 Couleur du texte */
}

/* 📌 Effet au survol */
.menu button:hover {
    background-color: #a50404 !important; /* 🔥 Couleur plus foncée au survol */
    border-color: #a80303 !important;
}

/* 📌 Effet lorsqu'on clique sur le bouton */
.menu button:active {
    background-color: #a80303 !important;
    border-color: #790404 !important;
}

.btn {
margin: 3px;
}
/* 📌 Changer la couleur de tous les boutons .btn-primary */
.btn-primary {
    background-color: #093600 !important; /* 🔥 Change la couleur ici */
    border-color: #093600 !important; /* 🔥 Bordure assortie */
    color: white !important; /* 🔥 Couleur du texte */
}

/* 📌 Effet au survol */
.btn-primary:hover {
    background-color: #105c01 !important; /* 🔥 Couleur plus foncée au survol */
    border-color: #105c01 !important;
}

/* 📌 Effet lorsqu'on clique sur le bouton */
.btn-primary:active {
    background-color: #105c01 !important;
    border-color: #093600 !important;
}

/* 📌 Changer la couleur de tous les boutons .btn-primary */
.btn-warning {
    background-color: #864801 !important; /* 🔥 Change la couleur ici */
    border-color: #864801 !important; /* 🔥 Bordure assortie */
    color: white !important; /* 🔥 Couleur du texte */
}

/* 📌 Effet au survol */
.btn-warning:hover {
    background-color: #d37101 !important; /* 🔥 Couleur plus foncée au survol */
    border-color: #d37101 !important;
    color: white !important; /* 🔥 Couleur du texte */
}

/* 📌 Effet lorsqu'on clique sur le bouton */
.btn-warning:active {
    background-color: #d37101 !important;
    border-color: #8c3d00 !important;
}
/* 📌 Changer la couleur de tous les boutons .btn-primary */
.btn-danger {
    background-color: #790202 !important; /* 🔥 Change la couleur ici */
    border-color: #790202 !important; /* 🔥 Bordure assortie */
    color: white !important; /* 🔥 Couleur du texte */
}

/* 📌 Effet au survol */
.btn-danger:hover {
    background-color: #9e0303 !important; /* 🔥 Couleur plus foncée au survol */
    border-color: #9e0303 !important;
}

/* 📌 Effet lorsqu'on clique sur le bouton */
.btn-danger:active {
    background-color: #9e0303 !important;
    border-color: #790202 !important;
}
/* 📌 Changer la couleur de tous les boutons .btn-primary */
.btn-info {
    background-color: #16014e !important; /* 🔥 Change la couleur ici */
    border-color: #16014e !important; /* 🔥 Bordure assortie */
    color: white !important; /* 🔥 Couleur du texte */
}

/* 📌 Effet au survol */
.btn-info:hover {
    background-color: #24037e !important; /* 🔥 Couleur plus foncée au survol */
    border-color: #24037e !important;
    color: white !important; /* 🔥 Couleur du texte */
}

/* 📌 Effet lorsqu'on clique sur le bouton */
.btn-info:active {
    background-color: #24037e !important;
    border-color: #16014e !important;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre horizontalement */
    justify-content: center; /* Centre verticalement */
    gap: 10px; /* Espacement uniforme entre les boutons */
    width: 100%;
    max-width: 250px; /* Largeur maximale des boutons */
    margin: 0 auto; /* Centre l'ensemble des boutons */
    margin-bottom: 20px;
}

/* Même taille exacte pour tous les boutons d'action */
.action-buttons .btn,
.action-buttons form button.btn {
  display: block;              /* évite inline-block qui peut “shrink” */
  width: 100%;
  max-width: 200px;            /* ou width:200px si tu veux fixe */
  height: auto;
  box-sizing: border-box;      /* padding/border inclus dans la largeur */
  margin: 0 !important;        /* ← enlève les 3px qui te restaient */
  padding: 6px 12px;           /* garde le rendu Bootstrap */
}

/* au cas où le <form> ajoute sa propre marge par défaut */
.action-buttons form { margin: 0; }


.action-buttons form {
    display: flex;
    justify-content: center; /* Centre le bouton dans le formulaire */
}

.action-buttons form button {
    width: 100%;
    height: 40px; /* Hauteur uniforme */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
}

/* Icônes bien alignées */
.action-buttons .btn i,
.action-buttons form button i {
    margin-right: 5px; /* Espacement entre l'icône et le texte */
}

/* Assure que TOUS les boutons ont la même largeur et hauteur */
.action-buttons .btn,
.action-buttons form {
    width: 100%; /* Largeur uniforme pour tous les boutons */
    max-width: 200px; /* Ajuste la taille maximale */
}

/* Bouton Patreon rond, positionné en haut à droite */
.patreon-circle {
  position: absolute;           /* fixe par rapport à la fenêtre */
  transform: translate(-50%); /* décale de moitié de sa propre taille */
  display: inline-block;     /* ne prend que la place de l’image */
  z-index: 1000;
  cursor: pointer;
  transition: transform 0.2s;
}

.patreon-circle:hover {
  transform: translate(-50%) scale(1.1);
}

.patreon-circle img {
  display: block;
  width: 15rem;    /* ou la taille que vous préférez */
  height: auto;
  border-radius: 30px;  /* facultatif */
}


/* Style général pour la modale */
.modal-content {
        margin-top: 100px;
    background-color: #1d1d1d; /* Fond sombre de la modale */
    color: #fff; /* Texte blanc pour la lisibilité */
    border-radius: 10px; /* Coins arrondis */
    border: 0px solid #ffffff; /* Bordure rouge autour de la modale */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Ombre douce autour de la modale */
}

/* Titre de la modale */
.modal-header {
    background-color: #790404; /* Fond rouge de la barre de titre */
    color: white; /* Texte blanc dans l'entête */
    padding: 15px; /* Espacement intérieur */
    border-radius: 10px 10px 0 0; /* Coins arrondis en haut */
}

.modal-title {
    font-weight: bold;
    font-size: 1.25rem;
}

/* Corps de la modale */
.modal-body {
    background-color: #2b2b2b; /* Fond gris foncé pour le corps */
    padding: 20px;
    font-size: 1rem;
    text-align: center;
}

/* Pied de la modale */
.modal-footer {
    background-color: #1d1d1d; /* Fond sombre */
    border-top: 1px solid #790404; /* Bordure rouge en haut du pied de page */
    padding: 15px;
    display: flex;
    justify-content: center;
}

/* Bouton de fermeture */
.btn-close {
    background-color: #790404; /* Fond rouge pour le bouton de fermeture */
    border-color: #790404; /* Bordure rouge pour le bouton */
}

.btn-close:hover {
    background-color: #a50404; /* Couleur plus foncée au survol */
    border-color: #a50404; /* Bordure plus foncée au survol */
}

/* Bouton de fermeture dans la modale */
.modal-footer .btn {
    background-color: #790404;
    border-color: #790404;
    color: white;
    font-weight: bold;
}

.modal-footer .btn:hover {
    background-color: #a50404;
    border-color: #a50404;
}

/* L'overlay (couche sombre derrière la modale) */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.75); /* Opacité à 75% pour l'effet sombre */
}

/* Style pour les liens dans la modale */
.modal-body a {
    color: #e0b803;       /* Changer la couleur des liens en jaune */
    text-decoration: none; /* Supprimer la soulignure des liens */
}

.modal-body a:hover {
    color: #ffd000;  /* Changer la couleur au survol pour un effet de survol */
    text-decoration: underline; /* Ajouter une soulignure au survol */
}

/* ======= Étoiles de notation ======= */
.rating-stars {
    font-size: 16px;
    margin-top: 10px;
}

.rating-stars .star {
    font-size: 20px;
    display: inline-block;
    width: 1em;
    text-align: center;
}

.rating-stars .star.filled {
    color: #ffd700; /* Étoile pleine dorée */
}

.rating-stars .star.half {
    position: relative;
    color: #ffd700;
}

.rating-stars .star.half::before {
    content: '★';  /* Demi-étoile dorée */
    position: absolute;
    width: 50%;
    overflow: hidden;
    color: #ffd700;
}

.rating-stars .star.empty {
    color: #ccc; /* Étoile vide */
}

.rating-count {
    font-size: 14px;
    color: #666;
    margin-left: 10px;
}

header h1 {
    font-weight: bold;
    letter-spacing: 2px;
}

#about img {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

html {
    overflow-y: scroll; /* Forcer l'affichage de la barre de scroll */
}

body.modal-open {
    padding-right: 0 !important;
}


main {
    flex: 1; /* Permet au contenu principal de pousser le footer en bas */
}

.footer {
    margin-top:  auto !important; /* Force le footer en bas de la page */
    width: 100%; /* Assure que le footer prend toute la largeur */
    background-color: #000000 !important;
    box-shadow: 0 0 15px rgb(255 255 255);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    margin-top: 20px;
}

.footer-content {
    max-width: 1200px; /* Pour que le texte soit centré et pas trop large */
    margin: 0 auto;
}

.footer-link {
    color: #ffcc00; /* Couleur dorée */
    text-decoration: none; /* Supprime le soulignement */
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

.footer-link:hover {
    color: #ffffff; /* Devient blanc au survol */
    text-decoration: underline;
}

ul#MediaTabs.nav.nav-pills {
background-color: #00000000;
border-radius: 10px !important;
}

a#screenshots-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#videos-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#photos-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#artworks-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#similarGames-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#dlc-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#expansions-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#standaloneExpansions-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#remasters-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#remakes-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#ports-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#bundles-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#logos-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#similarlego-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#stats-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#users-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#barcode-updates-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#maintenance-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#newsletter-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#gestion-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#annonces-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#jeux-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}


a#logs-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bod;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#ticket-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}

a#tokens-tab.nav-link.active {
/* box-shadow: 0 4px 8px rgb(255 255 255); */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #00000000 !important; /* Remplace 'yourColor' par ta couleur */
}