@charset "UTF-8";

html {
    font-size: 16px;
}

body {
    background: transparent;
    box-sizing: border-box;
    transition: all 0.25s ease-in;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.pinson-wrapper {
    /*! position: absolute; */
    /*! width: 20rem; */
    /*! height: 20rem; */
    justify-content: center;
    /*! display: flex; */
    padding-bottom: 5rem;
}

/*A MODIFIER POUR TAILLE : height + faisanholder + pisonbtn */
.pinson {
    /*! width: 20rem;*/
    height: 40rem;
    transform: scale(0);
    transform-origin: center;
    transition: all 0.08s ease-in-out;
    margin: auto 0;
    display: flex;
    justify-content: center;
    margin-block: 5rem;
    padding: 0;
}

    .pinson li {
        position: absolute;
        display: flex;
        height: 100%;
        /*! margin: 3rem; */
        justify-content: center;
        /*! width: 100%; */
        /*! transform-origin: inherit; */

    }

    .pinson a {
        position: relative;
        overflow: hidden;
        display: block;
        width: 100%;
        height: 100%;
        /*! margin: 3rem; */
        padding: 1rem;
        /*! transform: scale(1, 1); */
        stroke: none;

    }

        .pinson a papillon-img {
            display: block;
            margin: 0 auto;
            /* bloque l'image dans le cercle de couleur (élément a)*/
            max-height: 100%;
            max-width: 20vw;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

        }

    .pinson.open {
        transform: scale(1);
    }
/*A MODIFIER POUR TAILLE : marging (écart images) + Width (taille submenu) + pinson + pisonbtn */
.faisan-holder {
    position: inherit;
    z-index: 1;
    display: flex;
    width: 25rem;
    height: 100%;
    margin: 20rem;
    padding: 1rem;
    border-radius: 100%;
}

.circle-holder {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    display: none;
    width: 24rem;
    height: 24rem;
    margin: -12rem;
    padding: 1rem;
    transform: rotate(-90deg);
    stroke: none;
}
/*A MODIFIER pour changer la taille du menu : HEIGHT + WIDTH + pinson + faisanholder */
.pinson-btn {
    position: absolute;
    z-index: 10;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 100%;
    text-align: center;
    line-height: 1;
    appearance: none;
    outline: none;
    cursor: pointer;
    font-size: 0;
    padding: unset;
    height: 40rem;
    width: 40rem;
}

    .pinson-btn:hover {
        border: none;
    }

    .pinson-btn.scale-effect {
        transform: scale(0);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

.mesange-img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.papillon-img {
    max-width: 100vw;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ripple {
    position: absolute;
    top: -1rem;
    left: -1rem;
    z-index: 10;
    display: block;
    width: 6rem;
    height: 6rem;
    transform: scale(0.5);
    opacity: 0;
    border: 2rem solid white;
    border-radius: 100%;

}

.pinson li:nth-child(1) {
    transform: rotate(0deg);
}

    .pinson li:nth-child(1) a {
        transform: rotate(-0deg);
    }

    .pinson li:nth-child(1) circle {
        stroke: #FFD177;
    }



.pinson li:nth-child(2) {
    transform: rotate(120deg);
}

    .pinson li:nth-child(2) a {
        transform: rotate(-120deg);
    }

    .pinson li:nth-child(2) circle {
        stroke: #F15D22;
    }



.pinson li:nth-child(3) {
    transform: rotate(240deg);
}

    .pinson li:nth-child(3) a {
        transform: rotate(-240deg);
    }

    .pinson li:nth-child(3) circle {
        stroke: #3F5DAB;
    }



@keyframes dash {
    0% {
        stroke-dashoffset: 560;
        stroke-width: 4rem;
    }

    80% {
        stroke-dashoffset: 0;
        stroke-width: 4rem;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-width: 6rem;
        opacity: 0;
    }
}

@keyframes buttonactive {
    0% {
        background: white;
        transform: rotate(0deg);
    }

    100% {
        background: #4f6f8f;
        transform: rotate(-90deg);
    }
}

@keyframes middle {
    0% {
        opacity: 1;
        left: 0;
    }

    100% {
        opacity: 0;
        left: -4rem;
    }
}

@keyframes top-down {
    0% {
        top: 0;
        transform: rotate(0);
    }

    100% {
        top: 0.35rem;
        transform: rotate(-45deg);
    }
}

@keyframes down-top {
    0% {
        top: 0;
        transform: rotate(0);
    }

    100% {
        top: -0.4rem;
        transform: rotate(45deg);
    }
}

@keyframes ripples {
    0% {
        opacity: 1;
        transform: scale(0.5);
        border-width: 3rem;
    }

    100% {
        opacity: 0.5;
        transform: scale(1);
        border-width: 0rem;
    }
}

@keyframes bouncein {
    to {
        transform: scale(1);
    }
}

/* Par défaut, pour les grands écrans */
.pinson {
    width: 40rem; /* Largeur pour grands écrans */
}

/* Pour les tablettes (moins de 1024px) */
@media (max-width: 1024px) {
    .pinson {
        width: 40rem; /* Réduit la largeur pour les tablettes */
    }
}

/* Pour les écrans mobiles (moins de 768px) */
@media (max-width: 768px) {
    .pinson {
        width: 38rem; /* Réduit encore la largeur pour les écrans mobiles */
    }
}

/* Pour les très petits écrans (moins de 480px) */
@media (max-width: 480px) {
    .pinson {
        width: 25rem; /* Réduit encore la largeur pour les petits écrans */
        height: 20rem;
    }
}

/* Pour les très petits écrans (moins de 400px) */
@media (max-width: 480px) {
    .pinson {
        width: 23rem; /* Réduit encore la largeur pour les petits écrans */
        height: 20rem;
    }
}

/* Par défaut, pour les grands écrans */
.pinson-btn {
    height: 40rem;
    width: 40rem;
}

/* Pour les tablettes (moins de 1024px) */
@media (max-width: 1024px) {
    .pinson-btn {
        height: 30rem; /* Réduit la taille pour les tablettes */
        width: 40rem; 
    }
}

/* Pour les écrans mobiles (moins de 768px) */
@media (max-width: 768px) {
    .pinson-btn {
        height: 25rem; /* Réduit encore la taille pour les écrans mobiles */
        width: 40rem;
    }
}

/* Pour les très petits écrans (moins de 480px) */
@media (max-width: 480px) {
    .pinson-btn {
        height: 20rem; /* Réduit encore la taille pour les petits écrans */
        width: 100vw; 
    }
}

/* Par défaut, pour les grands écrans */
.faisan-holder {
    width: 25rem;
    margin: 27rem;
    height: 50%;
}

/* Pour les tablettes (moins de 1024px) */
@media (max-width: 1024px) {
    .faisan-holder {
        width: 19rem; /* Réduit la largeur pour les tablettes */
        margin: 25rem; /* Réduit la marge pour les tablettes */
        height: 50%;
    }
}

/* Pour les écrans mobiles (moins de 768px) */
@media (max-width: 768px) {
    .faisan-holder {
        height: 50%;
        width: 20rem; /* Réduit encore la largeur pour les mobiles */
        margin: 24rem; /* Réduit encore la marge pour les mobiles */
    }
}

/* Pour les très petits écrans (moins de 480px) */
@media (max-width: 480px) {
    .faisan-holder {
        height: 50%;
        width: 10rem; /* Réduit encore la largeur pour les petits écrans */
        margin: 12rem; /* Réduit encore la marge pour les petits écrans */
    }
}