.container-categorie h1{
    text-align: left; /* Alignement à gauche */
    padding: 0px; /* Supprimer le padding */
    margin: 1em; /* Ajouter une marge pour espacer du carrousel */
}

.container-carrousel{
    width: 1200px; /* Largeur fixe */
    position: relative; /* Pour positionner les boutons */
}

.container-carrousel .carrousel {
    margin-left: 60px; /* Espace pour le bouton gauche */
    margin-right: 60px; /* Espace pour le bouton droit */
    margin-bottom: 35px; /* Espace en bas */
    overflow: hidden; /* Masquer le débordement */
}

.container-carrousel ul {
    list-style: none; /* Supprimer les puces */
    margin: 0; /* Supprimer la marge */
    padding: 0; /* Supprimer le padding */
}

.container-carrousel li {
    transition: transform 0.3s ease; /* Animation fluide au survol */
}

.container-carrousel li:hover {
    transform: scale(1.05); /* Agrandir légèrement au survol */
}

.container-carrousel li figure{
    margin-left: 15px; /* Espace entre les images */
    margin-right: 15px; /* Espace entre les images */
}

.container-carrousel li img {
    width: 100%; /* Image responsive */
    border-radius: 10px; /* Coins arrondis */
}

.container-carrousel .carrousel .swiper-button-prev,
.container-carrousel .carrousel .swiper-button-next {
    width: 60px; /* largeur du bouton */
    height: 75px; /* hauteur du bouton */
    background-color: rgba(9,0,0,0.5);  /* fond semi-transparent */
    border-radius: 10%; /* coins arrondis */                 
    display: flex; /* Utilisation de flexbox */               
    align-items: center; /* centrage vertical */
    justify-content: center; /* centrage horizontal */      
    color: #CA5858; /* couleur du texte */                  
    font-size: 30px; /* taille du texte */               
    font-weight: bold; /* texte en gras */            
    text-shadow: 0 0 5px rgba(0,0,0,0.7); /* ombre portée */
    position: absolute; /* positionnement absolu */
    padding-top: 50px; /* espace en haut */
    padding-bottom: 50px; /* espace en bas */
    top: 50%; /* centré verticalement */                    
    transform: translateY(-50%); /* ajustement pour le centrage */
    z-index: 10; /* au-dessus des autres éléments */
    transition: background-color 0.3s, transform 0.3s; /* transition pour le hover */
}

.container-carrousel .carrousel .swiper-button-prev:hover,
.container-carrousel .carrousel .swiper-button-next:hover {
    background-color: rgba(9,0,0,0.8); /* fond plus opaque au hover */
    transform: translateY(-50%) scale(1.1); /* scale en gardant le centrage */
}


.container-carrousel .carrousel .swiper-pagination-bullet{
    width: 15px; /* Largeur des bulles de pagination */
    height: 15px; /* Hauteur des bulles de pagination */
    opacity: 0.5; /* Opacité par défaut */
    background: white; /* Couleur des bulles de pagination */
}

.container-carrousel .carrousel .swiper-pagination-bullet-active{
    opacity: 1; /* Opacité de la bulle active */
}


/*TOP CSS*/

.top-slide {
    position: relative; /* Pour positionner le chiffre */
    overflow: visible; /* Permet au chiffre de dépasser */
}

.top-rank {
    position: absolute; /* Positionnement absolu */
    right: -75px; /* décale le chiffre à gauche */
    bottom: -15px; /* alignement bas */   
    font-size: 200px; /* Taille très grande */
    font-weight: 900; /* Très gras */
    line-height: 1; /* Hauteur de ligne */
    color: rgba(255,255,255,0.75); /* Couleur blanche semi-transparente */
    z-index: 1; /* Permet de mettre derrière l'image */
    pointer-events: none; /* Ignore les interactions */
    text-shadow: 0 10px 30px rgba(0,0,0,0.7); /* Ombre portée */
}


.top-slide figure {
    position: relative; /* Pour le positionnement du chiffre */
    z-index: 2; /* Permet de mettre devant le chiffre */
}

.top-slide img {
    display: block; /* Supprimer l'espace en bas de l'image */
    border-radius: 6px; /* Arrondit légèrement */
}