.textImageSpe.left .effect {
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
}
.textImageSpe.left .zoneImg{
    clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);
}
.textImageSpe .zoneImg img{
    height: 100%;
    width: auto;
    object-fit: cover;
}

/* APPARENCES */
.textImageSpe.left .zoneText{
    order: 2;
    grid-column-start: 4;
    grid-column-end: 7;
}
.textImageSpe.left .zoneImg{
    order: 1;
    grid-column-start: 1;
    grid-column-end: 4;
}

.textImageSpe.right .effect {
    clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%);
}
.textImageSpe.right .zoneImg{
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
}

/* couleur de fond */
/* Blanc */ 
.textImageSpe.bg-white{
    background-color: transparent;
}
.textImageSpe.bg-white .effect{
    background-color: #ffffff;
}
/* Mauve dégradé */
.textImageSpe.bg-mauve{
    background-color: #710097;
}
.textImageSpe.bg-mauve .effect{
    background: #A730DC;
    background: radial-gradient(circle,rgba(167, 48, 220, 1) 40%, rgba(113, 0, 151, 1) 100%);   
}
.textImageSpe.bg-mauve h2, 
.textImageSpe.bg-mauve h6,
.textImageSpe.bg-mauve .text{
    color: #ffffff;
}
.textImageSpe.bg-mauve a.supremeBtn .text{
    color: #a731dd;
}
.textImageSpe.bg-mauve a.supremeBtn:hover .text{
    color: #ffffff;
}
.textImageSpe.bg-mauve a.supremeBtn:hover{
    border-color: #ffffff;
}
/* Mauve foncé */
.textImageSpe.bg-darkmauve{
    background: #8310AE;
    margin-top: -5rem;
}
.textImageSpe.bg-darkmauve .effect{
    background-color: #710097;
}
.textImageSpe.bg-darkmauve h2, 
.textImageSpe.bg-darkmauve h6,
.textImageSpe.bg-darkmauve .text{
    color: #ffffff;
}
.textImageSpe.bg-darkmauve a.supremeBtn .text{
    color: #a731dd;
}
.textImageSpe.bg-darkmauve a.supremeBtn:hover .text{
    color: #ffffff;
}
.textImageSpe.bg-darkmauve a.supremeBtn:hover{
    border-color: #ffffff;
}

/* MOBILE */

@media (max-width: 769px) {
    .textImageSpe.left .zoneText{
        order: 1;
        grid-column-start: 1;
        grid-column-end: 13;
        padding-top: 7rem;
    }

    .textImageSpe.left .zoneImg{
        order: 2;
        grid-column-start: 1;
        grid-column-end: 13;
    }
    .textImageSpe.left .zoneImg, 
    .textImageSpe.right .zoneImg{
        clip-path: unset;
    }

    .textImageSpe.bg-darkmauve{
        margin-top: -2.5rem;
    }

    .textImageSpe.left .effect {
        clip-path: polygon(0 8%, 100% 5%, 100% 100%, 0 96%);
    }
    .textImageSpe.right .effect {
        clip-path: polygon(0 0, 100% 5%, 100% 94%, 0% 96%);
    }
  }