/*
 * mobile.css — LeNavire Mobile v6
 *
 * v6 — UI Refresh :
 *  • Overlay totalement transparent (fond noir supprimé — "enlève la")
 *  • Sidebar slide-in fluide 0.25s (backdrop-filter tué → zéro artefact)
 *  • Bottom nav redessinée : home en accent vert, icônes 44px, spacing propre
 *  • Sidebar : header repensé, back-btn vert, nav-items 46px min
 *  • Boutique mise en valeur (bordure or, fond chaud)
 *  • Header chat : hamburger 44px avec fond visible
 *  • User panel compact mobile
 *  • Input area : min-height 44px, actions 40px
 *  • Touch targets ≥ 44px partout
 */

/* ══════════════════════════════════════════════════
   VARIABLES — safe areas iOS/Android
   ══════════════════════════════════════════════════ */
:root {
    --mob-nav-h:   62px;
    --mob-hdr-h:   54px;
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Hamburger / flèche desktop ── */
.icon-hamburger { display: none; }
.icon-arrow     { display: block; }

/* ── Overlay — click-catcher TRANSPARENT (pas de fond noir) ── */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 490;
    pointer-events: none;
}
.mobile-overlay.visible {
    background: transparent;   /* ← PAS de fond noir */
    pointer-events: none;      /* ← z-index overlay(490) > app-layout(1) → géré en JS */
}

/* ── Bouton retour dans channels sidebar ── */
.mobile-back-btn { display: none; }


