/* PROPRIETE EXCLUSIVE DE GRAPHKEY AGENCY ALGERIA. Application Nbi3com concue, developpee et exploitee exclusivement par Z. Ahcene (Graphikey Agency Algeria). Toute reproduction, copie, distribution ou reutilisation du code source, des contenus ou de l'identite visuelle, totale ou partielle, est strictement interdite sans autorisation ecrite prealable. (c) Graphikey Agency Algeria - Z. Ahcene. */
/* ===== Nbi3com — responsive mobile / tablette (optimisé) ===== */

/* Pas de defilement horizontal de la page, quoi qu'il arrive. */
html, body { max-width: 100%; overflow-x: hidden; }
main, .wrap { min-width: 0; }

/* Blocs inclines du « parcours » : plus d'inclinaison ni de marge qui deborde. */
[style*="skewX(-30deg)"] { transform: none !important; }
[style*="padding-right:25%"], [style*="padding-left:25%"] { padding: 0 !important; flex-wrap: wrap !important; }
[style*="skewX(-30deg)"] > span { transform: none !important; }
[style*="min-width:150px"] { min-width: 0 !important; }

/* -- Tablette : grilles fixes -> colonnes adaptatives -- */
@media (max-width: 1100px) {
    [style*="grid-template-columns:repeat(5,minmax(0,1fr))"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    [style*="grid-template-columns:1.6fr 1fr"],
    [style*="grid-template-columns:1.4fr 1fr"],
    [style*="grid-template-columns:1.3fr 1fr"],
    [style*="grid-template-columns:1fr 1.4fr"] { grid-template-columns: 1fr !important; }
}

/* -- Tablette / petit écran -- */
@media (max-width: 900px) {
    .wrap { padding: 0 16px; box-sizing: border-box; }

    /* Grilles fixes -> 2 colonnes */
    [style*="grid-template-columns:repeat(5,minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(3,minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns:1.6fr 1fr"],
    [style*="grid-template-columns:1.4fr 1fr"],
    [style*="grid-template-columns:1.3fr 1fr"],
    [style*="grid-template-columns:1fr 1.4fr"],
    [style*="grid-template-columns:320px 1fr"] { grid-template-columns: 1fr !important; }

    [style*="min-width:340px"], [style*="min-width:360px"],
    [style*="min-width:380px"], [style*="min-width:250px"] { min-width: 0 !important; }

    /* Espaces a barre laterale : la navigation s'empile (rien n'est masque) */
    .page { flex-direction: column !important; min-height: auto !important; }
    .side {
        display: flex !important; flex-direction: column !important;
        width: 100% !important; border-right: 0 !important; border-bottom: 1px solid var(--bd);
        padding: 16px !important; gap: 14px !important;
    }
    .side nav { flex-direction: column !important; gap: 4px !important; }
    .side .ni { padding: 11px 14px !important; font-size: 14px; }
    .side .subs { display: flex !important; }
    main { padding: 0 14px 40px !important; }

    /* En-tete : la nav passe a la ligne (pas de defilement) */
    header.wrap { gap: 10px; padding-block: 10px; }
    .pill { flex-wrap: wrap; max-width: 100%; }

    /* Tableaux : defilement contenu dans leur cadre (n'affecte pas la page) */
    table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

    /* Les lignes « filtres + resultats » passent en colonne */
    [style*="align-items:flex-start"] { flex-direction: column !important; align-items: stretch !important; }
    [style*="flex:1;min-width:0"] { flex: 1 1 auto !important; }
    [style*="position:sticky"] { position: static !important; }

    h1 { font-size: 30px !important; }
    .h2 { font-size: 30px !important; }
}

/* -- Mobile -- */
@media (max-width: 560px) {
    [style*="grid-template-columns:repeat(5,minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(2,minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(auto-fit,minmax(200px,1fr))"] { grid-template-columns: 1fr !important; }

    [style*="padding:28px"] { padding: 16px !important; }
    [style*="padding:26px"] { padding: 16px !important; }
    [style*="padding:24px"] { padding: 15px !important; }
    [style*="padding:22px"] { padding: 15px !important; }

    h1 { font-size: 26px !important; }
    .h2 { font-size: 26px !important; }
    .btn { min-height: 42px; font-size: 14px; }
    [style*="min-height:96px"] { min-height: 0 !important; }

    [style*="flex:1.2"], [style*="flex:1.6"], [style*="flex:1.4"] { flex: 1 1 100% !important; }
    [style*="width:250px"], [style*="width:240px"], [style*="width:248px"] { width: 100% !important; }

    /* Accueil mobile : titres et blocs adaptes a la maquette */
    [style*="font-size:68px"] { font-size: 30px !important; letter-spacing: -1px !important; }
    [style*="font-size:52px"] { font-size: 26px !important; }
    [style*="font-size:44px"] { font-size: 26px !important; }
    [style*="font-size:38px"] { font-size: 23px !important; }
    [style*="font-size:36px"] { font-size: 24px !important; }
    /* Les blocs inclines (parcours) ne debordent plus */
    [style*="skewX(-30deg)"] { transform: none !important; }
    [style*="padding-right:25%"], [style*="padding-left:25%"] { padding: 0 !important; }
    /* Espaces fixés de l'accueil */
    [style*="padding-top:110px"], [style*="padding-top:100px"], [style*="padding-top:90px"] { padding-top: 40px !important; }
    [style*="padding-bottom:110px"] { padding-bottom: 40px !important; }
    [style*="font-size:18px;max-width:600px"] { font-size: 15px !important; }

    /* Les images/grands blocs ne debordent jamais */
    img { max-width: 100%; height: auto; }
}

/* -- Barre de navigation mobile (bas de page) -- */
.mobile-nav { display: none; }

@media (max-width: 900px) {
    .mobile-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--card); border-top: 1px solid var(--bd);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .mobile-nav a {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 6px 0; font-size: 10px; color: var(--muted); text-decoration: none;
    }
    .mobile-nav a.on { color: var(--acc); }
    .mobile-nav a svg { stroke: currentColor; }

    /* La navigation du haut est remplacee par la barre du bas */
    .site-header .pill { display: none; }
    body { padding-bottom: 74px; }

    /* En-tete mobile : logo + Nuit/Jour + cloche seulement */
    .hide-mobile { display: none !important; }
    .site-header div[style*="justify-content:flex-end"] > a,
    .site-header div[style*="justify-content:flex-end"] > form,
    .site-header div[style*="justify-content:flex-end"] > .auth-toggle { display: none !important; }
    .site-header div[style*="justify-content:flex-end"] > label.tg,
    .site-header div[style*="justify-content:flex-end"] > details { display: flex !important; }

    /* Recherche de l'accueil : barre blanche + bouton vert */
    #hero-search { background: #FFFFFF !important; border-radius: 14px; box-shadow: 0 8px 24px rgba(31,168,36,.12); }
    #hero-search select { display: none; }

    /* En-tete mobile : logo plus petit */
    .site-header img[alt="NBI3.COM"] { height: 58px !important; }
    /* Bandeau « Nouvelles actions » en pilule */
    .site-ticker { border-bottom: 0 !important; background: transparent !important; padding: 8px 16px 0; }
    .site-ticker .wrap { border: 1px solid var(--bd2); border-radius: 999px; background: var(--card); padding: 8px 14px !important; box-shadow: 0 6px 18px rgba(31,168,36,.1); }
    /* Une seule ligne : logo a gauche, actions a droite */
    header.wrap { flex-direction: row !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
    header.wrap > div { display: contents !important; }
}

/* -- Police arabe -- */
/* Une seule famille arabe pour toute l'app : regular pour 100-500, bold pour 501-900. */
@font-face { font-family: 'NbiArabic'; src: url('/fonts/arabic-light.otf') format('opentype'); font-weight: 100 500; font-display: swap; }
@font-face { font-family: 'NbiArabic'; src: url('/fonts/arabic-bold.otf') format('opentype'); font-weight: 501 900; font-display: swap; }
/* DM Sans en premier (chiffres/latin), NbiArabic ensuite (lettres arabes). Le logo Poppins reste intact. */
html[lang="ar"], html[lang="ar"] body, html[lang="ar"] body *:not([style*="Poppins"]),
html[dir="rtl"], html[dir="rtl"] body, html[dir="rtl"] body *:not([style*="Poppins"]) { font-family: 'DM Sans', 'NbiArabic', Arial, sans-serif !important; }
html[dir="rtl"] bdi[dir="ltr"] { direction: ltr; unicode-bidi: isolate; }
html[lang="ar"] b, html[lang="ar"] strong, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] .h2,
html[dir="rtl"] b, html[dir="rtl"] strong, html[dir="rtl"] h1, html[dir="rtl"] h2 { font-weight: 600; }




