<style>

html, body {
    background-color: #000;
}
        /* Corps : fond flou + image */
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            position: relative;
            color: rgb(0, 0, 0);
            background-color: #000; /* ✅ Empêche le flash blanc */
        }
        body::before {
            content: "";
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background:
                linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
                url('/img/TMC.png') center/cover no-repeat;
            filter: blur(6px);
            z-index: -1;
        }


        
/* Déplacement du bouton "Install in CM" plus à droite */
.btn-cm {
    padding: 4px 10px;  /* Réduire l'espacement */
    font-size: 0.8rem;   /* Réduire la taille du texte */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9px;
    background-color: #333;  /* Fond sombre */
    color: #f8f9fa;  /* Couleur du texte */
    margin-left: 90px;  /* Décalage du bouton vers la droite */
}

.btn-cm img {
    width: 16px;  /* Réduire la taille du logo */
    height: 16px;  /* Réduire la taille du logo */
    margin-right: 4px;  /* Espacement entre l'icône et le texte */
}

.btn-cm:hover {
    background-color: #FFA500;  /* Fond orange au survol */
    color: #333;  /* Texte noir au survol */
}


        /* Navbar */
        .navbar {
            background-color: rgba(0,0,0,0.8);
            box-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }
        .navbar-brand {
            font-weight: 700;
            color: #FFA500 !important; /* Couleur orange */
        }

        /* Conteneur principal */
        .main-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: rgba(0,0,0,0.75);
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.8);
        }

        /* Header */
        .header-container {
            background-color: rgba(0,0,0,0.5);
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.4);
        }
        .main-title {
            font-size: 2rem;
            font-weight: 700;
            color: #FFA500;
            margin-bottom: 0.5rem;
        }
        .subtitle {
            font-size: 1rem;
            color: #CCC;
            margin-bottom: 1rem;
        }

        /* Barre de recherche */
        .search-input {
            background-color: rgba(255,255,255,0.9);
            border: 1px solid #CCC;
            color: #333;
        }
        .search-input::placeholder {
            color: #777;
        }
        .search-input:focus {
            border-color: #FFA500;
            box-shadow: 0 0 8px #FFA500;
        }

        /* Indications de navigation */
        .current-path {
            font-style: italic;
            margin-bottom: 1rem;
            color: #AAA;
        }
        .current-path span {
            color: #FFA500;
        }
        .parent-directory {
            color: #FFA500;
            text-decoration: none;
            font-weight: bold;
        }
        .parent-directory:hover {
            text-decoration: underline;
        }

        th {
    text-decoration: underline; /* Souligner les titres des colonnes */
    cursor: pointer; /* Changer le curseur en main */
}

th em {
    font-style: normal; /* Supprimer l'italique si utilisé par erreur */
}


        /* Tableau */
        .table-responsive {
            animation: fadeIn 0.6s forwards ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        .table-dark tbody tr {
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            will-change: background-color, box-shadow;
        }
        .table-dark th {
            background-color: rgba(0,0,0,0.9);
            border-color: #444;
        }
        .table-dark tbody tr:hover {
            background-color: rgba(255, 165, 0, 0.06); /* survol très léger orange */
            box-shadow: inset 3px 0 0 #FFA500; /* fine lueur gauche sans agrandir */
        }
        .table-dark a {
            color: #FFA500;
            text-decoration: none;
        }
        .table-dark a:hover {
            text-decoration: underline;
        }

        /* Alert */
        .alert-dark {
            background-color: rgba(0,0,0,0.8);
            color: #CCC;
            border-color: #444;
        }

        /* Bordures du tableau */
        .table-bordered th, .table-bordered td {
            border: 1px solid #444;
        }
    </style>