/* ===================================
   MOBILE IDE FIX - TABS HORIZONTAL
   =================================== */

@media (max-width: 992px) {
    /* Container en colonne */
    #portfolio .ide-container {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
    }
    
    /* Sidebar horizontale - Structure Tabs */
    #portfolio .ide-sidebar {
        width: 100% !important;
        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
        overflow: hidden;
    }
    
    /* Cache le header PROJETS */
    #portfolio .ide-sidebar-header {
        display: none;
    }
    
    /* Liste horizontale scrollable - Momentum Scroll */
    #portfolio .ide-file-list {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto !important;
        overflow-y: hidden;
        white-space: nowrap !important;
        padding: 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    
    /* Masquer scrollbar Webkit */
    #portfolio .ide-file-list::-webkit-scrollbar {
        display: none;
    }
    
    /* Items - Style Tabs avec bordure bottom */
    #portfolio .ide-file {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        flex: 0 0 auto;
        flex-shrink: 0;
        min-width: 160px;
        padding: 1rem;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s ease;
        touch-action: manipulation;
    }
    
    #portfolio .ide-file:active {
        background: rgba(79, 70, 229, 0.05);
    }
    
    #portfolio .ide-file.active {
        background: transparent;
        border-bottom: 2px solid var(--wb-primary);
        color: var(--wb-primary);
    }
    
    /* Icône et nom */
    #portfolio .file-icon {
        font-size: 1.25rem;
        flex-shrink: 0;
    }
    
    #portfolio .file-name {
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    /* Main view */
    #portfolio .ide-main {
        width: 100%;
    }
    
    /* Projets - Display Control */
    #portfolio .project-view {
        display: none !important;
    }
    
    #portfolio .project-view.active {
        display: block !important;
    }
    
    /* Tabs */
    #portfolio .ide-tabs {
        display: flex;
        overflow-x: auto;
    }
    
    #portfolio .ide-tab {
        flex-shrink: 0;
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }
    
    /* Images */
    #portfolio .project-image {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    
    #portfolio .project-image-wrapper {
        margin-bottom: 1.25rem;
        overflow: hidden;
    }
    
    /* Tab content */
    #portfolio .tab-content {
        display: none;
        padding: 1.25rem;
    }
    
    #portfolio .tab-content.active {
        display: block;
    }
    
    /* Header projet */
    #portfolio .project-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    #portfolio .project-header .wb-btn,
    #portfolio .project-header .wb-btn-sm {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }
    
    #portfolio .project-title {
        font-size: 1.125rem;
        word-wrap: break-word;
        line-height: 1.4;
    }
    
    /* KPI Grid */
    #portfolio .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    #portfolio .kpi-card {
        padding: 1.25rem 1rem;
    }
    
    #portfolio .kpi-value {
        font-size: 1.75rem;
    }
    
    #portfolio .kpi-label {
        font-size: 0.75rem;
    }
    
    /* Code block */
    #portfolio .code-block {
        padding: 1.25rem;
    }
    
    #portfolio .code-line {
        font-size: 0.8125rem;
        padding-left: 0.75rem;
    }
    
    /* Image wrapper */
    #portfolio .project-image-wrapper {
        margin-bottom: 1.25rem;
    }
    
    #portfolio .project-desc {
        font-size: 0.9375rem;
        line-height: 1.6;
    }
}