/* VARIABLES (dans paramètres css) */
/* :root{
    --unite-base: 10vw;
    --menubulles-border-color: white;
    --menubulles-on-background-color: white;
    --menubulles-off-color: rgba(255, 255, 255, 0.5);
    --menubulles-text-on-color: red;
    --menubulles-text-off-color: black;
    --menubulles-text-on-select-color: black;
    --vitesse-transitions-rapide: 0.3s;
    --vitesse-transitions-moyenne: 0.6s;
    --vitesse-transitions: 0.7s;
    --couleur-on: orange;
  } */


.menubulles {
    width: calc(var(--unite-base)*5);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
    box-sizing: border-box;
    color: var(--menubulles-text-off-color);
    /* background-color: darkcyan; */
}

.menubulles li {
    border: 1px solid white;
    overflow: hidden;
    border-radius: 50%;
    font-family: 'biotiflight';
    font-weight: normal;
    font-size: 16px;
}

.menubulles li p {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


.menubulles li p:nth-child(1) {
    background-color: var(--menubulles-off-color);
    
}


.menubulles li p:nth-child(2) {
    /* background-color: var(--menubulles-on-background-color); */
    /* background-color: var(--couleur-page2); */
    color: white;
}


.bulle_on, .bulle_off {
    transition-property: width, height;
    transition-duration: var(--vitesse-transitions);
}


.bulle_on {
    width: calc(var(--unite-base)*4);
    height: calc(var(--unite-base)*4);
}

.bulle_on p:nth-child(2) p:hover {
    color: var(--menubulles-text-on-select-color);
    cursor: pointer;
}

.bulle_on p:nth-child(1), .bulle_on p:nth-child(2) {
    transform: translateY(-100%);
    /* transition: transform var(--vitesse-transitions-rapide) linear; */
 }




.bulle_off {
    width: calc(var(--unite-base)*1);
    height: calc(var(--unite-base)*1);
    color: var(--couleur-defaut-typo);
    background-color: white;
}

.bulle_off p:nth-child(1), .bulle_off p:nth-child(2) {
    transform: translateY(0);
    transition: transform var(--vitesse-transitions-rapide) linear;
}

.menubulles p:nth-child(2) {
    color: var(--menubulles-text-on-color);
    cursor: pointer;
}



/* RESPONSIVE */
/* ------------------------------------ */

/* IPAD Portrait */
@media screen and (max-width: 768px) and (orientation: Portrait)
{

    .menubulles {
        width: 100%;
        height: calc(var(--unite-base)*4);
        flex-direction: row;
        margin-bottom: calc(var(--unite-base)*1);;
    }

    .menubulles li {
        font-size: 12px;
    }

    .bulle_on {
        width: calc(var(--unite-base)*3);
        height: calc(var(--unite-base)*3);
    }

}



/* SMARTPHONE Anciens et bas de gamme portrait */

@media screen and (max-width: 360px) and (orientation: Portrait)
{

    .menubulles li {
        font-size: 10px;
    }
    
}