.slideshow-container {
            position: relative;
            min-width: 600px;
            max-width: 1000px;
            width: fit-content;
            height: 200px;
           
            overflow: hidden;
            display: flex;
            align-items: center;
            border: 2px solid #ffffff44;
            border-radius: 8px;
            transition: 0.3s ease;
        }

        .slideshow-container:hover {
            box-shadow: 7px 7px rgba(255, 255, 255, 0.359);
            border: 2px solid #ffffff;
        }

        .slideshow-container:hover .prev {
            transform: scale(130%);
        }

        .slideshow-container:hover .next {
            transform: scale(130%);
        }

        .slides {
            overflow-x: scroll ;
            display: none;
            height: 100%;
            width: 100%;
            text-align: center;
            align-content: center;
        }


        .slides::-webkit-scrollbar {
            min-width: none;
            height: 9px;
            border: 1px solid transparent;
            background-color: transparent;
          }
          
          .slides::-webkit-scrollbar-track {
            background: transparent;
            border: none;
          }
          
          .slides::-webkit-scrollbar-corner {
            background: transparent;
            border: none;
          }
          
          /* Personnalise le bloc de défilement (thumb) */
          .slides::-webkit-scrollbar-thumb {
            background-color: #1367bc74; /* Couleur du bloc de défilement */
            border: none; /* Assure qu'il n'y ait pas de contour */
          }



        .prev,
        .next {
            cursor: pointer;
            -webkit-user-select: none;
            color: white;
            user-select: none;
            text-decoration: none;
            width: 9%;
            height: 100%;
            text-align: center;
            align-content: center;
            transition: 0.3s ease;
        }

        .prev:hover {
            text-shadow: 8px 0px rgb(78, 179, 230);
        }

        .next:hover {
            text-shadow: -8px 0px rgb(78, 179, 230);
        }

        .prev:hover,
        .next:hover {
            cursor: pointer;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.08);

        }


        .slide.active {
            display: block;
        }

        .dots-container {
            padding-left: 2%;
            text-align: left;
            position: absolute;
            flex: 1;
            top: 10px;
            width: 100%;
        }

        .dot {
            height: 10px;
            width: 10px;
            margin: 0 4px;
            background-color: whitesmoke;
            border-radius: 50%;
            display: inline-block;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .dot.active {
            background-color: rgb(14, 173, 188);
        }