/* ========================================
   TOPBAR RESPONSIVE - LA LIGNE ROUGE
   Styles pour rendre la barre de navigation responsive
   ======================================== */

/* Base - Empêcher le débordement */
.topbar-responsive {
    max-width: 100vw;
    overflow-x: hidden;
}

.topbar-responsive * {
    box-sizing: border-box;
}

/* ========================================
   MOBILE (< 768px)
   ======================================== */
@media (max-width: 768px) {
    /* Container principal */
    .topbar-responsive {
        backdrop-filter: blur(10px);
    }
    
    /* Padding réduit */
    .topbar-responsive .relative.mx-auto {
        padding: 0.75rem !important;
    }
    
    /* Logo compact */
    .topbar-responsive img[alt*="Logo"] {
        height: 3.5rem !important;
        max-height: 3.5rem !important;
        width: auto !important;
    }
    
    /* Flex container */
    .topbar-responsive .flex.justify-between {
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
    }
    
    /* Barre de recherche optimisée */
    .topbar-responsive #openSearchBtn {
        flex: 1 1 auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 0.5rem !important;
    }
    
    .topbar-responsive #openSearchBtn > div {
        padding: 0.625rem 0.75rem 0.625rem 2.25rem !important;
        font-size: 0.8125rem !important;
        border-radius: 9999px !important;
    }
    
    .topbar-responsive #openSearchBtn i.fa-search {
        left: 0.625rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Texte de recherche adaptatif */
    .topbar-responsive #openSearchBtn span {
        display: inline !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Bouton login compact */
    .topbar-responsive a[href="/login"] > div {
        width: 2.75rem !important;
        height: 2.75rem !important;
    }
    
    .topbar-responsive a[href="/login"] i.fa-user {
        font-size: 1.125rem !important;
    }
    
    /* Cacher les tags sur mobile */
    .topbar-responsive .topbar-tag-btn {
        display: none !important;
    }
    
    /* Container des tags */
    .topbar-responsive .flex.items-center.gap-3 {
        gap: 0.5rem !important;
    }
    
    /* Empêcher le débordement */
    .topbar-responsive .flex {
        overflow-x: hidden !important;
    }
}

/* ========================================
   PETITS MOBILES (< 375px)
   ======================================== */
@media (max-width: 374px) {
    /* Logo encore plus petit */
    .topbar-responsive img[alt*="Logo"] {
        height: 2.75rem !important;
        max-height: 2.75rem !important;
    }
    
    /* Padding minimal */
    .topbar-responsive .relative.mx-auto {
        padding: 0.5rem !important;
    }
    
    /* Barre de recherche ultra-compacte */
    .topbar-responsive #openSearchBtn > div {
        padding: 0.5rem 0.5rem 0.5rem 2rem !important;
        font-size: 0.75rem !important;
    }
    
    .topbar-responsive #openSearchBtn i.fa-search {
        left: 0.5rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* Bouton login minimal */
    .topbar-responsive a[href="/login"] > div {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    .topbar-responsive a[href="/login"] i.fa-user {
        font-size: 1rem !important;
    }
    
    /* Gap minimal */
    .topbar-responsive .flex.justify-between {
        gap: 0.375rem !important;
    }
}

/* ========================================
   MODE PAYSAGE MOBILE
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) {
    /* Hauteur réduite en paysage */
    .topbar-responsive .relative.mx-auto {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .topbar-responsive img[alt*="Logo"] {
        height: 2.5rem !important;
        max-height: 2.5rem !important;
    }
    
    .topbar-responsive #openSearchBtn > div {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .topbar-responsive a[href="/login"] > div {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* ========================================
   TABLETTES (769px - 1024px)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Logo taille moyenne */
    .topbar-responsive img[alt*="Logo"] {
        height: 5rem !important;
        max-height: 5rem !important;
    }
    
    /* Tags compacts */
    .topbar-responsive .topbar-tag-btn {
        font-size: 0.625rem !important;
        padding: 0.375rem 0.75rem !important;
        letter-spacing: 0.05em !important;
    }
    
    /* Barre de recherche */
    .topbar-responsive #openSearchBtn {
        max-width: 24rem !important;
    }
    
    /* Bouton espace rédacteur compact */
    .topbar-responsive #espace-membre-link {
        padding: 0.5rem 1rem !important;
        font-size: 0.625rem !important;
        letter-spacing: 0.15em !important;
    }
}

/* ========================================
   GRANDS ÉCRANS (> 1024px)
   ======================================== */
@media (min-width: 1025px) {
    /* Limiter la largeur des tags */
    .topbar-responsive .hidden.md\:flex.flex-wrap {
        max-width: 32rem !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
    
    .topbar-responsive .hidden.md\:flex.flex-wrap::-webkit-scrollbar {
        display: none !important;
    }
}

/* ========================================
   AMÉLIORATIONS ACCESSIBILITÉ
   ======================================== */

/* Zone de clic minimale sur tactile */
@media (hover: none) and (pointer: coarse) {
    .topbar-responsive button,
    .topbar-responsive a {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .topbar-responsive .topbar-tag-btn {
        min-height: 36px !important;
        padding: 0.5rem 1rem !important;
    }
}

/* Réduire les animations sur mobile */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .topbar-responsive * {
        transition: none !important;
        animation: none !important;
    }
}

/* ========================================
   FIX DÉBORDEMENT SPÉCIFIQUE
   ======================================== */
@media (max-width: 768px) {
    /* Force le respect de la largeur */
    .topbar-responsive,
    .topbar-responsive * {
        max-width: 100vw !important;
    }
    
    /* Empêcher le wrap des éléments flex */
    .topbar-responsive .flex {
        flex-wrap: nowrap !important;
    }
    
    /* Texte qui ne doit pas déborder */
    .topbar-responsive span,
    .topbar-responsive button {
        word-break: keep-all !important;
        overflow: hidden !important;
    }
}

/* ========================================
   OPTIMISATIONS PERFORMANCES
   ======================================== */
@media (max-width: 768px) {
    /* Utiliser transform pour les animations */
    .topbar-responsive {
        will-change: transform;
        transform: translateZ(0);
    }
    
    /* Optimiser le backdrop-filter */
    .topbar-responsive {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}