/** Slider **/
.slider {
}

.slider .slider__list {
}

.slider .slide {
    display: none;
    width: 100%;
    height: 1049px;
}


.slider .slide .slide__image {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}


.slider .slide .slide__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.slider .slide .slide__content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 1780px;
    padding: 0 25px;
    z-index: 100;
}

.slider .slide .slide__content .slide__container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}


.slider .slide .slide__title {
    width: 100%;
    font-family: "Libre Bodoni", serif;
    color: var(--color-white);
    font-size: clamp(22px, 4vw, 45px);
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 700;
}

.slider .slide .slide__description {
    width: 100%;
    margin: 21px 0 0 0;
    color: var(--color-white);
    line-height: 1.3;
    font-size: clamp(16px, 2vw, 32px);
}

.slider .slide .btn {
    width: 100%;
    max-width: 450px;
    font-size: clamp(14px, 2vw, 20px);
    margin: 16px 0 0 0;
    background: var(--color-red);
}

.slider .slide .btn:hover {
    text-decoration: none;
}

.slider .slide[data-type="first"] {
    background:var(--color-blue-light);
}
.slider .slide[data-type="first"]::before {
    content: '';
    width: 100%;
    height: 200px;
    max-height: 24%;
    position: absolute;
    bottom: 0;
    left: 0;

    background: url("/wp-content/uploads/bottom-left.png") no-repeat bottom left;
    background-size: contain;
    z-index: 10;
}

.slider .slide[data-type="first"]::after {
    content: '';
    width: 100%;
    height: 200px;
    max-height: 24%;
    position: absolute;
    top: 0;
    right: 50%;
    background: url("/wp-content/uploads/top-right.png") no-repeat top right;
    background-size: contain;
    z-index: 10;
}

.slider .slide[data-type="first"] .slide__content {
}

.slider .slide[data-type="first"] .slide__content .slide__container {
    max-width: 50%;
    padding-right: 50px;
}
.slider .slide[data-type="second"] {
    background:rgb(238,238,238);
}
.slider .slide[data-type="second"] .slide__content {
}
.slider .slide[data-type="second"]::before {
    content: '';
    width: 100%;
    height: 200px;
    max-height: 24%;
    position: absolute;
    bottom: 0;
    left: 0;

    background: url("/wp-content/uploads/bottom-left.png") no-repeat bottom left;
    background-size: contain;
    z-index: 10;
}

.slider .slide[data-type="second"]::after {
    content: '';
    width: 100%;
    height: 200px;
    max-height: 24%;
    position: absolute;
    top: 0;
    right: 0;
    background: url("/wp-content/uploads/top-right.png") no-repeat top right;
    background-size: contain;
    z-index: 10;
}
.slider .slide[data-type="second"] .slide__content .slide__container {
    max-width: 50%;
}

