/* CSS Perso */

.media-body {
    max-width: 200px; /* Ajuste selon tes besoins */
    overflow: hidden; 
    white-space: normal; 
    text-overflow: ellipsis; 
}

.text-center-uppercase-thin {
    text-align: center;            /* Centre le texte */
    text-transform: uppercase;     /* Met le texte en majuscules */
    font-weight: 300;              /* Utilise une police à caractère fin (ajuste si nécessaire) */
}

.text-left-uppercase-thin {
    text-align: left;            /* Centre le texte */
    text-transform: uppercase;     /* Met le texte en majuscules */
    font-weight: 300;              /* Utilise une police à caractère fin (ajuste si nécessaire) */
}

.text-right-uppercase-thin {
    text-align: right;            /* Centre le texte */
    text-transform: uppercase;     /* Met le texte en majuscules */
    font-weight: 300;              /* Utilise une police à caractère fin (ajuste si nécessaire) */
}

.card-body a {
    color: #000; /* Changez cela en la couleur de votre choix */
    text-decoration: none; /* Pour enlever le soulignement si désiré */
}

.card-body a:hover {
    color: #007bff; /* Couleur au survol, changez-la comme souhaité */
    text-decoration: underline; /* Ajoute un soulignement au survol, optionnel */
}

/* Styles pour les jaquettes */
.img-vignette {
    width: 190px; /* Largeur de l'image */
    height: 285px; /* Hauteur de l'image */
	border-radius: 8px; /* arrondi de l'image */
    object-fit: cover; /* Pour garder les proportions */
    margin-bottom: -8px; /* Espace en bas de l'image */
    border: 3px solid white; /* Cadre blanc autour de l'image */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Ombre portée */
}

/* Styles pour les jaquettes */
.img-jaquette {
    width: 60px; /* Largeur de l'image */
    height: 90px; /* Hauteur de l'image */
	border-radius: 8px; /* arrondi de l'image */
    object-fit: cover; /* Pour garder les proportions */
    margin-top: 0px; /* Espace en bas de l'image */
	margin-bottom: 0px; /* Espace en bas de l'image */
    border: 3px solid white; /* Cadre blanc autour de l'image */
    box-shadow: none; /* Pas d'ombre portée */
}

/* Styles spécifiques pour l'image de codec */
.codec-img {
    width: 35px; /* Largeur de l'image de codec */
    height: auto; /* Maintient les proportions */
    margin-right: 5px; /* Espace à droite de l'image */
    vertical-align: middle; /* Aligne verticalement l'image avec le texte */
    box-shadow: none; /* Supprime l'ombre pour l'image de codec */
}

.footer-media {
    background-color: #EFEFEF; /* Couleur de fond douce */
    padding: 10px 15px; /* Espace intérieur ajusté */
    font-size: 0.85rem; /* Texte de petite taille */
    display: flex;
    justify-content: space-between;
    align-items: left;
    border-top: 1px solid #e0e0e0; /* Ligne de séparation discrète */
}

.footer-media div {
    text-align: left; /* Aligne le texte à gauche */
    margin: 0; /* Enlève toute marge par défaut */
}

