:root {
        --color_bandeau: royalblue;
        --color_bandeau_text: white;
        --color_hover: crimson;
        --color_hover_text: white;
        --color_data: black;
        --color_submit: white;
        }
/* Section Menu de recherche */
table.menu {
    width: 100%;
    border-collapse: collapse;
    font-family: Helvetica, sans-serif;
}

    tr.menu {
        vertical-align: middle;
        color: var(--color_hover);
        text-align: center;
        font-weight: bold;
        font-size: small;
        border-bottom: 2px solid white;
        }

        td.menu-titre {
            width: 20%;
        }

        td.menu-radio {
            width: 15%;
        }

        td.menu-form {
            width: 40%;
        }

        td.menu-submit {
            width: 10%;
        }

input[type=radio] {
    cursor: pointer;
    accent-color: var(--color_hover);
}

select {
    cursor: pointer;
    color: var(--color_hover);
}

select.plateforme {
    width: 100%;
    height: 100%;
    margin: 0;
}

input[type=submit] {
    width: 100%;
    color: var(--color_submit);
    font-weight: bold;
    font-size: small;
    padding: 5% 10%;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: var(--color_bandeau);
}

input[type=submit]:hover, input[type=submit]:active {
    color: var(--color_submit);
    background-color: var(--color_hover);
}

input[type=text] {
    width: 90%;
    color: var(--color_hover);
    cursor: pointer;
}

.fields {
    text-align: left;
}

/* Display table for screen higher than 800px */
/* Section Standard */
        #standard {
            display: table;
        }

    /* Section Standard Main Table */
        table.standard-main-table {
            width: 100%;
            border-collapse: collapse;
            font-family: Helvetica, sans-serif;
        }

        tr.standard-main-table-title-console {
            background-color: var(--color_bandeau);
            color: var(--color_bandeau_text);
            text-align: center;
            font-weight: bold;
            border-bottom: 1px solid white;
        }

        td.standard-main-table-title-console {
            padding: 5px;
            border-radius: 5px;
        }

        tr.standard-main-table {
            vertical-align: top;
        }

        td.standard-main-table-game {
            width: 75%;
        }

        td.standard-main-table-console-accessory {
            width: 25%;
        }

    /* Section Standard Game */
        table.standard-game {
            width: 100%;
            border-collapse: collapse;
            font-family: Helvetica, sans-serif;
        }

        tr.standard-game-title {
            background-color: var(--color_bandeau);
            color: var(--color_bandeau_text);
            text-align: center;
            font-size: small;
            font-weight: bold;
            border-style: solid;
            border-color: var(--color_bandeau);
            border-width: 1px;
        }

        th.standard-game-title {
            padding: 5px;
        }

        tr.standard-game-data {
            text-align: center;
            font-size: small;
            border-left: 1px solid var(--color_bandeau);
            border-bottom: 1px solid var(--color_bandeau);
        }

    /* Transition effect hover a game in the list */
        tr.standard-game-data:hover, tr.standard-game-data:active {
            background-color: var(--color_hover);
            color: var(--color_hover_text);
            transition: 0.4s;
        }

    /* Display cover effect hover a game in the list */
        td.standard-game-data-cover {
            position:relative;
            cursor: pointer;
        }

        td.standard-game-data-cover span{
            position:absolute;
            display:none;
            z-index:99;
        }

        td.standard-game-data-cover:hover span, td.standard-game-data-cover:active span{
            display:block;
        }

    /* Section Standard Console Accessory Table */
        /* Section Standard Console */
            table.standard-console {
                width: 100%;
                border-collapse: collapse;
                font-family: Helvetica, sans-serif;
            }

            tr.standard-console-title {
                background-color: var(--color_bandeau);
                color: var(--color_bandeau_text);
                text-align: center;
                font-size: small;
                font-weight: bold;
                border-style: solid;
                border-color: var(--color_bandeau);
                border-width: 1px;
            }

            th.standard-console-title {
                padding: 5px;
            }

            .standard-console-data-picture {
                text-align: center;
            }

            tr.standard-console-data {
                padding: 5px;
                text-align: right;
                font-size: small;
                border-bottom: 1px solid var(--color_bandeau);
            }

            tr.standard-console-missing {
                padding: 5px;
                text-align: right;
                font-size: small;
                border-bottom: 1px solid var(--color_bandeau);
            }

        /* Section Standard Accessory */
            table.standard-accessory {
                width: 100%;
                border-collapse: collapse;
                font-family: Helvetica, sans-serif;
            }

            tr.standard-accessory-title {
                background-color: var(--color_bandeau);
                color: var(--color_bandeau_text);
                text-align: center;
                font-size: small;
                font-weight: bold;
                border-style: solid;
                border-color: var(--color_bandeau);
                border-width: 1px;
            }

            th.standard-accessory-title {
                padding: 5px;
            }

            .standard-accessory-data-picture {
                text-align: center;
            }

            tr.standard-accessory-data {
                padding: 5px;
                text-align: right;
                font-size: small;
                border-bottom: 1px solid var(--color_bandeau);
            }

            tr.standard-accessory-missing {
                padding: 5px;
                text-align: right;
                font-size: small;
                border-bottom: 1px solid var(--color_bandeau);
            }

    /* Hide Mobile Section */
        #mobile {
            display: none;
        }