.slider .slide[data-type="second"] .slide__image::before {
    content: '';
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(-90deg, #D9D9D900 0, #BDBDBDCC 80%);
    z-index: 50;
}

.slider .slide[data-type="second"] .slide__title {
    color: var(--color-blue);
}

.slider .slide[data-type="second"] .slide__description {
    color: var(--color-blue);
}

.slider .slide[data-type="third"] {
    background:#6AC5D1;
}
.slider .slide[data-type="third"]::before {
    content: '';
    width: 100%;
    height: 200px;
    max-height: 24%;
    position: absolute;
    bottom: 0;
    left: 50%;

    background: url("/wp-content/uploads/bottom-left.png") no-repeat bottom left;
    background-size: contain;
    z-index: 10;
}

.slider .slide[data-type="third"]::after {
    content: '';
    width: 100%;
    height: 200px;
    max-height: 24%;
    position: absolute;
    top: 0;
    right: 0;
    background: url("/wp-content/uploads/top-right.png") no-repeat top right;
    background-size: contain;
    z-index: 10;
}

.slider .slide[data-type="third"] .slide__content {
    justify-content: flex-end;
}

.slider .slide[data-type="third"] .slide__image::after {
    content: '';
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: #6AC5D1;
    z-index: 100;
}

.slider .slide[data-type="third"] .slide__content .slide__container {
    max-width: 50%;
    padding: 0 5%;
}

.slider .slide[data-type="fourth"] {
    background:var(--color-blue-light);
}
.slider .slide[data-type="fourth"]::before {
    content: '';
    width: 100%;
    height: 200px;
    max-height: 24%;
    position: absolute;
    bottom: 0;
    left: 50%;

    background: url("/wp-content/uploads/bottom-left.png") no-repeat bottom left;
    background-size: contain;
    z-index: 10;
}

.slider .slide[data-type="fourth"]::after {
    content: '';
    width: 100%;
    height: 200px;
    max-height: 24%;
    position: absolute;
    top: 0;
    right: 0;
    background: url("/wp-content/uploads/top-right.png") no-repeat top right;
    background-size: contain;
    z-index: 10;
}

.slider .slide[data-type="fourth"] .slide__content {
    justify-content: flex-end;
}

.slider .slide[data-type="fourth"] .slide__image::after {
    content: '';
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: #4066A7;
    z-index: 100;
}

.slider .slide[data-type="fourth"] .slide__content .slide__container {
    max-width: 50%;
    padding: 0 5%;
}


.slider .slide.active {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.slider .tabs {
    background: var(--color-blue);
}

.slider .tabs__container {
    margin: 0 auto;
}

.slider .list--tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.slider .tabs__item {
    padding: 0;
}

.slider .tabs__link {
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    padding: 16px 21px;
    font-size: clamp(14px, 2vw, 20px);
    font-weight: 400;
    transition: linear .15s;
    color: var(--color-white);
    overflow: hidden;
}

.slider .tabs__link.active {
    background: var(--color-red);
    font-weight: 600;
    cursor: initial;
}

.slider .tabs__link:not(.active):hover {

    text-decoration: underline;

}
.slider .tabs__link.active::before {
    content: '';
    width: 14px;
    height: 14px;
    background: var(--color-blue-light);
    transform-origin: center center;
    transform: rotate(45deg);
    position: absolute;
    top: -7px;
    left: calc(50% - 7px)
}

.slider .slide[data-type="third"].active ~ .tabs .tabs__link.active::before {
    background: #6AC5D1;
}

.slider .list--tabs::-webkit-scrollbar {
    display: none;
}

@media (max-width: 1080px) {
    .slider .slide {
        height: auto;
    }

    .slider .slide .slide__image {
        height: 450px;
        position: relative;
        top: initial;
        left: initial;
    }
    .slider .slide .slide__content{
        padding-top:50px;
        padding-bottom:25%;
    }
    .slider .slide[data-type="first"] .slide__content,
    .slider .slide[data-type="second"] .slide__content,
    .slider .slide[data-type="third"] .slide__content,
    .slider .slide[data-type="fourth"] .slide__content {
        justify-content: flex-start;
        max-width: 100%;
    }

    .slider .slide[data-type="first"] .slide__content .slide__container,
    .slider .slide[data-type="second"] .slide__content .slide__container,
    .slider .slide[data-type="third"] .slide__content .slide__container,
    .slider .slide[data-type="fourth"] .slide__content .slide__container {
        max-width: 100%;
    }

    .slider .slide[data-type="first"]::after,
    .slider .slide[data-type="second"]::after,
    .slider .slide[data-type="third"]::after,
    .slider .slide[data-type="fourth"]::after{
        top:0px;
        right:0;
        left:initial;
        max-height: 10%;
    }
    .slider .slide[data-type="first"]::before,
    .slider .slide[data-type="second"]::before,
    .slider .slide[data-type="third"]::before,
    .slider .slide[data-type="fourth"]::before{
        left:0;
        right:initial;
        max-height: 10%;
    }

    .slider .slide[data-type="first"] .slide__image::after,
    .slider .slide[data-type="second"] .slide__image::after,
    .slider .slide[data-type="third"] .slide__image::after,
    .slider .slide[data-type="fourth"] .slide__image::after{
        display: none;
    }
    .slider .slide .slide__content .slide__container {
    }
}

@media (max-width: 850px) {

    .slider .tabs {
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .slider .tabs__container {
    }

    .slider .list--tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        padding: 0 10px;
    }

    .slider .tabs__item {
        flex: 0 0 auto;
    }

    .slider .tabs__link {
        white-space: nowrap;
    }

    /* Affiche la scrollbar proprement */
    .slider .list--tabs::-webkit-scrollbar {
        height: 6px;
    }

    .slider .list--tabs::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.4);
        border-radius: 3px;
    }

    .slider .list--tabs::-webkit-scrollbar-track {
        background: transparent;
    }
}

/** Block CTA - Private catalogue **/
.cta--private-catalogue {
    width: calc(100% - 5%);
    max-width: 1780px;
    margin: 32px auto 0 auto;
    background: var(--color-yellow);
    padding: 34px 5%;
}

.cta--private-catalogue .cta__title {
    font-size: clamp(24px, 3vw, 48px);
    line-height: 1.3;
    text-align: center;
    font-weight: 800;
    color: var(--color-blue);
    text-transform: uppercase;
}

.cta--private-catalogue .cta__text {
    font-size: clamp(16px, 2vw, 32px);
    font-weight: 400;
    line-height: 1.3;
    margin: 4px auto 0 auto;
    width: 100%;
    max-width: 1406px;
}

