@charset "UTF-8";

@font-face {
    font-family: "Avara Bold";
    src: url("/fonts/PlotLLWebTrial-Regular.woff2") format("woff2");
    font-display: auto;
}

body {
    font-family: "Avara Bold", Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
}

#container {
    position: absolute;
    display: block;
    width: 100vw;
    height: 790vh;
    border-radius: 30px;
    /* outline: solid 3px black; */
    overflow-y: scroll;
    background-color: rgb(255, 255, 255);
}

.panel {
    display: flex;
    width: 100vw;
    height: 100vh;
    outline: solid 1px red;
}

#panel1 {
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: first baseline;
    height: 150vh;
}

#panelfin {
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: first baseline;
    height: 145vh;
}

#bg1 {
    display: block;
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -10000;
    opacity: .1;
    pointer-events: none;

}

/* ––––––––––––––––––––––––––––––––––––- */
/* start */

.startcontainer {
    position: absolute;
    display: block;
    width: 100vw;
    height: 100vh;
}

.panelstart {
    display: flex;
    width: 100vw;
    height: 100vh;
    /* outline: solid 1px red; */
    justify-content: center;
    align-items: center;
    background-color: rgb(95, 95, 95, .3);

}

.startheader {
    display: flex;
    position: relative;
    width: auto;
    height: 3%;
    /* outline: solid 1px salmon; */
    font-size: 4em;
    justify-content: center;
    align-items: center;

}


.a1:link {
    text-decoration: none;


}

.essaim {
    display: block;
    position: fixed;
    width: 300px;
    height: 300px;
    /* outline: solid 1px rgb(15, 10, 10); */
    z-index: 1000;
    transition: .3s ease-in-out;

}

.essaimopen {
    width: 800px;
    height: 600px;


}

/* ––––––––––––––––––––––––––––––––––––- */

.panellipse {
    display: flex;
    position: relative;
    width: 100vw;
    height: 450px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* outline: solid 1px red; */



}

#ellipse1 {
    padding:15px;

}

#ellipse2 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

.icon {
    position: relative;
    width: 250px;
    height: 60px;
    /* outline: solid 1px red; */
    transform: rotate(90deg);
}

.arrow {
    position: relative;
    top: 25px;
    width: 100%;
    height: 3px;
    background-color: #000000;
}

.arrow::after,
.arrow::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 3px;
    right: -20px;
    background-color: #000000;
}

.arrow::after {
    top: -54px;
    transform: rotate(45deg);
}

.arrow::before {
    top: 54px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
    transform: rotate(-45deg);
}
/* –––––––––––- */

.arrow2 {
    position: relative;
    left:45%;
    top : 100%;
    width: 25px;
    height: 2px;
    background-color: #ff0000;
    transform: translate(-50%);
}

.arrow2::after,
.arrow2::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 2px;
    right: -1px;
    background-color: #ff0000;
}

.arrow2::after {
    top: -5px;
    transform: rotate(45deg);
}

.arrow2::before {
    top: 5px;
    box-shadow: 0 3px 5px rgba(255, 0, 0, 0.2);
    transform: rotate(-45deg);
}






/* –––––––––––––––––––––––––––––––– */
/* Panel 1 */
.header {
    display: flex;
    position: relative;
    margin: 10px;
    padding-left: 10px;
    padding-top: 5px;
    width: 100%;
    height: 5%;
    flex-direction: row;
    flex-wrap: wrap;
    /* outline: solid 1px purple; */
    text-align: left;
    /* border-left: solid 1px red; */
    /* border-top: solid 1px red; */
    border-radius: 10px 0px 0px 0px;


}

.p1 {
    font-size: 2em;


}

.p2 {
    margin-bottom: 10px;

}

.titre {
    font-size: 4em;
    margin-right: 20px;
    /* outline: solid 1px red; */
}

.rouge {
    color: red;
}

/* ––––––––––––––––––––––––––––––––––––––––––-- */
.texte {

    position: relative;
    flex-direction: column;
    width: 80%;
    height: 80%;
    margin-top: 10%;
    margin-bottom: 2%;
    margin-left: 2%;
    margin-right: 2%;
}

#texte1 {
    display: none;
}

#texte2 {
    display: none;
}

#texte3 {
    display: none;
}

#texte4 {
    display: none;
}

#texte5 {
    display: none;
}

#texte6 {
    display: none;
}

#texte7 {
    display: none;
}

#texte8 {
    display: none;
}

#texte9 {
    display: none;
}