/* Display table for screen less than 800px */    
        @media screen and (max-width: 800px) {
    /* Hide Standard Section */       
            #standard {
            display: none;
            }

/* Section  Mobile */
            #mobile {
                display: table;
            }

    /* Section Mobile Game */
            table.mobile-game {
                width: 100%;
                border-collapse: collapse;
                font-family: Helvetica, sans-serif;
            }

            td.mobile-game-title-console {
                padding: 5px;
                background-color: var(--color_bandeau);
                color: var(--color_bandeau_text);
                text-align: center;
                font-weight: bold;
            }

            td.mobile-game-title {
                width: 25%;
                padding: 5px;
                vertical-align: top;
                text-align: right;
                font-size: small;
                font-weight: bold;
                color: var(--color_hover);
                border-color: var(--color_bandeau);
                border-style: solid;
                border-width: 1px 0px 0px 0px ;
            }

            td.mobile-game-data {
                width: 50%;
                padding: 5px;
                vertical-align: top;
                text-align: left;
                font-size: small;
                color: var(--color_data);
                border-style: solid;
                border-width: 1px 0px 0px 0px;
                border-color: var(--color_bandeau);
            }

            tr.mobile-game-separator {
                border-bottom: 3px solid var(--color_bandeau);
            }

            .mobile-game-data-cover {
                text-align: center;
            }

            img.mobile-game-data-cover {
                max-width: 144px;
                max-height: 180px;
            }

    /* Section Mobile Console */
            table.mobile-console {
                width: 100%;
                border-collapse: collapse;
                font-family: Helvetica, sans-serif;
            }

            td.mobile-console-title-console {
                padding: 5px;
                background-color: var(--color_bandeau);
                color: var(--color_bandeau_text);
                text-align: center;
                font-weight: bold;
            }

            td.mobile-console-title {
                width: 25%;
                padding: 5px;
                vertical-align: top;
                text-align: right;
                font-size: small;
                font-weight: bold;
                color: var(--color_hover);
                border-style: solid;
                border-color: var(--color_bandeau);
                border-width: 1px 0px 0px 0px ;
            }

            td.mobile-console-data {
                width: 50%;
                padding: 5px;
                vertical-align: top;
                text-align: left;
                font-size: small;
                color: var(--color_data);
                border-style: solid;
                border-width: 1px 0px 0px 0px;
                border-color: var(--color_bandeau);
            }

            td.mobile-console-missing {
                padding: 5px;
                vertical-align: top;
                text-align: center;
                font-size: small;
                color: var(--color_data);
                border-style: solid;
                border-width: 1px 0px 0px 0px;
                border-color: var(--color_bandeau);
            }

            .mobile-console-data-cover {
                text-align: center;
            }

            img.mobile-console-data-cover {
                max-width: 144px;
                max-height: 180px;
            }

    /* Section Mobile Accessory */
            table.mobile-accessory {
                width: 100%;
                border-collapse: collapse;
                font-family: Helvetica, sans-serif;
            }

            td.mobile-accessory-title-accessory {
                padding: 5px;
                background-color: var(--color_bandeau);
                color: var(--color_bandeau_text);
                text-align: center;
                font-weight: bold;
            }

            td.mobile-accessory-title {
                width: 25%;
                padding: 5px;
                vertical-align: top;
                text-align: right;
                font-size: small;
                font-weight: bold;
                color: var(--color_hover);
                border-style: solid;
                border-color: var(--color_bandeau);
                border-width: 1px 0px 0px 0px ;
            }

            td.mobile-accessory-data {
                width: 50%;
                padding: 5px;
                vertical-align: top;
                text-align: left;
                font-size: small;
                color: var(--color_data);
                border-style: solid;
                border-width: 1px 0px 0px 0px;
                border-color: var(--color_bandeau);
            }

            td.mobile-accessory-missing {
                padding: 5px;
                vertical-align: top;
                text-align: center;
                font-size: small;
                color: var(--color_data);
                border-style: solid;
                border-width: 1px 0px 0px 0px;
                border-color: var(--color_bandeau);
            }

            .mobile-accessory-data-cover {
                text-align: center;
            }

            img.mobile-accessory-data-cover {
                max-width: 144px;
                max-height: 180px;
            }

        }