@media (max-width:48rem) {
    .fa_arrowh {
        background: url(/image/arrowhaut_2.svg) center center / 100% 100%;
    }
    .navcase {
        height: 40px;
        width: 100%;
        padding: 0px;
        background-color: #fbfd14;
        border: 1px solid #252525;
        position: fixed;
        bottom: 0px;
        left: 0px;
        z-index: 9;
        display: inline-grid;
        justify-items: center;
        text-align: center;
    }
    .navcase .case-links {
        display: inline;
        float: right;
        font-size: 18px;
    }
    /*
.navcase .case-links .loginBtn {
    display: inline-block;
    padding: 5px 15px;
    margin-left: 20px;
    font-size: 17px;
}
*/
    .navcase .case-links a {
        padding: 10px 12px;
        text-decoration: none;
        color: white;
        font-weight: 550;
        border: 1px solid #252525;
        border-radius: 10px;
        background-color: #252525;
    }
    /* Hover effects */
    .navcase .case-links a:hover {
        background-color: #fbfd14;
        color: #252525;
    }
    .navcase .case-links a.on {
        color: black;
        background-color: #fbfd14;
    }
    /* responsive navcase toggle button */
    .navcase #case-check,
    .navcase .case-btn {
        display: none;
    }
    .navcase .case-btn {
        display: contents;
        position: absolute;
        top: 0px;
        right: 0px;
    }
    .navcase .case-btn label {
        display: inline-block;
        width: 100%;
        height: 70px;
        padding: 25px;
    }
    .navcase .case-btn label span {
        display: block;
        height: 100%;
        width: 100%;
        margin-top: -17px;
        margin-left: -1px;
    }
    .navcase .case-btn label:hover,
    .navcase #case-check:checked~.case-btn label {
        transition: all 0.5s ease;
    }
    .navcase .case-links {
        position: absolute;
        display: block;
        text-align: center;
        width: 100%;
        background-color: black;
        transition: all 0.3s ease-in;
        overflow-y: hidden;
        bottom: 36px;
        right: 0px;
    }
    .navcase .case-links a {
        display: block;
    }
    /* when case toggle button not checked */
    .navcase #case-check:not(:checked)~.case-links {
        height: 0px;
    }
    /* when case toggle button is checked */
    .navcase #case-check:checked~.case-links {
        height: calc(12em - 0px);
        overflow-y: auto;
    }
    .navcase .case-links .loginBtn {
        padding: 10px 40px;
        margin: 20px;
        font-size: 18px;
        font-weight: bold;
        color: rgb(9, 14, 90);
    }
    /* Responsive dropdown code */
    .navcase .case-links .dropdown,
    .navcase .case-links .dropdown2 {
        float: none;
        width: 100%;
    }
    .navcase .case-links .drop-content,
    .navcase .case-links .drop-content2 {
        position: relative;
        background-color: rgb(220, 220, 250);
        top: 0px;
        left: 0px;
    }
    /* Text color */
    .navcase .case-links .drop-content a {
        color: white;
    }
    .gridordre,
    .gridordreP,
    .gridordrejeuxv {
        font-family: 'Raleway';
        padding: 10px;
        grid-gap: 5px;
    }
    .gridordreP {
        display: grid;
        font-size: 1.2rem;
        grid-template-columns: repeat( auto-fill, minmax(13%, 1fr));
    }
    .gridordre {
        display: grid;
        font-size: 1.2rem;
        grid-template-columns: repeat( auto-fill, minmax(12%, 1fr));
    }
    .gridordrejeuxv {
        display: grid;
        font-size: 1.2rem;
        grid-template-columns: repeat( auto-fill, minmax(18%, 1fr));
    }
    .navcase {
        display: block;
    }
    .gridordre2,
    .gridordre3,
    .gridordrejeuxv2 {
        display: none;
    }
}

@media all and (min-width: 48rem) {
    .navcase {
        display: none;
    }
    .gridordre3 {
        display: block;
        display: grid;
        grid-template-columns: repeat( auto-fill, minmax(3.8%, 1fr));
        grid-gap: 4px;
    }
    .gridordre2 {
        display: block;
        display: grid;
        grid-template-columns: repeat( auto-fill, minmax(3%, 1fr));
        grid-gap: 4px;
    }
    .gridordrejeuxv2 {
        display: block;
        display: grid;
        grid-template-columns: repeat( auto-fill, minmax(4%, 1fr));
        grid-gap: 4px;
    }
    .gridordrejeuxv2,
    .gridordre2,
    .gridordre3 {
        font-family: 'Raleway';
        font-size: 1.5rem;
        padding: 10px;
        display: grid;
        grid-gap: 10px;
    }
    .gridordre2 a:hover,
    .gridordre3 a:hover,
    .gridordrejeuxv2 a:hover {
        background-color: #fbfd14;
        color: #252525;
    }
    .gridordre2 a,
    .gridordre3 a,
    .gridordrejeuxv2 a {
        text-decoration: none;
        color: white;
        text-align: center;
        border-radius: 5px;
        background-color: #252525;
        border: 1px solid black;
        width: 100%;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    .gridordre2 a.on,
    .gridordre3 a.on,
    .gridordrejeuxv2 a.on {
        background-color: #fbfd14;
        color: #252525;
    }
}