#texte10 {
    display: none;
}

#texte11 {
    display: none;
}

#texte12 {
    display: none;
}

#texte13 {
    display: none;
}

#texte14 {
    display: none;
}

.h4 {
    font-size: 100pt;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
    line-height: 80%;
    /* outline: solid 1px black */
}

.h3 {
    font-size: 100pt;
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: left;
    line-height: 80%;

}

.h2 {
    font-size: 30px;
    font-style: oblique;
    margin: 20px;
    text-align: center;

}

.p3 {
    font-size: 1.5vw;
    margin-top: 10px;
    margin-bottom: 30px;

}

.ultragrand {
    font-size: 30em;
    right: 0%;
    animation: deroul 5s infinite linear;
}


/* –––––––––––––––––––––––––––––––––––– */
/* flexbox art */

.row {

    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    min-width: 400px;
    height: 130%;
    background-color: rgba(147, 147, 147, 0);


}

.rowavis {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 70%;
    height: 90%;
    /* background-color: rgb(101, 154, 136); */
    /* outline: solid 1px blue; */

}

.rowavistxt {
    min-width: 100px;
    max-width: 300px;
    margin-top: 20px;
    /* margin-bottom: 20px; */
}

.rowimages {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 200px;
    height: auto;
    /* background-color: rgb(1, 152, 157); */

}


.rowimgflt {
    display: block;
    position: absolute;
    opacity: .7;
    background-color: bisque;
    object-fit: cover;

}

#flt1 {
    right: 20%;
    width: 150px;
    height: 180px;
}

#flt2 {
    right: 20%;
    width: 150px;
    height: 180px;

}

#flt3 {
    top: -20%;
    left: 20%;
    width: 150px;
    height: 180px;


}

.rowimgflt:hover {
    animation: vibre .2s linear infinite;
    filter: drop-shadow(0 0 0.75rem red);


}


#rowimg1 {
    display: block;
    position: relative;
    width: 150px;
    height: 180px;
    background-color: bisque;
    object-fit: cover;


}

#rowimg2 {
    display: block;
    width: 170px;
    height: 140px;
    background-color: rgb(255, 203, 140);
    object-fit: cover;


}

#rowimg3 {
    display: block;
    width: 150px;
    height: 180x;
    background-color: rgb(254, 186, 104);

}

.rowinfo {
    width: 90%;
    height: 100%;
    margin-top: 30px;
    /* outline: solid 1px black; */


}

/* ––––––––––––––––––––––––––––––––––––––– */
/* rowtourne */

.rowtourne {
    display: block;
    position: absolute;
    width: 70%;
    height: 90%;
    /* outline: solid 1px blue; */
    transform: translate(-50%, -60%);
    top: 50%;
    left: 50%;
    transition: .3s ease-in-out;

}




#rowtourne1.rowpen {
    display: absolute;
    width: 120%;
    height: 200%;
    top: 70%;

}

#rowtourne2.rowpen {
    display: absolute;
    width: 120%;
    height: 200%;
    top: 70%;

}



.tourne {
    display: block;
    position: absolute;
    width: 130px;
    height: 175px;
    /* outline: solid 1px blueviolet;   */

}


#tourne1 {
    left: 10%;
    top: 10%;
    animation: rotate1 1.5s infinite linear;


}


#tourne2 {
    right: 10%;
    top: 20%;
    animation: rotate3 2s infinite linear;
}

#tourne3 {
    left: 30%;
    bottom: 20%;
    animation: rotate2 1.5s -2s infinite linear;
}

#tourne4 {

    left: 20%;
    bottom: 25%;
    animation: rotate2 1.5s -1s infinite linear;

}

#tourne5 {
    left: 10%;
    top: 10%;
    animation: rotate1 1.5s infinite linear;

}




/* –––––––––––––––––––––––––––––––––––– */
/* Panel 2 */

#panel2 {
    position: fixed;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    /* overflow-y: scroll; */
    /* background-color: rgb(255, 200, 164, .1); */
    transition: 30ms ease-in-out;
}

#panel3 {
    position: fixed;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    /* overflow-y: scroll; */
    /* background-color: rgba(119, 221, 255, 0.3); */
    transition: 30ms ease-in-out;
    pointer-events: none;
}

#panel4 {
    position: fixed;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    /* overflow-y: scroll; */
    background-color: rgb(100, 100, 100, .3);
    transition: 30ms ease-in-out;
    pointer-events: none;


}

