/* ----------------------------------------------- MENU */


.cadreMenu {
    width: 340px;
    height: 660px;
    flex-shrink: 0;
    border-radius: 40px;
    background: var(--menu-color);
    box-shadow: 0px 11px 111.3px 0px var(--shadow-color);
    display: inline-block;
    margin-left: 74px;
}

.middleMenu{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-column: 1fr 1fr;
    gap: 17px;
    margin-bottom: 150px;
    color: var(--text-color);
}

.middleMenu div a{
    width: 91px;
    height: 33px;
    flex-shrink: 0;
    margin-left: 42px;
    display: flex;
    justify-content: space-around;
}

.bottomMenu{
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-column: 1fr 1fr;
    gap: 17px;
}

.bottomMenu div a{
    width: 91px;
    height: 33px;
    flex-shrink: 0;
    margin-left: 42px;
    display: flex;
}

.cadreMenu svg{
    width: 33px;
    height: 33px;
    flex-shrink: 0;
    margin-right: 12px;
    stroke: var(--text-menu-color);
}

.cadreMenu a{
    text-decoration: none;
}

.cadreMenu h1{
    color: var(--text-menu-color);
    font-family: "inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    margin: 50px 0;
    
}

.cadreMenu p{
    color: var(--text-menu-color);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
    margin: auto;
}

#fleche{
    margin-left: 85%;
    margin-top: 5%;
    stroke: var(--text-menu-color);
}

.amis-svg{
    rotate: 180deg;
}