.sr-only{
    clip: rect(0,0,0,0);
    overflow: hidden;
    width: 1px;
    margin: -1px;
    position: absolute;
}

input[type="checkbox"]:checked ~ .nav{
    translate: 0
}

.menuburger{
    display: flex;
}

/* -- Checkbox : Disparition de l'élément checkbox --- */
input[type="checkbox"]{
    appearance: none;
}

/* -- Label --- */
.label{
    position: relative;
    z-index: 10;
    display: inline-flex;
    cursor: pointer;
    margin: 2em 2em 2em auto;

}
/* svg{
    border: 1px rgb(255, 255, 255) solid;
} */

/* - Burger -- */
.menuburger__line {
    transform-origin: center center;
}
.menuburger__line:nth-child(1){
    transition: y .3s .5s, rotate .4s 0s;
}
.menuburger__line:nth-child(3){
    transition: y .3s .5s, rotate .4s 0s;
}
.menuburger__line:nth-child(2){
    opacity: 1;
    transition: opacity .3s 1.2s;
}


/* - hover ---- */

.label:hover .menuburger__line:nth-child(1){
    y: 9px;
}
.label:hover .menuburger__line:nth-child(3){
    y: 21px;
}
.label:hover .menuburger__line:nth-child(2){
    opacity: 0;
    transition-delay: 0s;
}


/* - Checked ---- */

input[type="checkbox"]:checked ~ label .menuburger__line:nth-child(1){
    y: 15px;
    rotate: 45deg;
    transition-delay: 0s, .5s;
}
input[type="checkbox"]:checked ~ label .menuburger__line:nth-child(3){
    y: 15px;
    rotate: -45deg;
    transition-delay: 0s, .5s;

}
input[type="checkbox"]:checked ~ label .menuburger__line:nth-child(2){
    opacity: 0;
}


@media screen and (min-width: 48em) {
    .label{
        display: none;
    }
    .menuburger{
        justify-content: space-between;
    }
    .nav{
        position: static;
        translate: 0;
        display: flex;
        padding-right: 2em;

    }
    .nav__list{
        flex-direction: row;
        gap: 1em;
        
        font-size: 1rem;
        color: rgb(7, 45, 88);
        text-align: left;
    }
}