/* ═══════════════════════════════════════════════════════════════
   JOY•STORE — Interface : en-tête et barre latérale

   Ce CSS était écrit DANS chaque page, en HTML.
   Un navigateur ne garde jamais un style écrit dans la page : il le
   retéléchargeait à CHAQUE page visitée. Cinq pages, cinq fois le
   même contenu — sur une connexion mobile, c'est autant de latence
   et de données consommées pour rien.

   Dans ce fichier, il est téléchargé UNE fois puis réutilisé.

   Ne contient que des règles de style : aucune donnée de compte,
   aucune photo de profil. Celles-ci restent dans le HTML, générées
   à chaque page selon l'utilisateur connecté.
   ═══════════════════════════════════════════════════════════════ */

/* ── EN-TÊTE ─────────────────────────────────────────────────── */
        #jsui-header-wrap {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 9995;
            background: rgba(10,10,10,0.88);
            backdrop-filter: blur(20px) saturate(1.5);
            -webkit-backdrop-filter: blur(20px) saturate(1.5);
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }

        /* Barres — 3 zones */
        .jsui-bar {
            display: flex; align-items: center;
            padding: 0 14px; height: 52px;
        }
        .jsui-bar-left  { flex: 1; display: flex; align-items: center; justify-content: flex-start; gap: 4px; }
        .jsui-bar-center{ flex: 0 auto; display: flex; align-items: center; justify-content: center; gap: 4px; }
        .jsui-bar-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

        /* Sur PC, la largeur et les marges viennent du réglage « Largeur du contenu » (voir class-header.php). */

        /* Séparateur */
        #jsui-header-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 0 14px; }

        /* Logo */
        .jsui-logo { display:flex; align-items:center; text-decoration:none; color:#fff; flex-shrink:0; }
        .jsui-logo img { height:46px; max-width:180px; object-fit:contain; }
        .jsui-logo-text { font-size:17px; font-weight:800; color:#fff; letter-spacing:1px; white-space:nowrap; }

        /* Boutons icônes */
        .jsui-icon-btn {
            width:42px; height:42px;
            display:flex; align-items:center; justify-content:center;
            color:#fff; text-decoration:none; border-radius:50%;
            position:relative; flex-shrink:0;
            -webkit-tap-highlight-color:transparent;
            transition:background 0.2s;
        }
        .jsui-icon-btn:hover,.jsui-icon-btn:focus { background:rgba(255,255,255,0.1); color:#fff; text-decoration:none; outline:none; }
        .jsui-icon-btn svg { width:24px; height:24px; display:block; }
        .jsui-notif-btn svg  { fill:#fff; stroke:none; }
        .jsui-account-btn svg{ stroke:#fff; fill:none; stroke-width:2; }

        /* Visiteur non connecté : icône seule sur mobile, icône + mot sur desktop */
        .jsui-signin-btn {
            text-decoration:none; color:inherit;
            display:flex; align-items:center; gap:8px;
            padding:0; height:40px; width:40px;
            border:1px dashed rgba(255,255,255,0.3); border-radius:50%;
            justify-content:center;
            transition:background 0.2s, border-color 0.2s;
        }
        .jsui-signin-btn:hover { background:rgba(255,255,255,0.1) !important; border-color:rgba(255,255,255,0.5) !important; text-decoration:none; }
        .jsui-signin-avatar{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:rgba(255,255,255,0.75); }
        .jsui-signin-avatar svg{ width:19px; height:19px; }
        .jsui-signin-label{ display:none; }
        .jsui-account-btn img { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.25); }

        /* Badge */
        .jsui-badge {
            position:absolute; top:4px; right:4px;
            background:var(--jsui-accent); color:#fff; border-radius:50%;
            width:16px; height:16px; font-size:9px; font-weight:800;
            display:flex; align-items:center; justify-content:center;
            border:1.5px solid rgba(10,10,10,0.9); line-height:1; pointer-events:none;
        }

        /* Hamburger */
        .jsui-hamburger {
            width:40px; height:40px;
            display:flex; align-items:center; justify-content:center;
            color:#fff; text-decoration:none; border-radius:8px; flex-shrink:0;
            -webkit-tap-highlight-color:transparent; transition:background 0.2s;
        }
        .jsui-hamburger:hover,.jsui-hamburger:focus { background:rgba(255,255,255,0.08); color:#fff; text-decoration:none; outline:none; }
        .jsui-hamburger svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; display:block; }

        /* Recherche */
        #jsui-search-wrap {
            width:56vw; min-width:140px; max-width:76vw;
            display:flex; align-items:center;
            background:rgba(255,255,255,0.07);
            border:1px solid rgba(255,255,255,0.12);
            border-radius:12px; height:40px; position:relative;
            overflow:visible;
            transition:width 0.3s cubic-bezier(0.4,0,0.2,1), max-width 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.2s;
        }
        #jsui-search-wrap.expanded { width:76vw; max-width:76vw; }
        #jsui-search-wrap:focus-within,#jsui-search-wrap.expanded { border-color:rgba(var(--jsui-accent-rgb),0.45); background:rgba(255,255,255,0.09); }
        #jsui-search-form { display:flex; align-items:center; width:100%; height:100%; }
        #jsui-search-input { flex:1; background:none; border:none; outline:none; color:#fff; font-size:14px; padding:0 10px; height:100%; font-family:inherit; min-width:0; }
        #jsui-search-input::placeholder { color:rgba(255,255,255,0.32); }
        #jsui-search-submit {
            width:40px; height:40px; display:flex; align-items:center; justify-content:center;
            color:rgba(255,255,255,0.45); text-decoration:none; flex-shrink:0;
            border-radius:0 12px 12px 0; -webkit-tap-highlight-color:transparent; transition:color 0.2s;
        }
        #jsui-search-submit:hover,#jsui-search-submit:focus { color:var(--jsui-accent); text-decoration:none; outline:none; }
        #jsui-search-submit svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; display:block; }

        /* Dropdown recherche */
        #jsui-search-dropdown {
            display:none; position:absolute; top:calc(100% + 2px); right:0;
            width:100%; min-width:260px; max-width:92vw;
            background:rgba(12,12,16,0.98);
            backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
            border:1px solid rgba(255,255,255,0.08); border-top:none;
            border-radius:0 0 16px 16px; padding:10px 0; z-index:9993;
            box-shadow:0 8px 32px rgba(0,0,0,0.6);
            /* Panneau borne et defilable : sans hauteur maximale il depassait
               les petits ecrans, et le lien du bas restait inatteignable. */
            max-height:calc(100vh - 120px);
            overflow-y:auto; overflow-x:hidden;
            -webkit-overflow-scrolling:touch;
            /* Le defilement des resultats reste dans le panneau : arriver au
               dernier resultat ne doit pas emporter la page derriere, sinon on
               releve les yeux et le site a bouge tout seul. */
            overscroll-behavior:contain;
        }
        #jsui-search-dropdown.open { display:block; }
        .jsui-dd-header { display:flex; align-items:center; justify-content:space-between; padding:6px 14px 10px; font-size:10px; font-weight:700; color:rgba(255,255,255,0.3); letter-spacing:0.8px; text-transform:uppercase; }
        .jsui-search-result { display:flex; align-items:center; gap:10px; padding:9px 14px; text-decoration:none; color:#fff; transition:background 0.15s; -webkit-tap-highlight-color:transparent; border-bottom:1px solid rgba(255,255,255,0.04); }
        .jsui-search-result:last-child { border-bottom:none; }
        .jsui-search-result:hover,.jsui-search-result:focus { background:rgba(255,255,255,0.06); color:#fff; text-decoration:none; }
        .jsui-sr-img { width:44px; height:44px; flex-shrink:0; border-radius:8px; overflow:hidden; background:rgba(255,255,255,0.05); }
        .jsui-sr-img img { width:100%; height:100%; object-fit:cover; }
        .jsui-sr-info { flex:1; min-width:0; }
        .jsui-sr-name { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
        .jsui-sr-meta { display:flex; align-items:center; gap:8px; }
        .jsui-sr-cat { font-size:10px; font-weight:600; color:rgba(255,255,255,0.35); text-transform:uppercase; letter-spacing:0.5px; }
        .jsui-sr-price { font-size:12px; font-weight:700; color:rgba(255,80,80,0.9); }
        .jsui-sr-price del { opacity:0.4; font-weight:400; }
        .jsui-search-all { display:block; text-align:center; padding:12px 14px 10px; margin-top:6px;
            border-top:1px solid rgba(255,255,255,0.08); font-size:12px; font-weight:700;
            color:rgba(255,80,80,0.9); text-decoration:none; }
        .jsui-search-all:hover { color:#fff; }
        #jsui-recent-list { display:flex; flex-wrap:wrap; gap:7px; padding:4px 14px 6px; }
        .jsui-recent-tag { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:5px 11px; font-size:12px; color:rgba(255,255,255,0.7); text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background 0.2s; }
        .jsui-recent-tag:hover { background:rgba(255,255,255,0.12); color:#fff; text-decoration:none; }
        .jsui-tag-del { font-size:14px; color:rgba(255,255,255,0.28); padding:0 2px; cursor:pointer; }
        .jsui-no-recent { font-size:13px; color:rgba(255,255,255,0.25); font-style:italic; padding:4px 14px; display:block; }
        .jsui-dd-loading,.jsui-dd-empty { padding:16px 14px; font-size:13px; color:rgba(255,255,255,0.35); text-align:center; }

        /* Popup auth */
        #jsui-auth-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:100000; display:none; align-items:center; justify-content:center; padding:20px; }
        #jsui-auth-overlay.open { display:flex; }
        #jsui-auth-popup { background:transparent; border:none; border-radius:22px; padding:32px 24px 24px; text-align:center; max-width:340px; width:100%; }
        .jsui-auth-icon { display:none; }
        #jsui-auth-popup h3 { font-size:18px; font-weight:700; color:#fff; margin:0 0 8px; }
        #jsui-auth-popup p { font-size:13px; color:rgba(255,255,255,0.48); margin:0 0 26px; line-height:1.5; }
        .jsui-auth-btns { display:flex; gap:10px; margin-bottom:18px; }
        .jsui-auth-btns a { flex:1; padding:13px 10px; border-radius:12px; font-size:14px; font-weight:700; text-decoration:none; text-align:center; -webkit-tap-highlight-color:transparent; transition:background 0.2s, border-color 0.2s, color 0.2s; }
        .jsui-auth-btns a:hover { text-decoration:none; }
        .jsui-btn-register { background:#fff; border:1.5px solid #fff; color:#111; }
        .jsui-btn-register:hover { background:#e0e0e0; border-color:#e0e0e0; color:#111; }
        .jsui-btn-login { background:var(--jsui-accent); border:1.5px solid var(--jsui-accent); color:#fff; }
        .jsui-btn-login:hover { background:var(--jsui-accent-fonce); border-color:var(--jsui-accent-fonce); color:#fff; }
        #jsui-auth-close { font-size:12px; color:rgba(255,255,255,0.28); text-decoration:none; cursor:pointer; display:block; -webkit-tap-highlight-color:transparent; transition:color 0.2s; }
        #jsui-auth-close:hover { color:rgba(255,255,255,0.55); text-decoration:none; }
        
        /* ══ ANIMATION CLOCHE ══ */
        @keyframes jsui-bell-swing {
            0%   { transform: rotate(0deg); }
            15%  { transform: rotate(18deg); }
            30%  { transform: rotate(-14deg); }
            45%  { transform: rotate(10deg); }
            60%  { transform: rotate(-7deg); }
            75%  { transform: rotate(4deg); }
            90%  { transform: rotate(-2deg); }
            100% { transform: rotate(0deg); }
        }
        .jsui-notif-btn svg {
            transform-origin: top center;
            display: block;
        }
        .jsui-notif-btn.jsui-bell-ring svg {
            animation: jsui-bell-swing 0.9s ease-in-out forwards;
        }

        /* ══ DROPDOWN NOTIFICATIONS ══ */
        .jsui-notif-wrap { position: relative; }

        .jsui-notif-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 320px;
            max-width: 92vw;
            background: rgba(12,12,16,0.98);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255,255,255,0.09);
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.6);
            z-index: 9994;
            overflow: hidden;
        }
        .jsui-notif-dropdown.open { display: block; }

        .jsui-nd-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px 10px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .jsui-nd-title {
            font-size: 13px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.02em;
        }
        .jsui-nd-mark-all {
            background: none;
            border: none;
            color: rgba(255,255,255,0.35);
            font-size: 11px;
            cursor: pointer;
            padding: 0;
            transition: color 0.2s;
        }
        .jsui-nd-mark-all:hover { color: #C9A961; }

        .jsui-nd-list {
            max-height: 320px;
            overflow-y: auto;
            /* Meme regle que pour la recherche : le bas de la liste des
               notifications arrete le mouvement au lieu de le passer a la page. */
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .jsui-nd-empty {
            text-align: center;
            color: rgba(255,255,255,0.25);
            font-size: 13px;
            padding: 28px 16px;
        }

        .jsui-nd-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            text-decoration: none;
            color: #ccc;
            transition: background 0.15s;
            position: relative;
        }
        .jsui-nd-item:last-child { border-bottom: none; }
        .jsui-nd-item:hover { background: rgba(255,255,255,0.05); color: #fff; text-decoration: none; }
        .jsui-nd-unread { background: rgba(139,0,0,0.07); }
        .jsui-nd-unread:hover { background: rgba(139,0,0,0.12); }

        .jsui-nd-icon {
            flex-shrink: 0;
            width: 32px; height: 32px;
            background: rgba(255,255,255,0.07);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            margin-top: 1px;
        }
        .jsui-nd-icon svg { width: 16px; height: 16px; stroke: #C9A961; fill: none; }

        .jsui-nd-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .jsui-nd-item-title {
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .jsui-nd-message {
            font-size: 12px;
            color: rgba(255,255,255,0.55);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .jsui-nd-unread .jsui-nd-message { color: rgba(255,255,255,0.75); }
        .jsui-nd-date {
            font-size: 10px;
            color: rgba(255,255,255,0.25);
            margin-top: 2px;
        }

        .jsui-nd-dot {
            flex-shrink: 0;
            width: 7px; height: 7px;
            background: var(--jsui-accent);
            border-radius: 50%;
            margin-top: 6px;
        }

        .jsui-nd-footer {
            display: block;
            text-align: center;
            padding: 12px;
            font-size: 12px;
            font-weight: 600;
            color: #C9A961;
            text-decoration: none;
            border-top: 1px solid rgba(255,255,255,0.06);
            transition: background 0.15s, color 0.15s;
        }
        .jsui-nd-footer:hover { background: rgba(201,169,97,0.08); color: #dfc07a; text-decoration: none; }

        /* ══ MENU COMPTE ══
           Un seul élément, posé au niveau de la page (comme la barre latérale ☰ :
           jamais dans l'en-tête, qui le coincerait).
           • PC (à partir du seuil « PC » des réglages Appareils) : petite fenêtre
             sous le bouton du compte ; sa position est calculée par le script.
           • Tablette et mobile : panneau plein hauteur qui coulisse depuis la droite,
             avec le même fond et le même voile que la barre latérale ☰.
           Le script ajoute .is-panel selon la largeur de l'écran. */
        .jsui-account-wrap { position: relative; }

        .jsui-account-dropdown {
            display: none;
            position: fixed;
            top: 0; right: 0;
            width: 290px;
            max-height: calc(100vh - 24px);
            overflow-y: auto;
            background: rgba(12,12,16,0.98);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255,255,255,0.09);
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.65);
            z-index: 99991;
            transform-origin: top right;
            animation: jsui-acd-in 0.18s cubic-bezier(0.4,0,0.2,1) both;
        }
        @keyframes jsui-acd-in {
            from { opacity: 0; transform: scale(0.95) translateY(-6px); }
            to   { opacity: 1; transform: scale(1)    translateY(0); }
        }
        .jsui-account-dropdown.open { display: block; }

        .jsui-acd-header {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 14px 14px 12px;
        }
        .jsui-acd-avatar {
            flex-shrink: 0;
            width: 40px; height: 40px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid rgba(255,255,255,0.18);
            background: rgba(255,255,255,0.07);
            display: flex; align-items: center; justify-content: center;
        }
        .jsui-acd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .jsui-acd-avatar svg { width: 22px; height: 22px; stroke: rgba(255,255,255,0.5); }
        .jsui-acd-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .jsui-acd-name {
            font-size: 13px;
            font-weight: 700;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }
        .jsui-acd-email {
            font-size: 11px;
            color: rgba(255,255,255,0.38);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        .jsui-acd-sep {
            height: 1px;
            background: rgba(255,255,255,0.07);
            margin: 0 0;
        }

        .jsui-acd-menu { padding: 6px 0; }

        .jsui-acd-item {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 10px 14px;
            color: rgba(255,255,255,0.82);
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            transition: background 0.15s, color 0.15s;
            -webkit-tap-highlight-color: transparent;
            cursor: pointer;
        }
        .jsui-acd-item:hover { background: rgba(255,255,255,0.07); color: #fff; text-decoration: none; }
        .jsui-acd-icon {
            flex-shrink: 0;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.07);
            border-radius: 7px;
        }
        .jsui-acd-icon svg { width: 15px; height: 15px; }
        .jsui-acd-label { flex: 1; }
        /* Déconnexion : toujours le DERNIER de la liste, quels que soient les éléments ajoutés avant. */
        .jsui-acd-menu { display: flex; flex-direction: column; }
        .jsui-acd-menu > .jsui-acd-sep { order: 98; }
        .jsui-acd-logout { order: 99; }
        .jsui-acd-logout { margin-top: 2px; }
        .jsui-acd-logout .jsui-acd-icon { background: rgba(255,40,40,0.12); }
        .jsui-acd-logout .jsui-acd-icon svg { stroke: #FF4444; }
        .jsui-acd-logout:hover { background: rgba(255,40,40,0.08); color: #FF6666; }
        .jsui-acd-logout:hover .jsui-acd-label { color: #FF6666; }

        /* Flèche › à droite de « Mon compte » et « Réglages » */
        .jsui-acd-item:not(.jsui-acd-logout)::after {
            content: ''; flex: none; width: 7px; height: 7px; margin-left: 8px;
            border-top: 1.5px solid rgba(255,255,255,0.35); border-right: 1.5px solid rgba(255,255,255,0.35);
            transform: rotate(45deg);
        }

        /* Bloc « Mon solde » + bouton Recharger (n'existe que si le solde est connu) */
        /* Carte du solde : blanc translucide, sans aucun rouge. */
        .jsui-acd-wallet {
            display: flex; align-items: center; justify-content: space-between; gap: 10px;
            margin: 0 12px 6px; padding: 10px 12px; border-radius: 10px;
            background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.14) !important;
        }
        .jsui-acd-wallet-info { display: flex; flex-direction: column; min-width: 0; }
        .jsui-acd-wallet-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.6); }
        .jsui-acd-wallet-amount { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.25; }
        /* Recharger : fond rouge translucide, sans contour rouge ; il se remplit de rouge plein au survol et au toucher. */
        .jsui-acd-wallet-btn {
            flex: none; display: inline-flex; align-items: center; gap: 6px;
            background: rgba(204,0,0,0.18) !important; color: #fff !important;
            border: 1px solid transparent !important; border-radius: 9px; padding: 7px 12px;
            font-size: 12px; font-weight: 700; text-decoration: none !important;
            transition: background .2s, color .2s;
        }
        .jsui-acd-wallet-btn:hover, .jsui-acd-wallet-btn:focus, .jsui-acd-wallet-btn:active { background: var(--jsui-accent-fonce) !important; color: #fff !important; outline: none; }
        .jsui-acd-wallet-btn svg { width: 12px; height: 12px; }

        /* Fermeture et fond : réservés au panneau mobile */
        .jsui-acd-close, .jsui-acd-overlay { display: none; }

        /* ── Panneau (tablette et mobile) ── */
        .jsui-account-dropdown.is-panel {
            display: flex; flex-direction: column;
            top: 0; right: 0; bottom: 0; left: auto;
            width: min(320px, 85vw); max-height: none; /* même règle que la barre ☰ : largeur fixe, plafonnée à 85 % d'un petit écran */
            border-radius: 0; border-width: 0 0 0 1px;
            background: rgba(11,11,11,0.98);
            backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
            padding: 56px 0 0;
            animation: none; transform: translateX(100%); visibility: hidden;
            transition: transform .32s cubic-bezier(0.4,0,0.2,1), visibility 0s linear .32s;
        }
        .jsui-account-dropdown.is-panel.open { transform: none; visibility: visible; transition: transform .32s cubic-bezier(0.4,0,0.2,1); }
        .jsui-acd-overlay.is-panel {
            display: block; position: fixed; inset: 0;
            background: rgba(0,0,0,0.65);
            backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
            opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 99990;
        }
        .jsui-acd-overlay.is-panel.open { opacity: 1; pointer-events: auto; }
        .is-panel .jsui-acd-close {
            display: block; position: absolute; top: 12px; right: 14px; width: 36px; height: 36px;
            background: none !important; border: none !important; color: #fff !important;
            font-size: 26px; line-height: 1; cursor: pointer; padding: 0; box-shadow: none !important;
        }
        .is-panel .jsui-acd-header { padding: 6px 20px 16px; gap: 14px; }
        .is-panel .jsui-acd-avatar { width: 48px; height: 48px; }
        .is-panel .jsui-acd-name { font-size: 16px; }
        .is-panel .jsui-acd-wallet { margin: 0 20px 10px; }
        .is-panel .jsui-acd-menu { display: flex; flex-direction: column; flex: 1; padding: 6px 20px 24px; }
        .is-panel .jsui-acd-item { padding: 14px 0; font-size: 15px; font-weight: 700; }

/* Règles responsive : générées par class-header.php (charger_css) */

/* ── BARRE LATÉRALE ──────────────────────────────────────────── */

        /* Overlay */
        #joystore-nav-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.65);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            z-index: 99990;
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s;
        }
        #joystore-nav-overlay.active { opacity: 1; pointer-events: all; }

        /* Sidebar */
        #joystore-nav-sidebar {
            position: fixed;
            top: 0; left: 0; bottom: 0;
            width: min(300px, 85vw);
            background: rgba(11,11,11,0.98);
            backdrop-filter: blur(24px) saturate(1.5);
            -webkit-backdrop-filter: blur(24px) saturate(1.5);
            z-index: 99991;
            transform: translateX(-100%);
            transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
            display: flex; flex-direction: column;
            overflow: hidden;
        }
        #joystore-nav-sidebar.active { transform: translateX(0); }

        /* En-tête */
        #jsui-nav-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 16px;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            flex-shrink: 0;
        }
        #jsui-nav-head .jsui-nav-brand {
            display: flex; align-items: center;
            text-decoration: none; color: #fff;
        }
        #jsui-nav-head .jsui-nav-brand img { height: 30px; object-fit: contain; }
        #jsui-nav-head .jsui-nav-brand-text {
            font-size: 16px; font-weight: 800;
            color: #fff; letter-spacing: 1px;
        }
        #jsui-nav-close {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            color: rgba(255,255,255,0.45); text-decoration: none;
            border-radius: 50%; font-size: 20px; line-height: 1;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.2s, color 0.2s;
        }
        #jsui-nav-close:hover { background: rgba(255,255,255,0.07); color: #fff; text-decoration: none; }

        /* Zone scrollable */
        #jsui-nav-scroll {
            flex: 1; overflow-y: auto; padding: 8px 0 20px;
            /* Le bas du menu arrête le mouvement : sans cela, arriver à la
               dernière rubrique faisait défiler la page cachée derrière. */
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        #jsui-nav-scroll::-webkit-scrollbar { width: 3px; }
        #jsui-nav-scroll::-webkit-scrollbar-track { background: transparent; }
        #jsui-nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

        /* Titre de section */
        .jsui-nav-section {
            font-size: 10px; font-weight: 700;
            letter-spacing: 0.9px; text-transform: uppercase;
            color: rgba(255,255,255,0.28);
            padding: 14px 16px 5px;
        }

        /* Item */
        .jsui-nav-link {
            display: flex; align-items: center; gap: 12px;
            padding: 11px 16px;
            text-decoration: none;
            color: rgba(255,255,255,0.8);
            font-size: 14px; font-weight: 500;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s, color 0.15s;
        }
        .jsui-nav-link:hover, .jsui-nav-link:focus {
            background: rgba(255,255,255,0.05);
            color: #fff; text-decoration: none;
        }
        .jsui-nav-link svg {
            width: 18px; height: 18px; flex-shrink: 0;
            stroke: currentColor; fill: none;
            stroke-width: 2; opacity: 0.65;
        }
        .jsui-nav-link.jsui-nav-cat svg {
            fill: currentColor; stroke: none; opacity: 0.6;
        }

        /* Séparateur */
        .jsui-nav-sep {
            height: 1px; background: rgba(255,255,255,0.06);
            margin: 6px 0;
        }

        /* ===== ACCORDÉON COMMUNAUTÉS ===== */
        .jsui-accord-btn {
            display: flex; align-items: center; gap: 12px;
            width: 100%; padding: 11px 16px;
            background: transparent; border: none;
            color: rgba(255,255,255,0.8);
            font-size: 14px; font-weight: 500;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            cursor: pointer; text-align: left;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s, color 0.15s;
        }
        .jsui-accord-btn:hover {
            background: rgba(255,255,255,0.05);
            color: #fff;
        }
        .jsui-accord-btn.open {
            background: rgba(37,211,102,0.07);
            color: #fff;
        }
        .jsui-accord-btn svg.jsui-accord-icon {
            width: 18px; height: 18px; flex-shrink: 0;
            fill: currentColor; opacity: 0.6;
            transition: opacity 0.2s;
        }
        .jsui-accord-btn.open svg.jsui-accord-icon { opacity: 1; fill: #25D366; }

        /* Badge count */
        .jsui-accord-badge {
            background: #25D366; color: #fff;
            font-size: 10px; font-weight: 800;
            padding: 2px 7px; border-radius: 10px;
            margin-left: auto;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            flex-shrink: 0;
        }

        /* Flèche */
        .jsui-accord-arrow {
            width: 16px; height: 16px; flex-shrink: 0;
            fill: rgba(255,255,255,0.3);
            transition: transform 0.3s ease;
            margin-left: 4px;
        }
        .jsui-accord-btn.open .jsui-accord-arrow {
            transform: rotate(180deg);
            fill: rgba(255,255,255,0.5);
        }

        /* Contenu accordéon */
        .jsui-accord-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1);
            background: rgba(37,211,102,0.025);
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
        }
        .jsui-accord-content.open {
            max-height: 500px;
            border-color: rgba(37,211,102,0.1);
        }

        /* Items communaute dans l accordeon */
        .jsui-comm-link {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 16px;
            text-decoration: none; color: #fff;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s;
        }
        .jsui-comm-link:hover { background: rgba(37,211,102,0.07); text-decoration: none; color: #fff; }
        .jsui-comm-link.jsui-chan-item { background: rgba(255,215,0,0.04); }
        .jsui-comm-link.jsui-chan-item:hover { background: rgba(255,215,0,0.09); }

        .jsui-comm-avatar {
            width: 32px; height: 32px; border-radius: 8px;
            overflow: hidden; flex-shrink: 0;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .jsui-chan-item .jsui-comm-avatar { border-color: rgba(255,215,0,0.3); }
        .jsui-comm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

        .jsui-comm-info { flex: 1; min-width: 0; }
        .jsui-comm-name {
            font-size: 13px; font-weight: 700; color: #fff;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        .jsui-comm-sub {
            font-size: 10px; color: rgba(255,255,255,0.4);
            margin-top: 1px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        .jsui-wa-badge {
            width: 20px; height: 20px; flex-shrink: 0;
            background: rgba(37,211,102,0.15);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
        }
        .jsui-chan-item .jsui-wa-badge { background: rgba(255,215,0,0.15); }
        .jsui-wa-badge svg { width: 11px; height: 11px; fill: #25D366; }
        .jsui-chan-item .jsui-wa-badge svg { fill: #ffd700; }

        .jsui-comm-sep {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
            margin: 3px 14px;
        }

        

/* ── STYLES D'EN-TÊTE À UNE LIGNE (éléments masqués dans le style Classique) ── */
#jsui-header-wrap .jsui-hlinks,
#jsui-header-wrap .jsui-cart-ic,
#jsui-header-wrap .jsui-hsearch-ic,
#jsui-header-wrap .jsui-ann,
#jsui-header-wrap .jsui-acct-name,
#jsui-header-wrap .jsui-acct-chev { display:none; }

#jsui-header-wrap .jsui-hlinks { align-items:center; gap:2px; margin-left:16px; }
#jsui-header-wrap .jsui-hlink {
    display:flex; align-items:center; gap:7px; position:relative;
    padding:8px 13px; border-radius:10px;
    font-size:14px; font-weight:600; white-space:nowrap;
    color:rgba(255,255,255,0.72); text-decoration:none;
    transition:background .2s, color .2s;
}
#jsui-header-wrap .jsui-hlink svg { width:16px; height:16px; fill:currentColor; stroke:none; flex-shrink:0; }
#jsui-header-wrap .jsui-hlink:hover { color:#fff; background:rgba(255,255,255,0.06); text-decoration:none; }
#jsui-header-wrap .jsui-hlink.active { color:#fff; background:rgba(255,255,255,0.07); }
#jsui-header-wrap .jsui-hlink.active::after {
    content:""; position:absolute; left:14px; right:14px; bottom:-9px; height:2px; border-radius:2px;
    background:var(--jsui-accent); box-shadow:0 0 12px rgba(var(--jsui-accent-rgb),0.8);
}
#jsui-header-wrap .jsui-cart-ic svg { fill:#fff; stroke:none; }
#jsui-header-wrap .jsui-cart-ic.active { background:rgba(255,255,255,0.1); }
#jsui-header-wrap .jsui-ann {
    align-items:center; justify-content:center; gap:22px; height:30px; overflow:hidden; white-space:nowrap;
    background:linear-gradient(90deg,#7a0f1b,#c4172a 50%,#7a0f1b);
    color:#fff; font-size:12px; font-weight:600; letter-spacing:.02em;
}