nav ul{
            list-style: none;
            margin-left: -2em;
        }
        nav {
            margin-bottom: 15px;
            text-align: left;
        }
        nav button {
            text-transform: uppercase;
            margin: 3px;
            padding: 8px;
            cursor: pointer;
            border: none;
            border-bottom: 1px solid black;
            border-radius: 4px;
            font-size: 1rem;
            transition: all ease-in 0.4s;
        }
        nav button.active,
        nav button:hover {
            opacity: 0.6;        
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }
        th, td {
            padding: 10px 8px;
            border: 1px solid #ddd;
            text-align: left;
            vertical-align: middle;
        }
        th {
            background: #f0f0f0;
        }
        img {
            max-width: 100px;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        #productCarousel, .card{
            height: 300px;
            max-height: 300px;
        }
        
        table {
            border-collapse: collapse;
            width: 100%;
            background: #fff;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
            vertical-align: middle;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        img.thumbnail {
            max-width: 80px;
            max-height: 80px;
            object-fit: contain;
            margin: 2px;
        }
        a.view-button, a.add-thumbs-button {
            display: inline-block;
            padding: 6px 12px;
            text-decoration: none;
            border-radius: 4px;
            font-size: 0.9em;
            margin-left: 5px;
        }
        /*
        a.view-button {
            background-color: #2196F3;
        }
        a.view-button:hover {
            background-color: #0b7dda;
        }
        a.add-thumbs-button {
            background-color: #FF9800;
        }
        a.add-thumbs-button:hover {
            background-color: #e68a00;
        }
            */
        @media (max-width: 600px) {
            table, thead, tbody, th, td, tr {
                display: block;
            }
            thead tr {
                display: none;
            }
            tr {
                margin-bottom: 15px;
                border: 1px solid #ccc;
                padding: 10px;
                background: white;
            }
            td {
                border: none;
                padding: 6px 10px;
                position: relative;
                text-align: right;
            }
            td::before {
                position: absolute;
                left: 10px;
                width: 50%;
                white-space: nowrap;
                font-weight: bold;
                text-align: left;
            }
            td:nth-of-type(1)::before { content: "Titre"; }
            td:nth-of-type(2)::before { content: "Image"; }
            td:nth-of-type(3)::before { content: "Prix TTC"; }
            td:nth-of-type(4)::before { content: "Catégorie"; }
            td:nth-of-type(5)::before { content: "Actions"; }
            img {
                max-width: 80px;
            }
        }