.section-img-siege{
    padding: 130px 90px 150px 100px;
}

.bg-img-siege{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:"bg-card-1 bg-card-2 bg-card-3 bg-card-4";
    width: fit-content;
    column-gap: 50px;
}
.bg-img-siege > div p{
    background-color: rgba(0, 0, 0, 0.1);
    padding: 10px 0px 10px 10px;
}
.bg-card-1, .bg-card-2, .bg-card-3, .bg-card-4{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.card-1, .card-2, .card-3, .card-4{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 100%;
}
.card-1:hover, .card-2:hover, .card-3:hover, .card-4:hover{
    cursor: pointer !important;
    background-color: transparent;
    transition: 0.5s;
}

.bg-card-1{
    grid-area: bg-card-1;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1751026045/siege-blanc_zaznim.jpg');
}
.bg-card-2{
    grid-area: bg-card-2;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1751026043/siege-beige_oemowf.jpg');
}
.bg-card-3{
    grid-area: bg-card-3;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1751026043/siege-rose_z3qpzb.jpg');
}
.bg-card-4{
    grid-area: bg-card-4;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1751026043/siege-rouge_qhd1io.jpg');
}

.bg-img-siege > div{
    width: 300px;
    height: 400px;
}

.card-1, .card-2, .card-3, .card-4{
    border: none;
    background-color: rgba(0, 0, 0, 0.4);
}

/* MODAL + CAOURSEL */

.slide-img-1{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1751026045/siege-blanc_zaznim.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-2{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1751026043/siege-beige_oemowf.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-3{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1751026043/siege-rose_z3qpzb.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-4{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1751026043/siege-rouge_qhd1io.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#slide1:checked ~ .carousel-track {
    transform: translateX(0%);
  }
#slide2:checked ~ .carousel-track {
    transform: translateX(-100%);
}
#slide3:checked ~ .carousel-track {
    transform: translateX(-200%);
}
#slide4:checked ~ .carousel-track {
    transform: translateX(-300%);
}

/* Highlight du thumbnail actif */
#slide1:checked ~ .carousel-thumbnails label[for="slide1"],
#slide2:checked ~ .carousel-thumbnails label[for="slide2"],
#slide3:checked ~ .carousel-thumbnails label[for="slide3"],
#slide4:checked ~ .carousel-thumbnails label[for="slide4"] {
  opacity: 1;
  outline: 2px solid #fff;
}

/* FIN MODAL + CAROUSEL */



/* RESPONSIVE */

@media screen and (max-width: 600px){
    .section-img-siege{
        padding: 100px 0px 100px 0px;
    }
    .bg-img-siege{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:"bg-card-1"
                            "bg-card-2"
                            "bg-card-3"
                            "bg-card-4";
        row-gap: 130px;
        width: fit-content;
        margin: 0px auto;
        
    }
}

/* FIN RESPONSIVE */