/* Media queries organisées */

/* ========== MEDIA QUERIES ========== */

/* ----- MOBILE (-767px) ----- */
/* ----- MAIN PAGE ----- */

/* Hide mobile elements by default */
.mobile-menu,
.mobile-menu-toggle,
.mobile-nav,
.chat-fab,
.close-chat {
    display: none;
}

/* Reset base mobile styles */
@media screen and (max-width: 768px) {
    .main-container {
        padding: 0;
        gap: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Mobile Menu */
    .mobile-menu {
        display: block;
        position: fixed;
        top: 0.625rem;
        right: 0.625rem;
        z-index: 1000;
    }

    .mobile-menu-toggle {
        background: var(--bg-blur);
        backdrop-filter: blur(var(--glass-blur));
        border: 1px solid var(--button-border);
        color: var(--text-primary);
        padding: var(--space-sm);
        width: var(--control-size-md);
        height: var(--control-size-md);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: var(--radius-sm);
        transition: all var(--transition-normal);
    }

    .mobile-menu-toggle.active {
        background: var(--button-hover-bg);
        border-color: var(--theme-primary);
        color: var(--theme-primary);
    }

    .mobile-menu-toggle .menu-icon {
        line-height: 1;
        transition: transform var(--transition-normal);
    }

    .mobile-menu-toggle.active .menu-icon {
        transform: rotate(90deg);
    }

    /* Mobile Navigation */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-normal), visibility var(--transition-normal);
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    .mobile-nav {
        display: flex;
        position: fixed;
        flex-direction: column;
        top: 0;
        right: -20rem;
        width: 20rem;
        height: 100dvh;
        background: var(--bg-blur);
        backdrop-filter: blur(var(--glass-blur));
        padding: var(--space-md);
        transition: right var(--transition-normal);
        border-left: var(--border-thin) solid var(--window-border);
        box-shadow: -0.3125rem 0 0.9375rem rgba(0, 0, 0, 0.3);
        z-index: 1000;
        overflow-y: auto;
    }

    /* Prevent main content interaction when menu is open */
    body.menu-open .main-container {
        pointer-events: none;
    }

    /* Allow interactions only with menu when open */
    body.menu-open .mobile-menu,
    body.menu-open .mobile-nav {
        pointer-events: auto;
    }

    /* Prevent scroll when menu or chat is open */
    body.menu-open,
    body.chat-open {
        overflow: hidden;
    }

    /* Prevent main content interaction when chat is open */
    body.chat-open .main-container {
        pointer-events: none;
    }

    /* Allow interactions only with chat when open */
    body.chat-open .chat-container,
    body.chat-open .close-chat {
        pointer-events: auto;
    }

    /* Raise chat above hamburger menu (z-index 1001) when open */
    body.chat-open .chat-container.fab-active {
        z-index: 1100;
    }

    /* Ensure chat is above other content */
    .mobile-menu-toggle {
        z-index: 1001;
    }

    .mobile-nav.active {
        right: 0;
        pointer-events: auto;
    }

    .mobile-nav-item {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 2.75rem; /* accessibilité tactile */
        padding: var(--space-sm) var(--space-md);
        margin: 0;
        background: var(--button-bg);
        border: var(--border-thin) solid var(--button-border);
        color: var(--text-primary);
        
        text-align: left;
        cursor: pointer;
        border-radius: var(--radius-sm);
        transition: all var(--transition-normal);
        display: flex;
        align-items: center;
        gap: var(--space-sm);
    }

    body.menu-open .mobile-menu-overlay {
        pointer-events: auto;
    }

    /* Mobile nav item hover - desktop only with precise pointer */
    @media (hover: hover) and (pointer: fine) {
        .mobile-nav-item:hover {
            background: var(--button-hover-bg);
            border-color: var(--theme-primary);
            color: var(--theme-primary);
        }
 
        .mobile-nav-item:hover .nav-icon {
            animation: none;
            opacity: 1;
        }
    }
 
    .mobile-nav-item:focus {
        background: var(--button-hover-bg);
        border-color: var(--theme-primary);
        color: var(--theme-primary);
    }
 
    /* Touch feedback for mobile */
    .mobile-nav-item:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
 
    .mobile-nav-item .nav-icon {
        color: var(--theme-primary);
        animation: pulse 2s infinite;
    }

    /* Mobile View Close Button */
    .mobile-view-close {
        position: fixed;
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        background: var(--bg-terminal);
        border: 1px solid var(--button-border);
        color: var(--text-primary);
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 901;
        transition: all 0.3s ease;
    }

    /* Mobile view close button hover - desktop only with precise pointer */
    @media (hover: hover) and (pointer: fine) {
        .mobile-view-close:hover {
            background: var(--button-hover-bg);
            border-color: var(--theme-error);
            color: var(--theme-error);
        }
    }
 
    /* Touch feedback for mobile */
    .mobile-view-close:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    /* Mobile View Container Styles */
    .terminal-container.mobile-active,
    .chat-container.mobile-active {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 900;
        background: var(--bg-terminal);
    }

    /* TERMINAL */

    /* Mobile Terminal Section */
    .mobile-terminal-section {
        margin-top: 20px;
        border-top: 1px solid var(--window-border);
        padding-top: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        max-height: calc(100dvh);
    }

    /* Mobile Navigation */
    .mobile-nav.active {
        right: 0;
    }

    /* Navigation Section */
    .nav-section {
        flex-shrink: 0; /* Prevent shrinking */
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        margin-top: var(--space-sm);
    }

    /* Terminal Container in Mobile View */
    .terminal-container.mobile-view {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Important: prevent container overflow */
        max-height: calc(100dvh - 150px); /* Dynamic viewport adjustment */
    }

    .terminal-container.mobile-view .terminal-window {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0; /* Allow shrinking */
    }

    .terminal-container.mobile-view .terminal-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0; /* Allow content area to shrink */
    }

    .terminal-container.mobile-view .terminal-output {
        flex: 1;
        overflow-y: auto;
        min-height: 0; /* Allow output to shrink */
        padding: 10px;
        font-size: 0.65em; /* Police réduite pour mobile */
        line-height: 1.4; /* Ajuster l'interligne pour une meilleure lisibilité */
    }

    .terminal-container.mobile-view .terminal-input {
        flex-shrink: 0; /* Prevent input from shrinking */
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px;
        background: var(--bg-terminal);
        border-top: 1px solid var(--window-border);
        min-height: 41px; /* Ensure consistent input height */
        font-size: 0.65em; /* Police réduite pour mobile */
    }

    /* Custom Scrollbar for Mobile Terminal */
    .terminal-container.mobile-view .terminal-output::-webkit-scrollbar {
        width: 4px;
    }

    .terminal-container.mobile-view .terminal-output::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color);
        border-radius: 2px;
    }

    .main-logo {
        max-height: 80px;
    }

    /* Header - bloc simple pour le logo sur mobile */
    .interface-header {
        display: block;
        position: relative;
        width: 100%;
        padding: var(--space-md) 0;
        background: transparent;
        border: none;
        box-shadow: none;
        mask-image: none;
        -webkit-mask-image: none;
        min-height: auto;
        height: auto;
    }

    .interface-header::before {
        display: none;
    }

    .status-bar {
        justify-content: flex-end;
        padding: 5px;
    }

    .nav-links {
        display: none;
    }

    /* Monitor/Player Section */
    .monitor-container {
        margin-bottom: 10px;
    }

    .player-container > iframe {
        height: 200px;
        margin-bottom: 10px;
    }

    /* Custom Audio Player Mobile */
    .quality-btn {
        padding: var(--space-xs) var(--space-xs);
        font-size: var(--font-size-xxs);
    }

    /* Station Controls */    
    .signal-indicator {
        padding-left: 5px;
        gap: 8px;
    }
    
    .signal-strength {
        height: 15px;
        display: flex;
        gap: 2px;
        align-items: flex-end;
    }
    
    .signal-strength .bar {
        width: 4px;
        height: 4px;
    }
    
    @keyframes signalPulse {
        from {
            height: 4px;
            opacity: 0.5;
        }
        to {
            height: 15px;
            opacity: 1;
        }
    }
    
    .signal-text, 
    .listener-label {
        font-size: 0.95em;
    }

    .signal-status.adjusting .signal-strength .bar {
        animation: signalAdjustMobile 0.5s ease-in-out infinite !important;
    }

    @keyframes signalAdjustMobile {
        0%, 100% {
            height: 4px;
            opacity: 0.3;
            transform: scaleY(0.5);
        }
        50% {
            height: 15px;
            opacity: 1;
            transform: scaleY(1.2);
        }
    }
    
    .listeners-count {
        margin: 0 4px;
    }

    .frequency-button .frequency-icon {
        font-size: 0.8em;
    }

    .freq-details {
        padding-left: 0;
        margin-top: 3px;
        display: block;
        font-size: 0.9em;
        opacity: 0.8;
    }

    /* Track History & Playlist */
    .monitor-flex-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 10px;
    }

    .playlist-content {
        padding: var(--space-sm);
    }

    .next-playlist {
        margin-top: var(--space-xs);
        padding-top: var(--space-md);
    }

    /* === CHAT === */
    
    .terminal-container,
    .chat-container {
        display: none;
    }

    /* Chat Container Mobile */
    .chat-container.fab-active {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0; /* Bord bas aligné avec le viewport */
        left: 0;
        width: 100%;
        height: 89dvh; /* Hauteur dynamique du viewport */
        z-index: 900;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    .chat-container.fab-active .chat-window {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--bg-blur);
        backdrop-filter: blur(var(--glass-blur));
        border: 1px solid var(--window-border);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

    .chat-container.fab-active .chat-content {
        flex: 1;
        overflow: hidden;
        position: relative;
    }

    .chat-container.fab-active.visible {
        transform: translateY(0);
    }

    /* Chat Header and Close Button */
    .chat-container.fab-active .window-header {
        background: var(--window-header-bg);
        color: var(--window-header-text);
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--window-border);
        min-height: 31px;
        font-size: clamp(0.8rem, 1.5vw, 1rem);
        flex-shrink: 0;
    }

    .close-chat {
        min-width: 1rem;
        min-height: 1rem;
        max-width: 1.5rem;
        max-height: 1.5rem;
        width: 1.5rem;
        height: 1.5rem;
        border: revert;
        border-color: #D6DADE;
        background: #D6DADE;
        cursor: pointer;
        padding: 0.125rem;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-fast);
        color: var(--window-header-text);
        
        margin-left: auto;
        font-size: var(--font-size-md);
    }

    /* Close chat button hover - desktop only with precise pointer */
    @media (hover: hover) and (pointer: fine) {
        .close-chat:hover {
            background: #00000033;
            color: var(--theme-error);
        }
    }
 
    /* Touch feedback for mobile */
    .close-chat:active {
        transform: scale(0.9);
        transition: transform 0.1s ease;
    }

    /* Chat FAB */
    .chat-fab {
        display: flex;
        position: fixed;
        bottom: 2dvh;
        right: 2dvh;
        background: var(--bg-blur);
        backdrop-filter: blur(var(--glass-blur));
        border: var(--border-thin) solid var(--button-border);
        color: var(--text-primary);
        padding: var(--space-xmd) var(--space-xmd);
        border-radius: var(--radius-pill);
        
        z-index: 890;
        cursor: pointer;
        transition: all var(--transition-normal);
        box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.3);
        align-items: center;
        gap: var(--space-sm);
        opacity: 1;
        transform: scale(1);
    }

    /* Chat FAB hover - desktop only with precise pointer */
    @media (hover: hover) and (pointer: fine) {
        .chat-fab:hover {
            background: var(--button-hover-bg);
            border-color: var(--theme-primary);
            color: var(--theme-primary);
            transform: translateY(-0.125rem);
        }
    }
 
    .chat-fab:focus {
        background: var(--button-hover-bg);
        border-color: var(--theme-primary);
        color: var(--theme-primary);
        transform: translateY(-0.125rem);
    }
 
    /* Touch feedback for mobile */
    .chat-fab:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    .fab-icon {
        color: var(--theme-primary);
        animation: pulse 2s infinite;
    }

    /* Prevent main content interaction when chat is open */
    body.chat-open .main-container {
        pointer-events: none;
    }

    /* Allow interactions only with chat when open */
    body.chat-open .chat-container,
    body.chat-open .close-chat {
        pointer-events: auto;
    }

    @media (max-width: 768px) {
        /* Hide window management features on mobile */
        .resize-handle,
        .minimized-windows {
            display: none;
        }
        
        /* Hide minimize button but keep refresh button visible */
        .window-control.minimize {
            display: none;
        }
        
        /* Ensure refresh-chat stays visible */
        .refresh-chat {
            display: flex;
        }
        
        /* Static positioning for mobile */
        .monitor-window,
        .terminal-window,
        .chat-window {
            position: static;
            width: 100%;
            height: auto;
            transform: none;
        }
    }

    /* Ajustements de layout pour les boutons */
    .chat-container.fab-active .window-header {
        display: flex;
        align-items: center;
    }
    
    .chat-container.fab-active .window-header > span {
        flex: 1;
    }
    
    /* Pour être sûr qu'il n'y a pas d'espace entre les boutons */
    .refresh-chat span,
    .close-chat span {
        display: none;
    }

    /* ----- MODALS ----- */

    /* Body fixes for modals - mobile and desktop */
    body:has(.visual-modal.active),
    body:has(.data-modal.active),
    body:has(.schedule-modal.active),
    body:has(.request-modal.active),
    body.modal-open,
    body.menu-open,
    body.chat-open {
        /* Lock scroll on all devices */
        overflow: hidden;
    }

    /* Ensure modal content can scroll */
    .schedule-modal.active .schedule-content,
    .request-modal.active .request-content {
        /* Container takes full height */
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Allow iframe content to scroll */
    .schedule-modal.active .schedule-frame,
    .request-modal.active .request-frame {
        flex: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile nav scroll prevention */
    body:has(.mobile-nav.active) {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    /* Mobile nav content can scroll if needed */
    .mobile-nav.active {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Chat window mobile scroll prevention */
    .chat-container.fab-active {
        /* Allow scroll in chat content */
        overflow: hidden;
    }

    .chat-container.fab-active .chat-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Header adjustments */
    .schedule-header,
    .request-header {
        width: 100%;
        padding: 5px 15px;
        flex-shrink: 0;
    }

    /* Force full width on mobile for schedule and request modals */
    .schedule-content,
    .request-content {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
    }

    /* Reset modal parent positioning on mobile to prevent vertical offset */
    .schedule-modal,
    .request-modal {
        align-items: flex-start;
        justify-content: flex-start;
    }

    /* Ensure content starts from top without any transform offset */
    .schedule-modal .schedule-content,
    .request-modal .request-content {
        transform: translateY(0) !important;
        margin: 0;
    }

    /* Header adjustments to match signal monitor style */
    .schedule-header,
    .request-header {
        width: 100%;
        padding: 5px 10px;
        max-height: 35px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9em;
        flex-shrink: 0;
    }

    /* Active modal states */
    .schedule-modal.active,
    .request-modal.active {
        opacity: 1;
        pointer-events: all;
    }

    /* Artwork modal responsive adjustments */
    .artwork-modal {
        width: 95vw !important; /* Almost full width on mobile */
        height: 85vh !important; /* Slightly less height for mobile */
        max-width: none !important;
        max-height: none !important;
    }

    /* Adjust zoom indicator for mobile */
    .artwork-modal .zoom-indicator {
        font-size: 0.65rem;
        padding: 0.375rem 0.5rem;
    }

    .artwork-modal .zoom-hint {
        display: none; /* Hide hint text on mobile */
    }

    /* Station Status */
    .station-title {
        min-height: 50px;
        padding: 8px;
    }

    .station-id {
        font-size: clamp(12px, 4vw, 1.2em);
        letter-spacing: clamp(0.5px, 0.1vw, 2px);
    }

    .station-title-wrapper {
        gap: 8px;
    }

    .footer-status {
        font-size: 0.9em;
    }

    /* Hide original chat button in mobile menu */
    .mobile-nav-item[data-view="chat"] {
        display: none;
    }
}

/* ----- ARCHIVES ----- */

/* Archives Mobile Styles */
@media (max-width: 767px) {
    /* Prevent scroll on body when modals are open */
    body:has(.visual-modal.active),
    body:has(.data-modal.active) {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* Window header font size adjustment */
    .window-header {
        font-size: 0.85rem;
        padding: 5px 10px;
    }

    .relay-status,
    .archive-counter {
        font-size: 0.60rem;
    }

    /* Archives content adjustments */
    .archives-content,
    .contact-content,
    .about-content {
        padding: 0;
        margin-top: 10px;
        margin-bottom: 10px; /* Match homepage spacing */
        min-height: 0; /* Remove default minimum height */
        display: flex;
        flex-direction: column;
    }

    /* Archives grid adjustments */
    .archives-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 15px;
        padding: 15px;
        min-height: 0; /* Allow grid to shrink based on content */
    }

    .archives-item {
        margin-bottom: 0;
    }

    .archives-item img {
        height: 180px;
    }

    /* Swipe Navigation Styles */
    .modal-image-container {
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
        position: relative; /* Ensure proper positioning of hints */
    }

    /* Reset du fix office_2.png pour mobile */
    .modal-image[src*="office_2.png"] {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }

    /* Visual feedback for touch interactions */
    .modal-image-container.touch-active::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 13, 26, 0.1);
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* Direction indicators */
    .modal-image-container.swipe-left::after,
    .modal-image-container.swipe-right::after {
        content: '◈';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: var(--theme-primary);
        font-size: 24px;
        opacity: 0.8;
        pointer-events: none;
        animation: pulse 2s infinite;
    }

    .modal-image-container.swipe-left::after {
        right: 15px;
    }

    .modal-image-container.swipe-right::after {
        left: 15px;
    }

    /* Ensure smooth transitions */
    .modal-image-container .modal-image {
        will-change: transform;
        transition: transform 0.3s ease;
    }

    /* Prevent text selection during swipe */
    .modal-image-container.touch-active {
        user-select: none;
        -webkit-user-select: none;
    }

    /* Modal positioning and spacing */
    .visual-modal,
    .data-modal {
        width: 100%;
        position: fixed;
        left: 0;
        transform: none;
    }

    .visual-modal {
        top: 0;
        height: 58dvh; /* Dynamic viewport height */
        margin: 0;
    }

    .data-modal {
        bottom: 0;
        height: 40dvh; /* Dynamic viewport height */
        top: auto;
    }

    /* Ensure proper spacing between modals */
    .visual-modal + .data-modal {
        margin-top: 2dvh; /* Primary spacing using dynamic viewport height */
    }

    /* Header size reduction for modals */
    .visual-modal .window-header,
    .data-modal .window-header {
        padding: 4px 8px;
        min-height: 26px;
        font-size: 0.75rem;
        display: flex;
        align-items: center; /* Ensure vertical centering */
        width: 100%; /* Ensure full width */
        box-sizing: border-box; /* Include padding in width calculation */
        position: sticky;
        top: 0;
        z-index: 1;
    }

    /* Adjust content areas to account for smaller headers */
    .modal-image-container {
        padding: 10px;
        height: calc(100dvh - 80px); /* Account for header and navigation */
        overflow: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .terminal-style-content {
        height: calc(100% - 26px);
        padding: 10px;
        font-size: 0.9em;
        overflow: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    /* Ensure modal content is properly contained */
    .visual-modal .analysis-window,
    .data-modal .analysis-window {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Optimize navigation area for mobile */
    .modal-navigation {
        padding: 8px;
        gap: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: relative;
    }

    /* Adjust navigation buttons */
    .nav-button {
        white-space: nowrap;
        flex-shrink: 0;
        min-width: max-content;
        width: auto;
    }

    /* Hide text in navigation buttons but keep them accessible */
    .nav-button.prev,
    .nav-button.next {
        font-size: 0;
        padding: 0;  /* Remove padding to better control centering */
        min-width: 36px;
        min-height: 36px;  /* Ensure consistent height */
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;  /* For absolute positioning of arrows */
    }

    /* Center arrows using pseudo-elements */
    .nav-button.prev::before,
    .nav-button.next::after {
        font-size: 16px;
        line-height: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  /* Perfect centering */
        width: 16px;  /* Set fixed width */
        height: 16px;  /* Set fixed height */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-button.prev::before {
        content: '◀';
    }

    .nav-button.next::after {
        content: '▶';
    }

    /* Navigation area spacing */
    .modal-navigation {
        padding: 8px;
        gap: 8px;
        height: 52px;  /* Fixed height to ensure consistent spacing */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Counter text adjustments */
    .nav-counter {
        font-size: 0.8em;
        position: absolute;  /* Take it out of the flow */
        left: 50%;  /* Center horizontally */
        transform: translateX(-50%);  /* Offset by its own width */
        white-space: nowrap;  /* Prevent wrapping */
    }
    

    /* Adjust fullscreen controls for mobile */
    .fullscreen-button {
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
    }

    /* ----- ABOUT ----- */

    .about-sections {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 15px;
        margin-bottom: 0;
    }

    .about-section {
        padding: 15px;
        margin-bottom: 20px;
    }

    .section-title {
        font-size: 1.1em;
    }

    .section-content {
        font-size: 0.9em;
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin: 10px 0;
        flex: 1;
    }

    .section-logo {
        float: none;
        width: 20vh;
        display: block;
        margin: 20px auto;
    }
    
    .section-content h3:first-of-type {
        margin-right: 0;
    }

    /* Ensure about window takes remaining space */
    .about-window {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .about-section:last-child {
        margin-bottom: 0;
    }

    .main-logo {
        max-height: 80px;
    }
}

/* Tablet - Fix for office_2.png */
@media (min-width: 769px) and (max-width: 992px) {
    .modal-image[src*="office_2.png"] {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}

/* ===== PROCESSING SIGNATURE RESPONSIVE ===== */

/* Mobile large */
@media (max-width: 767px) {
    .processing-signature {
        padding: 4px 8px;
    }
    
    .signature-icon {
        font-size: var(--font-size-sm);
    }
    
    .signature-status {
        font-size: calc(var(--font-size-xxs) * 0.85);
        padding: 1px 4px;
    }
}

/* ----- SCREEN SIZE OPTIMIZATIONS ----- */

/* High DPI Screen Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .main-logo,
    .footer-logo {
        image-rendering: -webkit-optimize-contrast;
    }

    .frequency-button,
    .schedule-button {
        font-smooth: always;
        -webkit-font-smoothing: antialiased;
    }
}

/* Ensure FAB is hidden on larger screens */
@media (min-width: 769px) {
    .chat-fab {
        display: none !important;
    }
}

/* ----- TABLETTES (769px+) ----- */
@media (min-width: 769px) {
    .status-bar {
        justify-content: space-between;
        padding: 0 var(--space-md);
    }

    /* Layout principal */
    .interface-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }

    .monitor-container {
        grid-column: 1 / -1;
    }

    /* Contrôles de station */
    .status-indicators {
        flex-direction: row;
        justify-content: space-between;
    }

    .signal-indicator {
        justify-content: flex-start;
    }

    .listeners-indicator {
        justify-content: flex-end;
    }

    .frequency-control {
        justify-content: flex-start;
    }

    .frequency-button {
        width: auto;
    }

    /* Fix signal bar size */
    .bar {
        width: 0.375rem;
    }

    /* Archives grid */
    .archives-grid {
        grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
    }

    /* Afficher le texte des boutons de navigation */
    .nav-button {
        font-size: inherit;
    }

    /* Cacher éléments spécifiques mobile */
    .mobile-menu,
    .mobile-menu-toggle,
    .chat-fab {
        display: none;
    }

    .visual-modal {
        top: 2dvh; /* Keep existing top spacing */
        height: 56dvh; /* Slightly reduced to maintain proportions */
      }
      
      .data-modal {
        bottom: 2dvh; /* Add bottom spacing to match top spacing */
        height: 38dvh; /* Slightly reduced to accommodate bottom spacing */
        top: auto;
      }
      
      /* Ensure proper spacing between modals is maintained */
      .visual-modal + .data-modal {
        margin-top: 2dvh; /* Keep existing spacing between modals */
      }
}

/* ----- DESKTOP (992px+) ----- */
@media (min-width: 992px) {
    /* Stack layout: signal on top, terminal and chat below */
    .interface-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: var(--space-md);
        width: 100%;
    }

    .monitor-container {
        grid-column: 1 / -1;  /* Full width */
        grid-row: 1;
    }

    .terminal-container {
        grid-column: 1;
        grid-row: 2;
    }

    .chat-container {
        grid-column: 2;
        grid-row: 2;
    }

    /* Keep the rest of the existing styles */
    .monitor-flex-container {
        display: flex;
        flex-direction: column;
    }

    /* Archives modal positions */
    .visual-modal {
        width: 71%;
        left: 1vw;
        height: 95vh;
        top: 3vh;
    }

    .data-modal {
        width: 25%;
        left: auto;
        right: 1vw;
        height: 95vh;
    }
}

/* ----- LARGE DESKTOP (1280px+) ----- */
@media (min-width: 1280px) {
    /* Return to 3-column horizontal layout */
    .interface-content {
        grid-template-columns: calc(50% - 1vw) calc(25% - 1vw) calc(25% - 1vw);
        grid-template-rows: 1fr;
        gap: var(--space-md);
        justify-content: space-between;
    }

    .monitor-container {
        grid-column: 1;
        grid-row: 1;
    }

    .terminal-container {
        grid-column: 2;
        grid-row: 1;
    }

    .chat-container {
        grid-column: 3;
        grid-row: 1;
    }

    /* Ensure track-history and playlist stay in column layout until 1920px */
    .monitor-flex-container {
        flex-direction: column;
        gap: var(--space-md);
    }

    .track-history-monitor,
    .playlist-monitor {
        width: 100%;
        flex: none;
        order: initial;
    }

    .playlist-monitor {
        order: 0;
    }

    .track-history-monitor {
        order: 1;
    }
}

/* ----- GRAND DESKTOP (1600px+) ----- */
@media (min-width: 1920px) {
    /* Return to row layout for history/playlist */
        .monitor-flex-container {
        flex-direction: row;
        display: flex;
        gap: var(--space-md);  
    }

    .playlist-monitor,
    .track-history-monitor {
        order: initial;
        width: auto;      
        flex: 1;          
        min-width: 0;     
    }

    /* Equal space distribution for both monitors */
    .track-history-monitor {
        flex: 1;        
    }

    .playlist-monitor {
        flex: 1;          
    }

    /* Larger signal bars */
    .bar {
        width: 0.5rem;
    }

    /* Larger social cards */
    .social-links {
        grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
    }

    /* Terminal et chat */
    .terminal-window,
    .chat-window {
        height: 50vh;
    }
}

/* ===== HEADER NAV SECTION RESPONSIVE (TRAPEZE CONTAINMENT) ===== */

/* palier 1: below 2180px - premier contact avec le bord du trapeze */
@media (max-width: 2179px) {
    .interface-header {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 40,71.43 L 38,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 40,71.43 L 38,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-header::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 40,71.43 L 38,100 L 2,100 L 0,71.43' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-header:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 40,71.43 L 38,100 L 2,100 L 0,71.43' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .header-nav-section {
        /* recentrage apres elargissement du trapeze */
        left: 20%;
    }
}

/* palier 2: below 1920px - deuxieme contact avec le bord du trapeze */
@media (max-width: 1919px) {
    .interface-header {
        /* trapeze elargi de 40 a 43 */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 43,71.43 L 41,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 43,71.43 L 41,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-header::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 43,71.43 L 41,100 L 2,100 L 0,71.43' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-header:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 43,71.43 L 41,100 L 2,100 L 0,71.43' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .header-nav-section {
        /* recentrage apres elargissement du trapeze */
        left: 21.5%;
    }
}

/* palier 3: below 1720px - troisieme contact avec le bord du trapeze */
@media (max-width: 1719px) {
    .interface-header {
        /* trapeze elargi de 43 a 46 */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 46,71.43 L 44,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 46,71.43 L 44,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-header::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 46,71.43 L 44,100 L 2,100 L 0,71.43' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-header:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 46,71.43 L 44,100 L 2,100 L 0,71.43' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .header-nav-section {
        /* recentrage apres elargissement du trapeze */
        left: 23%;
    }
}

/* palier 4: below 1600px - quatrieme contact avec le bord du trapeze */
@media (max-width: 1599px) {
    .interface-header {
        /* trapeze elargi de 46 a 49 */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 49,71.43 L 47,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 49,71.43 L 47,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-header::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 49,71.43 L 47,100 L 2,100 L 0,71.43' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-header:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 49,71.43 L 47,100 L 2,100 L 0,71.43' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .header-nav-section {
        /* recentrage apres elargissement du trapeze */
        left: 24.5%;
    }
}

/* palier 5: below 1240px - cinquieme contact avec le bord du trapeze */
@media (max-width: 1239px) {
    .interface-header {
        /* trapeze elargi de 49 a 52 */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 52,71.43 L 50,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 52,71.43 L 50,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-header::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 52,71.43 L 50,100 L 2,100 L 0,71.43' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-header:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 52,71.43 L 50,100 L 2,100 L 0,71.43' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .header-nav-section {
        /* recentrage apres elargissement du trapeze */
        left: 26%;
    }
}

/* palier 6: below 1140px - sixieme contact avec le bord du trapeze */
@media (max-width: 1139px) {
    .interface-header {
        /* trapeze elargi de 52 a 55 */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 55,71.43 L 53,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 55,71.43 L 53,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-header::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 55,71.43 L 53,100 L 2,100 L 0,71.43' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-header:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 55,71.43 L 53,100 L 2,100 L 0,71.43' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .header-nav-section {
        /* recentrage apres elargissement du trapeze */
        left: 27.5%;
    }
}

/* palier 7: below 1040px - septieme contact avec le bord du trapeze */
@media (max-width: 1039px) {
    .interface-header {
        /* trapeze elargi de 55 a 58 */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 58,71.43 L 56,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 58,71.43 L 56,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-header::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 58,71.43 L 56,100 L 2,100 L 0,71.43' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-header:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 58,71.43 L 56,100 L 2,100 L 0,71.43' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .header-nav-section {
        /* recentrage apres elargissement du trapeze */
        left: 29%;
    }
}

/* palier 8: below 980px - huitième contact avec le bord du trapeze */
@media (max-width: 979px) {
    .interface-header {
        /* trapeze elargi de 58 a 61 */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 61,71.43 L 59,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 61,71.43 L 59,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-header::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 61,71.43 L 59,100 L 2,100 L 0,71.43' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-header:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 61,71.43 L 59,100 L 2,100 L 0,71.43' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .header-nav-section {
        /* recentrage apres elargissement du trapeze */
        left: 30.5%;
    }
}

/* palier 9: below 880px - dernier ajustement elargi avant version mobile */
@media (max-width: 879px) {
    .interface-header {
        /* trapeze elargi de 61 a 68 pour tenir jusqu'au mobile */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 68,71.43 L 66,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,71.43 L 68,71.43 L 66,100 L 2,100 L 0,71.43 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-header::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 68,71.43 L 66,100 L 2,100 L 0,71.43' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-header:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100,71.43 L 68,71.43 L 66,100 L 2,100 L 0,71.43' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .header-nav-section {
        /* recentrage jusqu'a 34% pour tenir jusqu'au mobile */
        left: 34%;
    }
}

/* ===== FOOTER STATUS RESPONSIVE (TRAPEZE CONTAINMENT) ===== */

/* ===== FOOTER STATUS RESPONSIVE (TRAPEZE CONTAINMENT) ===== */

/* palier 1: below 1240px - premier contact avec le bord du trapeze */
@media (max-width: 1239px) {
    .interface-footer {
        /* trapeze elargi de 700/720 a 660/680 */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 660,200 L 680,0 L 980,0 L 1000,200 L 1000,600 L 0,600 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 660,200 L 680,0 L 980,0 L 1000,200 L 1000,600 L 0,600 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-footer::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 660,200 L 680,0 L 980,0 L 1000,200' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-footer:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 660,200 L 680,0 L 980,0 L 1000,200' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .footer-status {
        /* recentrage apres elargissement du trapeze */
        left: 84%;
    }
}

/* palier 2: below 1140px - deuxieme contact */
@media (max-width: 1139px) {
    .interface-footer {
        /* trapeze elargi de 660/680 a 630/650 */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 630,200 L 650,0 L 980,0 L 1000,200 L 1000,600 L 0,600 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 630,200 L 650,0 L 980,0 L 1000,200 L 1000,600 L 0,600 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-footer::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 630,200 L 650,0 L 980,0 L 1000,200' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-footer:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 630,200 L 650,0 L 980,0 L 1000,200' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .footer-status {
        left: 82%;
    }
}

/* palier 3: below 1040px - troisieme contact */
@media (max-width: 1039px) {
    .interface-footer {
        /* trapeze elargi de 630/650 a 600/620 */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 600,200 L 620,0 L 980,0 L 1000,200 L 1000,600 L 0,600 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 600,200 L 620,0 L 980,0 L 1000,200 L 1000,600 L 0,600 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-footer::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 600,200 L 620,0 L 980,0 L 1000,200' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-footer:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 600,200 L 620,0 L 980,0 L 1000,200' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .footer-status {
        left: 80.5%;
    }
}

/* palier 4: below 980px - quatrieme contact */
@media (max-width: 979px) {
    .interface-footer {
        /* trapeze elargi de 600/620 a 570/590 */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 570,200 L 590,0 L 980,0 L 1000,200 L 1000,600 L 0,600 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 570,200 L 590,0 L 980,0 L 1000,200 L 1000,600 L 0,600 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-footer::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 570,200 L 590,0 L 980,0 L 1000,200' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-footer:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 570,200 L 590,0 L 980,0 L 1000,200' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .footer-status {
        left: 79%;
    }
}

/* palier 5: below 880px - dernier palier desktop elargi avant mobile */
@media (max-width: 879px) {
    .interface-footer {
        /* trapeze elargi de 570/590 a 530/550 pour tenir jusqu'au mobile */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 530,200 L 550,0 L 980,0 L 1000,200 L 1000,600 L 0,600 Z' fill='white'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 530,200 L 550,0 L 980,0 L 1000,200 L 1000,600 L 0,600 Z' fill='white'/%3E%3C/svg%3E");
    }
    
    .interface-footer::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 530,200 L 550,0 L 980,0 L 1000,200' fill='none' stroke='%23dee2e6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .interface-footer:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M 0,200 L 530,200 L 550,0 L 980,0 L 1000,200' fill='none' stroke='%2374ff95' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
    
    .footer-status {
        left: 77%;
    }
}

/* ----- ORIENTATION SPÉCIFIQUE ----- */
@media (orientation: portrait) {
    .fullscreen-image {
        width: 100vw;
        height: auto;
    }

    .terminal-content,
    .chat-content {
        height: 100%;
    }
}

/* ----- OPTIMISATIONS POUR ÉCRANS HAUTE RÉSOLUTION ----- */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .main-logo,
    .boot-logo,
    .footer-logo {
        image-rendering: -webkit-optimize-contrast;
    }

    .terminal-input,
    .frequency-button,
    .schedule-button {
        font-smooth: always;
        -webkit-font-smoothing: antialiased;
    }
}