#panel5 {
    position: fixed;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    /* overflow-y: scroll; */
    background-color: rgb(100, 100, 100, .3);
    transition: 30ms ease-in-out;
    pointer-events: none;


}





.bulle {
    display: flex;
    position: absolute;
    z-index: 1000;
    width: auto;
    height: 200px;
    /* outline: solid 1px black; */
    flex-direction: column;
    justify-content: space-around;
    filter: drop-shadow(10px 25px 0.75rem rgb(140, 140, 140));
    transition: all 0.5s ease-in-out;
    transform: scale(2);
    opacity: 0;

}

.bulle2 {
    display: flex;
    position: absolute;
    z-index: 1000;
    width: auto;
    height: 200px;
    /* outline: solid 1px black; */
    flex-direction: column;
    justify-content: space-around;
    filter: drop-shadow(10px 25px 0.75rem rgb(140, 140, 140));
    transition: all 0.5s ease-in-out;
    transform: scale(2);

}

.bulle:hover {
    filter: drop-shadow(0 0 0.75rem red);
}

.parle {
    position: relative;
    width: auto;
    height: 50%;
    outline: solid 1px black;
    padding: 3px;
    background-color: white;
    clip-path: polygon(3% 3%, 100% 0, 95% 81%, 36% 78%, 25% 100%, 26% 76%, 0 78%);




}

#parle1 {
    display: none;
    transition: all 1s ease-in-out;

}

#parle2 {
    display: none;
    transition: all 1s ease-in-out;

}

#parle3 {
    display: none;
    transition: all 1s ease-in-out;

}



#bulle1 {
    left: 30%;
    top: 10%;
    transform-origin: bottom right 10px 10px;
    animation: rotate1 3s infinite linear;
}

#bulle2 {
    left: 40%;
    top: 40%;
    animation: rotate2 3s infinite linear;


}

#bulle3 {
    right: 30%;
    bottom: 20%;
    animation: rotate1 3s -600ms infinite linear;

}

#bulle4 {
    right: 30%;
    bottom: 10%;
    animation: rotate1 2s -234ms infinite linear;

}

/* –––––––––––– */

#bulle5 {
    right: 50%;
    top: 5%;
    animation: rotate1 2.6s -830ms infinite linear;

}

#bulle6 {
    right: 30%;
    bottom: 10%;
    animation: rotate1 2.2s -572ms infinite linear;

}

#bulle7 {
    left: 15%;
    bottom: 10%;
    animation: rotate1 1.8s -234ms infinite linear;

}

/* –––––––––––––––––––––––––– */

#bulle21 {
    left: 30%;
    top: 10%;
    transform-origin: bottom right 10px 10px;
    animation: rotate1 3s infinite linear;
}

#bulle22 {
    left: 40%;
    top: 40%;
    animation: rotate2 3s infinite linear;


}

#bulle23 {
    right: 30%;
    bottom: 20%;
    animation: rotate1 3s -600ms infinite linear;

}

#bulle24 {
    right: 30%;
    bottom: 10%;
    animation: rotate1 2s -234ms infinite linear;

}

/* –––––––––––– */

#bulle25 {
    right: 50%;
    top: 5%;
    animation: rotate1 2.6s -830ms infinite linear;

}

#bulle26 {
    right: 30%;
    bottom: 10%;
    animation: rotate1 2.2s -572ms infinite linear;

}






/* –––––––––––– */


.fly {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(57, 57, 57);
}

#fly1 {
    transition: all 1.3s ease-in-out;
    /* opacity: 0; */


}

#fly2 {
    transition: all .7s ease-in-out;
    /* opacity: 0; */



}

#fly3 {
    transition: all 1s ease-in-out;
    /* opacity: 0; */



}

/* –––––––––––––––––– */

#fly4 {
    transition: all .9s ease-in-out;
    /* opacity: 0; */


}

#fly5 {
    transition: all 1.2s ease-in-out;
    /* opacity: 0; */


}

#fly6 {
    transition: all .6s ease-in-out;
    /* opacity: 0; */


}




.art {
    display: flex;
    position: relative;
    /* outline: solid 1px #ff0000; */
    transform: scale(1);
    transition: 300ms ease-out;
    filter: blur(0px);
    pointer-events: none;
    opacity: 0;



}

/* .art:hover {
    transform-origin: center 0px;
    transform: scale(1.5);
    animation: shake .3s 2 linear;
    filter: drop-shadow(0 0 0.75rem red);


} */