.cta--private-catalogue .btn {
    width: 100%;
    max-width: 580px;
    background:var(--color-blue-light);
}

/** Block CTA - Contact **/
.cta--contact {
    width: 100%;
    margin: 0 auto;
    padding: 61px 5% 50px 5%;
    background: #6AC5D1;
}

.cta--contact .cta__title {
    font-size: clamp(20px, 3.5vw, 40px);
    line-height: 1.3;
    font-weight: 400;
    text-align: center;
    font-family: "Libre Bodoni", serif;
}

.cta--contact .cta__text {
    font-size: clamp(14px, 2vw, 20px);
    line-height: 1.3;
    text-align: center;
    margin: 9px 0 0 0;
}

.cta--contact .btn {
    background: var(--color-red);
}

.cta--contact .btn:hover {
    background: var(--color-white)!important;
    color: var(--color-red);
}

/** Section top products */
.section--products {
}

.section--products .grid--products {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 24px 0;
    gap: 20px 0;
}

.section--products .section__footer {
    margin: 32px 0 0 0;
}

.section--products .section__footer .btn {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    background: var(--color-blue-light);
}

/** Section categories */
.section--categories {
    margin-top: 175px;
}

.section--categories .grid--categories {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 24px 0;
    gap: 48px 0;
}

.section--categories .card--category {
    width: calc(100% / 6 - 24px);
}

@media (max-width: 1080px) {
    .section--categories .grid--categories {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .section--categories .card--category {
        width: calc(100% / 3 - 24px);
    }
}
@media (max-width: 550px) {
    .section--categories .card--category {
        width: calc(100% / 2 - 24px);
    }
}

/* Block Atouts */
.section--atouts {
    margin-top: 175px;
}

.section--atouts .grid--atouts {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 0;
}


.section--atouts .card--atout {
    border-radius: 0;
    box-shadow: none;
    border: none;
    width: calc(100% / 4 - 10px);
    aspect-ratio: 1 / 1;
}

.section--atouts .card--atout .card__image {
    width: 100%;
    height: 100%;
    position: absolute;
}

.section--atouts .card--atout .card__image::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.section--atouts .card--atout:nth-child(1) .card__image::before {
    background: #4066A7;
}

.section--atouts .card--atout:nth-child(2) .card__image::before {
    background: #B81920;
}

.section--atouts .card--atout:nth-child(3) .card__image::before {
    background: #272F4F;
}

.section--atouts .card--atout:nth-child(4) .card__image::before {
    background: #6AC5D1;
}

.section--atouts .card--atout .card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .15;
}

.section--atouts .card--atout .card__text {
    width: 100%;
    text-align: center;
    color: var(--color-white);
    font-size: clamp(16px, 2.5vw, 25px);
    font-weight: 400;
    line-height: 1.3;
}

@media (max-width: 1080px) {
    .section--atouts .grid--atout {
        gap: 20px 0;
    }

    .section--atouts .card--atout {
        width: calc(100% / 2 - 10px);
    }
}

/* Block Pourquoi */
.section--why {
    margin-top: 175px;
}

