*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

#slider{

    width:calc(100% - 80px);
    max-width:1300px;

    height:550px;

    margin:40px auto;

    overflow:hidden;

    position:relative;

    border-radius:10px;

    box-shadow:0 10px 30px rgba(0,0,0,.3);

}

@media (max-width: 768px){

    #slider{

        width:calc(100% - 32px);

        height:60vw;

        max-height:450px;

    }

}

.slides{

    display:flex;

    height:100%;

    transition:transform .6s ease;

}

.slide{

    flex:0 0 100%;

    height:100%;

    position:relative;

}

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* Texte */

.caption{

    position:absolute;

    bottom:40px;

    left:40px;

    right:40px;

    color:white;

    font-size:36px;

    font-weight:bold;

    text-shadow:2px 2px 8px black;

}

@media (max-width: 768px){

    .caption{

        bottom:16px;

        left:16px;

        right:16px;

        font-size:20px;

    }

}

/* Flèches */

#prev, #next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.25);

    color:white;

    font-size:35px;

    cursor:pointer;

    transition:.3s;

    backdrop-filter:blur(5px);

}

#prev:hover, #next:hover{

    background:rgba(255,255,255,.5);

}

#prev{

    left:20px;

}

#next{

    right:20px;

}

/* Points */

.dots{

    position:absolute;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:100;

}

.dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:rgba(255,255,255,.5);

    cursor:pointer;

}

.dot.active{

    background:white;

}