.shape {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgb(180, 180, 180);
    flex-direction: column;
    align-items: center;
    transition: .5s ease-out;
    overflow-y: scroll;

}

#art1 {
    width: 35vw;
    height: 40vh;
    transform-origin: top left;



}

#art2 {

    width: 55vw;
    height: 40vh;
    transform-origin: bottom left;
}

#art3 {
    width: 50vw;
    height: 50vh;
    transform-origin: top right;
}

#art4 {
    width: 40vw;
    height: 55vh;
    transform-origin: bottom right;
}

/* /panel 2 2 ––––––––––––––––––––––––––––––––––––- */

#art5 {
    width: 35vw;
    height: 55vh;
    transform-origin: top right;

}

#art6 {
    width: 55vw;
    height: 55vh;
    transform-origin: top left;

}

#art7 {
    width: 80vw;
    height: 40vh;
    transform-origin: bottom right;

}

/* /panel 2 3 ––––––––––––––––––––––––––––––––––––- */

#art8 {
    width: 65vw;
    height: 45vh;
    transform-origin: bottom;

}

#art9 {
    width: 55vw;
    height: 55vh;
    transform-origin: top left;

}

#art10 {
    width: 35vw;
    height: 55vh;
    transform-origin: top right;

}

/* /panel 2 4 ––––––––––––––––––––––––––––––––––––- */

#art11 {
    width: 32vw;
    height: 45vh;
    transform-origin: top;

}

#art12 {
    width: 65vw;
    height: 45vh;
    transform-origin: bottom left;

}

#art13 {
    width: 45vw;
    height: 55vh;
    transform-origin: top right;

}

#art14 {
    width: 50vw;
    height: 55vh;
    transform-origin: top left;

}




/* open––––––––––––––––––––– */

.open {
    /* outline: solid 10px green; */
    position: absolute;
    z-index: 10000;
    transition: .3 ease-in-out;
    transform: scale(.3);
    width: 90vw;
    height: 95vh;
    overflow-x: hidden;
    image-rendering: optimizeSpeed;


}

#art1.open {
    width: 100vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;

}

#art2.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}

#art3.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}

#art4.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}

#art5.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}

#art6.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}

#art7.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}

/* ––––––––––––––––––––––––––––––––––––––––– */
#art8.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}

#art9.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}

#art10.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}

/* ––––––––––––––––––––––––––––––––––––––––– */
#art11.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}

#art12.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}

#art13.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}

#art14.open {
    width: 90vw;
    height: 95vh;
    transition: .3 ease-in-out;
    transform-origin: center;
}


/* ––––––––––––––––––––––––––––––––––––– */
/* images */
.image {
    display: block;
    position: fixed;
    object-fit: cover;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;

}

.note {
    display: block;
    position: relative;
    object-fit: contain;
    width: 350px;
    height: 15%;
    margin-top: 10px;
    /* outline: solid 1px blueviolet; */
}

.iconfin {
    width: auto;
    height: 100px;
    object-fit: contain;
    position: relative;
    display: block;
    pointer-events: painted;
    z-index: 100000;
}



/* –––––––––––––––––––––––––––––––––––––––– */

#shape1 {
    clip-path: polygon(0 0, 50% 39%, 0 56%, 43% 55%, 9% 89%, 100% 100%, 48% 76%, 96% 0, 61% 19%);


}

#shape2 {
    clip-path: polygon(100% 65%, 75% 0, 35% 30%, 9% 21%, 0 87%, 77% 100%);
}

#shape3 {
    clip-path: polygon(45% 0, 0 28%, 6% 75%, 40% 100%, 100% 58%, 67% 36%);
}

#shape4 {
    clip-path: polygon(12% 53%, 40% 47%, 3% 0, 41% 20%, 58% 36%, 100% 4%, 75% 48%, 100% 84%, 73% 75%, 45% 100%, 27% 71%, 0 100%);
}

/* –––––––––––––––––––––––––––––––––––––––– */

#shape5 {

    clip-path: polygon(4% 17%, 21% 46%, 1% 100%, 38% 100%, 51% 88%, 95% 98%, 80% 53%, 92% 39%, 96% 3%, 71% 15%, 30% 1%);
}

#shape6 {
    clip-path: polygon(37% 16%, 100% 0, 89% 76%, 57% 100%, 0 77%, 5% 0);
}

#shape7 {
    clip-path: polygon(30% 20%, 0% 39%, 37% 49%, 33% 100%, 58% 73%, 66% 99%, 100% 23%, 70% 51%, 52% 0%);
}

