/* ===============================
   DESKTOP.CSS - STYLES ORDINATEUR
   =============================== */

/* Header original - HAUTEUR DRASTIQUEMENT RÉDUITE sur desktop */
@media (min-width: 1024px) {
    header,
    .header,
    .header-content,
    .header-text,
    .header-settings-btn,
    .app-container header,
    body .app-container header,
    html body .app-container header {
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        padding: 2px 8px !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: rgba(102, 126, 234, 0.1) !important;
        border-radius: 4px !important;
        box-shadow: none !important;
    }
    
    .header h1 {
        font-size: 0.6rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .header-settings-btn {
        width: 16px !important;
        height: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .header-settings-btn svg {
        width: 8px !important;
        height: 8px !important;
    }
}


/* ===== NAVIGATION MOBILE - MASQUÉE SUR DESKTOP ===== */

/* Menu mobile complètement masqué sur desktop */
@media (min-width: 1024px) {
    .nav,
    .nav-tabs,
    .nav-tab,
    .nav-icon,
    .nav-text {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        z-index: -9999 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: hidden !important;
        clip: rect(0,0,0,0) !important;
        clip-path: inset(100%) !important;
        transform: scale(0) !important;
        pointer-events: none !important;
    }
}

/* ===== NAVIGATION PC - HARMONISÉE AVEC LE NOUVEAU HEADER ===== */

/* Styles pour la navigation PC dans le header */
@media (min-width: 1024px) {
    /* Navigation PC - Centrée dans le header */
    .pc-header-center {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: center;
    }
    
    /* Boutons de navigation PC */
    .pc-nav-btn {
        background: transparent;
        border: none;
        color: rgba(255,255,255,0.9);
        padding: 12px 20px;
        border-radius: 12px;
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
        white-space: nowrap;
    }
    
    /* Effet de survol pour les boutons PC */
    .pc-nav-btn:hover {
        background: rgba(255,255,255,0.1);
        color: white;
        transform: translateY(-1px);
    }
    
    /* État actif pour les boutons PC */
    .pc-nav-btn.active {
        background: rgba(255,255,255,0.2);
        color: white;
        box-shadow: 0 4px 12px rgba(255,255,255,0.2);
    }
    
    /* Bouton paramètres PC */
    .pc-header-right .pc-nav-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Icône SVG dans le bouton paramètres */
    .pc-header-right .pc-nav-btn svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
    }
}

/* Éléments desktop-only - Masqués sur mobile */
@media (max-width: 1023px) {
    .desktop-only {
        display: none !important;
    }
}

/* Éléments desktop-only - Visibles sur desktop */
@media (min-width: 1024px) {
    .desktop-only {
        display: block !important;
    }
}

/* Éléments mobile-only - Visibles sur mobile */
@media (max-width: 1023px) {
    .mobile-only {
        display: block !important;
    }
}

/* Éléments mobile-only - Masqués sur desktop */
@media (min-width: 1024px) {
    .mobile-only {
        display: none !important;
    }
}

/* Brand du menu desktop - BLOC COMPLÈTEMENT SUPPRIMÉ */
.nav-brand {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    clip-path: inset(100%) !important;
    transform: scale(0) !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
}

.nav-brand h1 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    clip-path: inset(100%) !important;
    transform: scale(0) !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
}

/* ===== ESPACEMENT DES PAGES - HARMONISÉ AVEC LE HEADER PC ===== */

/* Espacement desktop avec le nouveau header PC */
@media (min-width: 1024px) {
    .content {
        padding: 20px 24px calc(100px + env(safe-area-inset-bottom));
        margin-top: 0;
    }
    
    /* Première carte de chaque page - espacement harmonieux */
    .page .enhanced-card:first-of-type,
    .page .card:first-of-type,
    .page .overview-master-card:first-of-type {
        margin-top: 24px !important;
    }
    
    /* Espacement général des cartes sur desktop */
    .enhanced-card,
    .card {
        margin-bottom: 20px;
    }
    
    /* Padding des pages pour s'harmoniser avec le header */
    .page {
        padding: 0 0 20px 0;
    }
    
    /* Espacement spécifique pour les sections importantes */
    .overview-section,
    .stats-section,
    .promos-section,
    .history-section {
        margin-bottom: 32px;
    }
}