.container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        /* Bouton Download */
        .download-bar {
            background: #205081;
            color: white;
            text-align: center;
            padding: 18px;
            font-size: 24px;
            font-weight: bold;
        }
        .download-bar a { color: white; text-decoration: none; }

        /* Onglets */
        .tabs {
            display: flex;
            background: #f1f1f1;
            border-bottom: 1px solid #ddd;
        }
        .tab {
            flex: 1;
            padding: 16px;
            text-align: center;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
        }
        .tab.active {
            background: white;
            border-bottom: 4px solid #205081;
            color: #205081;
        }

        .tab-content { display: none; padding: 25px; }
        .tab-content.active { display: block; }

        /* Stats */
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 20px;
            text-align: left;
        }

        /* Arbo */
        .arbo {
            background: #f8f9fa;
            padding: 15px;
            border: 1px solid #ddd;
            font-family: monospace;

            line-height: 1.4;
        }

        /* Visionneuse */
        .viewer {
            display: flex;
            gap: 20px;
        }
        .file-list {
            width: 35%;
            background: #f8f9fa;
            border: 1px solid #ddd;
            padding: 10px;
            max-height: 550px;
            overflow-y: auto;
        }
        .file-list a {
            display: block;
            padding: 10px;
            color: #205081;
            text-decoration: none;
        }
        .file-list a:hover { background: #e9ecef; }
        .preview-area {
            flex: 1;
            border: 1px solid #ddd;
            padding: 20px;
            background: white;
            min-height: 550px;
            overflow-y: auto;
        }

        /* === STYLES POUR LA LOUPE ET LE MODAL === */
.zoom-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;           /* Fond transparent */
    padding: 4px;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.zoom-icon:hover {
    background: transparent;           /* Reste transparent au hover */
    transform: scale(1.15);            /* Légère grossissement au hover */
}

.zoom-icon img {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); /* Ombre légère pour mieux voir */
}

@media (max-width: 900px) {
    #stats {
        flex-direction: column !important;
    }
    
    #stats > div {
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 20px;
    }

    .tabs {
        flex-wrap: wrap;
    }
    
    .tab {
        flex: 1 1 33% !important;
        font-size: 18px !important;
        padding: 12px !important;
    }
}

/* Style général pour mobile */
.panel-body {
    padding: 15px !important;
}

#stats {
    display: flex;
    gap: 15px;
    padding: 20px;
}

#stats > div {
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 900px) {
    #stats {
        flex-direction: column !important;
    }
    
    #stats > div {
        width: 100% !important;
        min-width: 100% !important;
    }
}         /* Visionneuse Responsive */
.viewer {
    display: flex;
    gap: 20px;
}

@media (max-width: 900px) {
    .viewer {
        flex-direction: column !important;
        min-height: auto;
    }
    
    .file-list {
        width: 100% !important;
        max-height: 300px !important;   /* plus court sur mobile */
    }
    
    .preview-area {
        width: 100% !important;
        max-height: 500px !important;
    }
}

/* ====================== BLOCK SCREENSHOTS SITE + FORUM ====================== */
@media (max-width: 900px) {
    /* Passage en colonne sur mobile */
    .panel-body table tbody tr:first-child td,
    .panel-body table tbody tr:last-child td {
        display: block;
        width: 100% !important;
        text-align: center;
        padding: 10px 0;
    }
    
    /* Espacement entre les deux images sur mobile */
    .panel-body table tbody tr:last-child td {
        margin-bottom: 15px;
    }
    
    /* Images un peu plus grandes sur mobile */
    .panel-body table img {
        max-width: 100% !important;
    }
}


/* ====================== VERSIONS + CAMEMBERT RESPONSIVE ====================== */
.versions-stats-container {
    display: flex;
    gap: 25px;
}

@media (max-width: 900px) {
    .versions-stats-container {
        flex-direction: column !important;
        gap: 30px;
    }
    
    .list-group-item {
        padding: 16px 15px !important;
    }
}

/* Hover des liens Versions */
.versions-link {
    color: #333 !important;
    transition: all 0.25s ease;
}

.versions-link:hover {
    background-color: #0066cc !important;
    color: #ffffff !important;
}

.versions-link:hover strong,
.versions-link:hover span,
.versions-link:hover .date-version {
    color: #ffffff !important;
}

.versions-link:hover .fa-sign-out {
    color: #ffffff !important;
}