/*Ecran*/
@media screen and (min-width: 960px) {

    .anneau {
        position: relative;
        left: calc((var(--x) - var(--y)) / 2);
        background-color: var(--colorbase);
        border-radius: var(--y);
        height: var(--y);
        width: var(--y);
        display: table-cell;
        vertical-align: middle;
    }

    .rondinterieur {
        background-color: var(--lighttercia);
        height: var(--z);
        width: var(--z);
        display: table;
        margin: 0 auto;
        border-radius: var(--z);
    }

    .containform {
        position: relative;
        height: var(--x);
        width: var(--x);
        display: table-cell;
        vertical-align: middle;
    }

    .rond {
        display: table;
        margin: 0 auto;
        background-color: var(--colorrond);
        height: var(--z);
        width: var(--z);
        border-radius: var(--z);
    }

    /* PARTIE CARRE */
    .carre {
        position: relative;
        background-color: var(--colorcarre);
        height: var(--y);
        width: var(--y);
        margin-left: auto;
        margin-right: auto;
    }

    .carreinterieur {
        position: relative;
        top : calc((var(--y) - var(--z))/2);
        left : calc((var(--y) - var(--z))/2);
        display: table-cell;
        vertical-align: middle;
        background-color: var(--lightsedonca);
        height: var(--z);
        width: var(--z);
    }

    .pcarre {
        background-color: var(--colorcarre);
        height: var(--z);
        width: var(--z);
        display: table;
        margin: 0 auto;
    }

    /* PARTIE TRIANGLE */
    .triangle {
        display: table;
        margin: 0 auto;
        border-left: 2.5vw solid transparent;
        border-right: 2.5vw solid transparent;
        border-bottom: 5vw solid #DEA430;
    }

    .trianglerinterieur {
        position: absolute;
        margin-left: -1.5vw;
        margin-top: 1.25vw;
        border-left: 1.5vw solid transparent;
        border-right: 1.5vw solid transparent;
        border-bottom: 3vw solid var(--lightsedonca);
    }

    .ptriangle {
        display: table;
        margin: 0 auto;
        margin-top: 0.75vw;
        border-left: 1.5vw solid transparent;
        border-right: 1.5vw solid transparent;
        border-bottom: 3vw solid #DEA430;
    }

    /* TRAPEZE */
    .trapeze {
        bottom: 0px;
        height: 0;
        margin-top: 2.58vw;
        border-left: 1.5vw solid transparent;
        border-right: 1.5vw solid transparent;
        border-top: 3vw solid #6FDE30;
    }

    .triangletrapeze {
        padding-top: 0.1vw;
        position: absolute;
        border-left: 3vw solid transparent;
        border-right: 3vw solid transparent;
        border-bottom: 2.5vw solid #6FDE30;
    }

    .trapezeinte {
        position: absolute;
        margin-top: 3vw;
        margin-left: 1.25vw;
        width: 2vw;
        border-left: 0.75vw solid transparent;
        border-right: 0.75vw solid transparent;
        border-top: 1.5vw solid var(--lightsedonca);
        z-index: 15;
    }

    .triangletrapezeinte {
        position: absolute;
        margin-top: 1.45vw;
        margin-left: 1.25vw;
        padding-top: 0.1vw;
        border-left: 1.75vw solid transparent;
        border-right: 1.75vw solid transparent;
        border-bottom: 1.5vw solid var(--lightsedonca);
        z-index: 15;
    }

    .trapezep {
        display: table;
        margin: 0 auto;
        margin-top: 2vw;
        width: 2vw;
        border-left: 0.75vw solid transparent;
        border-right: 0.75vw solid transparent;
        border-top: 1.5vw solid #6FDE30;
        z-index: 15;
    }

    .triangletrapezep {
        position: absolute;
        margin-top: 0.55vw;
        margin-left: 1.25vw;
        border-left: 1.75vw solid transparent;
        border-right: 1.75vw solid transparent;
        border-bottom: 1.5vw solid #6FDE30;
        z-index: 15;
    }

    .losangephaut {
        display: table;
        margin: 0 auto;
        margin-top: -3vw;
        border-left: 3vw solid transparent;
        border-right: 3vw solid transparent;
        border-bottom: 3vw solid #B130DE;
    }

    .losangepbas {
        position: absolute;
        border-left: 3vw solid transparent;
        border-right: 3vw solid transparent;
        border-top: 3vw solid #B130DE;
    }

    .losangephauti {
        display: table;
        margin: 0 auto;
        margin-top: -1.5vw;
        border-left: 1.5vw solid transparent;
        border-right: 1.5vw solid transparent;
        border-bottom: 1.5vw solid var(--lightsedonca);
    }

    .losangepbasi {
        position: absolute;
        margin-left: 1.5vw;
        border-left: 1.5vw solid transparent;
        border-right: 1.5vw solid transparent;
        border-top: 1.5vw solid var(--lightsedonca);
    }

    .losangephautc {
        display: table;
        margin: 0 auto;
        margin-top: -1.5vw;
        border-left: 1.5vw solid transparent;
        border-right: 1.5vw solid transparent;
        border-bottom: 1.5vw solid #B130DE;
    }

    .losangepbasc {
        position: absolute;
        margin-left: 1.5vw;
        border-left: 1.5vw solid transparent;
        border-right: 1.5vw solid transparent;
        border-top: 1.5vw solid #B130DE;
    }

    .buttonretour {
        position: relative;
        height: 4vh;
        width: 4vh;
        border-radius: 55vw;
        background-color: var(--lightsedonca);
        z-index: 5;
        margin-left: 2vw;
        top: 1.75vw;
    }

    .flex-item {
        background: var(--lightsedonca);
        width: 10vw;
        height: 13vw;
        border-radius: 0.75vw;
        padding-right: 0.15vw;
        padding-left: 0.15vw;
        padding-bottom: 0.25vw;
        list-style: none;
        display: flex;
        margin-right: 0.4vw;
        margin-left: 0.4vw;
        -webkit-flex-flow: row wrap;
        justify-content: space-around;
    }

    .item-form {
        width: 3vw;
        padding-left: 0.1vw;
        margin-top: 0.25vw;
        height: 3vw;
        border-radius: 10px;
        background-color: var(--lighttercia);
    }

    .containcards {
        height: 87vh;
        overflow-x: auto;
        display: flex;
        flex-wrap: wrap;
        padding-left: 3vw;
        padding-top: 2.5vw;
    }

    .logop2 img {
        width: 20vh;
        padding-top: 1vh;
        position: relative;
        left: 43.5vw;
    }


    .txt {
        position: absolute;
        font-family: Arial Black;
        color: var(--lightprima);
        font-size: 1.5vw;
        left: 0.4vw;
        top: -1.6vh;
    }

    .logo img {
        position: absolute;
        width: 12vw;
        left: 44vw;
        top: 13%;
        z-index: 11;
    }

    .mounts img {
        position: absolute;
        height: 100%;
        width: 100%;
        pointer-events: none;
        margin-left: -10px;
    }

    #contourbuttonvalider {
        position: absolute;
        border-radius: 45px;
        left: 9.2vw;
        top: 5.5vw;
        height: 4vw;
        width: 12vw;
        background-color: var(--lightsedonca);
        z-index: 15;
    }

    .bouttonvalider {
        position: absolute;
        height: 3.4vw;
        width: 11.4vw;
        top: 0.3vw;
        left: 0.3vw;
        border-radius: 30px;
        background-color: #B130DE;
    }


    .bouttonvalider2 {
        position: absolute;
        height: 3.4vw;
        width: 11.4vw;
        top: 0.3vw;
        left: 0.3vw;
        border-radius: 30px;
        background-color: #00CC66;
    }

    #textjouer {
        font-family: Montserrat, impact, Arial Black;
        position: absolute;
        font-size: 2.5vw;
        margin-top: 0.2vw;
        margin-left: 2.7vw;
        color: var(--lightsedonca);
        text-align:center;
    }
}