.section--why .section__content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.section--why .grid--why {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


.section--why .card--why {
    border-radius: 0;
    box-shadow: none;
    border: none;
    width: calc(100% / 4 - 10px);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

.section--why .card--why .card__image {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section--why .card--why::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.section--why .card--why:nth-child(1)::before {
    background: #4066A7;
}

.section--why .card--why:nth-child(2)::before {
    background: #B81920;
}

.section--why .card--why:nth-child(3)::before {
    background: #272F4F;
}

.section--why .card--why:nth-child(4)::before {
    background: #6AC5D1;
}

.section--why .card--why .card__image svg {
    height: 70%;
}

.section--why .card--why .card__text {
    width: 100%;
    text-align: center;
    color: var(--color-white);
    font-size: clamp(18px, 3vw, 35px);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    margin: 20px 0 40px 0;
}

.section--why .card--why .card-hover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    opacity: 0;
    transition: linear .15s;
}

.section--why .card--why:hover .card-hover {
    opacity: 1;
}

.section--why .card--why .card-hover .card__image {
    width: 100%;
    height: 100%;
    position: absolute;
}

.section--why .card-hover .card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .15;
}

.section--why .card--why:nth-child(1) .card-hover {
    background: #4066A7;
}

.section--why .card--why:nth-child(2) .card-hover {
    background: #B81920;
}

.section--why .card--why:nth-child(3) .card-hover {
    background: #272F4F;
}

.section--why .card--why:nth-child(4) .card-hover {
    background: #6AC5D1;
}

.section--why .card-hover .card__resume {
    width: 100%;
    text-align: center;
    color: var(--color-white);
    font-size: clamp(16px, 2.5vw, 25px);
    font-weight: 400;
    line-height: 1.3;
}

.section--why .btn--redirect {
    width: 100%;
    max-width: 682px;
    background: var(--color-red);
    margin: 36px auto 0 auto;
}

.section--why .btn--redirect:hover {
    background: var(--color-blue)!important;
}

@media (max-width: 1080px) {
    .section--why .grid--why {
        gap: 20px 0;
    }

    .section--why .card--why {
        width: calc(100% / 2 - 10px);
    }
}

@media (max-width: 550px) {
    .section--why .card--why {
        width: 100%
    }
}

/** Section services **/
.section--services {
    margin-top: 117px;
}


.section--services .grid--services {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 111px 21px;
    max-width: calc(730px * 2 + 20px);
    margin: 0 auto;
}

.section--services .card--service {
    width: calc(50% - 11px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding: 0;
}

.section--services .card--service .card__image {
    width: 100%;
    aspect-ratio: 730 / 430;
    overflow: hidden;
    background: #F1EFEE;
}

.section--services .card--service .card__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section--services .card--service .card__title {
    font-size: clamp(18px, 2.8vw, 32px);
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-blue);
    margin-top: 12px;
}

.section--services .card--service .card__description {
    font-size: clamp(14px, 2vw, 20px);
    line-height: 1.3;
    font-weight: 400;
    margin-top: 7px;
}

.section--services .card--service .btn {
    width: 100%;
    max-width: 430px;
    margin-top: 29px;
    background: var(--color-blue-light);
}

@media (max-width: 1080px) {
    .section--services .grid--services {
        gap: 111px 0;
    }

    .section--services .card--service {
        width: 100%;
    }
}

/** Section packs **/
.section--packs {
    padding: 80px 0;
    margin: 0;
    background: #F1EFEE;
}

.section--packs::before {
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background: url("/wp-content/uploads/home-background.jpg") no-repeat top left;
    background-size: cover;
}

.section--packs .grid--packs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 0;
}

.section--packs .section__title {
    color: var(--color-white);
}

.section--packs .section__introduction {
    color: var(--color-white);
}

.section--packs .card--pack {
    width: calc(100% / 4 - 10px);
    background: var(--color-white);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    padding-bottom: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.section--packs .card--pack .card__header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.section--packs .card--pack .card__icon {
    width: 100%;
    aspect-ratio: 1 / .8;

    display: flex;
    align-items: center;
    justify-content: center;
}

.section--packs .card--pack .card__icon svg {
    height: 100%;
    max-height: 200px;
}

.section--packs .card--pack .card__title {
    color: var(--color-red);
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    margin-top: 25px;
}

.section--packs .card--pack .card__description {
    font-size: clamp(18px, 2.5vw, 20px);
    line-height: 1.3;
    margin-top: 10px;
}

.section--packs .card--pack .btn {
    border: 1px solid var(--color-red);
    color: var(--color-red);
    background: none;
    max-width: 253px;
    width: 100%;
    text-transform: uppercase;
    margin-top: 42px;
}

.section--packs .card--pack .btn:hover {
    background: var(--color-red);
    color: var(--color-white);
}

@media (max-width: 1200px) {
    .section--packs .card--pack {
        width: calc(100% / 2 - 10px);
    }

    .section--packs::before {
        content: '';
        width: 100%;
        height: 50%;
        max-height: 400px;
        position: absolute;
        top: 0;
        left: 0;
        background: url("/wp-content/uploads/home-background.jpg") no-repeat top left;
        background-size: cover;
    }
}

@media (max-width: 750px) {
    .section--packs .card--pack {
        width: 100%;
    }
}

/* Section clients */
.section--clients {
    background: #F1EFEE;
    padding: 80px 0;
    margin: 0;
}

.section--clients .section__title {
    width: 100%;
    text-align: center;
}

.section--clients .section__title::after {
    display: none;
}

.section--clients .grid--clients {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px 0;
}

.section--clients .card--client {
    width: calc(100% / 6 - 8px);
    padding: 0;
    height: 175px;
    border: none;
    box-shadow: none;
}

.section--clients .card--client img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.section--clients .card--client:hover img {
    filter: grayscale(0%) contrast(1.1);
    transform: scale(1.02);
}

@media (max-width: 1080px) {
    .section--clients .grid--clients{
        justify-content: space-around;
    }
    .section--clients .card--client {
        width: calc(100% / 3 - 8px);
    }

}

@media (max-width: 550px) {
    .section--clients .card--client {
        width: calc(100% / 2 - 8px);
    }

}