/** Slider d'en-tête **/
.hero {
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

.hero .slider-track {
    position: relative;
    height: 740px;
}

.hero .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.hero .slide.active {
    opacity: 1;
    z-index: 1;
}

.hero .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero .slider-dots {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 42px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 100;
}

.hero .slider-dots button {
    background: none;
    border: 2px solid var(--color-white);
    width: 17px;
    height: 17px;
    border-radius: 50%;

    transition: background 0.3s;
}

.hero .slider-dots button.active::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    background: var(--color-white);
}

.hero .slider-dots button:not(.active):hover {
    border-color: var(--color-purple);
    cursor: pointer;
}


/** Section - Nos produits **/
.section--products {
    padding: 77px 0 95px 0;
}

.section--products .section__title {
    width: 100%;
    text-align: center;
    color: var(--color-purple);
}

.section--products .section__introduction {
    width: 100%;
    text-align: center;
    margin: 35px 0 53px 0;
}
.section--products .grid--products{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:37px;
    margin: 0 0 51px 0;
}
.section--products .card--product{
    width: calc(100% / 5 - 30px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    text-decoration: none;
}

.section--products .card--product .card__icon{
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--color-black);
    border-radius: 50%;
    overflow: hidden;
}
.section--products .card--product .card__title {
    color:var(--color-purple);
    width: 100%;
    text-align: center;
    font-size: clamp(16px, 2.7vw, 22px);
    line-height: 1.3;
    font-weight: 500;
    text-transform: uppercase;
    transition: linear .15s;
    margin: 34px 0 0 0;
}
.section--products .card--product:hover .card__title {
    color:var(--color-grey);
}
.section--products .section__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

@media all and (max-width: 1080px){
    .section--products .card--product {
        width: calc(100% / 3 - 30px);
    }
}
@media all and (max-width: 550px){
    .section--products .card--product {
        width: calc(100% / 2 - 30px);
    }
}
/** Section Réalisations **/
.section--realisations {
    background:var(--color-green);
}
.section--realisations .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.section--realisations .section__column{
    width: 50%;
    padding-right:clamp(14px, 5vw, 153px);
}
.section--realisations  .section__header {
    padding-top:57px;
}
.section--realisations  .section__footer {
    padding-bottom:82px;
}
.section--realisations  .section__title{
    color:var(--color-white);
}
.section--realisations  .section__introduction{
    color:var(--color-white);
    margin: 22px 0 49px 0;
}

.section--realisations   .section__image {
    position: absolute;
    top:0;
    right:0;
    width: 50%;
    height: 100%;
}
.section--realisations   .section__image  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media all and (max-width: 850px){
    .section--realisations {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
    }
    .section--realisations .section__column{
        width: 100%;
        padding-right:0;
    }

    .section--realisations   .section__image {
        position: relative;
        top: initial;
        left:initial;
        width: 100%;
        height: 350px;
    }
}

/** Section Pourquoi nous choisir ? **/
.section--choisir {
    background:var(--color-orange);
}
.section--choisir .container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.section--choisir .section__column{
    width: 50%;
    padding-left:clamp(14px, 5vw, 153px);
}
.section--choisir  .section__header {
    padding-top:57px;
}
.section--choisir  .section__footer {
    padding-bottom:82px;
}
.section--choisir  .section__title{
    color:var(--color-white);
}
.section--choisir  .section__introduction{
    color:var(--color-white);
    margin: 22px 0 49px 0;
}

.section--choisir   .section__image {
    position: absolute;
    top:0;
    left:0;
    width: 50%;
    height: 100%;
}
.section--choisir   .section__image  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media all and (max-width: 850px){
    .section--choisir .section__column{
        width: 100%;
        padding-left:0;
    }

    .section--choisir   .section__image {
        position: relative;
        top: initial;
        left:initial;
        width: 100%;
        height: 350px;
    }
}


/** Section contact **/
.section--contact {
    padding: 82px 0;
}
.section--contact .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.section--contact .section__column{
    width: calc(50% - clamp(20px, 2.7vw, 60px));
}
.section--contact  .section__map {
    width: 100%;
    aspect-ratio:  1 / 1;
    border-radius: 50%;
    overflow: hidden;
}

.section--contact  .section__map iframe {
    position: absolute;
    top:-50%;
    left:-50%;
    width: 200%;
    height: 200%;
}

.section--contact  .section__title {
    color:var(--color-purple);
}

.section--contact  .section__header .section__introduction {
    margin:35px 0 52px 0;
}

.section--contact  .section__content .section__introduction {
    margin:0 0 20px 0;
}

.section--contact .section__introduction a:hover{
    color:var(--color-purple);
}
.section--contact   .section__footer {
    margin:47px 0 0 0;
}
@media all and (max-width: 850px){
    .section--contact .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        gap:75px;
    }
    .section--contact .section__column{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .section--contact  .section__map {
        max-width: 450px;
    }
    .section--contact  .section__title {
        text-align: center;
    }

    .section--contact .section__introduction{
        text-align: center;
    }
    .section--contact .network__list {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
}