/* –––––––––––––––––––––––––––––––––––––––– */


#shape8 {
    clip-path: polygon(38% 0, 93% 7%, 100% 100%, 57% 88%, 9% 100%, 0 57%, 29% 45%, 3% 30%);

}

#shape9 {
    clip-path: polygon(100% 64%, 40% 0, 21% 23%, 1% 11%, 10% 100%, 55% 95%, 40% 64%);

}

#shape10 {
    clip-path: polygon(76% 5%, 100% 53%, 89% 91%, 66% 100%, 44% 89%, 16% 100%, 4% 64%, 9% 20%, 40% 31%, 47% 0);

}

#shape11 {
    clip-path: polygon(64% 0, 0 11%, 0 61%, 25% 100%, 77% 100%, 100% 48%);

}

#shape12 {
    clip-path: polygon(44% 0, 35% 21%, 0 8%, 40% 100%, 45% 69%, 86% 100%, 77% 46%, 100% 26%);
}

#shape13 {
    clip-path: polygon(45% 33%, 0 28%, 54% 71%, 0 90%, 85% 100%, 100% 77%, 77% 46%, 83% 0);
    ;

}

#shape14 {
    clip-path: polygon(15% 11%, 0 39%, 0 99%, 90% 88%, 100% 51%, 70% 0);

}


/* –––––––––––––––––––––––––––––––––––––––– */


@media screen and (max-width: 600px) {

    .rowinfo {
        width: 100%;
    }


    #art1 {
        width: 100%;
        height: 30%;
    }

    #art2 {
        width: 80%;
        height: 20%;
        transform-origin: center;
    }

    #art3 {
        transform: translateY(-200px);
        z-index: 30;
        width: 100%;
        height: 20%;
        transform-origin: center;

    }

    #art4 {
        width: 100%;
        height: 30%;
    }

    #art5 {
        width: 100%;
        height: 20%;
    }

    #art6 {
        width: 100%;
        height: 25%;
    }

    #art7 {
        transform: translateY(-100px);
        width: 100%;
        height: 25%;
    }

    #art8 {
        width: 100%;
        height: 30%;
    }

    #art9 {
        width: 100%;
        height: 30%;
        transform-origin: center;
    }

    #art10 {
        width: 100%;
        height: 30%;
    }

    #art11 {
        width: 100%;
        height: 25%;
        transform-origin: center;


    }

    #art12 {
        width: 100%;
        height: 25%;
        transform-origin: center;

    }

    #art13 {
        width: 100%;
        height: 25%;
        transform-origin: center;

    }

    #art14 {
        width: 100%;
        height: 25%;
        transform-origin: center;

    }

    .panel {

        height: auto;
    }

    #panel2 {
        height: 100vh;
    }

    #panel3 {
        height: 100vh;
    }

    #panel4 {
        height: 100vh;
    }

    #panel5 {
        height: 100vh;
    }

    .p1 {
        font-size: 1.5em;


    }

    .h3 {
        font-size: 50pt;

    }

    .h4 {
        font-size: 50pt;

    }

}


@media screen and (max-width: 930px) {
    .rowavis {
        justify-content: center;
    }

    .row {
        justify-content: center;
    }




}


/* Anim rotation 1 */

@keyframes rotate1 {
    0% {
        transform: rotate(0deg) translateY(50px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateY(50px) rotate(-360deg);
    }
}

/* Anim rotation 2 */

@keyframes rotate2 {
    0% {
        transform: rotate(360deg) translateY(50px) rotate(-360deg);
    }

    100% {
        transform: rotate(0deg) translateY(50px) rotate(-0deg);
    }
}

@keyframes rotate3 {
    0% {
        transform: rotate(360deg) translateY(70px) rotate(-360deg);
    }

    50% {
        transform: rotate(180deg) translateY(5px) rotate(-180deg);
    }

    100% {
        transform: rotate(0deg) translateY(70px) rotate(-0deg);
    }
}

@keyframes shake {
    0% {
        transform: rotateZ(0deg) scale(1.5);
    }

    50% {
        transform: rotateZ(3deg)scale(1.5);
    }

    100% {
        transform: rotateZ(0deg)scale(1.5);
    }
}


@keyframes deroul {
    0% {
        transform: translateX(1000px);
    }

    100% {
        transform: translateX(-5000px);

    }

}

@keyframes vibre {
    0% {
        transform: rotate(0deg);
        transform: scale(1.2);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(0eg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
        transform: scale(1.3);
    }

}