/* ===== Page vendeurs : version mobile ===== */
@media (max-width: 900px) {
    .sellers-layout { flex-direction: column !important; }
    .sellers-filters { width: 100% !important; }
    .sellers-filters section { position: static !important; }
    .sellers-layout table { min-width: 720px !important; }
    .sellers-layout .glass { border-radius: 12px !important; }
}

/* ===== Produit : version mobile ===== */
@media (max-width: 760px) {
    .product-layout { flex-direction: column !important; }
    .product-gallery, .product-detail { min-width: 0 !important; width: 100% !important; }
}

/* ===== Header mobile ===== */
@media (max-width: 760px) {
    .site-header header { padding-block: 4px 10px !important; }
    .site-header img { max-height: 64px !important; }
}

/* ===== Menu glissant mobile (header) ===== */
.mobile-nav-toggle { display: none; }
.mobile-drawer { display: none; }
@media (max-width: 900px) {
    .desktop-nav { display: none !important; }
    .mobile-nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; border-radius: 10px;
        border: 1px solid var(--bd); background: var(--gl2); color: var(--ink);
        font-size: 20px; cursor: pointer;
    }
    .mobile-drawer.open {
        display: flex; flex-direction: column; gap: 2px;
        margin: 6px 16px 0; padding: 8px;
        border: 1px solid var(--bd); border-radius: 12px;
        background: var(--card); box-shadow: 0 18px 40px rgba(0,0,0,.45);
        position: relative; z-index: 80;
    }
    .mobile-drawer a {
        padding: 12px 14px; border-radius: 9px; font-size: 14px; color: var(--ink);
    }
    .mobile-drawer a:hover { background: var(--gl2); }
}

