.section-img-canapes{
    padding: 130px 90px 150px 100px;
}
.bg-img-canapes{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:"bg-card-1 bg-card-2 bg-card-3 bg-card-4 bg-card-5"
                        "bg-card-6 bg-card-7 bg-card-8 bg-card-9 bg-card-10";
    row-gap: 130px;
}
.bg-img-canapes > 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, .bg-card-5, .bg-card-6, .bg-card-7, .bg-card-8, .bg-card-9, .bg-card-10{
    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, .card-5, .card-6, .card-7, .card-8, .card-9, .card-10{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 100%;
}
.card-1:hover, .card-2:hover, .card-3:hover, .card-4:hover, .card-5:hover, .card-6:hover, .card-7:hover, .card-8:hover, .card-9:hover, .card-10: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/v1749220297/canape1_fovkle.jpg');
}
.bg-card-2{
    grid-area: bg-card-2;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220304/canape2_wqglim.jpg');
}
.bg-card-3{
    grid-area: bg-card-3;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220353/canape6-update_LE_upscale_balanced_x4_fbwgsg.jpg');
}
.bg-card-4{
    grid-area: bg-card-4;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220353/canape7-update_ygcv9k.jpg');
}
.bg-card-5{
    grid-area: bg-card-5;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220309/canape3_y5atd6.jpg');
}
.bg-card-6{
    grid-area: bg-card-6;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220352/canape5-update_dek0ia.png');
}
.bg-card-7{
    grid-area: bg-card-7;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220351/canape4_dd8gu6.jpg');
}
.bg-card-8{
    grid-area: bg-card-8;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220354/canape8_yaue6r.jpg');
}
.bg-card-9{
    grid-area: bg-card-9;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220355/canape9-update_puqwvy.jpg');
}
.bg-card-10{
    grid-area: bg-card-10;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220356/canape10-update_pe1v5f.jpg');
}

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

.card-1, .card-2, .card-3, .card-4, .card-5, .card-6, .card-7, .card-8, .card-9, .card-10{
    background-color: rgba(0, 0, 0, 0.4);
}


        /* CAROUSEL IMAGES CANAPES */

.carousel {
    position: relative;
    width: 70%;
    height: 100%;
    margin: auto;
    overflow: hidden;
    border-radius: 8px;
  }
  
  /* Track contenant toutes les slides */
  .carousel-track {
    display: flex;
    width: 100%; /* 5 slides */
    transition: transform 0.6s ease-in-out;
  }
  
  /* Chaque slide */
.slide {
  width: 100%;
  height: 700px;
  flex-shrink: 0;
}
  

.slide-img-1{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220297/canape1_fovkle.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-2{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220304/canape2_wqglim.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-3{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220353/canape6-update_LE_upscale_balanced_x4_fbwgsg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-4{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220353/canape7-update_ygcv9k.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-5{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220309/canape3_y5atd6.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-6{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220352/canape5-update_dek0ia.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-7{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220351/canape4_dd8gu6.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-8{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220354/canape8_yaue6r.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-9{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220355/canape9-update_puqwvy.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-10{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220356/canape10-update_pe1v5f.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
  
  /* Masquer les radios */
  input[type="radio"] {
    display: none;
  }
  
  /* Transformations selon le slide sélectionné */
  #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%);
  }
  #slide5:checked ~ .carousel-track {
    transform: translateX(-400%);
  }
  #slide6:checked ~ .carousel-track {
    transform: translateX(-500%);
  }
  #slide7:checked ~ .carousel-track {
    transform: translateX(-600%);
  }
  #slide8:checked ~ .carousel-track {
    transform: translateX(-700%);
  }
  #slide9:checked ~ .carousel-track {
    transform: translateX(-800%);
  }
  #slide10:checked ~ .carousel-track {
    transform: translateX(-900%);
  }
  
  /* Thumbnails */
  .carousel-thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
  }
  .carousel-thumbnails label {
    width: 60px;
    height: 40px;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s, transform 0.3s;
  }
  .carousel-thumbnails label:hover {
    opacity: 1;
    transform: scale(1.05);
  }
  .carousel-thumbnails img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* 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"],
  #slide5:checked ~ .carousel-thumbnails label[for="slide5"],
  #slide6:checked ~ .carousel-thumbnails label[for="slide6"],
  #slide7:checked ~ .carousel-thumbnails label[for="slide7"],
  #slide8:checked ~ .carousel-thumbnails label[for="slide8"],
  #slide9:checked ~ .carousel-thumbnails label[for="slide9"],
  #slide10:checked ~ .carousel-thumbnails label[for="slide10"] {
    opacity: 1;
    outline: 2px solid #fff;
  }

                /* FIN CAROUSEL IMAGES CANAPES */

                /* MODAL IMAGES CANAPES */

.modal{
    --bs-modal-width: 80%;
}
.modal-content{
    border: none;
    border-radius: 10px !important;
}
.modal-header{
    border-bottom: none;
}
.modal-title{
    letter-spacing: 3px;
    color: rgba(191, 27, 51, 1.0);
    font-weight: normal !important;
    text-transform: uppercase;
}

                /* FIN MODAL IMAGES CANAPES */
 
 
 

                /* RESPONSIVE */
@media screen and (max-width: 600px){
    .section-img-canapes{
        padding: 100px 0px 100px 0px;
    }
    .bg-img-canapes{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:"bg-card-1"
                            "bg-card-2"
                            "bg-card-3"
                            "bg-card-4"
                            "bg-card-5"
                            "bg-card-6"
                            "bg-card-7"
                            "bg-card-8"
                            "bg-card-9"
                            "bg-card-10";
        row-gap: 130px;
        width: fit-content;
        margin: 0px auto;
        
    }
}
                /* FIN RESPONSIVE */