h2 {
    margin-top: 0;
}


/* ==========================================================
   SWIPER GLOBAL
   ========================================================== */

.swiper {
    width: 100%;
    height: auto;
}

.swiper-wrapper {
    align-items: center;
}

.swiper-container {
    width: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ==========================================================
   SLIDER LOGOS CLIENTS
   ========================================================== */

#swiper-logo-client {
    width: 100%;
    overflow: hidden;
}


/*
 * IMPORTANT :
 * pas de "gap" CSS ici.
 *
 * L'espacement est géré directement dans Swiper
 * avec spaceBetween.
 *
 * Cela évite les erreurs de calcul de largeur
 * responsables du vide en fin de carousel.
 */
#swiper-logo-client .swiper-wrapper {
    gap: 0 !important;

    /*
     * Rend le déplacement réellement continu
     * au lieu d'avoir une accélération/décélération
     * entre chaque slide.
     */
    transition-timing-function: linear !important;
}


/*
 * Largeur naturelle des logos.
 * Swiper calcule donc automatiquement combien
 * de logos peuvent apparaître à l'écran.
 */
#swiper-logo-client .swiper-slide {
    width: auto !important;
    flex-shrink: 0;
}


.logo-client {
    display: flex !important;
    justify-content: center;
    align-items: center;

    width: auto !important;
}


.img-logo-client {
    display: block;

    max-height: 75px;
    max-width: 200px;

    width: auto;
    height: auto;

    cursor: pointer;

    user-select: none;

    -webkit-user-drag: none;
}


/* ==========================================================
   GALERIES RÉALISATIONS
   ========================================================== */

.gallery .swiper-wrapper {
    gap: 0;
}


.gallery {
    position: absolute;

    width: 100%;

    transform: rotateY(-90deg);

    transition: transform 0.5s ease 0.5s;

    background: #262433;

    z-index: -3;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

    align-items: center;

    height: calc(100vh - 273.5px);
}


.gallery .swiper-slide {
    margin: 0;
}


.gallery .swiper-slide .flex-container {
    width: 100%;

    box-sizing: border-box;

    min-width: 0;

    margin: 0;
}


.gallery.active {
    transform: rotateY(0);

    z-index: 10;
}


.gallery.inactive {
    transform: rotateY(90deg);

    z-index: 2;

    transition: transform 0.5s ease;
}


/* ==========================================================
   CONTENU GALERIES
   ========================================================== */

.flex-container {
    display: flex;
}


.image-column {
    flex: 1;

    max-width: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    padding-left: 35px;
}


.text-column {
    flex: 1;

    max-width: 50%;

    align-items: center;

    justify-content: center;

    display: flex;

    flex-direction: column;

    text-align: center;

    padding-right: 35px;

    padding-left: 25px;
}


.text-column h3 {
    margin: 0 0 1em 0;
}


.text-column p {
    margin: 0;
}


.image-column img {
    max-height: 45vh;

    width: auto;

    height: auto;
}


button {
    margin: 1em 0 0 0 !important;
}


/* ==========================================================
   FLÈCHE SCROLLDOWN
   ========================================================== */

polygon,
path {
    fill: #726d80;
}


.arrow {
    cursor: pointer;

    overflow: visible;

    polygon,
    path {
        transition: all 0.5s ease;
    }

    &:hover polygon,
    &:hover path {
        transition: all 1s ease;

        fill: white;
    }

    &:hover .arrow {
        animation: arrow-anim 2.5s ease infinite;
    }

    &:hover .arrow-fixed {
        animation: arrow-fixed-anim 2.5s ease infinite;
    }
}


/* Animation flèche */

@keyframes arrow-anim {

    0% {
        opacity: 1;
        transform: translateY(0);
    }

    5% {
        transform: translateY(-0.1rem);
    }

    100% {
        transform: translateY(1rem);
        opacity: 0;
    }

}


@keyframes arrow-fixed-anim {

    5% {
        opacity: 0;
    }

    20% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }

}


/* ==========================================================
   BOUTONS SWIPER
   ========================================================== */

.swiper-button-next,
.swiper-button-prev {
    transition: 1s ease;

    width: 50px;

    height: 50px;

    top: 60% !important;
}


polygon,
path {
    transition: 1s;
}


.swiper-button-next:hover polygon,
.swiper-button-next:hover path,
.swiper-button-prev:hover polygon,
.swiper-button-prev:hover path {
    fill: #dddddd;
}


.swiper-button-next::after,
.swiper-button-prev::after {
    content: '' !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1000px) {

    .img-logo-client {
        max-height: 75px;

        max-width: 140px;
    }


    h2 {
        margin-top: 1em;
    }


    .gallery {
height: calc(100vh - 230px);
    justify-content: inherit;
    margin: 0 12.5px;
    width: calc(100vw - 25px);
    }


    .image-column {
        margin: 0 auto 1em auto;

        height: 30vh;

        padding: 0;
    }


    .image-column,
    .text-column {
        max-width: 100%;

        padding: 0;
    }


    .text-column p {
        width: calc(100% - 50px);

        margin: auto;
    }


    .image-column img {
        height: 30vh;
    }


    .flex-container {
        flex-direction: column;
    }


    button {
        margin: 1em 0 2em 0 !important;
    }

}


/* ==========================================================
   POSITION NAVIGATION SWIPER
   ========================================================== */

.swiper-horizontal {

    &.swiper-rtl .swiper-button-prev,
    &.swiper-rtl ~ .swiper-button-prev,
    & ~ .swiper-button-next,
    & .swiper-button-next {

        left: auto;

        right: var(--swiper-navigation-sides-offset, 10px);
    }

}


.swiper-horizontal {

    &.swiper-rtl .swiper-button-next,
    &.swiper-rtl ~ .swiper-button-next,
    & ~ .swiper-button-prev,
    & .swiper-button-prev {

        left: var(--swiper-navigation-sides-offset, 10px);

        right: auto;
    }

}