/* ===== Header mobile : logo centré, reste à la ligne ===== */
@media (max-width: 900px) {
    .site-header header > div:first-child {
        justify-content: center !important;
        row-gap: 6px !important;
    }
    .site-header header > div:first-child > a:first-child {
        width: 100% !important;
        justify-content: center !important;
        order: -1;
    }
    .site-header header > div:first-child > .mobile-nav-toggle {
        margin: 0 auto;
    }
    .site-header header > div:nth-child(2) {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
}

/* ===== Notifications : ne déborde plus sur mobile ===== */
@media (max-width: 700px) {
    .site-header [style*="width:330px"] {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        right: -8px !important;
        left: auto !important;
    }
}

/* ===== Dashboards vendeur / acheteur : mobile ===== */
@media (max-width: 900px) {
    main { padding: 0 12px 32px !important; }
    .glass { padding: 14px !important; border-radius: 14px !important; }
    main h1 { font-size: 26px !important; }
    main table { font-size: 12px !important; }
    main th { font-size: 10px !important; padding: 0 8px 10px !important; white-space: nowrap; }
    main td { padding: 10px 8px !important; }
    main .btn { min-height: 34px !important; padding: 0 12px !important; font-size: 12px !important; }
    main [style*="display:grid"] { grid-template-columns: 1fr !important; }
    main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    main [style*="width:250px"], main [style*="width:248px"] { width: 100% !important; }
    main [style*="flex:none"] { flex: 1 1 auto !important; min-width: 0 !important; }
}
@media (max-width: 600px) {
    main .glass[style*="overflow-x:auto"] { overflow-x: auto !important; }
    main table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ===== Dashboards mobile : sidebar compacte horizontale ===== */
@media (max-width: 900px) {
    .side {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        width: 100% !important;
        padding: 8px 12px !important;
        gap: 6px !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--bd) !important;
    }
    .side > a:first-child { display: none !important; }
    .side nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 4px !important;
    }
    .side .ni { white-space: nowrap !important; padding: 8px 12px !important; font-size: 12px !important; }
    .side .subs { display: none !important; }
    main { width: 100% !important; padding: 12px !important; }
    div[style*="display:flex;min-height:calc(100vh - 150px)"] { flex-direction: column !important; }
}

/* ===== Barre latérale mobile : scrollbar invisible ===== */
@media (max-width: 900px) {
    .side, .side nav {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        overflow-y: hidden !important;
    }
    .side::-webkit-scrollbar, .side nav::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
    .side { max-height: 60px !important; }
    .side > * { flex: none !important; }
}

