*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.arriereplan {
    height: 100%;
}

.btn-home {
    float: left;
    margin: 15px 40px;
    font-size: 30px;
    color: #ffffff;
    transition: all 2s ease-in-out;
}

.btn-home img {
    width: 100px;
}

/*
    ------------- Effet lorsqu'on survole le logo ------------
*/
.btn-home:hover {
    color: rgb(75, 221, 221);
    transform: scale(1.5);
    transition: all 2s ease-in-out;
}

@keyframes rotation {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes apparition {
    0% {
        visibility: hidden;
        opacity: 0.2;
        transition: 3s;
    }

    40% {
        /* opacity: 0; */
    }

    100% {
        display: none;
        opacity: 1;
    }
}

@keyframes arriere {
    0% {
        opacity: 0.2;
    }

    20% {
        opacity: 0.5;
    }

    40%,
    60% {
        opacity: 0.7;
    }

    100% {
        opacity: 0.5;
    }

}



.poleicons:hover .blob a {
    text-decoration: none;
    color: #fff;
    animation-play-state: paused;
}


.btn-menu:hover a {
    color: #fff;
    text-decoration: none;
}

.blob a {
    animation: rotation 35s linear infinite;
    animation-delay: 0.5s;
    animation-direction: alternate;
    color: #fff;
    font-size: 15px;
}
.blob a:hover {
    /* animation: rotation 35s linear infinite; */
    /* animation-delay: 0.5s; */
    /* animation-direction: alternate;
    color: #fff;
    font-size: 15px; */
}

.blob {
    text-align: center;
}

.blob a:hover img {
    border-radius: 50%;
}



/* Style de pointage souris et survol*/
.clickAnim {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(to top, #427ece, #bebebb, #bdbd49);
    position: absolute;
    z-index: 1;
    transform: scale(0);
    transform-origin: center;
    animation: clickAnim 1s ease-in-out;
}

.hoverAnim {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(104, 201, 247, 0.5);
    position: absolute;
    z-index: 1;
    transform: scale(0);
    transform-origin: center;
    animation: clickAnim 2s ease-in-out;
    z-index: -1;
}

@keyframes clickAnim {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    0% {
        transform: scale(0);
        opacity: 0;
    }
}

/*
---------------------------  Affichage sur table -------------------
*/





/*
---------------------------  Affichage sur telephone portable -------------------
*/


@media (max-width: 575.98px) {

    body {
        overflow: hidden;
    }


    .container-menu .active {
        border: none;
    }

    .container-menu.active {
        border: none;
    }



    .btn-menu:hover {
        /* transform: scale(2); */
        padding: 15%;
    }




    /*********=====================================================*/
    .container-menu {
        margin: 0 auto;
        width: 65%;
        height: 65%;
        position: fixed;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* border: 2px solid #f0293a; */
        /* background: orange; */

        z-index: 1000;
    }

    .btn-menu {
        height: 60px;
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 20;
        cursor: pointer;
        text-align: center;
        /* width: 100%; */
    }

    .btn-menu a img {
        width: 60%;
    }

    .icone {
        width: 50px;
    }

    .blob {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 0;
    }

    .blob:hover {
        /* opacity: 1; */
        transition: 0.2s;
    }

    .container-menu.active .poleicons div:nth-child(1) {
        top: 10%;
        left: 50%;
    }

    .container-menu.active .poleicons div:nth-child(2) {
        top: 35%;
        left: 95%;
    }

    .container-menu.active .poleicons div:nth-child(3) {
        left: 98%;
        top: 70%;
    }

    .container-menu.active .poleicons div:nth-child(4) {
        left: 50%;
        top: 95%;
    }

    .container-menu.active .poleicons div:nth-child(5) {
        left: 5%;
        top: 65%;
    }

    .container-menu.active .poleicons div:nth-child(6) {
        left: 5%;
        top: 35%;
    }




    .container-menu .poleicons div:nth-child(1),
    .container-menu .poleicons div:nth-child(2),
    .container-menu .poleicons div:nth-child(3),
    .container-menu .poleicons div:nth-child(4),
    .container-menu .poleicons div:nth-child(5),
    .container-menu .poleicons div:nth-child(6) {
        background: transparent;
        width: 100px !important;
    }



    /*
    ================= Gestion de la rotation des icone des poles ===========================
    */


    /* Ajustement de bloc icone*/
    .poleicons {
        position: absolute;
        height: 90%;
        width: 100%;
        top: 0%;
        left: 0%;
        /* animation: rotation 35s linear infinite; */
        animation-delay: 0.5s;
        animation-direction: alternate-reverse;

    }

    .poleicons:hover {
        height: 90%;
        width: 60%;
        top: 5%;
        left: 18%;
        position: absolute;
        animation-play-state: paused;
    }

    /*
    ------------- Taille logo
    */
    .btn-home img {
        width: 70px;
    }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 576px) and (max-width: 768px) {

    .ligne span {
        display: block;
        width: 20%;
        margin: 0 auto;
    }

    .container-menu {
        margin: 0 auto;
        width: 100%;
        height: 70%;
        position: fixed;
        border-radius: 50%;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* border: 2px solid #f0293a; */
        /* background: orange; */

        z-index: 1000;
    }

    .btn-menu {
        height: 60px;
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 20;
        cursor: pointer;
        width: 100%;
    }

    .ligne p {
        width: 100%;
        z-index: 50;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        /* font-weight: bolder; */
    }

    .ligne {
        width: 100%;
        height: 5px;
        border-radius: 5px;
        /* background: rgb(192, 188, 188); */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.1s ease-in-out;
    }


    .ligne::before {
        content: '';
        position: absolute;
        bottom: 10px;
        /* background: #333; */
        width: 100%;
        height: 5px;
        border-radius: 5px;
        transition: all 0.2s ease-in-out;
    }

    .ligne::after {
        content: '';
        position: absolute;
        top: 10px;
        /* background: #333; */
        width: 100%;
        height: 5px;
        border-radius: 5px;
        transition: all 0.2s ease-in-out;
    }

    .container-menu.active .ligne::before {
        transform: translateY(10px) rotate(-45deg);
    }

    .container-menu.active .ligne {
        background: transparent;
    }

    /* .container-menu.active ::before{
        border: none;
    } */

    .container-menu .active {
        border: none;
    }

    .container-menu.active {
        border: none;
    }

    .container-menu.active .ligne::after {
        transform: translateY(-10px) rotate(45deg);
    }

    .icone {
        width: 100%;
    }

    .icone span {
        display: block;
    }

    .blob {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 0;
    }

    .blob1 {
        background: transparentuse;
        transition: all 0.1s 0.2s ease-in-out;
    }

    .btn-menu:hover {
        /* transform: scale(2); */
        padding: 15%;
    }

    /* .blob1:hover {
        transform: scale(2);
    }

    .blob2:hover {
        transform: scale(2);
    }
    .blob3:hover {
        transform: scale(2);
    }
    .blob4:hover {
        transform: scale(2);
    }
    .blob5:hover {
        transform: scale(2);
    }
    .blob6:hover {
        transform: scale(2);
    } */

    .blob2 {
        background: transparent;
        transition: all 0.2s 0.1s ease-in-out;

    }

    .blob3 {
        background: transparent;
        transition: all 0.3s 0.1s ease-in-out;

    }

    .blob4 {
        background: transparent;
        transition: all 0.2s 0.3s ease-in-out;

    }

    .blob5 {
        background: transparent;
        transition: all 0.2s 0.3s ease-in-out;

    }

    .blob6 {
        background: transparent;
        transition: all 0.2s 0.3s ease-in-out;

    }

    .blob7 {
        background: transparent;
        transition: all 0.2s 0.3s ease-in-out;

    }

    .blob8 {
        background: transparent;
        transition: all 0.2s 0.3s ease-in-out;
    }

    .container-menu.active .blob1 {
        top: 15%;
    }

    .container-menu.active .blob2 {
        top: 85%;
    }

    .container-menu.active .blob3 {
        left: 95%;
        top: 35%;
    }

    .container-menu.active .blob4 {
        left: 5%;
        top: 65%;
    }

    .container-menu.active .blob5 {
        left: 95%;
        top: 65%;
    }

    .container-menu.active .blob6 {
        left: 5%;
        top: 35%;
    }

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 769px) and (max-width: 991px) {

    .ligne span {
        display: block;
        width: 20%;
        margin: 0 auto;
    }

    /*
------------------ affichage sur ordinateur grand ecran -----------------------
*/
    .container-menu {
        width: 55%;
        height: 75%;
        position: absolute;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        /* background: orange; */

        z-index: 1000;
    }

    .btn-menu {
        height: 95px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 20;
        cursor: pointer;
        width: 100%;
    }

    .ligne p {
        width: 100%;
        z-index: 50;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        /* font-weight: bolder; */
    }

    .ligne {
        width: 100%;
        height: 5px;
        border-radius: 5px;
        /* background: rgb(192, 188, 188); */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.1s ease-in-out;
    }


    .ligne::before {
        content: '';
        position: absolute;
        bottom: 10px;
        /* background: #333; */
        width: 100%;
        height: 5px;
        border-radius: 5px;
        transition: all 0.2s ease-in-out;
    }

    .ligne::after {
        content: '';
        position: absolute;
        top: 10px;
        /* background: #333; */
        width: 100%;
        height: 5px;
        border-radius: 5px;
        transition: all 0.2s ease-in-out;
    }

    .container-menu.active .ligne::before {
        transform: translateY(10px) rotate(-45deg);
    }

    .container-menu.active .ligne {
        background: transparent;
    }

    /* .container-menu.active ::before{
    border: none;
} */

    /* .container-menu .active{
    border: none;
}*/
    .container-menu.active {
        /* border: 2px solid #f0293a; */
        transition: all 0.5s 0.8s ease-in-out;
    }

    .container-menu.active .ligne::after {
        transform: translateY(-10px) rotate(45deg);
    }

    .icone {
        width: 100%;
        text-align: center;
    }

    .blob {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 0;
    }


    .blob1it {
        background: #ddd;
        transition: all 0.1s 0.2s ease-in-out;
    }



    .btn-menu:hover {
        /* transform: scale(2); */
        padding: 10%;
    }

    /*
.blob1:hover {
    transform: scale(1.2);
}

.blob1it:hover{
    transform: scale(1.2);
}

.blob2:hover {
    transform: scale(1.2);
}
.blob3:hover {
    transform: scale(1.2);
}
.blob4:hover {
    transform: scale(1.2);
}
.blob5:hover {
    transform: scale(1.2);
}
.blob6:hover {
    transform: scale(1.2);
} */

    .blob1 {
        width: 60px;
        height: 60px;
        background: transparent;
        transition: all 0.1s 0.2s ease-in-out;
    }

    .blob2 {
        background: transparent;
        transition: all 0.2s 0.1s ease-in-out;

    }

    .blob3 {
        background: transparent;
        transition: all 0.3s 0.1s ease-in-out;

    }

    .blob4 {
        background: transparent;
        transition: all 0.2s 0.3s ease-in-out;

    }

    .blob5 {
        background: transparent;
        transition: all 0.2s 0.3s ease-in-out;

    }

    .blob6 {
        background: transparent;
        transition: all 0.2s 0.3s ease-in-out;

    }

    /* .blob7 {
    background: #f0293a;
    transition: all 0.2s 0.3s ease-in-out;

}
.blob8 {
    background: #d9f55d;
    transition: all 0.2s 0.3s ease-in-out;
} */

    .container-menu.active .blob1 {
        top: 5%;
    }

    .container-menu.active .blob1it {
        top: 5%;
    }

    .container-menu.active .blob2 {
        top: 95%;
    }

    .container-menu.active .blob3 {
        left: 85%;
        top: 25%;
    }

    .container-menu.active .blob4 {
        left: 15%;
        top: 75%;
    }

    .container-menu.active .blob5 {
        left: 85%;
        top: 75%;
    }

    .container-menu.active .blob6 {
        left: 15%;
        top: 25%;
    }

    /* .container-menu.active .blob7 {
    left: 50%;
    top: 0;
}

.container-menu.active .blob8 {
    left: 85%;
    top: 15%;
} */

}

@media (min-width: 992px) and (max-width: 1199px) {

    .container-menu {
        width: 50%;
        height: 90%;
        position: absolute;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
    }

    .btn-menu {
        height: 95px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 20;
        cursor: pointer;
        width: 95px;
        text-align: center;
    }

    .icone {
        width: 90%;
        height: 100%;
    }

    .blob {
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 0;
        opacity: 0.8;
    }

    .blob:hover {
        /* opacity: 1; */
        transition: 0.2s;
    }

    .container-menu.active .poleicons div:nth-child(1) {
        top: 5%;
        left: 55%;
    }

    .container-menu.active .poleicons div:nth-child(2) {
        left: 100%;
        top: 26%;

    }

    .container-menu.active .poleicons div:nth-child(3) {
        left: 106%;
        top: 75%;
    }

    .container-menu.active .poleicons div:nth-child(4) {
        top: 96%;
        left: 52%;
    }

    .container-menu.active .poleicons div:nth-child(5) {
        left: -8%;
        top: 70%;
    }

    .container-menu.active .poleicons div:nth-child(6) {
        left: 1%;
        top: 25%;
    }




    .container-menu .poleicons div:nth-child(1),
    .container-menu .poleicons div:nth-child(2),
    .container-menu .poleicons div:nth-child(3),
    .container-menu .poleicons div:nth-child(4),
    .container-menu .poleicons div:nth-child(5),
    .container-menu .poleicons div:nth-child(6) {
        background: transparent;
        width: 100px !important;
    }



    /*
    ================= Gestion de la rotation des icone des poles ===========================
    */


    /* Ajustement de bloc icone*/
    .poleicons {
        position: absolute;
        height: 90%;
        width: 60%;
        top: 5%;
        left: 18%;
        animation: rotation 35s linear infinite;
        animation-delay: 0.5s;
        animation-direction: alternate-reverse;

    }

    .poleicons:hover {
        height: 90%;
        width: 60%;
        top: 5%;
        left: 18%;
        position: absolute;
        animation-play-state: paused;
    }

    /*
    ------------- Taille logo
    */
    .btn-home img {
        width: 100px;
    }

}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .container-menu {
        width: 50%;
        height: 90%;
        position: absolute;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
    }

    .btn-menu {
        height: 95px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 20;
        cursor: pointer;
        width: 95px;
        text-align: center;
    }

    .icone {
        width: 90%;
        height: 100%;
    }

    .blob {
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 0;
        opacity: 0.8;
    }

    .blob:hover {
        /* opacity: 1; */
        transition: 0.2s;
    }

    .container-menu.active .poleicons div:nth-child(1) {
        top: 5%;
        left: 55%;
    }

    .container-menu.active .poleicons div:nth-child(2) {
        left: 100%;
        top: 26%;

    }

    .container-menu.active .poleicons div:nth-child(3) {
        left: 106%;
        top: 75%;
    }

    .container-menu.active .poleicons div:nth-child(4) {
        top: 96%;
        left: 52%;
    }

    .container-menu.active .poleicons div:nth-child(5) {
        left: -8%;
        top: 70%;
    }

    .container-menu.active .poleicons div:nth-child(6) {
        left: 1%;
        top: 25%;
    }




    .container-menu .poleicons div:nth-child(1),
    .container-menu .poleicons div:nth-child(2),
    .container-menu .poleicons div:nth-child(3),
    .container-menu .poleicons div:nth-child(4),
    .container-menu .poleicons div:nth-child(5),
    .container-menu .poleicons div:nth-child(6) {
        background: transparent;
        width: 100px !important;
    }



    /*
    ================= Gestion de la rotation des icone des poles ===========================
    */


    /* Ajustement de bloc icone*/
    .poleicons {
        position: absolute;
        height: 90%;
        width: 60%;
        top: 5%;
        left: 18%;
        animation: rotation 35s linear infinite;
        animation-delay: 0.5s;
        animation-direction: alternate-reverse;

    }

    .poleicons:hover {
        position: absolute;
        height: 90%;
        width: 60%;
        top: 5%;
        left: 18%;
        animation-play-state: paused;
    }

    /*
    ------------- Taille logo
    */
    .btn-home img {
        width: 100px;
    }

}