/* début de toutes les photos */
/* full width image section */
.fullwidth-images-section {
    position: sticky;
    z-index: 2;
    top: 0;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    display: none;
}

.carousel-view {
    width: 100dvw;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.75);
    box-shadow: 0 0 80px 40px black;
    object-fit: cover;
}

.carousel-view img {
    width: 80%;
    height: 80%;
    text-align: center;
    object-fit: contain;
    display: block;
}

/* boutons prev et next */
.btn-next,
.btn-prev {
    position: absolute;
    z-index: 1;
    top: 50%;
    height: 5dvw;
    width: 5dvw;
    background-color: black;
    border: solid var(--main-accent-color);
    padding: 0;
    color: white;
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.75);
    transform: translateX(0);
    transition: transform 0.5s cubic-bezier(.33,.07,.19,.94);
}

.btn-prev {
    left: 0;
    border-radius: 0 50% 50% 0;
    border-width: 1px 1px 1px 0;
}

.btn-next {
    right: 0;
    border-radius: 50% 0 0 50%;
    border-width: 1px 0 1px 1px;
}

/* animation des boutons */
.btn-next:hover {
    transform: translateX(20%);
    transition: transform 0.5s cubic-bezier(.33,.07,.19,.94);
}

.btn-prev:hover {
    transform: translateX(-20%);
    transition: transform 0.5s cubic-bezier(.33,.07,.19,.94);
}
/* Fin animation des boutons */

/* Flèches des boutons prev & next */
.arrow-right,
.arrow-left{
    position: relative;
    top: 0;
    display: block;
    width: 1.5dvw;
    height: 1.5dvw;
    border-top: 2px solid white;
    border-left: 2px solid white;
}
.arrow-right{
    transform: rotate(135deg);
    left: 30%;
}

.arrow-left{
    transform: rotate(-45deg);
    left: 30%;
}
/* FIN Flèches des boutons prev & next */

/* Images preview */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    height: 10dvw;
    width: fit-content;
    opacity: 0.2;
    box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.25);
    pointer-events: none;
    transition: transform 1s cubic-bezier(.33,.07,.19,.94);
}

.carousel-prev img,
.carousel-next img {
    height: 10dvw;
    width: auto;
}

.carousel-prev {
    transform: translateX(-25dvw) translateY(-25%);
}

.carousel-next {
    transform: translateX(125dvw) translateY(-25%);
}
/* Fin images preview */

/* animations des photos de préview */
.btn-next:hover + .carousel-next,
.btn-prev:hover + .carousel-prev {
    opacity: 1;
}

.btn-next:hover + .carousel-next {
    transform: translateX(90dvw) translateX(-100%) translateY(-25%);
    transition: transform 0.75  s cubic-bezier(0,.22,.5,1);
}

.btn-prev:hover + .carousel-prev {
    transform: translateX(10dvw) translateY(-25%);
    transition: transform 0.75s cubic-bezier(0,.22,.5,1);
}
/* Fin animations des photos de préview */

/* Fermeture du Carousel */
.carousel-close {
    position: absolute;
    right: 5dvw;
    top: 5.3dvw;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.carousel-close:hover {
    box-shadow: none;
}

/* croix du menu */
.close {
    width: 50px;
    height: 50px;
        opacity: 1;
}

.close:before, .close:after {
    position: absolute;
    content: ' ';
    height: 70px;
    width: 2px;
    border-radius: 2px;
    background-color: var(--main-accent-color);
}

.close:before {
    transform: rotate(45deg);
}

.close:after {
    transform: rotate(-45deg);
}
/* fin de la croix du menu */
/* FIN boutons prev et next */

/*toutes toutes les photos*/
.all-images {
    position: relative;
    z-index: 1;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: auto auto auto auto;
    flex-wrap: wrap;
    width: 90dvw;
    border-left: 1px solid var(--main-accent-color);
    border-right: 1px solid var(--main-accent-color);
    padding: 0 2.5dvw;
}

.images-containers {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.all-images img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    scale: 100%;
    transition: scale 1s ease;
}

.all-images img:hover {
    scale: 115%;
    transition: scale 2s ease;
}
/* fin des photos */
/* fin de full width image section */

@media (max-width: 768px) {
    .all-images {
        grid-template-columns: auto auto;
    }
}

@media (max-width: 425px) {
    .all-images {
        grid-template-columns: auto;
    }
}