/* ===== Anti-débordement horizontal global ===== */
@media (max-width: 900px) {
    html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
    .page, .site-header, main, .wrap, .glass, section { max-width: 100% !important; box-sizing: border-box !important; }
    main table { display: block !important; overflow-x: auto !important; max-width: 100% !important; white-space: nowrap !important; }
    img, video, svg, iframe { max-width: 100% !important; }
    [style*="min-width:980px"], [style*="min-width:720px"] { min-width: 0 !important; }
}

/* ===== Barre de navigation mobile : fond opaque visible ===== */
@media (max-width: 900px) {
    .mobile-nav {
        display: flex !important;
        background: var(--card, #101511) !important;
        border-top: 1px solid var(--bd, #1E2620) !important;
        box-shadow: 0 -10px 28px rgba(0,0,0,.38) !important;
        z-index: 9999 !important;
    }
    .mobile-nav a { color: var(--muted, #A3ADA5) !important; }
    .mobile-nav a.on { color: var(--acc, #4ADE80) !important; }
}

/* ===== Header mobile : masquer le bouton connexion/déconnexion ===== */
@media (max-width: 900px) {
    .auth-toggle { display: none !important; }
}

/* ===== Mobile : afficher le bouton connexion/déconnexion ===== */
@media (max-width: 900px) {
    .site-header div[style*="justify-content:flex-end"] > .auth-toggle,
    .site-header .auth-toggle {
        display: inline-flex !important;
    }
}

/* ===== Header mobile : tout centré ===== */
@media (max-width: 900px) {
    .site-header header { align-items: center !important; text-align: center !important; }
    .site-header header > div {
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .site-header header > div:nth-child(2) { flex-direction: column !important; gap: 8px !important; }
    .site-header .pill { justify-content: center !important; }
    .site-header .auth-toggle { margin: 0 auto !important; }
}

/* ===== Header mobile : icônes organisées ===== */
@media (max-width: 900px) {
    .site-header header > div:nth-child(2) > div {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .site-header .ib {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        flex: none !important;
    }
    .site-header .tg span { padding: 6px 9px !important; font-size: 11px !important; }
    .site-header .ib svg { width: 17px !important; height: 17px !important; }
    .site-header .auth-toggle { min-width: 150px !important; }
}

/* ===== Header mobile : menu + messages + notifications + compte alignés ===== */
@media (max-width: 900px) {
    .site-header .ib.hide-mobile { display: inline-flex !important; }
    .site-header header > div:nth-child(2) > div {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .site-header .mobile-nav-toggle,
    .site-header .ib { width: 40px !important; height: 40px !important; flex: none !important; }
}

/* ===== Header mobile : connexion/déconnexion en dessous et centré ===== */
@media (max-width: 900px) {
    .site-header header > div:nth-child(2) > div { flex-wrap: wrap !important; }
    .site-header .auth-toggle {
        flex: 0 0 100% !important;
        margin: 8px auto 0 !important;
        justify-content: center !important;
    }
}

/* ===== Header mobile : sans icône menu, espace optimisé ===== */
@media (max-width: 900px) {
    .site-header header { padding-block: 0 6px !important; gap: 2px !important; }
    .site-header header > div:nth-child(2) { gap: 4px !important; }
    .site-header header > div:nth-child(2) > div { gap: 6px !important; }
}

/* ===== Transition fluide jour / nuit ===== */
.page, .site-header, .glass, .page table, .page td, .page th,
.page a, .page button, .page input, .page select, .mobile-nav {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ===== Espace vendeur : tailles optimisées ===== */
.vendor-space main { padding: 0 24px 40px !important; }
.vendor-space main h1 { font-size: 30px !important; letter-spacing: -.6px !important; margin: 10px 0 16px !important; }
.vendor-space main .glass { padding: 18px !important; }
.vendor-space main .btn { min-height: 38px !important; font-size: 12.5px !important; padding: 0 14px !important; }
.vendor-space main table { font-size: 13px !important; }
.vendor-space main th { font-size: 10.5px !important; padding: 0 10px 12px !important; }
.vendor-space main td { padding: 12px 10px !important; }
.vendor-space main .lab { font-size: 11px !important; }
.vendor-space .side { width: 228px !important; padding: 20px 12px !important; gap: 18px !important; }
.vendor-space .side .ni { padding: 10px 12px !important; font-size: 13px !important; }
.vendor-space .side .subs .ni { padding: 7px 10px !important; font-size: 12px !important; }

@media (max-width: 900px) {
    .vendor-space main { padding: 12px !important; }
    .vendor-space main h1 { font-size: 24px !important; }
    .vendor-space main .glass { padding: 14px !important; }
}