/* ══════════════════════════════════════════════════
   BREAKPOINT ≤ 768px
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ────────────────────────────────────────────
       1. TUER TOUT BACKDROP-FILTER + TRANSITIONS
          C'est la cause du flou visible à l'animation
       ──────────────────────────────────────────── */
    *, *::before, *::after {
        backdrop-filter:         none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Transitions autorisées : uniquement transform (backdrop-filter est tué) */
    .channels-sidebar,
    .servers-sidebar,
    .content-header,
    .modal-content,
    .settings-modal {
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* ────────────────────────────────────────────
       2. TUER LES ANIMATIONS DU FOND
          Les glows animés derrière un élément translucide
          = effet "flou" visuel même sans backdrop-filter
       ──────────────────────────────────────────── */
    body::before,
    body::after {
        animation:  none !important;
        opacity:    0    !important;
        display:    none !important;
    }

    /* ────────────────────────────────────────────
       3. ANTI-ZOOM iOS (inputs < 16px → zoom auto)
       ──────────────────────────────────────────── */
    input, textarea, select, [contenteditable] {
        font-size: 16px !important;
    }

    /* ────────────────────────────────────────────
       4. BLOQUER LE SCROLL LATÉRAL COMPLÈTEMENT
       ──────────────────────────────────────────── */
    html {
        overflow-x:   hidden !important;
        overflow-y:   hidden !important;
        max-width:    100%   !important;
        width:        100%   !important;
    }

    body {
        overflow-x:   hidden !important;
        overflow-y:   hidden !important;
        max-width:    100%   !important;
        width:        100%   !important;
        touch-action: manipulation;
    }

    /* Éléments toggle */
    .icon-hamburger { display: block; }
    .icon-arrow     { display: none; }
    .mobile-overlay { display: block; }
    .mobile-back-btn { display: flex; }

    /* ════════════════════════════════════════════
       APP-LAYOUT : colonne fixe plein écran
       ════════════════════════════════════════════ */
    .app-layout {
        display:        flex       !important;
        flex-direction: column     !important;
        position:       fixed      !important;
        top:    0 !important;
        left:   0 !important;
        right:  0 !important;
        bottom: 0 !important;
        width:  100% !important;
        height: 100% !important;
        max-width:  100% !important;
        overflow:   hidden !important;
    }

    /* Neutraliser les règles de style.css @media 768px
       qui gardent les sidebars en flow et causent le débordement */
    .channels-sidebar {
        width:     0    !important;
        min-width: 0    !important;
        flex:      none !important;
    }
    .servers-sidebar {
        width:  100% !important;
        flex:   none !important;
    }

    /* ════════════════════════════════════════════
       ZONE PRINCIPALE CHAT
       ════════════════════════════════════════════ */
    .main-content {
        flex:           1 1 auto !important;
        width:          100%     !important;
        max-width:      100%     !important;
        min-height:     0        !important;
        display:        flex     !important;
        flex-direction: column   !important;
        overflow:       hidden   !important;
        /* Espace pour la nav bar en bas */
        padding-bottom: calc(var(--mob-nav-h) + var(--safe-bottom)) !important;
        margin-bottom:  0 !important;
        order:          1 !important;
    }

    /* ════════════════════════════════════════════
       BARRE DE NAVIGATION INFÉRIEURE — Tab bar
       ════════════════════════════════════════════ */
    .servers-sidebar {
        position:   fixed   !important;
        bottom:     0       !important;
        left:       0       !important;
        right:      0       !important;
        top:        auto    !important;
        width:      100%    !important;
        max-width:  100%    !important;
        height:     calc(var(--mob-nav-h) + var(--safe-bottom)) !important;
        padding:    0 0 var(--safe-bottom) 0 !important;

        flex-direction:  row          !important;
        align-items:     stretch      !important;
        justify-content: stretch      !important;
        gap:             0            !important;

        overflow:      hidden  !important;
        border-right:  none    !important;
        border-top:    1px solid rgba(255,255,255,0.06) !important;
        border-radius: 0       !important;
        z-index:       300     !important;
        background:    #0b0f14 !important;
        box-shadow:    0 -1px 0 rgba(0,0,0,0.6), 0 -8px 32px rgba(0,0,0,0.45) !important;
    }

    /* Surcharger "position: relative !important" injecté par les thèmes boutique
       (ex. Aurora — style.css spécificité body[data-shop-theme] > .servers-sidebar)
       → forcer fixed + bottom:0 quel que soit le thème actif               */
    body[data-shop-theme] .servers-sidebar {
        position: fixed   !important;
        bottom:   0       !important;
        top:      auto    !important;
    }

    /* Cacher serveurs / DMs */
    .servers-sidebar #serverList,
    .servers-sidebar #dmAvatarList,
    .servers-sidebar .server-divider,
    .servers-sidebar .servers-bottom  { display: none !important; }

    /* ────────────────────────────────────────────
       Base commune : chaque onglet
       ──────────────────────────────────────────── */
    .servers-sidebar .home-icon,
    .mob-nav-profile-btn,
    .mob-nav-shop-btn {
        flex:            1 1 0        !important;
        width:           auto         !important;
        max-width:       none         !important;
        height:          var(--mob-nav-h) !important;
        padding:         8px 4px 6px  !important;
        gap:             4px          !important;
        border-radius:   0            !important;
        background:      transparent  !important;
        border:          none         !important;
        box-shadow:      none         !important;
        /* inactif : gris neutre */
        color:           #566170      !important;
        display:         flex         !important;
        flex-direction:  column       !important;
        align-items:     center       !important;
        justify-content: center       !important;
        touch-action:    manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        transition:      color 0.16s, transform 0.1s !important;
        cursor:          pointer       !important;
        user-select:     none          !important;
        position:        relative      !important;
        overflow:        visible       !important;
    }
    /* Retour haptique au tap */
    .servers-sidebar .home-icon:active,
    .mob-nav-profile-btn:active,
    .mob-nav-shop-btn:active {
        transform: scale(0.88) !important;
        color: #00d9a3 !important;
    }

    /* ── Onglet Accueil — bouton simple, sans aura ni gradient ── */
    .servers-sidebar .home-icon {
        left:        auto        !important;
        margin:      0           !important;
        background:  transparent !important;
        box-shadow:  none        !important;
        border-color: transparent !important;
        color:       #566170     !important;
    }
    .servers-sidebar .home-icon > svg {
        width:      24px     !important;
        height:     24px     !important;
        flex-shrink: 0       !important;
    }
    .home-icon-label {
        display:        block     !important;
        font-size:      0.6rem    !important;
        font-weight:    700       !important;
        letter-spacing: 0.08em    !important;
        text-transform: uppercase !important;
        color:          inherit   !important;
        white-space:    nowrap    !important;
        line-height:    1         !important;
    }
    /* Supprimer tout style actif spécial — même look que les autres onglets */
    .servers-sidebar .home-icon.active        { color: #00d9a3 !important; background: transparent !important; box-shadow: none !important; }
    .servers-sidebar .home-icon.active::before { display: none !important; }
    .servers-sidebar .home-icon::after         { display: none !important; }
    .dm-notification-badge                     { display: none !important; }

    /* ── Onglet Profil ── */
    .mob-nav-profile-avatar-wrap {
        position:    relative !important;
        width:       28px     !important;
        height:      28px     !important;
        flex-shrink: 0        !important;
        z-index:     1        !important;
    }
    .mob-nav-profile-btn img {
        width:         28px   !important;
        height:        28px   !important;
        object-fit:    cover  !important;
        border-radius: 50%    !important;
        display:       block  !important;
        border:        2px solid rgba(255,255,255,0.1) !important;
        box-shadow:    0 2px 8px rgba(0,0,0,0.4) !important;
    }
    .mob-nav-profile-status {
        position:     absolute !important;
        bottom:       -1px    !important;
        right:        -2px    !important;
        width:        9px     !important;
        height:       9px     !important;
        border-radius: 50%   !important;
        background:   #43b581 !important;
        border:       2px solid #0b0f14 !important;
        z-index:      2       !important;
    }
    .mob-nav-profile-label {
        font-size:      0.6rem    !important;
        font-weight:    700       !important;
        letter-spacing: 0.08em    !important;
        text-transform: uppercase !important;
        color:          inherit   !important;
        white-space:    nowrap    !important;
        line-height:    1         !important;
    }

    /* ── Onglet Boutique ── */
    /* Le wrapper devient transparent pour que shop-btn soit flex-item direct */
    .mob-nav-right {
        display:     contents !important;
        flex-shrink: 0        !important;
    }
    .mob-nav-shop-btn > svg {
        width:     24px     !important;
        height:    24px     !important;
        flex-shrink: 0      !important;
        position:  relative !important;
        z-index:   1        !important;
    }
    .mob-nav-shop-label {
        font-size:      0.6rem    !important;
        font-weight:    700       !important;
        letter-spacing: 0.08em    !important;
        text-transform: uppercase !important;
        color:          inherit   !important;
        white-space:    nowrap    !important;
        line-height:    1         !important;
    }

    /* La barre est toujours visible */

    /* ════════════════════════════════════════════
       CHANNELS SIDEBAR — overlay depuis la gauche
       INSTANTANÉE : pas d'animation = pas de flou
       ════════════════════════════════════════════ */
    .channels-sidebar {
        position:   fixed    !important;
        top:        0        !important;
        left:       0        !important;
        bottom:     calc(var(--mob-nav-h) + var(--safe-bottom)) !important;
        height:     auto     !important;
        /* Largeur : 85% du viewport, max 300px */
        width:      min(85%, 300px) !important;
        max-width:  300px    !important;
        min-width:  0        !important;
        z-index:    500      !important;

        /* CACHÉ : déplacé à gauche, hors écran */
        transform:  translateX(-105%) !important;

        /* Transition fluide OK — backdrop-filter est tué */
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;

        background: #0d1117  !important;
        box-shadow: none     !important;
        opacity:    1        !important;

        display:        flex       !important;
        flex-direction: column     !important;
        overflow:       hidden     !important;
        /* Fermée hors écran → ne doit PAS intercepter les touches */
        pointer-events: none       !important;
    }

    /* Sidebar ouverte → tout le tactile fonctionne */
    .channels-sidebar.mobile-open {
        transform:     translateX(0) !important;
        box-shadow:    8px 0 40px rgba(0,0,0,0.8), 2px 0 0 rgba(0,217,163,0.07) !important;
        pointer-events: all !important;
    }

    /* Sidebar collapsed = fermée sur mobile */
    .channels-sidebar.collapsed {
        transform: translateX(-105%) !important;
    }

    /* Pas de handle de redimensionnement */
    .sidebar-resize-handle { display: none !important; }

    /* Header de la channels sidebar */
    .server-header {
        flex-shrink: 0  !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        background: #0d1117 !important;
    }
    .server-header-row {
        padding:     10px 12px !important;
        display:     flex      !important;
        align-items: center    !important;
        gap:         8px       !important;
        flex-wrap:   nowrap    !important;
    }

    /* Bouton retour ← */
    .mobile-back-btn {
        display:         flex    !important;
        align-items:     center  !important;
        justify-content: center  !important;
        width:     40px   !important;
        height:    40px   !important;
        min-width: 40px   !important;
        border-radius: 12px !important;
        background: rgba(0,217,163,0.1) !important;
        border:     1px solid rgba(0,217,163,0.22) !important;
        color:      #00d9a3 !important;
        cursor:     pointer !important;
        flex-shrink: 0  !important;
        transition: background 0.15s !important;
        padding:    0 !important;
    }
    .mobile-back-btn:active { background: rgba(0,217,163,0.22) !important; }

    /* Channels container scrollable */
    .channels-container {
        flex:       1 1 auto !important;
        overflow-y: auto     !important;
        overflow-x: hidden   !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y  !important;   /* ← scroll vertical tactile */
        overscroll-behavior: contain !important;
        padding:    6px 8px  !important;
    }

    /* ════════════════════════════════════════════
       HEADER DU CHAT
       ════════════════════════════════════════════ */
    .content-header {
        height:          calc(var(--mob-hdr-h) + var(--safe-top)) !important;
        padding-top:     calc(10px + var(--safe-top)) !important;
        padding-left:    10px !important;
        padding-right:   10px !important;
        padding-bottom:  10px !important;
        flex-shrink:     0    !important;
        background:      #0d1117 !important;
        border-bottom:   1px solid rgba(255,255,255,0.07) !important;
        display:         flex !important;
        align-items:     center !important;
        gap:             8px !important;
        width:           100% !important;
        max-width:       100% !important;
        overflow:        hidden !important;
    }

    .channel-info {
        flex:       1    !important;
        min-width:  0    !important;
        overflow:   hidden !important;
        display:    flex !important;
        align-items: center !important;
        gap:         6px !important;
    }

    #channelTitle {
        font-size:      0.93rem !important;
        font-weight:    600     !important;
        white-space:    nowrap  !important;
        overflow:       hidden  !important;
        text-overflow:  ellipsis !important;
    }

    /* Header en mode DM : avatar + nom à gauche, le channelHeaderInfo (titre @nom) caché */
    .content-header.dm-mode #channelHeaderInfo { display: none !important; }
    .content-header.dm-mode #dmHeaderInfo {
        flex:          1    !important;
        min-width:     0    !important;
        overflow:      hidden !important;
        gap:           10px !important;
        padding:       0    !important;
        border-radius: 0    !important;
    }
    .content-header.dm-mode .dm-header-text {
        flex:         1    !important;
        min-width:    0    !important;
        overflow:     hidden !important;
    }
    .content-header.dm-mode .dm-header-username {
        font-size:     0.93rem !important;
        font-weight:   600     !important;
        white-space:   nowrap  !important;
        overflow:      hidden  !important;
        text-overflow: ellipsis !important;
        display:       block   !important;
    }

    /* Bouton hamburger — redesign */
    .sidebar-toggle-btn {
        display:         flex    !important;
        flex-shrink:     0       !important;
        width:           42px    !important;
        height:          42px    !important;
        align-items:     center  !important;
        justify-content: center  !important;
        border-radius:   13px    !important;
        background:      linear-gradient(135deg, rgba(0,217,163,0.18), rgba(0,217,163,0.06)) !important;
        border:          1.5px solid rgba(0,217,163,0.3) !important;
        color:           var(--accent-primary, #00d9a3) !important;
        box-shadow:      0 2px 12px rgba(0,217,163,0.15) !important;
        touch-action:    manipulation !important;
        transition:      background 0.18s, box-shadow 0.18s, transform 0.13s !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .sidebar-toggle-btn svg { color: var(--accent-primary, #00d9a3) !important; }
    .sidebar-toggle-btn:active {
        background: linear-gradient(135deg, rgba(0,217,163,0.3), rgba(0,217,163,0.12)) !important;
        box-shadow: 0 1px 6px rgba(0,217,163,0.25) !important;
        transform: scale(0.93) !important;
    }

    .tmb-label { display: none !important; }
    /* ════════════════════════════════════════════
       ZONE MESSAGES
       ════════════════════════════════════════════ */
    .messages-area,
    .chat-messages,
    #messagesContainer {
        flex:            1 1 auto !important;
        padding:         6px 0 4px !important;
        overflow-y:      auto !important;
        overflow-x:      hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action:    pan-y  !important;
        overscroll-behavior: contain !important;
        min-height:      0 !important;
        max-width:       100% !important;
    }

    /* Groupe de message : avatar petit, collé à gauche */
    .message-group {
        padding: 2px 10px 2px 46px !important;
        margin-bottom: 2px !important;
        gap: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    .message-group:hover {
        background: none !important;
        border-left-color: transparent !important;
    }
    .message-group.own-message {
        padding: 2px 46px 2px 10px !important;
        border-right-color: transparent !important;
    }
    .message-group.own-message:hover {
        background: none !important;
        border-right-color: transparent !important;
    }

    /* Avatar petit et bien positionné */
    .message-avatar {
        position:    absolute  !important;
        left:        6px       !important;
        top:         4px       !important;
        width:       32px      !important;
        height:      32px      !important;
        min-width:   32px      !important;
        border-radius: 50%    !important;
        flex-shrink: 0        !important;
    }
    .message-group.own-message .message-avatar {
        right: 6px  !important;
        left:  auto !important;
    }

    /* Header : nom + heure sur la même ligne, compacts */
    .message-header {
        margin-bottom: 1px !important;
        gap: 6px !important;
    }
    .message-author { font-size: 0.78rem !important; font-weight: 700 !important; }
    .message-timestamp { font-size: 0.65rem !important; }

    /* Bulle de message */
    .message-text {
        max-width: 82vw   !important;
        padding:   8px 12px !important;
        font-size: 0.875rem !important;
        line-height: 1.45  !important;
        border-radius: 16px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        backdrop-filter: none !important;
    }
    /* Coin bas-gauche arrondi plus marqué pour messages reçus */
    .message-group:not(.own-message) .message-text {
        border-bottom-left-radius: 4px !important;
    }
    /* Coin bas-droit arrondi pour propres messages */
    .message-group.own-message .message-text {
        border-bottom-right-radius: 4px !important;
    }
    .message-text + .message-text { margin-top: 2px !important; }

    /* Bulle "seulement emojis" */
    .message-text.emoji-only {
        font-size: 1.9rem !important;
        padding:   2px 4px !important;
    }

    /* Lien dans message */
    .message-content a.msg-link {
        word-break: break-all !important;
        font-size: 0.85rem !important;
    }

    /* Réactions */
    .reaction-btn, .reaction {
        font-size:  0.78rem !important;
        padding:    2px 6px !important;
        min-height: 24px   !important;
        border-radius: 10px !important;
    }

    /* Bulle-actions (emoji/édition) : sur mobile on cache au hover, visible au long-press via JS */
    .bubble-actions { display: none !important; }

    /* Pièces jointes + embeds */
    .msg-attachment,
    .msg-attachment-image,
    .msg-attachment-gif,
    .msg-inline-embed,
    .msg-inline-video,
    .msg-video-card,
    .msg-link-card,
    .msg-attachment-file {
        max-width: calc(82vw) !important;
        width: auto !important;
        box-sizing: border-box !important;
    }
    .msg-attachment-image img,
    .msg-attachment-gif img,
    .msg-inline-embed img {
        max-width: 100% !important;
        max-height: 200px !important;
        width: auto !important;
        height: auto !important;
        border-radius: 10px !important;
    }
    .msg-video-embed {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 190px !important;
    }
    .msg-video-card { max-width: 100% !important; }
    .mvc-iframe-wrap iframe { max-height: 170px !important; width: 100% !important; }
    .msg-attach-file-inner { max-width: 100% !important; }
    .msg-attach-file-name {
        word-break: break-all !important;
        max-width: calc(82vw - 120px) !important;
    }
    .msg-link-card {
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
    }
    .msg-link-card-url {
        font-size: 0.7rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    /* Réponse citée */
    .msg-reply-quote {
        font-size: 0.76rem !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        margin-bottom: 3px !important;
    }

    /* ════════════════════════════════════════════
       ZONE DE SAISIE — style téléphone
       ════════════════════════════════════════════ */
    .message-input-container,
    .chat-input-wrap {
        flex-shrink:  0    !important;
        flex-direction: row !important;
        align-items:  center !important;
        gap:          6px  !important;
        padding:      8px 10px !important;
        padding-bottom: calc(8px + var(--safe-bottom)) !important;
        border-top:   1px solid rgba(255,255,255,0.07) !important;
        background:   #0d1117 !important;
        max-width:    100% !important;
        width:        100% !important;
        box-sizing:   border-box !important;
    }

    /* Boutons secondaires (fichier, GIF, emoji) — carrés compacts */
    .message-input-container .icon-btn:not(#sendMessageBtn) {
        width:         38px   !important;
        height:        38px   !important;
        min-width:     38px   !important;
        min-height:    38px   !important;
        padding:       0      !important;
        border-radius: 11px   !important;
        background:    rgba(255,255,255,0.06) !important;
        border:        1px solid rgba(255,255,255,0.09) !important;
        color:         rgba(255,255,255,0.6) !important;
        flex-shrink:   0      !important;
        touch-action:  manipulation !important;
        -webkit-tap-highlight-color: rgba(0,217,163,0.15) !important;
        display:       flex   !important;
        align-items:   center !important;
        justify-content: center !important;
    }
    .message-input-container .icon-btn:not(#sendMessageBtn):active {
        background: rgba(0,217,163,0.12) !important;
        border-color: rgba(0,217,163,0.35) !important;
        color: #00d9a3 !important;
    }
    /* Label GIF lisible */
    .gif-btn-label {
        font-size:   0.72rem !important;
        font-weight: 800     !important;
        letter-spacing: 0.02em !important;
        color: rgba(255,255,255,0.65) !important;
    }

    /* Bouton GIF caché sur mobile — trop peu de place dans la barre de saisie */
    #gifPickerBtn { display: none !important; }

    /* Champ de saisie — pill arrondi qui prend tout l'espace dispo */
    .msg-input-wrap {
        flex:       1     !important;
        min-width:  0     !important;
        position:   relative !important;
    }
    .msg-input-wrap input,
    #messageInput {
        width:         100%   !important;
        min-height:    42px   !important;
        height:        42px;            /* initial render exact — overridable by JS */
        max-height:    110px  !important;
        padding:       10px 40px 10px 14px !important;
        font-size:     16px   !important;
        border-radius: 21px   !important;
        border:        1.5px solid rgba(255,255,255,0.1) !important;
        background:    rgba(255,255,255,0.07) !important;
        color:         var(--text-primary, #e8f5f1) !important;
        outline:       none   !important;
        resize:        none   !important;
        overflow-y:    auto   !important;
        scrollbar-width: none !important;
        box-sizing:    border-box !important;
        -webkit-overflow-scrolling: touch !important;
        line-height:   1.4    !important;
        font-family:   inherit !important;
        vertical-align: top  !important;
    }
    #messageInput::-webkit-scrollbar { display: none !important; }
    #messageInput::placeholder {
        color:       rgba(255,255,255,0.38) !important;
        font-size:   13px  !important;
        font-weight: 400   !important;
        line-height: 1.4   !important;
    }
    .msg-input-wrap input:focus,
    #messageInput:focus {
        border-color: rgba(0,217,163,0.45) !important;
        background:   rgba(255,255,255,0.09) !important;
    }

    /* Bouton envoyer — rond, vert, bien visible */
    #sendMessageBtn {
        width:         46px   !important;
        height:        46px   !important;
        min-width:     46px   !important;
        min-height:    46px   !important;
        border-radius: 50%    !important;
        background:    linear-gradient(135deg, #00d9a3, #00916b) !important;
        border:        none   !important;
        box-shadow:    0 3px 12px rgba(0,217,163,0.38) !important;
        color:         #0a1f18 !important;
        flex-shrink:   0      !important;
        padding:       0      !important;
        display:       flex   !important;
        align-items:   center !important;
        justify-content: center !important;
        touch-action:  manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        transition:    transform 0.12s, box-shadow 0.12s !important;
    }
    #sendMessageBtn:active {
        transform:  scale(0.9)  !important;
        box-shadow: 0 1px 6px rgba(0,217,163,0.25) !important;
    }
    #sendMessageBtn svg { color: #0a1f18 !important; }

    /* ════════════════════════════════════════════
       HOME / AMIS / DMs
       ════════════════════════════════════════════ */
    .home-content-area,
    #friendsPage,
    #homeMainContent {
        padding:    0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        flex:       1 1 auto !important;
        min-height: 0 !important;
    }

    /* ── Page accueil — hero compact ── */
    .home-welcome-page {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
    .hwp-hero {
        padding:    10px 14px 10px !important;
        gap:        10px           !important;
        flex-wrap:  wrap           !important;
    }
    .hwp-hero-left { gap: 12px !important; }
    .hwp-logo {
        width:  44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 13px !important;
    }
    .hwp-title    { font-size: 1.15rem !important; }
    .hwp-subtitle { font-size: 0.8rem  !important; }
    .hwp-hero-tags { display: none !important; }

    /* ── Grid : 1 seule colonne sur mobile ── */
    .hwp-grid,
    .hwp-grid--3 {
        display:               flex          !important;
        flex-direction:        column        !important;
        gap:                   10px          !important;
        padding:               10px 10px 16px !important;
        width:                 100%          !important;
        box-sizing:            border-box    !important;
    }
    .hwp-col {
        display:        flex          !important;
        flex-direction: column        !important;
        gap:            10px          !important;
        width:          100%          !important;
        min-width:      0             !important;
    }
    /* Blocs : pleine largeur, bords arrondis compacts */
    .hwp-block {
        width:         100%  !important;
        box-sizing:    border-box !important;
        border-radius: 13px  !important;
    }
    .hwp-block-header {
        padding: 10px 12px 8px !important;
    }

    /* Cards d'action 2×2 — icônes plus petites */
    .hwp-action-grid {
        grid-template-columns: 1fr 1fr !important;
        gap:     7px !important;
        padding: 8px 10px 12px !important;
    }
    .hwp-action-card {
        padding:       8px 6px 8px 10px !important;
        border-radius: 11px             !important;
        gap:           8px              !important;
    }
    .hwp-action-icon-box {
        width:         32px !important;
        height:        32px !important;
        min-width:     32px !important;
        border-radius: 9px  !important;
    }
    .hwp-action-icon-box svg { width: 16px !important; height: 16px !important; }
    .hwp-action-title   { font-size: 0.77rem !important; line-height: 1.2 !important; }
    .hwp-action-sub     { font-size: 0.65rem !important; }
    .hwp-action-chevron { display: none !important; }

    /* Statistiques */
    .hwp-stat-row { padding: 7px 12px !important; }
    .hwp-stat-label { font-size: 0.8rem !important; }
    .hwp-stat-value { font-size: 0.84rem !important; }

    /* DM list dans home */
    .hwp-dm-item { padding: 8px 12px !important; }

    /* Amis en ligne — mini avatars scrollables */
    .hwp-online-grid {
        display:        flex    !important;
        flex-wrap:      nowrap  !important;
        overflow-x:     auto    !important;
        -webkit-overflow-scrolling: touch !important;
        gap:            10px    !important;
        padding:        6px 12px 14px !important;
        scrollbar-width: none   !important;
    }
    .hwp-online-grid::-webkit-scrollbar { display: none !important; }
    .hwp-online-friend {
        flex-shrink: 0   !important;
        gap:         3px !important;
    }

    /* Featured items — 2 colonnes fluides */
    .hwp-featured-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap:     8px !important;
        padding: 8px 10px 12px !important;
    }

    /* Progression / milestone */
    .hwp-progression-body { padding: 0 !important; }
    .hwp-milestone-track  { padding: 10px 12px !important; }

    /* Activité récente */
    .hwp-activity-item { padding: 8px 12px !important; }
    .hwp-activity-ago  { display: none !important; }

    /* Serveurs */
    .hwp-srv-row { padding: 8px 12px !important; }

    /* Récompense du jour */
    #hwpDailyBlock { width: 100% !important; box-sizing: border-box !important; }

    .friends-header, .page-header {
        flex-direction: column !important;
        align-items:    flex-start !important;
        gap:            10px !important;
        padding:        12px !important;
    }

    .friend-item, .dm-item, .dm-list-item {
        padding:    10px 12px !important;
        min-height: 56px     !important;
    }

    /* ── Demandes d'amis : accept / refuser bien lisibles ── */
    .fr-card.friend-item {
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
    }
    .fr-card .friend-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .fr-card .friend-details h4 { font-size: 0.95rem !important; }
    .fr-card .friend-details p  { font-size: 0.78rem !important; }
    .fr-card .friend-actions {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }
    .fr-card .fr-btn {
        flex: 1 !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 10px 8px !important;
        font-size: 0.84rem !important;
        border-radius: 10px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0,217,163,0.15) !important;
    }

    .friend-avatar, .dm-avatar {
        width:  40px !important;
        height: 40px !important;
        border-radius: 50% !important;
    }

    .action-btn, .friend-action-btn {
        min-width:   36px !important;
        height:      38px !important;
        padding:     0 12px !important;
        font-size:   0.82rem !important;
        border-radius: 10px !important;
    }

    /* ════════════════════════════════════════════
       MODALS
       ════════════════════════════════════════════ */
    .modal-content, .settings-modal, .modal-box {
        width:     96vw !important;
        max-width: 96vw !important;
        max-height: 86vh !important;
        margin:    auto !important;
        border-radius: 18px !important;
    }

    /* ════════════════════════════════════════════
       PROFIL UTILISATEUR MODAL — mobile
       ════════════════════════════════════════════ */
    .user-profile-modal {
        width:        96vw !important;
        max-width:    96vw !important;
        max-height:   90vh !important;
        border-radius: 20px !important;
    }
    .profile-close-btn {
        top:   10px !important;
        right: 10px !important;
        width:  38px !important;
        height: 38px !important;
    }
    .profile-banner { height: 130px !important; }
    .profile-avatar {
        width:  72px !important;
        height: 72px !important;
    }
    .profile-header { margin-top: -44px !important; margin-bottom: 4px !important; }
    .profile-content { padding: 6px 14px 20px !important; }
    .profile-name-section h2 { font-size: 1.1rem !important; }
    .profile-name-section { margin-bottom: 12px !important; }
    /* Boutons "Envoyer message" et "Ajouter ami" — pleine largeur */
    .profile-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .profile-btn {
        width: 100% !important;
        padding: 13px 14px !important;
        font-size: 0.88rem !important;
        min-height: 46px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0,217,163,0.12) !important;
    }
    .profile-btn svg { width: 18px !important; height: 18px !important; }
    /* Stats : 2 colonnes compactes */
    .profile-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }
    .profile-stat-card {
        padding: 12px 10px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }
    .stat-label { font-size: 0.68rem !important; }
    .stat-value { font-size: 0.9rem !important; }
    /* Bio / section */
    .profile-section {
        padding: 13px 14px !important;
        border-radius: 12px !important;
        margin-bottom: 8px !important;
    }
    .profile-section h3 { font-size: 0.72rem !important; margin-bottom: 8px !important; }
    .profile-section p  { font-size: 0.88rem !important; }
    /* Mini-statut bulle : \u00e0 droite de l'avatar comme sur PC (pas en bas) */
    .profile-custom-status {
        left: calc(100% + 12px) !important;
        top: -10px !important;
        max-width: min(200px, 52vw) !important;
        margin: 0 !important;
        padding: 9px 12px !important;
        border-radius: 16px 16px 16px 5px !important;
    }
    /* Bouton surnom toujours visible sur mobile (pas de hover) */
    .profile-nick-btn {
        opacity: 1 !important;
    }

    .modal-overlay, .settings-overlay {
        padding:     4vw !important;
        align-items: center !important;
        padding-bottom: calc(4vw + var(--safe-bottom)) !important;
    }

    .settings-tabs {
        flex-direction: row    !important;
        overflow-x:     auto   !important;
        white-space:    nowrap !important;
        gap:            0      !important;
        scrollbar-width: none  !important;
        flex-shrink:    0      !important;
    }
    .settings-tabs::-webkit-scrollbar { display: none !important; }

    .settings-tab {
        flex-shrink: 0     !important;
        padding:     10px 14px !important;
        font-size:   0.82rem !important;
    }

    /* ── Nav items — taille et tap target ── */
    .nav-item, .channel-item {
        min-height:  46px     !important;
        padding:     10px 14px !important;
        margin:      2px 0    !important;
        border-radius: 10px  !important;
        font-size:   0.9rem   !important;
        gap:         12px     !important;
        touch-action: manipulation !important; /* ← taps réactifs, pas de délai 300ms */
        -webkit-tap-highlight-color: rgba(0,217,163,0.12) !important;
        user-select: none    !important;
        cursor:      pointer  !important;
    }
    .nav-item svg, .channel-item svg {
        width:     22px !important;
        height:    22px !important;
        min-width: 22px !important;
        flex-shrink: 0 !important;
    }
    .home-section .section-header {
        padding: 10px 14px 5px !important;
    }
    .home-section .section-header span {
        font-size: 0.68rem !important;
        letter-spacing: 0.1em !important;
    }
    .home-section { margin-bottom: 6px !important; }

    /* ── Bouton Serveurs collapsible (toutes tailles) ── */
    .srv-nav-toggle {
        display:      flex !important;
        min-height:   48px !important;
        touch-action: manipulation !important;
    }
    .srv-nav-mini-icon {
        width: 32px !important; height: 32px !important;
        border-radius: 11px !important;
    }
    .srv-nav-item { min-height: 44px !important; touch-action: manipulation !important; }
    .srv-nav-action-btn { min-height: 44px !important; touch-action: manipulation !important; }

    /* ── Bouton "Afficher membres" : taille/style mais display contrôlé par JS ── */
    .toggle-members-btn {
        width:           40px   !important;
        height:          40px   !important;
        min-width:       40px   !important;
        padding:         0      !important;
        border-radius:   12px   !important;
        align-items:     center !important;
        justify-content: center !important;
        flex-shrink: 0          !important;
        touch-action:    manipulation !important;
    }

    /* ── Boutique button ── */
    .shop-nav-btn-side {
        background: linear-gradient(135deg, rgba(240,192,64,0.1), rgba(240,160,0,0.06)) !important;
        border: 1px solid rgba(240,192,64,0.3) !important;
        color: #f0c040 !important;
        border-radius: 10px !important;
        min-height: 48px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(240,192,64,0.2) !important;
    }
    .shop-nav-btn-side:hover,
    .shop-nav-btn-side:active {
        background: rgba(240,192,64,0.18) !important;
        border-color: rgba(240,192,64,0.55) !important;
    }
    .shop-nav-btn-side .spnb-icon { font-size: 1.1rem !important; }
    .shop-nav-btn-side .spnb-text { font-weight: 700 !important; }
    .spnb-coin { display: none !important; }
    .shop-points-badge {
        margin-left: auto  !important;
        font-size:   0.72rem !important;
        padding:     2px 8px !important;
        border-radius: 20px !important;
        background: rgba(240,192,64,0.15) !important;
        color: #f0c040 !important;
        border: 1px solid rgba(240,192,64,0.25) !important;
    }

    /* ── User panel mobile ── */
    .user-panel {
        flex-shrink: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 !important;
        margin: 0 6px 8px !important;
        border-radius: 14px !important;
        gap: 0 !important;
    }
    /* Cacher la version desktop dans le user-panel sur mobile */
    .user-panel .user-info,
    .user-panel .user-controls { display: none !important; }

    /* ── Bouton profil mobile ── */
    .mob-profile-btn {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 10px 12px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        border-radius: 14px 14px 0 0 !important;
        transition: background 0.15s !important;
        -webkit-tap-highlight-color: rgba(0,217,163,0.1) !important;
    }
    .mob-profile-btn:active { background: rgba(0,217,163,0.08) !important; }
    .mob-profile-btn-avatar {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        position: relative !important;
        border: 2px solid rgba(0,217,163,0.3) !important;
        overflow: visible !important;
    }
    .mob-profile-btn-status {
        position: absolute !important;
        bottom: 0 !important; right: 0 !important;
        width: 10px !important; height: 10px !important;
        border-radius: 50% !important;
        background: var(--status-online, #43b581) !important;
        border: 2px solid var(--bg-primary) !important;
    }
    .mob-profile-btn-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        min-width: 0 !important;
        flex: 1 !important;
    }
    .mob-profile-btn-name {
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 150px !important;
    }
    .mob-profile-btn-tag {
        font-size: 0.7rem !important;
        color: var(--text-muted) !important;
    }

    /* Ligne boutons settings + déconnexion */
    .user-panel .user-controls {
        display: flex !important;
        border-top: 1px solid rgba(255,255,255,0.06) !important;
        padding: 6px 8px !important;
        gap: 4px !important;
    }
    .user-panel .user-info { display: none !important; }
    .user-panel .user-controls .icon-btn {
        flex: 1 !important;
        height: 36px !important;
        border-radius: 9px !important;
        font-size: 0.75rem !important;
    }
    .user-avatar {
        width:  36px !important;
        height: 36px !important;
    }
    .user-details .username    { font-size: 0.84rem !important; font-weight: 700 !important; }
    .user-details .user-status { font-size: 0.7rem  !important; }
    .user-actions { gap: 2px !important; }
    .user-actions .icon-btn {
        width:  34px !important;
        height: 34px !important;
        border-radius: 9px !important;
    }

    .members-sidebar:not(.show),
    #membersSidebar:not(.show) { display: none !important; }
    .right-sidebar { display: none !important; }

    /* Panneau membres en overlay fixe quand activé */
    .members-sidebar.show,
    #membersSidebar.show {
        display:        flex !important;
        position:       fixed !important;
        top:            0 !important;
        right:          0 !important;
        width:          260px !important;
        max-width:      82vw !important;
        height:         100dvh !important;
        z-index:        920 !important;
        overflow-y:     auto !important;
        background:     var(--bg-secondary, #151c25) !important;
        border-left:    1px solid rgba(255,255,255,0.08) !important;
        box-shadow:     -8px 0 32px rgba(0,0,0,0.55) !important;
        border-radius:  0 !important;
        padding:        8px !important;
        padding-top:    calc(8px + env(safe-area-inset-top)) !important;
        max-width:      260px !important;
    }
    /* Fond obscurcï (backdrop) quand le panneau est ouvert */
    body.members-open::before {
        content: '';
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 919;
    }

    .call-overlay, #callOverlay { border-radius: 0 !important; }
    .call-controls { gap: 14px !important; padding: 14px !important; }
    .call-btn { width: 56px !important; height: 56px !important; }

    .context-menu { max-width: 90vw !important; }
    .emoji-picker {
        max-width: 96vw !important;
        max-height: 55vh !important;
        position:   fixed !important;
        bottom: calc(var(--mob-nav-h) + var(--safe-bottom) + 58px) !important;
        left:   4vw !important;
        right:  4vw !important;
        width:  auto !important;
    }

    .shop-grid   { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .shop-header { flex-direction: column !important; gap: 8px !important; padding: 12px !important; }

    /* ── Boutique mobile : layout ── */
    .shop-view-body {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        gap: 0 !important;
    }
    /* Masquer la nav desktop verticale */
    .shop-nav { display: none !important; }

    /* Afficher le sélecteur de catégorie mobile */
    .shop-mobile-tab-picker {
        display: block !important;
        position: relative !important;
        padding: 10px 10px 0 !important;
        z-index: 10 !important;
    }
    .shop-mobile-tab-btn {
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 12px !important;
        padding: 11px 14px !important;
        font-size: 0.88rem !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0,217,163,0.1) !important;
    }
    .shop-mobile-tab-dropdown {
        position: fixed !important;
        /* top/left/right injected by JS */
        border-radius: 14px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 9000 !important;
        scrollbar-width: thin !important;
    }
    .shop-mobile-tab-opt {
        min-height: 46px !important;
        font-size: 0.9rem !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(255,255,255,0.06) !important;
    }

    .shop-content {
        flex: 1 !important;
        padding: 10px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ── Sections accordéon : fermé = header seul, ouvert = grid 2 col ── */
    .shop-section { margin-bottom: 2px !important; }
    .shop-section-hdr {
        min-height: 44px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(255,255,255,0.05) !important;
        user-select: none !important;
    }
    /* Par défaut : grid masquée (section fermée) */
    .shop-section-grid { display: none !important; }
    /* Section ouverte → grid 2 col */
    .shop-section--open .shop-section-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ── Ajouter un ami — mobile ── */
    .fap-page {
        padding: 16px 14px 24px !important;
        max-width: 100% !important;
    }
    .fap-header {
        gap: 12px !important;
        margin-bottom: 20px !important;
        padding-bottom: 16px !important;
        align-items: flex-start !important;
    }
    .fap-header-icon {
        width: 42px !important; height: 42px !important;
        border-radius: 12px !important; flex-shrink: 0 !important;
    }
    .fap-title   { font-size: 1.05rem !important; }
    .fap-subtitle { font-size: 0.78rem !important; }
    /* Barre : input au-dessus, bouton en dessous */
    .fap-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 14px !important;
        gap: 10px !important;
        border-radius: 14px !important;
    }
    .fap-bar-icon { display: none !important; }
    .fap-input {
        font-size: 0.92rem !important;
        padding: 6px 2px !important;
    }
    .fap-btn {
        width: 100% !important;
        padding: 13px !important;
        font-size: 0.9rem !important;
        border-radius: 10px !important;
        min-height: 46px !important;
        touch-action: manipulation !important;
    }

    .dm-notification-badge { top: 2px !important; right: 2px !important; }
    .splash-logo-text { font-size: 2rem !important; }
    .splash-bar-wrap  { width: 160px !important; }

    /* ════════════════════════════════════════════
       TOAST PUSH IN-APP
       ════════════════════════════════════════════ */
    .push-toast {
        position:    fixed   !important;
        top:         calc(10px + var(--safe-top)) !important;
        left:        10px    !important;
        right:       10px    !important;
        background:  #131c13 !important;
        border:      1px solid var(--accent-primary, #00d9a3) !important;
        border-radius: 14px  !important;
        padding:     12px 14px !important;
        z-index:     9999    !important;
        display:     flex    !important;
        align-items: center  !important;
        gap:         12px    !important;
        box-shadow:  0 8px 28px rgba(0,0,0,0.7) !important;
        transform:   translateY(-130%) !important;
        transition:  transform 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
        cursor:      pointer  !important;
    }
    .push-toast.visible { transform: translateY(0) !important; }

    .push-toast-avatar {
        width:  40px !important; height: 40px !important;
        border-radius: 50% !important;
        background: rgba(0,217,163,0.14) !important;
        display: flex !important; align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important; font-size: 1rem !important;
        font-weight: 700 !important; color: #00d9a3 !important;
    }
    .push-toast-body  { flex: 1 !important; min-width: 0 !important; }
    .push-toast-title {
        font-size: 0.85rem !important; font-weight: 700 !important;
        color: #e8f5f1 !important; white-space: nowrap !important;
        overflow: hidden !important; text-overflow: ellipsis !important;
    }
    .push-toast-msg {
        font-size: 0.8rem !important; color: rgba(232,245,241,0.58) !important;
        white-space: nowrap !important; overflow: hidden !important;
        text-overflow: ellipsis !important; margin-top: 2px !important;
    }
    .push-toast-close {
        width: 24px !important; height: 24px !important;
        border-radius: 6px !important; display: flex !important;
        align-items: center !important; justify-content: center !important;
        background: rgba(255,255,255,0.08) !important; border: none !important;
        color: rgba(255,255,255,0.5) !important; font-size: 1rem !important;
        cursor: pointer !important; flex-shrink: 0 !important; padding: 0 !important;
    }

    /* ══════════════════════════════════════════════════
       PARAMÈTRES MODAL — REDESIGN MOBILE
       ══════════════════════════════════════════════════ */

    /* Panel plein écran */
    .sp-panel {
        flex-direction: column !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
    }

    /* Sidebar = tiroir caché sur la gauche par défaut */
    .sp-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 82vw !important;
        max-width: 300px !important;
        z-index: 200 !important;
        transform: translateX(-110%) !important;
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
        border-right: 1px solid var(--border-color) !important;
        overflow-y: auto !important;
        padding-bottom: 24px !important;
    }
    .sp-sidebar.mob-open {
        transform: translateX(0) !important;
        box-shadow: 8px 0 40px rgba(0,0,0,0.7) !important;
    }

    /* Bouton hamburger visible */
    .sp-mob-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0 !important;
        background: rgba(255,255,255,0.07) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 10px !important;
        color: var(--text-secondary) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }

    /* Header du contenu principal */
    .sp-main-header {
        padding: 12px 14px 10px !important;
        gap: 10px !important;
    }
    .sp-main-title {
        font-size: 1rem !important;
        flex: 1 !important;
        text-align: left !important;
    }
    .sp-close-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    /* Zone contenu principale */
    .sp-main {
        height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .settings-scroll-content {
        padding: 14px 14px 28px !important;
        overflow-y: auto !important;
        flex: 1 !important;
    }

    /* Boutons nav de la sidebar */
    .sp-nav-btn {
        min-height: 48px !important;
        font-size: 0.92rem !important;
        padding: 10px 14px !important;
        touch-action: manipulation !important;
    }

    /* User card dans la sidebar */
    .sp-user-card-banner {
        height: 52px !important;
    }
    .sp-sidebar-avatar {
        width: 48px !important;
        height: 48px !important;
    }
    .sp-sidebar-name {
        font-size: 0.88rem !important;
    }
    .sp-sidebar-tag {
        font-size: 0.76rem !important;
    }

    /* Footer enregistrer */
    .sp-footer {
        padding: 10px 14px !important;
        gap: 8px !important;
    }
    .sp-footer-btns {
        gap: 8px !important;
    }
    .sp-footer-btns .btn-primary,
    .sp-footer-btns .btn-secondary {
        min-height: 40px !important;
        font-size: 0.9rem !important;
    }
}

/* ══════════════════════════════════════════════════
   ÉCRAN < 380px
   ══════════════════════════════════════════════════ */
@media (max-width: 380px) {
    :root { --mob-nav-h: 56px; --mob-hdr-h: 48px; }
    .server-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
    .message-content { font-size: 0.86rem !important; }
    .shop-grid { grid-template-columns: 1fr !important; }
    .nav-item, .channel-item { min-height: 42px !important; }
}