@media (max-width: 576px) {
    .footer-media {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .footer-media .footer-item {
        justify-content: center;
    }
}

.card-media {
	margin: 15px 15px; /* Espace entre les cartes avec une marge personnalisée */
}

.col-xl-2 {
	display: flex; /* Pour centrer les cartes */
    justify-content: center;
}

.star {
	font-size: 11px; /* Ajustez la taille des étoiles */
    color: blue; /* Couleur des étoiles pleines */
    margin-right: 0px; /* Espacement entre les étoiles */
}

.star.empty {
	color: lightgray; /* Couleur des étoiles vides */
}
	
.film-title-container {
	min-height: 40px; /* Hauteur minimale pour le conteneur du titre */
    overflow: hidden; /* Cache le texte qui dépasse */
}

.image-container {
    position: relative; /* Position relative pour le conteneur de l'image */
}

.pagination .btn {
    margin: 0 5px;
}

.pagination .btn:hover {
    background-color: #007bff; /* Couleur de fond au survol */
    color: white; /* Couleur du texte au survol */
}

.pagination .btn-success {
    background-color: #28a745; /* Couleur de fond pour la page active */
    color: white; /* Couleur du texte pour la page active */
}

/* Centrer la pagination dans son conteneur */
.pagination-container {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

/* Styles par défaut pour les boutons */
.pagination .btn {
    padding: 8px 10px;
    font-size: 16px;
    margin: 0 4px;
}

.tooltip-btn {
    position: relative; /* Nécessaire pour le positionnement du tooltip */
}

.tooltip-text {
    visibility: hidden; /* Masquer le tooltip par défaut */
    width: 90px; /* Largeur du tooltip */
    background-color: white; /* Couleur de fond */
    color: #000; /* Couleur du texte */
    text-align: center; /* Alignement du texte */
    border-radius: 5px; /* Coins arrondis */
    padding: 5px; /* Espacement interne */
    position: absolute; /* Positionnement absolu */
    z-index: 1; /* Assurez-vous qu'il est au-dessus d'autres éléments */
    bottom: 125%; /* Positionne le tooltip au-dessus de l'élément */
    left: 90%; /* Centre le tooltip par rapport à l'élément */
    margin-left: -60px; /* Ajuste pour centrer le tooltip */
    opacity: 0; /* Rendre le tooltip transparent */
    transition: opacity 0.3s; /* Transition pour l'apparition */
}

.tooltip-btn:hover .tooltip-text {
    visibility: visible; /* Rendre visible lors du survol */
    opacity: 1; /* Rendre opaque */
}

/* Affiche l'infobulle au survol */
.tooltip-btn:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.toast-warning {
	background-color: #ffcc00 !important; /* Fond orange */
    color: #000000 !important; /* Texte en noir */
}

.fixed-alert {
    position: fixed;
    top: 0; /* Pour le placer en haut de la page */
    left: 0;
    right: 0;
    z-index: 1050; /* Assurez-vous qu'il est au-dessus d'autres éléments */
    margin: 0;
    padding: 15px;
    text-align: center;
    font-size: 1.25rem; /* Taille de police pour la lisibilité */
}
.avatar-img {
    width: 55px;           /* Largeur de l'avatar */
    height: 55px;          /* Hauteur de l'avatar */
    border-radius: 50%;    /* Rend l'image ronde */
    object-fit: cover;      /* Ajuste l'image pour éviter les déformations */
    border: 2px solid transparent; /* Bordure par défaut */
    transition: border-color 0.3s; /* Transition douce pour le changement de bordure */
}

.card-movie {
    margin: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.info-section {
    padding: 20px;
}
.info-section h5 {
    font-size: 1.3em;
    color: #333;
}
.info-section p {
    font-size: 1em;
    color: #555;
}
.info-label {
    font-weight: bold;
    color: #666;
}

.card-movie {
    border: none;
    background-color: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-left: 5px; /* Réduire la marge gauche */
    margin-right: 5px; /* Réduire la marge droite */
    width: 100%; /* S'assurer que la carte prend toute la largeur disponible */
}

.fanart {
    height: 380px;
    background-size: cover;
    background-position: top center; /* Centrage horizontal et alignement en haut */
    background-color: #a0b3c5; /* Couleur de fond gris bleu */
    position: relative;
}

.poster {
    position: absolute;
    top: 300px;
    left: 20px;
    width: 110px;
    height: 160px;
    border: 3px solid #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.title-section {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    margin: 20px 0 10px;
    color: #6c757d; /* Couleur assortie aux genres */
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.2;
}

.info-bar {
    text-align: center;
    font-size: 0.8em;
    color: #555;
    line-height: 1.1;
    padding: 5px 0;
}

.info-section {
    text-align: center;
    font-size: 0.75em;
    color: #555;
    line-height: 1.1; /* Interligne resserré */
    padding: 2px 0;
	text-align: right;
	margin-right: 10px; /* Espace à droite du texte */
}

.note-section {
    text-align: center;
    font-size: 1.1em;
    color: #555;
    line-height: 1.1; /* Interligne resserré */
    padding: 2px 0;
	text-align: left;
	margin-left: 10px; /* Espace à droite du texte */
}

.action-bar {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.action-bar button {
    font-size: 1em;
    margin: 0 8px;
    border: none;
    padding: 8px;
    color: #fff;
    border-radius: 5px;
}

.card-movie .action-bar {
    display: flex;
    justify-content: space-evenly;
    border-top: 1px solid #ddd;
    padding: 10px 0;
    background-color: #f9f9f9;
}

.card-movie .action-bar button {
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
    font-size: 1.4em;
    transition: color 0.2s;
}

.card-movie .action-bar button:hover {
    color: #007bff;
}

.card-movie .synopsis-section {
    padding: 15px;
    font-size: 0.95em;
    line-height: 1.6;
    color: #333;
}

.title-section {
    position: relative;  /* Position relative pour éviter que le texte se superpose */
    top: 0px;  /* Positionnement juste sous le fanart */
    left: 135px;  /* Repousser de 5px par rapport à la jaquette */
    right: 10px;  /* Limiter la largeur du texte à droite */
    text-align: right;  /* Aligner à droite */
    font-size: 1.5em;
    font-weight: bold;
    color: #6c757d; /* Couleur assortie aux genres */
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.2;
    margin: 0;  /* Retirer les marges */
	margin-left: 5px;
    max-width: calc(100% - 145px);  /* Limiter la largeur en tenant compte du décalage */
    word-wrap: break-word;  /* Assurer une rupture de ligne correcte */
    padding-top: 20px;  /* Créer un espace entre le fanart et le texte */
	margin-bottom: 20px;
}

@media (max-width: 576px) {
    .title-section {
        font-size: 1.0em;  /* Réduire la taille de la police sur mobile */
        top: 0px;  /* Ajuster la position sur les petits écrans */
        left: 105px;  /* Repousser encore un peu le texte sur les petits écrans */
        max-width: calc(100% - 115px);  /* Limiter la largeur sur mobile */
        padding-top: 10px;  /* Réduire l'espace supérieur pour les petits écrans */
		margin-bottom: 80px;
    }
}

.tooltip-btn .tooltip-text {
    font-size: 0.9em;  /* Garder la taille du texte uniforme */
}

button:disabled .tooltip-text {
    font-size: 0.9em;  /* Assurer que le texte du tooltip reste cohérent même quand le bouton est désactivé */
    color: #6c757d;  /* Une couleur gris pour le texte du tooltip du bouton désactivé */
}

.icon-favoris i {
    font-size: 1.6em; /* Ajuster la taille de l'icône (par exemple 1.5x la taille par défaut) */
}

.icon-favoris {
    padding: 10px 12px; /* Ajuster légèrement le padding si nécessaire pour garder le bouton cohérent */
}

/* Container principal pour tous les épisodes */
.episodes-container {
    display: flex;
    flex-direction: column; /* Les épisodes sont disposés verticalement */
    gap: 20px; /* Espacement entre les épisodes */
    padding: 20px; /* Ajout de marges intérieures */
    max-width: 800px; /* Limite la largeur maximale du container */
    margin: 0 auto; /* Centre le container horizontalement */
    border: 0px solid #ddd; /* Ajout d'une bordure pour mieux délimiter */
    border-radius: 8px; /* Arrondi des coins */
}

/* Style pour chaque élément d'épisode */
.episode-item {
    padding: 15px; /* Ajoute de l'espace autour du contenu de chaque épisode */
    background-color: #f9f9f9; /* Fond léger pour délimiter chaque épisode */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Titre de l'épisode */
.episode-title {
    font-size: 20px; /* Taille de la police */
    color: #6c757d; /* Couleur gris clair */
    font-weight: bold; /* Poids du texte normal */
    line-height: 1.4; /* Espacement entre les lignes légèrement réduit */
    margin-bottom: 10px; /* Espacement sous le titre */
}

/* Conteneur individuel pour chaque épisode */
.episode-item {
    padding: 15px;
    border: 1px solid #ddd; /* Bordure légère autour de chaque épisode */
    border-radius: 8px;  /* Coins arrondis */
    background-color: #f9f9f9; /* Fond légèrement gris */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* Ombre légère pour les éléments */
}

.img-episode {
    width: 200px; /* Taille de l'image */
    height: auto;
    display: block;
    margin-top: 10px;
	margin-bottom:10px;
    border-radius: 10px; /* Arrondir les bords de l'image, si tu veux */
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Ombre portée */
    transition: box-shadow 0.3s ease; /* Transition pour un effet plus doux au survol */
}

.img-episode:hover {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); /* Ombre plus marquée au survol */
}


/* Style pour le texte des informations */
.small-text {
    font-size: 14px; /* Taille de la police plus petite */
    line-height: 1.6; /* Espacement entre les lignes */
    margin-bottom: 8px; /* Espacement entre les paragraphes */
}

/* Limitation de la largeur du texte de synopsis */
.small-text p {
    max-width: 100%; /* Empêche le dépassement horizontal */
    word-wrap: break-word; /* Coupe les mots longs */
}

.small-text-tight {
    line-height: 0.8; /* Ajuste cette valeur pour un interligne plus serré */
}

/* Centrer verticalement le contenu des cellules */
.table td, .table th {
    vertical-align: middle !important;
}

/* Pour colorer les icônes en blanc */
.icon-white {
  color: #fff;
  font-size: 14px; /* Réduit la taille des icônes */
}

/* Style des boutons */
.btn-icon {
  width: 30px; /* Réduit la largeur des boutons */
  height: 30px; /* Réduit la hauteur des boutons */
  padding: 0; /* Supprime les marges internes */
  font-size: 12px; /* Taille réduite des icônes */
  display: inline-flex; /* Affiche les boutons en ligne */
  justify-content: center;
  align-items: center;
  border-radius: 50%; /* Assure un cercle parfait */
  transition: background-color 0.3s, box-shadow 0.3s;
  margin: 0 3px; /* Réduit l'espacement entre les boutons */
}

/* Effet de survol */
.btn-icon:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Ombre plus légère pour l'effet hover */
}

/* Couleurs spécifiques à chaque bouton */
.btn-danger {
  background-color: #e74c3c;
  border-color: #e74c3c;
}

.btn-success {
  background-color: #2ecc71;
  border-color: #2ecc71;
}

.btn-primary {
  background-color: #3498db;
  border-color: #3498db;
}

/* Effet de survol avec gris clair */
.btn-danger:hover, .btn-success:hover, .btn-primary:hover {
  background-color: #bdc3c7; /* Gris clair */
  border-color: #bdc3c7; /* Gris clair */
}

/* Style pour le bouton de retour en haut */
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #007bff;  /* Couleur primary bleue */
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;  /* Initialement caché */
  transform: translateY(100px);  /* Légèrement en bas pour l'animation */
}

#backToTop.show {
  opacity: 1;  /* Affiché quand il est activé */
  transform: translateY(0);  /* Remonte à sa position */
}

#backToTop:hover {
  background-color: #0056b3;  /* Une couleur plus foncée pour le survol */
  transform: scale(1.1);  /* Légère augmentation de la taille lors du survol */
}

/* Ajout d'un effet de "pulse" au survol pour un effet plus dynamique */
#backToTop:active {
  animation: pulse 0.3s ease-in-out;
}

/* Animation de "pulse" sur le bouton au survol */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* CSS pour désactiver visuellement les boutons */
.disabled-link {
    pointer-events: none; /* Désactive l'interaction avec l'élément */
    opacity: 0.6; /* Rendre le bouton semi-transparent */
    cursor: not-allowed; /* Changer le curseur pour montrer que l'action est impossible */
}

/* CSS pour zoumer jaquette */
.image-container {
    position: relative;
    display: inline-block;
}

.img-jaquette {
    transition: transform 0.5s ease; /* Ajoute une transition douce */
    cursor: pointer; /* Change le curseur quand on survole l'image */
}

.image-container:hover .img-jaquette {
    transform: scale(1.6); /* Agrandit l'image sur le survol */
    z-index: 10; /* Met l'image au-dessus des autres éléments */
}

.highlight {
    background-color: #ffe5e5; /* Rouge pâle */
}