/* ============================================================
   NIMBA - main.css
   Feuille de style principale, extraite de base.html.
   Mobile-first : styles par defaut = mobile,
   les @media (min-width: X) enrichissent pour tablet/desktop.
   Variables CSS definies dans charte.css (charge avant ce fichier).
   ============================================================ */
/* ================================================================
           RESET + BASE
           Tout le CSS qui suit est mobile-first.
           Les media queries (min-width) ajoutent les enrichissements desktop.
           ================================================================ */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: transparent;
        }
        body {
            font-family: var(--f-body);
            background: var(--c-bg);
            color: var(--c-ink);
            font-size: var(--fs-base);
            line-height: 1.6;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        button { cursor: pointer; }
        button, input, select, textarea { font-family: inherit; font-size: inherit; }

        .container {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 var(--sp-4);    /* 14px sur mobile, élargi en desktop */
        }

        /* Touch targets minimaux pour mobile (Apple HIG : 44px, Material : 48px) */
        button, a.btn, .hdr-icon-btn, .bnav-item, .nav-cat-link, .sm-link, .udd-item {
            -webkit-tap-highlight-color: transparent;
        }

        /* Accessibilite clavier : focus-visible visible uniquement au tab,
           pas au clic souris/touche tactile. Indispensable pour A11y. */
        :focus-visible {
            outline: 2px solid var(--c-primary);
            outline-offset: 2px;
            border-radius: var(--r-xs);
        }
        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 2px solid var(--c-primary);
            outline-offset: 2px;
        }


        /* ================================================================
           MOBILE - barre logo en haut (NON sticky, scroll avec la page)
           Visible par défaut, masquée en desktop
           ================================================================ */
        .mob-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: var(--h-mob-top);
            padding: 0 var(--sp-3);
            background: var(--c-surface);
            border-bottom: 1px solid var(--c-line-light);
        }
        .mob-logo { display: flex; align-items: center; gap: var(--sp-2); }
        .mob-logo img { width: 28px; height: 28px; object-fit: contain; }
        .mob-logo-text {
            font-family: var(--f-display);
            font-size: var(--fs-xl);
            font-weight: 800;
            color: var(--c-primary-dark);
            letter-spacing: -0.4px;
            line-height: 1;
        }

        .mob-top-actions { display: flex; align-items: center; gap: var(--sp-1); }
        .mob-fav-btn {
            position: relative;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 2px;
            min-width: 44px; min-height: 44px;
            padding: var(--sp-1) var(--sp-2);
            border-radius: var(--r-sm);
            border: none; background: transparent;
            transition: background var(--t-base);
        }
        .mob-fav-btn svg {
            width: 20px; height: 20px;
            stroke: var(--c-ink); fill: none;
            stroke-width: 1.9;
            stroke-linecap: round; stroke-linejoin: round;
            transition: stroke var(--t-base);
        }
        .mob-fav-btn:active { background: var(--c-primary-soft); }
        .mob-fav-label {
            font-size: var(--fs-2xs);
            font-weight: 600; color: var(--c-ink-2);
            line-height: 1;
        }
        .mob-user-av {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
            display: flex; align-items: center; justify-content: center;
            font-size: var(--fs-xs); font-weight: 800;
            color: white;
            text-transform: uppercase;
            box-shadow: var(--sh-xs);
        }
        .mob-user-guest {
            width: 36px; height: 36px;
            border-radius: 50%;
            border: 1.5px solid var(--c-line);
            display: flex; align-items: center; justify-content: center;
            transition: all var(--t-base);
        }
        .mob-user-guest svg {
            width: 17px; height: 17px;
            stroke: var(--c-ink-3); fill: none;
            stroke-width: 1.8; stroke-linecap: round;
        }
        .mob-user-guest:active {
            border-color: var(--c-primary);
            background: var(--c-primary-soft);
        }


        /* ================================================================
           MOBILE - barre sticky (burger + recherche)
           ================================================================ */
        .mob-sticky-bar {
            display: flex;
            align-items: center;
            gap: var(--sp-2);
            height: var(--h-mob-stick);
            padding: 0 var(--sp-3);
            background: var(--c-surface);
            border-bottom: 1px solid var(--c-line);
            box-shadow: 0 1px 6px rgba(20, 35, 60, 0.04);
            position: sticky; top: 0;
            z-index: var(--z-sticky);
            transform: translateZ(0);
            will-change: transform;
        }
        .mob-search-form {
            flex: 1;
            display: flex; align-items: center;
            background: var(--c-line-light);
            border: 1.5px solid var(--c-line);
            border-radius: var(--r-full);
            overflow: hidden;
            transition: border-color var(--t-base), background var(--t-base);
        }
        .mob-search-form:focus-within {
            border-color: var(--c-primary);
            background: var(--c-surface);
        }
        .mob-search-form input {
            flex: 1;
            min-width: 0;                   /* sinon le champ refuse de retrecir sous ~300px et coupe la loupe */
            padding: var(--sp-2) var(--sp-4);
            background: transparent; border: none; outline: none;
            font-size: 16px;                /* 16px obligatoire = anti-zoom iOS */
            color: var(--c-ink);
            min-height: 40px;
        }
        .mob-search-form input::placeholder { color: var(--c-muted); }
        .mob-search-form button {
            flex-shrink: 0;
            margin: 3px 3px 3px 0;
            width: 34px; height: 34px;
            background: var(--c-neutral-btn);
            border: none; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            transition: background var(--t-base);
        }
        .mob-search-form button:active { background: var(--c-neutral-btn-h); }

        /* ZONES TACTILES : on elargit la surface qui reagit au doigt avec un
           pseudo-element invisible, sans changer le dessin du bouton (meme
           technique que .listing-fav-btn::before). Cible : ~44px. */
        .mob-search-form button,
        .mob-user-av,
        .mob-user-guest,
        .mob-logo,
        .burger-btn { position: relative; }
        .mob-search-form button::after,
        .mob-user-av::after,
        .mob-user-guest::after,
        .mob-logo::after,
        .burger-btn::after {
            content: "";
            position: absolute;
        }
        /* Le formulaire coupe ce qui depasse (overflow hidden) : 3px = sa marge */
        .mob-search-form button::after { inset: -3px; }
        .mob-user-av::after,
        .mob-user-guest::after { inset: -4px; }
        .mob-logo::after { inset: -8px 0; }
        .burger-btn::after { inset: -2px; }
        .mob-search-form button svg {
            width: 14px; height: 14px;
            stroke: white; fill: none;
            stroke-width: 2.5; stroke-linecap: round;
        }


        /* ================================================================
           BURGER BUTTON
           ================================================================ */
        .burger-btn {
            flex-shrink: 0;
            width: 40px; height: 40px;
            display: flex; align-items: center; justify-content: center;
            background: none; border: none;
            border-radius: var(--r-sm);
            transition: background var(--t-base);
        }
        .burger-btn:active { background: var(--c-line-light); }
        .burger-icon, .burger-icon::before, .burger-icon::after {
            display: block; width: 20px; height: 2px;
            background: var(--c-ink-2);
            border-radius: 2px;
            transition: all var(--t-slow);
        }
        .burger-icon { position: relative; }
        .burger-icon::before, .burger-icon::after { content: ''; position: absolute; left: 0; }
        .burger-icon::before { top: -6px; }
        .burger-icon::after  { top:  6px; }
        .burger-btn.is-open .burger-icon { background: transparent; }
        .burger-btn.is-open .burger-icon::before { top: 0; transform: rotate(45deg); }
        .burger-btn.is-open .burger-icon::after  { top: 0; transform: rotate(-45deg); }


        /* ================================================================
           BARRE CATÉGORIES - mobile (pills)
           ================================================================ */
        .nav-categories {
            background: var(--c-surface);
            border-bottom: 1px solid var(--c-line-light);
        }
        .nav-categories-wrap {
            position: relative;
            display: flex; align-items: center;
        }
        .nav-categories-wrap::before,
        .nav-categories-wrap::after {
            content: '';
            position: absolute; top: 0; bottom: 0;
            width: 24px;
            z-index: 2; pointer-events: none;
        }
        .nav-categories-wrap::before { left: 0;  background: linear-gradient(to right, var(--c-surface), transparent); }
        .nav-categories-wrap::after  { right: 0; background: linear-gradient(to left,  var(--c-surface), transparent); }

        .nav-categories-inner {
            flex: 1;
            display: flex; align-items: center;
            gap: var(--sp-2);
            padding: var(--sp-2) var(--sp-3) var(--sp-3);
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
        }
        .nav-categories-inner::-webkit-scrollbar { display: none; }

        /* Mobile : pills */
        .nav-cat-link {
            display: inline-flex; align-items: center;
            gap: var(--sp-1);
            padding: var(--sp-2) 14px;
            background: var(--c-line-light);
            border: 1.5px solid transparent;
            border-radius: var(--r-full);
            font-size: var(--fs-sm);
            font-weight: 500;
            color: var(--c-ink-2);
            white-space: nowrap;
            flex-shrink: 0;
            transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
        }
        .nav-cat-link:active {
            background: var(--c-primary-soft);
            border-color: var(--c-primary);
            color: var(--c-primary);
        }
        .nav-cat-link.active {
            background: var(--c-primary-soft);
            border-color: var(--c-primary);
            color: var(--c-primary);
            font-weight: 600;
        }
        .nav-cat-icon { font-size: var(--fs-base); }
        /*  Seule preuve de densite du PREMIER ecran : « Electronique (36) »
            dit que le site a du stock avant meme qu'on fasse defiler. Elle
            etait au plus petit corps de l'echelle et a 70 % d'opacite.
            GRAISSE ET OPACITE, PAS LA TAILLE : cette barre s'affiche sur
            TOUTES les pages du site, un corps plus grand en changerait la
            hauteur partout.
            ATTENTION, CETTE CLASSE A DEUX REGLES : celle-ci et une seconde
            dans @media (min-width: 1024px). Ne corriger que l'une des deux
            laisse l'autre moitie du site inchangee. */
        .nav-cat-count {
            font-size: var(--fs-2xs);
            color: var(--c-primary);
            opacity: 1;
            font-weight: 700;
        }
        .nav-cat-sep { display: none; }       /* pas de séparateurs en pills */
        .nav-cat-arrow { display: none; }     /* flèches desktop only */


        /* ================================================================
           DESKTOP HEADER - masqué par défaut (mobile-first)
           Activé en min-width: 769px
           ================================================================ */
        .site-header { display: none; }
        .fab { display: none; }


        /* ================================================================
           SLIDE MENU - panneau burger
           ================================================================ */
        .menu-overlay {
            position: fixed; inset: 0;
            background: rgba(10, 25, 50, 0.45);
            z-index: var(--z-overlay);
            opacity: 0; visibility: hidden;
            transition: opacity 0.28s ease, visibility 0.28s ease;
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
        }
        .menu-overlay.is-visible { opacity: 1; visibility: visible; }
        .slide-menu {
            position: fixed; top: 0; left: 0;
            width: 300px; max-width: 88vw;
            height: 100%;
            background: var(--c-surface);
            z-index: var(--z-menu);
            transform: translateX(-101%);
            transition: transform var(--t-slow);
            display: flex; flex-direction: column;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            box-shadow: 8px 0 40px rgba(20, 35, 60, 0.18);
        }
        .slide-menu.is-open { transform: translateX(0); }
        body.menu-open { overflow: hidden; }

        .sm-hdr {
            display: flex; align-items: center;
            gap: var(--sp-2);
            padding: var(--sp-3) var(--sp-4);
            border-bottom: 1px solid var(--c-line-light);
            flex-shrink: 0;
            position: sticky; top: 0;
            background: var(--c-surface);
            z-index: 2;
        }
        .sm-hdr-logo { width: 30px; height: 30px; object-fit: contain; }
        .sm-hdr-text {
            font-family: var(--f-display);
            font-size: var(--fs-xl);
            font-weight: 800;
            color: var(--c-primary-dark);
            letter-spacing: -0.4px;
        }
        .sm-close {
            margin-left: auto;
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            background: var(--c-line-light); border: none;
            border-radius: var(--r-sm);
            color: var(--c-ink-3);
            transition: background var(--t-base), color var(--t-base);
        }
        .sm-close:active { background: var(--c-line); color: var(--c-ink); }
        .sm-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }

        /* Bloc utilisateur */
        .sm-user {
            display: flex; align-items: center;
            gap: var(--sp-3);
            padding: var(--sp-3) var(--sp-4);
            background: linear-gradient(to bottom, var(--c-primary-soft), var(--c-surface));
            border-bottom: 1px solid var(--c-line-light);
        }
        .sm-user-av {
            width: 44px; height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
            display: flex; align-items: center; justify-content: center;
            font-size: var(--fs-md); font-weight: 800;
            color: white;
            flex-shrink: 0;
            text-transform: uppercase;
            box-shadow: var(--sh-xs);
        }
        .sm-user-name {
            font-weight: 700;
            font-size: var(--fs-md);
            color: var(--c-ink);
        }
        .sm-user-link {
            font-size: var(--fs-xs);
            color: var(--c-primary);
            font-weight: 500;
            display: block;
            margin-top: 2px;
        }
        .sm-user-av-guest {
            width: 44px; height: 44px;
            border-radius: 50%;
            background: var(--c-primary-soft);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .sm-user-av-guest svg {
            width: 22px; height: 22px;
            stroke: var(--c-primary); fill: none;
            stroke-width: 1.8; stroke-linecap: round;
        }

        /* CTA Publier dans le menu - AMBRE */
        .sm-publish {
            display: flex; align-items: center; justify-content: center;
            gap: var(--sp-2);
            margin: var(--sp-3) var(--sp-4);
            padding: var(--sp-3) var(--sp-5);
            background: var(--c-action);
            color: white;
            border-radius: var(--r);
            font-weight: 700;
            font-size: var(--fs-md);
            box-shadow: var(--sh-action);
            transition: background var(--t-base), transform 0.15s ease;
        }
        .sm-publish:active {
            background: var(--c-action-dark);
            transform: scale(0.98);
        }
        .sm-publish svg { width: 16px; height: 16px; stroke: white; fill: none; stroke-width: 2.8; stroke-linecap: round; }

        /* Sections */
        .sm-section {
            padding: var(--sp-2) 0;
            border-bottom: 1px solid var(--c-line-light);
        }
        .sm-section:last-child { border-bottom: none; }
        .sm-label {
            padding: var(--sp-2) var(--sp-4) 2px;
            font-size: var(--fs-2xs);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--c-muted);
        }
        .sm-link {
            display: flex; align-items: center;
            gap: var(--sp-3);
            padding: 11px var(--sp-4);
            font-size: var(--fs-md);
            font-weight: 500;
            color: var(--c-ink-2);
            transition: background var(--t-fast), color var(--t-fast);
            position: relative;
            min-height: 44px;
        }
        .sm-link:active { background: var(--c-bg); color: var(--c-ink); }
        .sm-link.active {
            color: var(--c-primary);
            font-weight: 600;
            background: var(--c-primary-soft);
        }
        .sm-link.active::before {
            content: '';
            position: absolute; left: 0; top: 8px; bottom: 8px;
            width: 3px;
            border-radius: 0 3px 3px 0;
            background: var(--c-primary);
        }
        .sm-icon {
            width: 22px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            font-size: var(--fs-md);
        }
        .sm-icon svg {
            width: 18px; height: 18px;
            stroke: var(--c-muted); fill: none;
            stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
        }
        .sm-link:active .sm-icon svg,
        .sm-link.active .sm-icon svg { stroke: var(--c-primary); }
        .sm-badge {
            margin-left: auto;
            color: white;
            font-size: var(--fs-2xs);
            font-weight: 800;
            min-width: 20px; height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            padding: 0 4px;
        }
        .sm-badge-r { background: var(--c-danger); }
        .sm-badge-g { background: var(--c-success); }
        .sm-badge-a { background: var(--c-warn); }
        .sm-count { margin-left: auto; font-size: var(--fs-xs); color: var(--c-muted); }

        /* Auth (visiteur) */
        .sm-auth {
            padding: var(--sp-3) var(--sp-4);
            display: flex; flex-direction: column;
            gap: var(--sp-2);
            border-bottom: 1px solid var(--c-line-light);
        }
        .sm-auth-login {
            display: flex; align-items: center; justify-content: center;
            padding: 12px;
            border-radius: var(--r);
            border: 1.5px solid var(--c-line);
            font-weight: 600; font-size: var(--fs-md);
            color: var(--c-ink-2);
            transition: all var(--t-base);
            min-height: 44px;
        }
        .sm-auth-login:active {
            border-color: var(--c-primary);
            background: var(--c-primary-soft);
            color: var(--c-primary);
        }
        /* Inscription = AMBRE (couleur d'action unique de la marque) */
        .sm-auth-register {
            display: flex; align-items: center; justify-content: center;
            padding: 12px;
            border-radius: var(--r);
            background: var(--c-action);
            color: white;
            font-weight: 700; font-size: var(--fs-md);
            transition: background var(--t-base);
            min-height: 44px;
        }
        .sm-auth-register:active { background: var(--c-action-dark); }

        /* Footer slide menu */
        .sm-footer {
            margin-top: auto;
            padding: var(--sp-3) var(--sp-4);
            border-top: 1px solid var(--c-line-light);
            display: flex; flex-wrap: wrap;
            gap: var(--sp-1) 14px;
        }
        .sm-footer a {
            font-size: var(--fs-xs);
            color: var(--c-muted);
            transition: color var(--t-base);
        }
        .sm-footer a:active { color: var(--c-primary); }


        /* ================================================================
           TOASTS
           ================================================================ */
        .toast-container {
            position: fixed;
            top: auto; right: var(--sp-3); left: var(--sp-3);
            bottom: calc(var(--h-bnav) + env(safe-area-inset-bottom) + var(--sp-3));
            z-index: var(--z-toast);
            display: flex; flex-direction: column;
            gap: var(--sp-2);
        }
        .toast {
            display: flex; align-items: center;
            gap: var(--sp-2);
            padding: var(--sp-3) var(--sp-4);
            border-radius: var(--r);
            font-size: var(--fs-base);
            font-weight: 500;
            box-shadow: var(--sh-lg);
            animation: toast-in 0.3s ease;
            max-width: 100%;
        }
        .toast-success            { background: var(--c-success-pale); color: var(--c-success-dark); border: 1px solid var(--c-success-border); }
        .toast-error, .toast-danger { background: var(--c-danger-soft); color: var(--c-danger-hover); border: 1px solid var(--c-danger-border); }
        .toast-warning            { background: var(--c-warn-soft); color: var(--c-warn-dark); border: 1px solid var(--c-warn-border); }
        .toast-info               { background: var(--c-info-soft); color: var(--c-info-dark); border: 1px solid var(--c-info-border); }
        .toast-close {
            background: none; border: none;
            font-size: 1.25rem;
            opacity: 0.5;
            line-height: 1;
            color: inherit;
            margin-left: auto;
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            border-radius: var(--r-xs);
            flex-shrink: 0;
        }
        .toast-close:active { opacity: 1; background: rgba(0, 0, 0, 0.05); }
        @keyframes toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }


        /* ================================================================
           BULLE DE BIENVENUE (apres inscription Google / Facebook)
           Volontairement DANS LE FLUX et non en position fixe : elle porte
           un bouton, elle ne doit ni recouvrir le contenu ni se disputer le
           bas de l'ecran avec les toasts. Elle ne se ferme pas toute seule.
           ================================================================ */
        .bulle-bienvenue {
            position: relative;
            max-width: 680px;
            margin: var(--sp-4) auto 0;
            padding: var(--sp-4) var(--sp-4) var(--sp-3);
            background: var(--c-surface);
            border: 1px solid var(--c-info-border);
            border-left: 4px solid var(--c-primary);
            border-radius: var(--r);
            box-shadow: var(--sh-lg);
            animation: toast-in 0.3s ease;
        }
        @media (max-width: 720px) {
            .bulle-bienvenue { margin-left: var(--sp-4); margin-right: var(--sp-4); }
        }
        .bulle-titre {
            font-size: 1rem;
            font-weight: 700;
            color: var(--c-primary);
            margin-bottom: var(--sp-2);
            padding-right: 32px;
        }
        .bulle-texte {
            font-size: var(--fs-base);
            color: var(--c-ink-2);
            line-height: 1.5;
            margin: 0 0 var(--sp-3);
        }
        .bulle-bouton {
            display: inline-block;
            padding: 10px var(--sp-4);
            background: var(--c-primary);
            color: #FFFFFF;
            font-size: var(--fs-base);
            font-weight: 600;
            border-radius: var(--r-xs);
            text-decoration: none;
        }
        .bulle-bouton:hover { background: var(--c-primary-dark); color: #FFFFFF; }
        .bulle-note {
            font-size: var(--fs-sm);
            color: var(--c-ink-3);
            margin: var(--sp-3) 0 0;
        }
        .bulle-note a { color: var(--c-primary); }
        .bulle-fermer {
            position: absolute;
            top: var(--sp-2); right: var(--sp-2);
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            background: none; border: none;
            font-size: 1.25rem; line-height: 1;
            color: var(--c-ink-3);
            border-radius: var(--r-xs);
            cursor: pointer;
        }
        .bulle-fermer:hover { background: var(--c-line-light); }


        /* ================================================================
           AUTOCOMPLETE DROPDOWN (recherche)
           ================================================================ */
        .search-dropdown {
            position: absolute;
            top: calc(100% + 6px);
            left: 0; right: 0;
            background: var(--c-surface);
            border: 1px solid var(--c-line);
            border-radius: var(--r-lg);
            box-shadow: var(--sh-xl);
            z-index: var(--z-dd);
            overflow: hidden;
        }
        .search-suggestion {
            display: flex; align-items: center;
            gap: var(--sp-3);
            padding: var(--sp-3) var(--sp-4);
            color: var(--c-ink);
            border-bottom: 1px solid var(--c-line-light);
            transition: background var(--t-fast);
        }
        .search-suggestion:last-child { border-bottom: none; }
        .search-suggestion:active { background: var(--c-bg); }
        .search-suggestion-icon {
            width: 32px; height: 32px;
            border-radius: var(--r-sm);
            display: flex; align-items: center; justify-content: center;
            font-size: var(--fs-md);
            flex-shrink: 0;
        }
        .search-suggestion-icon--listing  { background: var(--c-primary-soft);  color: var(--c-primary-dark); }
        .search-suggestion-icon--category { background: var(--c-action-soft); color: var(--c-action-dark); }
        .search-suggestion strong { display: block; font-size: var(--fs-base); font-weight: 600; }
        .search-suggestion small  { color: var(--c-muted); font-size: var(--fs-xs); }


        /* ================================================================
           MAIN CONTENT
           ================================================================ */
        main {
            flex: 1;
            padding: var(--sp-4) 0
                     calc(var(--h-bnav) + env(safe-area-inset-bottom) + var(--sp-4));
        }


        /* ================================================================
           LISTING CARDS - mobile-first
           ================================================================ */
        .listings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: var(--sp-3);
        }
        .listing-card {
            position: relative;
            background: var(--c-surface);
            border-radius: var(--r-lg);
            overflow: hidden;
            border: 1px solid var(--c-line-light);
            transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s;
        }
        .listing-card:active { transform: scale(0.98); }
        @media (hover: hover) {
            .listing-card:hover {
                border-color: var(--c-line);
                box-shadow: var(--sh-md);
            }
            .listing-card:hover .listing-card-img { transform: scale(1.04); }
        }
        .listing-card-link { display: block; color: inherit; }
        .listing-card-img-wrap { position: relative; overflow: hidden; }
        .listing-card-img {
            width: 100%;
            aspect-ratio: 4 / 3;
            height: auto;
            object-fit: cover;
            background: var(--c-line-light);
            transition: transform 0.4s ease;
            display: block;
        }
        .listing-card-img-placeholder {
            width: 100%;
            aspect-ratio: 4 / 3;
            background: linear-gradient(135deg, var(--c-line-light), var(--c-line));
            display: flex; align-items: center; justify-content: center;
            color: var(--c-line);
        }

        /* Badges sur image - logique des coins (V37) */
        .listing-card-badge {
            position: absolute;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: var(--r-full);
            font-size: var(--fs-2xs);
            font-weight: 600;
            line-height: 1;
            letter-spacing: 0.2px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.12);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
            z-index: 2;
        }
        /* HAUT-GAUCHE : "A la une" (signal commercial, orange Nimba) */
        .listing-card-badge--featured {
            top: var(--sp-2);
            left: var(--sp-2);
            background: rgba(235, 93, 15, 0.96);
            color: #fff;
        }

        /* CENTRE : "Vendue" (etat terminal) */
        .listing-card-sold {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%) rotate(-8deg);
            background: var(--c-danger);
            color: #fff;
            font-family: var(--f-display);
            font-size: var(--fs-base);
            font-weight: 800;
            letter-spacing: 1.5px;
            padding: 5px var(--sp-4);
            border-radius: var(--r-xs);
            text-transform: uppercase;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
            z-index: 4;
            pointer-events: none;
        }
        .listing-card:has(.listing-card-sold) .listing-card-img-wrap::after {
            content: "";
            position: absolute; inset: 0;
            background: rgba(0, 0, 0, 0.35);
            z-index: 3;
        }
        .listing-card-sold-badge {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%) rotate(-12deg);
            background: var(--c-danger); color: white;
            font-family: var(--f-display);
            font-size: var(--fs-base);
            font-weight: 800;
            letter-spacing: 1.5px;
            padding: 6px var(--sp-5);
            border-radius: var(--r-xs);
            text-transform: uppercase;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
            z-index: 8; pointer-events: none;
        }
        .listing-card:has(.listing-card-sold-badge) .listing-card-img-wrap::after {
            content: ""; position: absolute; inset: 0;
            background: rgba(0, 0, 0, 0.32);
        }

        .listing-fav-btn {
            position: absolute;
            top: var(--sp-2); right: var(--sp-2);
            z-index: 10;
            width: 36px; height: 36px;
            border: none; border-radius: 50%;
            background: rgba(255, 255, 255, 0.95);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            display: flex; align-items: center; justify-content: center;
            box-shadow: var(--sh-xs);
            transition: transform var(--t-base), background var(--t-base);
            cursor: pointer;
        }
        .listing-fav-btn::before {
            content: "";
            position: absolute;
            top: -4px; right: -4px; bottom: -4px; left: -4px;
        }
        .listing-fav-btn svg {
            width: 17px; height: 17px;
            stroke: var(--c-ink-2);
            stroke-width: 2; fill: none;
            transition: stroke var(--t-base), fill 0.25s;
        }
        .listing-fav-btn:active { transform: scale(0.92); background: white; }
        @media (hover: hover) {
            .listing-fav-btn:hover { background: #fff; }
            .listing-fav-btn:hover svg { stroke: var(--c-danger); }
        }
        .listing-fav-btn.is-fav svg { fill: var(--c-danger); stroke: var(--c-danger); }
        @keyframes fav-pulse { 0%{transform:scale(1)} 30%{transform:scale(1.32)} 60%{transform:scale(0.95)} 100%{transform:scale(1)} }
        .listing-fav-btn.pulse svg { animation: fav-pulse 0.38s ease; }

        .listing-card-body {
            padding: var(--sp-3);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .listing-card-title {
            font-weight: 500;
            font-size: var(--fs-base);
            line-height: 1.3;
            color: var(--c-ink);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin: 0;
            /* Mot trop long : coupe dans les 2 lignes au lieu d'etre tronque net */
            overflow-wrap: break-word;
            overflow-wrap: anywhere;
        }
        /* Ligne prix + Negociable inline */
        .listing-card-price-line {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: var(--sp-2);
        }
        .listing-card-price {
            font-size: var(--fs-md);
            font-weight: 700;
            color: var(--c-primary);
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.2px;
            white-space: nowrap;
            line-height: 1.2;
        }
        .listing-card-nego {
            font-size: var(--fs-xs);
            font-weight: 500;
            color: var(--c-primary);
            line-height: 1.2;
        }
        /* Promotion : prix barre + reduction.
           La ligne est en flex-wrap, donc ces deux elements reviennent a la
           ligne tout seuls sur un ecran de 320 px - le prix paye reste
           toujours en premier et en gros. Le prix barre est volontairement
           discret : il sert de repere, pas d'information principale. */
        /* LE PRIX SOBRE, LE TRAIT VIF. C'est ce qui fait fonctionner les
           etiquettes de soldes : l'ancien prix reste lisible, et le trait
           d'une autre couleur dit qu'il est annule. Un trait gris sur un
           texte gris se lit « efface », pas « annule ». */
        .listing-card-barre {
            font-size: var(--fs-xs);
            font-weight: 500;
            color: var(--c-ink-3);
            line-height: 1.2;
            white-space: nowrap;
            text-decoration: line-through;
        /* EPAISSEUR RELATIVE ET NON EN PIXELS. Le prix barre fait 11 px sur
           la carte, 13 px sur la fiche : une valeur en pixels pese sur l'un
           et disparait sur l'autre. 0.12em donne le meme RAPPORT partout.
           Et on ne laisse pas la valeur par defaut du navigateur : un trait
           d'un pixel disparait sur un ecran bon marche en plein soleil, ce
           qui est la condition reelle de nos acheteurs. C'est la COULEUR qui
           dit « annule » ; le trait n'a qu'a etre net, pas gros. */
            text-decoration-color: var(--c-promo);
            text-decoration-thickness: 0.12em;
        }
        /* Le compte a rebours des trois derniers jours. Il doit SE VOIR plus
           que le pourcentage : c'est l'urgence qui fait decider, pas la
           remise. D'ou le fond plein plutot que le fond pale. */
        .listing-card-urgence {
            font-size: var(--fs-xs);
            font-weight: 800;
            color: #fff;
            background: var(--c-promo);
            border-radius: var(--r-sm);
            padding: 1px 6px;
            line-height: 1.3;
            white-space: nowrap;
        }
        /* Badge Pro in-body (style Leboncoin : pill vert pale, compact) */
        .listing-card-pro {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            align-self: flex-start;
            padding: 2px 8px;
            border-radius: var(--r-full);
            background: #E8F5EE;
            color: #1A7F4A;
            font-size: var(--fs-xs);
            font-weight: 500;
            line-height: 1.4;
        }
        .listing-card-pro svg { color: #1A7F4A; }
        /* Meta : lieu + date sur ligne separee, gris discret */
        .listing-card-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--sp-2);
            font-size: var(--fs-xs);
            color: var(--c-ink-3);
            line-height: 1.3;
        }
        .listing-card-location {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }
        .listing-card-location svg {
            flex-shrink: 0;
            opacity: 0.7;
        }
        .listing-card-time {
            flex-shrink: 0;
            font-size: var(--fs-2xs);
            color: var(--c-muted);
        }
        .listing-card-stock {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: var(--fs-2xs);
            color: var(--c-success-text);
            white-space: nowrap;
        }
        .listing-card-stock::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--c-success-accent);
            flex-shrink: 0;
        }

        /* ================================================================
           CARTE D'OFFRE D'EMPLOI  (gabarit : _job_card.html)

           LE FORMAT EST CELUI DES AUTRES CARTES. Rien ici ne touche a la
           largeur ni au corps : .listing-card et .listing-card-body
           s'appliquent tels quels, et le bandeau prend le MEME
           aspect-ratio 4/3 que l'emplacement photo. Les grilles et les
           rangees gardent donc leur rythme, meme en melangeant offres et
           produits.

           ZERO IMAGE : une rangee de huit offres ne declenche aucune
           requete reseau pour ses visuels. Sur une connexion guineenne,
           c'est la section la plus legere du site.

           TOUTES LES CARTES A LA MEME HAUTEUR : le titre reserve ses deux
           lignes et le bloc employeur/lieu les siennes, qu'ils soient
           remplis ou non. Sans ces deux min-height, une rangee d'offres
           serait en dents de scie selon que le salaire est annonce ou pas.
           ================================================================ */
        .emploi-bandeau {
            aspect-ratio: 4 / 3;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Une offre PEUT porter une photo - l'affiche de recrutement, le
           plus souvent. Le bandeau cesse alors de centrer des initiales et
           redevient un simple cadre, pour que l'image le remplisse comme
           sur n'importe quelle carte. Sa couleur reste dessous : elle sert
           de fond pendant le chargement, et si l'image manque a l'appel la
           carte ne tombe pas sur du blanc.
           :has() plutot qu'une classe posee par le gabarit : la regle suit
           le contenu reel, elle ne peut pas se desynchroniser de lui. Le
           site s'en sert deja pour les pastilles « Vendue ». */
        .emploi-bandeau:has(.listing-card-img) { display: block; }
        /* Huit teintes douces, tirees du nom de l'employeur (crc32, donc
           stable d'un worker et d'un redemarrage a l'autre). Assez pour que
           deux employeurs voisins se distinguent, assez peu pour que la
           rangee reste calme. */
        .emploi-bandeau--0 { background: #E8F0FE; } .emploi-bandeau--0 .emploi-av { background: #B6CFF5; color: #1A3A6B; }
        .emploi-bandeau--1 { background: #E6F4EA; } .emploi-bandeau--1 .emploi-av { background: #A8DAB5; color: #11512A; }
        .emploi-bandeau--2 { background: #FCE8E6; } .emploi-bandeau--2 .emploi-av { background: #F5B7B1; color: #7A1F17; }
        .emploi-bandeau--3 { background: #FEF7E0; } .emploi-bandeau--3 .emploi-av { background: #F5DB8B; color: #6B4E00; }
        .emploi-bandeau--4 { background: #F3E8FD; } .emploi-bandeau--4 .emploi-av { background: #D7BCF5; color: #4A1C75; }
        .emploi-bandeau--5 { background: #E0F7FA; } .emploi-bandeau--5 .emploi-av { background: #9EDDE5; color: #0D4F57; }
        .emploi-bandeau--6 { background: #FFF0E6; } .emploi-bandeau--6 .emploi-av { background: #F8C9A0; color: #7A3B10; }
        .emploi-bandeau--7 { background: #ECEFF1; } .emploi-bandeau--7 .emploi-av { background: #C3CDD3; color: #2F3E46; }

        .emploi-av {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: var(--fs-md);
            letter-spacing: 0.5px;
            /* Un sigle de quatre lettres ne doit pas deborder du rond */
            padding: 0 4px;
        }

        /* HAUT-GAUCHE, la meme place que « A la une » sur une carte de
           produit : le delai est au signal d'une offre ce que la mise en
           avant est a un produit. */
        .emploi-cloture {
            top: var(--sp-2);
            left: var(--sp-2);
            background: rgba(255, 255, 255, 0.94);
            color: var(--c-ink-2);
        }
        .emploi-cloture--urgent {
            background: rgba(180, 35, 24, 0.94);
            color: #fff;
        }

        .listing-card--emploi .emploi-titre {
            /* Deux lignes reservees : 2 x 1.3em, le line-height du titre */
            min-height: 2.6em;
        }
        .emploi-lignes {
            min-height: 2.7em;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .emploi-employeur {
            font-size: var(--fs-xs);
            font-weight: 600;
            color: var(--c-ink-2);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .emploi-lieu-salaire {
            display: flex;
            align-items: baseline;
            gap: 6px;
            flex-wrap: wrap;
            font-size: var(--fs-xs);
            color: var(--c-muted);
        }
        .emploi-salaire {
            font-weight: 700;
            color: var(--c-primary);
        }

        /* TOUJOURS EXACTEMENT UNE ETIQUETTE : la provenance est
           l'information de confiance d'une offre. Une carte muette
           laisserait croire que Nimba recrute. */
        .emploi-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            align-self: flex-start;
            padding: 2px 8px;
            border-radius: var(--r-full);
            font-size: var(--fs-2xs);
            font-weight: 600;
            line-height: 1.5;
        }
        .emploi-tag--relayee { background: var(--c-line-light); color: var(--c-ink-3); }
        .emploi-tag--verifie { background: var(--c-success-pale); color: var(--c-success-text); }
        .emploi-tag--nimba   { background: var(--c-primary-soft); color: var(--c-primary); }

        /* La meta d'une offre ne porte que la date : poussee en bas pour
           que la ligne s'aligne d'une carte a l'autre. */
        .emploi-meta { margin-top: auto; }

        /* Badges */
        .badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: var(--r-full);
            font-size: var(--fs-xs);
            font-weight: 600;
        }
        .badge-featured   { background: var(--c-action-soft); color: var(--c-action-dark); }
        .badge-negotiable { background: var(--c-primary-soft); color: var(--c-primary); }
        .badge-pro { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }

        /* Rangées horizontales */
        .listing-row { margin-bottom: var(--sp-8); }
        .listing-row-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: var(--sp-3);
        }
        .listing-row-title {
            font-family: var(--f-display);
            font-size: var(--fs-lg);
            color: var(--c-ink);
        }
        .listing-row-link {
            font-size: var(--fs-sm);
            font-weight: 600;
            color: var(--c-primary);
        }
        .listing-row-link:active { text-decoration: underline; }
        .listing-scroll-wrap { position: relative; }
        .listing-scroll {
            display: flex; gap: var(--sp-3);
            overflow-x: auto;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding-bottom: var(--sp-1);
            scroll-snap-type: x proximity;
        }
        /* Feuilletage net : chaque carte s-aligne au bord gauche */
        .listing-scroll .listing-card,
        .listing-scroll .shop-scroll-card {
            scroll-snap-align: start;
        }
        .listing-scroll::-webkit-scrollbar { display: none; }
        .listing-scroll .listing-card {
            flex: 0 0 174px;
            min-width: 174px;
        }
        .listing-scroll .listing-card-img,
        .listing-scroll .listing-card-img-placeholder { height: auto; }
        /* Cartes en scroll : largeur reduite, prix encore plus compact pour absorber les gros montants */
        .listing-scroll .listing-card-price { font-size: var(--fs-base); }

        /* Flèches scroll - desktop only, masquées en mobile */
        .scroll-arrow { display: none; }

        /* Section header */
        .section-header {
            display: flex; justify-content: space-between; align-items: baseline;
            margin-bottom: var(--sp-4);
        }
        .section-title {
            font-family: var(--f-display);
            font-size: var(--fs-xl);
            color: var(--c-ink);
        }
        .section-link {
            font-size: var(--fs-base);
            font-weight: 600;
            color: var(--c-primary);
        }
        .section-link:active { text-decoration: underline; }

        /* Breadcrumb */
        .breadcrumb {
            display: flex; align-items: center;
            gap: var(--sp-2);
            font-size: var(--fs-sm);
            color: var(--c-muted);
            margin-bottom: var(--sp-4);
            flex-wrap: wrap;
        }
        /* padding + marge negative : zone tactile plus haute, mise en page inchangee */
        .breadcrumb a { color: var(--c-primary); padding-block: 11px; margin-block: -11px; }
        .breadcrumb a:active { text-decoration: underline; }
        .breadcrumb-sep { color: var(--c-line); }

        /* Filtres */
        .filters-bar {
            display: flex; flex-direction: column;
            gap: var(--sp-2); /* filters-row-fix : gap resserre (etait sp-3) */
            margin-bottom: var(--sp-5);
            padding: var(--sp-4);
            background: var(--c-surface);
            border-radius: var(--r);
            box-shadow: var(--sh-sm);
        }
        .filters-bar input, .filters-bar select {
            padding: 10px var(--sp-4);
            border: 1px solid var(--c-line);
            border-radius: var(--r-sm);
            font-size: 16px;                /* 16px obligatoire = anti-zoom iOS */
            background: var(--c-line-light);
            transition: border-color var(--t-base);
            min-height: 44px;
        }
        /* filters-row-fix : prix min/max sur une ligne */
        .filters-row {
            display: flex;
            gap: var(--sp-2);
        }
        .filters-row > input {
            flex: 1;
            min-width: 0;
        }
        /* filter-label-fix : label au-dessus d'un champ qui peut etre vide */
        .filter-label {
            display: block;
            font-size: var(--fs-sm);
            color: var(--c-muted);
            margin-bottom: 4px;
        }
        .filter-field {
            display: flex;
            flex-direction: column;
        }
        .filters-row { align-items: center; }
        .filters-row .filters-sep {
            color: var(--c-muted);
            flex: 0 0 auto;
        }

        .filters-bar input:focus, .filters-bar select:focus {
            outline: none;
            border-color: var(--c-primary);
            background: var(--c-surface);
        }
        /* Bouton filtre - PRIMARY (action de navigation, pas conversion) */
        .btn-filter {
            padding: 10px var(--sp-5);
            background: var(--c-primary);
            color: white;
            border: none;
            border-radius: var(--r-sm);
            font-weight: 600;
            transition: background var(--t-base);
            min-height: 42px;
        }
        .btn-filter:active { background: var(--c-primary-dark); }

        /* Sous-catégories */
        .subcategories {
            display: flex; gap: var(--sp-2);
            flex-wrap: wrap;
            margin-bottom: var(--sp-4);
        }
        .subcategory-chip {
            padding: 6px var(--sp-4);
            background: var(--c-surface);
            border: 1px solid var(--c-line);
            border-radius: var(--r-full);
            font-size: var(--fs-sm);
            font-weight: 500;
            transition: all var(--t-base);
        }
        .subcategory-chip:active {
            background: var(--c-primary-soft);
            border-color: var(--c-primary);
            color: var(--c-primary);
        }

        /* Pilules catégories */
        .categories-bar {
            display: flex;
            flex-wrap: nowrap; overflow-x: auto;
            scrollbar-width: none;
            gap: var(--sp-2);
            margin-bottom: var(--sp-6);
            padding-bottom: var(--sp-1);
        }
        .categories-bar::-webkit-scrollbar { display: none; }
        .cat-pill {
            display: inline-flex; align-items: center;
            gap: var(--sp-1);
            padding: 7px var(--sp-4);
            background: var(--c-surface);
            border: 1px solid var(--c-line);
            border-radius: var(--r-full);
            font-size: var(--fs-sm);
            font-weight: 600;
            color: var(--c-ink-2);
            white-space: nowrap;
            transition: all var(--t-base);
        }
        .cat-pill:active {
            border-color: var(--c-primary);
            background: var(--c-primary-soft);
            color: var(--c-primary);
        }
        .cat-pill-icon { font-size: var(--fs-md); }
        .cat-pill-count { font-size: var(--fs-2xs); color: var(--c-muted); }

        /* Empty state
           PADDING RESSERRE LE 15/10/2026 : 48 px en haut ET en bas sur une
           page qui n'a precisement rien a aerer. Depuis que l'etat vide
           porte une vraie sortie (voir la balise sortie_page_vide), quatre
           blocs se partagent l'ecran - message, bouton, pastilles, encart
           d'alerte - et l'encart tombait sous la ligne de flottaison sur un
           telephone. 24 px suffisent a detacher le bloc. */
        .empty-state {
            text-align: center;
            /* Interieur HAUT a sp-4 depuis le 16/10/2026. Ce qui precede -
               le bouton de filtres, ou le titre de section - porte deja sa
               propre marge basse : les deux s'ajoutaient. Le bas reste a
               sp-6, il ferme le bloc. */
            padding: var(--sp-4) var(--sp-5) var(--sp-6);
            color: var(--c-muted);
        }
        /* display:flex RECUPERE 28,8 PX QUI NE CONTIENNENT RIEN, mesure au
           banc le 16/10/2026 sur /recherche/ a 413 x 780.
           L'icone est un SVG de 48 px, mais le conteneur en faisait 76,8 :
           font-size:3rem x la hauteur de ligne heritee (1,6) fabrique une
           boite de 76,8 px autour d'un dessin de 48. Les 28,8 px d'ecart
           sont du vide pur - ils ne portent aucun pixel dessine. En
           contexte flex, le SVG devient un element de boite et le conteneur
           prend sa hauteur reelle.
           RIEN N'EST RAPETISSE : l'icone fait toujours 48 px.
           L'ACCUEIL N'EST PAS TOUCHE, et c'est pour lui que la regle ne
           supprime pas la hauteur de ligne : son etat vide affiche un
           EMOJI et non un SVG (home.html). Un emoji reste du texte, donc
           sa boite continue de dependre de font-size - il garde exactement
           la taille et l'espace qu'il a aujourd'hui.
           C'est deja ce que shop_public.html faisait dans son coin. */
        .empty-state-icon {
            font-size: 3rem;
            margin-bottom: var(--sp-2);
            display: flex;
            justify-content: center;
        }
        .empty-state-text { font-size: var(--fs-md); }

        /* Pagination */
        .pagination {
            display: flex; flex-direction: column; align-items: center;
            gap: var(--sp-3);
            margin-top: var(--sp-8);
            padding-top: var(--sp-6);
            border-top: 1px solid var(--c-line-light);
        }
        .pagination-info { font-size: var(--fs-sm); color: var(--c-muted); }
        .pagination-controls {
            display: flex; align-items: center;
            gap: 3px;
        }
        .pagination-btn {
            display: flex; align-items: center; gap: var(--sp-1);
            padding: 7px 10px;
            border-radius: var(--r-sm);
            font-size: var(--fs-sm);
            font-weight: 600;
            color: var(--c-primary);
            background: var(--c-surface);
            border: 1px solid var(--c-line);
            transition: all var(--t-base);
        }
        .pagination-btn:active {
            background: var(--c-primary-soft);
            border-color: var(--c-primary);
        }
        .pagination-pages {
            display: flex; align-items: center; gap: 3px;
        }
        .pagination-page {
            min-width: 40px; height: 40px;
            display: flex; align-items: center; justify-content: center;
            border-radius: var(--r-sm);
            font-size: var(--fs-base);
            font-weight: 500;
            color: var(--c-ink-2);
            border: 1px solid transparent;
            transition: all var(--t-base);
        }
        .pagination-page:active {
            background: var(--c-line-light);
            border-color: var(--c-line);
        }
        .pagination-page.active {
            background: var(--c-primary);
            color: white;
            font-weight: 700;
            border-color: transparent;
        }
        .pagination-ellipsis { width: 28px; text-align: center; color: var(--c-muted); }


        /* ================================================================
           FOOTER - 3 zones : reassurance / navigation / copyright
           Zone 1 (creme chaud) cree une transition douce vers
           Zone 2 (navy profond) qui ne fait plus "mur sombre" detache.
           Zone 3 (navy + tricolore) signe l'identite guineenne.
           ================================================================ */

        /* ZONE 2 - FOOTER PRINCIPAL (navy profond) */
        .footer {
            background: var(--c-primary-dark);
            color: var(--c-footer-text-2);
            padding: var(--sp-10) 0 calc(var(--h-bnav) + env(safe-area-inset-bottom) + var(--sp-6)); /* footer-bnav-fix : reserve l'espace de la bottom-nav (mobile) */
            margin-top: 0;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--sp-6);
            margin-bottom: var(--sp-6);
        }
        .footer-col-brand { padding-bottom: var(--sp-2); }
        .footer-brand {
            display: inline-block;
            font-family: var(--f-display);
            font-size: var(--fs-2xl);
            color: white;
            margin-bottom: var(--sp-3);
            letter-spacing: -0.5px;
            line-height: 1;
        }
        .footer-tagline {
            font-size: var(--fs-sm);
            color: var(--c-footer-text);
            margin-bottom: var(--sp-4);
            line-height: 1.7;
            max-width: 38ch;
        }
        .footer-title {
            font-weight: 700;
            color: white;
            margin-bottom: var(--sp-3);
            font-size: var(--fs-base);
            font-family: var(--f-body);
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }
        .footer-links { list-style: none; }
        /* Liens de 17px de haut qui se touchaient presque : chaque lien porte
           desormais sa propre zone de ~31px (le pied de page s'allonge un peu). */
        .footer-links li { margin-bottom: 0; }
        .footer-links-cols { columns: 2; column-gap: var(--sp-6); }
        .footer-links-cols li { break-inside: avoid; }
        .footer-links a {
            display: inline-block;
            padding-block: 7px;
            font-size: var(--fs-sm);
            color: var(--c-footer-text);
            transition: color var(--t-base);
        }
        .footer-links a:hover,
        .footer-links a:active { color: var(--c-action); }

        /* Reseaux sociaux */
        .footer-social {
            display: flex;
            gap: var(--sp-2);
            margin-top: var(--sp-3);
        }
        .footer-social a {
            width: 44px; height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.07);
            display: flex; align-items: center; justify-content: center;
            transition: background var(--t-base), transform var(--t-base);
        }
        .footer-social a:hover,
        .footer-social a:active {
            background: var(--c-action);
            transform: translateY(-2px);
        }
        .footer-social svg {
            width: 16px; height: 16px;
            stroke: white; fill: none;
            stroke-width: 1.8;
            stroke-linecap: round; stroke-linejoin: round;
        }

        /* Bloc contact */
        .footer-contact {
            display: flex; flex-direction: column;
            gap: var(--sp-3);
        }
        .footer-contact-item {
            display: flex; align-items: flex-start;
            gap: var(--sp-2);
            font-size: var(--fs-sm);
            color: var(--c-footer-text);
            line-height: 1.5;
        }
        .footer-contact-item svg {
            width: 16px; height: 16px;
            stroke: var(--c-action); fill: none;
            stroke-width: 1.8;
            stroke-linecap: round; stroke-linejoin: round;
            flex-shrink: 0;
            margin-top: 3px;
        }
        .footer-contact-item a {
            display: inline-block;
            padding-block: 6px;
            margin-block: -6px;
            color: var(--c-footer-text);
            transition: color var(--t-base);
        }
        .footer-contact-item a:hover,
        .footer-contact-item a:active { color: var(--c-action); }

        /* ZONE 3 - COPYRIGHT + TRICOLORE GUINEE */
        .footer-bottom-wrap {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            background: var(--c-primary-dark);
        }
        .footer-bottom {
            padding: var(--sp-4) 0;
            display: flex; flex-direction: column;
            align-items: center;
            gap: var(--sp-2);
            font-size: var(--fs-xs);
            color: var(--c-footer-text-3);
            text-align: center;
        }
        .footer-bottom-links {
            display: flex; gap: var(--sp-2);
            flex-wrap: wrap;
            justify-content: center;
        }
        /* gap 8px + 4px de padding de chaque cote = meme ecart visuel qu'avant (16px) */
        .footer-bottom-links a {
            display: inline-block;
            padding: 8px 4px;
            color: var(--c-footer-text);
            transition: color var(--t-base);
        }
        .footer-bottom-links a:hover,
        .footer-bottom-links a:active { color: var(--c-action); }


        /* ================================================================
           BOTTOM NAVIGATION - mobile uniquement, fixed
           ================================================================ */
        .bottom-nav {
            display: flex;
            align-items: center; justify-content: space-around;
            position: fixed; bottom: 0; left: 0; right: 0;
            height: var(--h-bnav);
            background: var(--c-surface);
            border-top: 1px solid var(--c-line-light);
            box-shadow: 0 -2px 18px rgba(20, 35, 60, 0.06);
            z-index: var(--z-bnav);
            padding-bottom: env(safe-area-inset-bottom);
        }
        .bnav-item {
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 3px; flex: 1;
            padding: var(--sp-2) var(--sp-1);
            font-size: var(--fs-2xs);
            font-weight: 500;
            color: var(--c-muted);
            transition: color var(--t-base);
            min-height: 50px;
            position: relative;
        }
        .bnav-item svg {
            width: 22px; height: 22px;
            stroke: currentColor; fill: none;
            stroke-width: 1.8;
            stroke-linecap: round; stroke-linejoin: round;
            transition: stroke-width 0.18s;
        }
        .bnav-item.active { color: var(--c-primary); }
        .bnav-item.active svg { stroke-width: 2.4; }
        .bnav-item:active { opacity: 0.65; }

        .bnav-badge {
            position: absolute;
            top: 4px; right: calc(50% - 19px);
            background: var(--c-danger);
            color: white;
            font-size: 0.6875rem;
            font-weight: 800;
            min-width: 16px; height: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 50%;
            border: 2px solid var(--c-surface);
            padding: 0 2px;
        }
        .bnav-badge-green { background: var(--c-success) !important; }

        /* CTA Publier en bottom-nav - AMBRE saturé, le seul bouton qui crie */
        .bnav-publish {
            flex: 0 0 auto;
            display: flex; flex-direction: column;
            align-items: center;
            gap: var(--sp-1);
            padding: 0 var(--sp-5);
            margin-top: -18px;
            font-size: var(--fs-2xs);
            font-weight: 600;
            color: var(--c-action-dark);
        }
        .bnav-pub-btn {
            width: 54px; height: 54px;
            background: var(--c-action);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            box-shadow: var(--sh-action);
            transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
        }
        .bnav-publish:active .bnav-pub-btn {
            transform: scale(0.9);
            box-shadow: 0 1px 5px rgba(178, 112, 56, 0.25);
            background: var(--c-action-dark);
        }
        .bnav-pub-btn svg {
            width: 24px; height: 24px;
            stroke: white; fill: none;
            stroke-width: 2.6; stroke-linecap: round;
        }
        /* ================================================================
           AVATAR UTILISATEUR - photo ou initiale (fallback)
           Photo deja optimisee a l'upload via core.image_utils.optimize_avatar
           ================================================================ */
        .sm-user-av .user-av-img,
        .mob-user-av .user-av-img,
        .user-av .user-av-img,
        .udd-av .user-av-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            display: block;
        }




        /* ================================================================
           ACCESSIBILITÉ - reduced motion
           ================================================================ */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }


        /* ================================================================
           ============= AJUSTEMENT TRES PETITS ECRANS <= 359px =============
           iPhone SE 1ere gen (320px), vieux Android entree de gamme
           ================================================================ */
        @media (max-width: 359px) {
            .container { padding: 0 var(--sp-3); }       /* 12px au lieu de 16px */

            /* Cartes annonces plus petites mais lisibles */
            .listings-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: var(--sp-2);
            }
            .listing-card-img,
            .listing-card-img-placeholder { height: 110px; }
            .listing-card-body { padding: 6px var(--sp-2) var(--sp-2); }

            /* Bottom nav plus compact */
            .bottom-nav { padding-left: 2px; padding-right: 2px; }
            .bnav-item { padding: var(--sp-2) 2px; font-size: 0.6875rem; }
            .bnav-publish { padding: 0 var(--sp-3); }
            .bnav-pub-btn { width: 48px; height: 48px; }

            /* Logo mobile plus compact */
            .mob-logo-text { font-size: var(--fs-lg); }
            .mob-logo img { width: 24px; height: 24px; }

            /* Header mobile actions plus serrees */
            .mob-top-actions { gap: 0; }


            /* Pilules categories plus compactes */
            .nav-categories-inner { gap: 6px; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
            .nav-cat-link { padding: 6px 12px; font-size: var(--fs-xs); }
        }


        /* ================================================================
           ============= ENRICHISSEMENT TABLET >= 640px =============
           Tablette portrait (iPad 768px en mode mobile - on garde UI tactile)
           ================================================================ */
        @media (min-width: 640px) {
            .container { padding: 0 var(--sp-5); }
            .listings-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: var(--sp-4);
            }
            .listing-card-img,
            .listing-card-img-placeholder { height: 170px; }
            /* filters-grid-fix : grille 3 colonnes en desktop, s'adapte au nb d'attributs */
            .filters-bar {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,..) : empeche le debordement (ex. Cylindree) */
                gap: var(--sp-3);
                align-items: end; /* filters-grid-finition : inputs alignes */
            }
            .filters-bar > input,
            .filters-bar > select,
            .filters-bar > .filter-field,
            .filters-bar > .filter-check { width: 100%; }
            .filters-bar > .btn-filter { grid-column: 1 / -1; width: 100%; }
            .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
            main { padding: var(--sp-5) 0 calc(var(--h-bnav) + env(safe-area-inset-bottom) + var(--sp-5)); }
        }


        /* ================================================================
           ============= ENRICHISSEMENT DESKTOP >= 1024px =============
           Vrai desktop. iPad portrait (768px) reste en UI mobile,
           passe en desktop uniquement en mode paysage (>= 1024px).
           ================================================================ */
        @media (min-width: 1024px) {

            /* Container */
            .container { padding: 0 var(--sp-6); }

            /* Mobile bars masquees */
            .mob-top-bar,
            .mob-sticky-bar,
            #mobCatBar { display: none !important; }

            /* Bottom-nav masquee */
            .bottom-nav { display: none !important; }

            /* Main : pas de padding bottom pour bnav */
            main { padding: var(--sp-8) 0 0; }

            /* footer-bnav-fix : barre masquee en desktop, footer sans reserve bnav */
            .footer { padding-bottom: var(--sp-6); }

            /* ── Header desktop ── */
            .site-header {
                display: block;
                background: var(--c-surface);
                border-bottom: 1px solid var(--c-line);
                position: sticky; top: 0;
                z-index: var(--z-sticky);
                transition: box-shadow 0.3s ease, border-color 0.3s ease;
            }
            .site-header.scrolled {
                box-shadow: 0 1px 10px rgba(20, 35, 60, 0.06);
                border-bottom-color: transparent;
            }
            .hdr-inner {
                display: flex; align-items: center;
                height: var(--h-hdr);
                max-width: var(--max-w);
                margin: 0 auto;
                padding: 0 var(--sp-5);
                gap: var(--sp-5);
            }

            /* Logo */
            .logo {
                display: flex; align-items: center;
                gap: 9px;
                flex-shrink: 0;
            }
            .logo-img { width: 40px; height: 40px; object-fit: contain; }
            .logo-wordmark {
                font-family: var(--f-display);
                font-size: var(--fs-3xl);
                font-weight: 800;
                color: var(--c-primary-dark);
                letter-spacing: -0.5px;
                line-height: 1;
            }

            /* Recherche desktop */
            .hdr-search { flex: 1; max-width: 520px; position: relative; }
            .hdr-search-form {
                display: flex; align-items: center;
                background: var(--c-surface);
                border: 1.5px solid #C9BFAA;
                border-radius: var(--r-full);
                overflow: hidden;
                transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
            }
            .hdr-search-form:focus-within {
                border-color: var(--c-primary);
                box-shadow: 0 0 0 3px var(--c-primary-soft);}
            .hdr-search-form input {
                flex: 1;
                padding: 10px var(--sp-4);
                background: transparent; border: none; outline: none;
                font-size: var(--fs-md);
                color: var(--c-ink);
            }
            .hdr-search-form input::placeholder { color: var(--c-muted); }
            .hdr-search-form button {
                flex-shrink: 0;
                margin: 3px 4px 3px 0;
                padding: 0 var(--sp-5);
                height: 34px;
                background: var(--c-neutral-btn);
                color: white; border: none;
                border-radius: var(--r-full);
                font-size: var(--fs-sm);
                font-weight: 600;
                letter-spacing: 0.1px;
                display: flex; align-items: center; gap: 6px;
                white-space: nowrap;
                transition: background var(--t-base);
            }
            .hdr-search-form button:hover { background: var(--c-neutral-btn-h); }
            .hdr-search-form button svg {
                width: 13px; height: 13px;
                stroke: white; fill: none;
                stroke-width: 2.5; stroke-linecap: round;
            }

            /* Actions header droite */
            .hdr-actions {
                display: flex; align-items: center;
                gap: var(--sp-1);
                flex-shrink: 0;
                margin-left: auto;
            }
            .hdr-sep {
                width: 1px; height: 26px;
                background: var(--c-line);
                flex-shrink: 0;
                margin: 0 6px;
            }

            /* Icônes header avec libellé */
            .hdr-icon-btn {
                position: relative;
                display: flex; flex-direction: column;
                align-items: center; justify-content: center;
                gap: 2px;
                padding: 6px 10px;
                border-radius: var(--r-sm);
                border: none; background: transparent;
                flex-shrink: 0; min-width: 54px;
                transition: background 0.18s;
            }
            .hdr-icon-btn:hover { background: var(--c-primary-soft); }
            .hdr-icon-btn svg {
                width: 22px; height: 22px;
                stroke: var(--c-ink); fill: none;
                stroke-width: 1.8;
                stroke-linecap: round; stroke-linejoin: round;
                transition: stroke 0.18s;
            }
            .hdr-icon-btn:hover svg { stroke: var(--c-primary); }
            .hdr-icon-btn.is-fav svg { fill: var(--c-danger); stroke: var(--c-danger); }
            .hdr-icon-btn-label {
                font-size: var(--fs-2xs);
                font-weight: 600;
                color: var(--c-ink-2);
                white-space: nowrap;
                line-height: 1;
                transition: color 0.18s;
            }
            .hdr-icon-btn:hover .hdr-icon-btn-label { color: var(--c-primary); }

            .hdr-badge {
                position: absolute; top: 2px; right: 6px;
                min-width: 17px; height: 17px;
                background: var(--c-danger); color: white;
                font-size: 0.6875rem; font-weight: 800;
                line-height: 17px; text-align: center;
                border-radius: 50%;
                border: 2px solid var(--c-surface);
                padding: 0 3px;
                animation: badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .hdr-badge-green { background: var(--c-success) !important; }
            @keyframes badge-pop { from { transform: scale(0); } to { transform: scale(1); } }

            /* Boutons visiteur desktop (2026-09-17) :
               .btn-connexion = "Se connecter / S'inscrire" (discret) ;
               .btn-inscription = "Publier une annonce" (couleur d'action).
               Noms de classes conserves pour ne rien casser ailleurs. */
            .btn-connexion,
            .btn-inscription {
                display: inline-flex;
                align-items: center;
                gap: 7px;
            }
            .btn-connexion svg,
            .btn-inscription svg {
                width: 16px; height: 16px;
                fill: none; stroke: currentColor;
                stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
                flex-shrink: 0;
            }
            .btn-connexion {
                padding: 8px var(--sp-5);
                /* Plus visible (2026-09-17) : bordure de la barre de recherche
                   et texte encre, meme taille que "Publier une annonce". */
                border: 1.5px solid #C9BFAA;
                border-radius: var(--r-full);
                font-size: var(--fs-base);
                font-weight: 600;
                color: var(--c-ink);
                background: transparent;
                transition: all var(--t-base);
                white-space: nowrap;
            }
            .btn-connexion:hover {
                border-color: var(--c-primary);
                color: var(--c-primary);
                background: var(--c-primary-soft);
            }
            /* Inscription = AMBRE (action unique de la marque) */
            .btn-inscription {
                padding: 8px var(--sp-5);
                border-radius: var(--r-full);
                font-size: var(--fs-base);
                font-weight: 700;
                color: white;
                background: var(--c-action);
                border: 1.5px solid transparent;
                transition: all var(--t-base);
                white-space: nowrap;
            }
            .btn-inscription:hover {
                background: var(--c-action-dark);
                transform: translateY(-1px);
            }

            /* Dropdown utilisateur */
            .user-menu { position: relative; }
            .user-trigger {
                display: flex; align-items: center; gap: var(--sp-2);
                padding: 6px 14px 6px 8px;
                background: transparent;
                border: 1.5px solid var(--c-primary);
                border-radius: var(--r-full);
                font-family: var(--f-body);
                transition: all var(--t-base);
            }
            .user-trigger:hover, .user-trigger.open {
                border-color: var(--c-primary);
                background: var(--c-primary-soft);
            }
            .user-av {
                width: 28px; height: 28px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
                display: flex; align-items: center; justify-content: center;
                font-size: 0.75rem; font-weight: 800;
                color: white;
                flex-shrink: 0;
                text-transform: uppercase;
            }
            .user-name {
                font-size: var(--fs-base);
                font-weight: 600;
                color: var(--c-ink-2);
                max-width: 100px;
                overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap;
            }
            .user-chev {
                width: 14px; height: 14px;
                stroke: var(--c-muted); fill: none;
                stroke-width: 2.5;
                flex-shrink: 0;
                transition: transform 0.22s;
            }
            .user-trigger.open .user-chev { transform: rotate(180deg); }

            .user-dropdown {
                position: absolute; top: calc(100% + 8px); right: 0;
                width: 230px;
                background: var(--c-surface);
                border-radius: var(--r-lg);
                box-shadow: var(--sh-xl);
                border: 1px solid var(--c-line-light);
                max-height: calc(100vh - 90px);
                overflow-y: auto; overflow-x: hidden;
                scrollbar-width: thin;
                scrollbar-color: var(--c-line) transparent;
                opacity: 0; visibility: hidden;
                transform: translateY(-6px) scale(0.98);
                transform-origin: top right;
                transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
                z-index: var(--z-dd);
            }
            .user-dropdown::-webkit-scrollbar { width: 4px; }
            .user-dropdown::-webkit-scrollbar-track { background: transparent; }
            .user-dropdown::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 4px; }
            .user-menu.open .user-dropdown {
                opacity: 1; visibility: visible;
                transform: translateY(0) scale(1);
            }

            .udd-head {
                display: flex; align-items: center;
                gap: 10px;
                padding: 12px 14px;
                background: linear-gradient(to bottom, var(--c-primary-soft) 0%, var(--c-surface) 100%);
                border-bottom: 1px solid var(--c-line-light);
            }
            .udd-av {
                width: 40px; height: 40px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
                display: flex; align-items: center; justify-content: center;
                font-size: var(--fs-base);
                font-weight: 800; color: white;
                flex-shrink: 0;
                text-transform: uppercase;
                box-shadow: var(--sh-xs);
            }
            .udd-name {
                font-weight: 700;
                font-size: var(--fs-base);
                color: var(--c-ink);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            }
            .udd-email {
                font-size: var(--fs-xs);
                color: var(--c-muted);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            }

            .udd-group {
                padding: 3px 0;
                border-bottom: 1px solid var(--c-line-light);
            }
            .udd-group:last-child { border-bottom: none; }
            .udd-label {
                padding: 5px 14px 2px;
                font-size: var(--fs-2xs);
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.8px;
                color: var(--c-muted);
            }
            .udd-item {
                display: flex; align-items: center;
                gap: 9px;
                padding: 8px 14px;
                font-size: var(--fs-base);
                font-weight: 500;
                color: var(--c-ink-2);
                transition: background 0.12s, color 0.12s;
            }
            .udd-item:hover { background: var(--c-bg); color: var(--c-ink); }
            .udd-item svg {
                width: 15px; height: 15px;
                stroke: var(--c-muted); fill: none;
                stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
                flex-shrink: 0;
                transition: stroke 0.12s;
            }
            .udd-item:hover svg { stroke: var(--c-primary); }
            .udd-ico {
                font-size: 0.9rem; flex-shrink: 0;
                width: 15px; text-align: center;
            }
            .udd-badge {
                margin-left: auto;
                color: white;
                font-size: 0.6875rem;
                font-weight: 800;
                min-width: 17px; height: 17px;
                line-height: 17px; text-align: center;
                border-radius: 50%;
                padding: 0 3px;
            }
            .udd-badge-r { background: var(--c-danger); }
            .udd-badge-g { background: var(--c-success); }
            .udd-badge-a { background: var(--c-warn); }
            .udd-danger { color: var(--c-danger) !important; }
            .udd-danger svg { stroke: var(--c-danger) !important; }
            .udd-danger:hover { background: var(--c-danger-bg-hover) !important; }
            .udd-admin {
                font-size: var(--fs-sm) !important;
                color: var(--c-ink-4) !important;
            }
            .udd-logout-btn {
                width: 100%; text-align: left;
                display: flex; align-items: center; gap: 9px;
                padding: 9px 14px;
                font-size: var(--fs-base);
                font-weight: 500;
                background: none; border: none;
                font-family: var(--f-body);
                color: var(--c-danger);
                transition: background 0.12s;
            }
            .udd-logout-btn svg {
                width: 15px; height: 15px;
                stroke: var(--c-danger); fill: none;
                stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
                flex-shrink: 0;
            }
            .udd-logout-btn:hover { background: var(--c-danger-bg-hover); }

            /* Barre catégories desktop : underline (pas pills) */
            .nav-categories-wrap {
                max-width: var(--max-w);
                margin: 0 auto;
                padding: 0 var(--sp-5);
            }
            .nav-categories-wrap::before { left: var(--sp-5); width: 40px; }
            .nav-categories-wrap::after  { right: var(--sp-5); width: 40px; }
            .nav-categories-inner {
                gap: 0;
                padding: 0;
                flex: 1;
            }
            .nav-cat-link {
                padding: 14px 16px;
                background: transparent;
                border: none;
                border-radius: var(--r-sm) var(--r-sm) 0 0;
                font-size: var(--fs-md);
                font-weight: 500;
                color: var(--c-ink);
                position: relative;
                transition: color 0.15s, background 0.15s;
            }
            .nav-cat-link::after {
                content: '';
                position: absolute; bottom: -1px; left: 12px; right: 12px;
                height: 3px;
                background: var(--c-primary);
                border-radius: 3px 3px 0 0;
                transform: scaleX(0);
                transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .nav-cat-link:hover { color: var(--c-primary); background: var(--c-primary-soft); }
            .nav-cat-link:hover::after { transform: scaleX(0.6); }
            .nav-cat-link.active {
                color: var(--c-primary);
                font-weight: 600;
                background: transparent;
            }
            .nav-cat-link.active::after { transform: scaleX(1); }
            /*  Seconde regle de .nav-cat-count - voir le commentaire de la
                premiere. Les deux doivent rester coherentes. */
            .nav-cat-count { font-size: var(--fs-2xs); color: var(--c-primary); font-weight: 700; margin-left: 2px; }
            .nav-cat-sep {
                display: inline;
                color: var(--c-line);
                font-size: var(--fs-md);
                font-weight: 700;
                flex-shrink: 0;
                user-select: none;
                padding: 0 2px;
            }

            /* Flèches scroll catégories desktop */
            .nav-cat-arrow {
            box-shadow: 0 2px 8px rgba(0,0,0,0.16);
                display: flex;
                flex-shrink: 0;
                width: 30px; height: 30px;
                border: 1.5px solid var(--c-line);
                border-radius: 50%;
                background: var(--c-surface);
                align-items: center; justify-content: center;
                z-index: 3;
                opacity: 0; pointer-events: none;
                transition: all var(--t-base);
            }
            .nav-cat-arrow.visible { opacity: 1; pointer-events: auto; }
            .nav-cat-arrow:hover {
                background: var(--c-warn-soft);
                border-color: var(--c-warn);
            }
            .nav-cat-arrow:hover svg { stroke: var(--c-warn); }
            .nav-cat-arrow svg {
                width: 13px; height: 13px;
                stroke: var(--c-ink); fill: none;
                stroke-width: 2.5;
            }
            .nav-cat-arrow-left  { margin-right: 4px; }
            .nav-cat-arrow-right { margin-left: 4px; }

            /* FAB desktop - AMBRE */
            .fab {
                display: flex;
                position: fixed; bottom: 28px; right: 28px;
                z-index: var(--z-fab);
                align-items: center;
                gap: 9px;
                padding: 0 var(--sp-5) 0 7px;
                height: 48px;
                background: var(--c-action);
                color: white;
                border: none;
                border-radius: var(--r-full);
                font-weight: 700;
                font-size: var(--fs-base);
                letter-spacing: 0.1px;
                box-shadow: var(--sh-action);
                transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
            }
            .fab:hover {
                background: var(--c-action-dark);
                transform: translateY(-2px);
                box-shadow: var(--sh-action-h);
            }
            .fab:active { transform: translateY(0); }
            .fab-ring {
                width: 34px; height: 34px;
                background: rgba(255, 255, 255, 0.22);
                border-radius: 50%;
                display: flex; align-items: center; justify-content: center;
                flex-shrink: 0;
            }
            .fab-ring svg {
                width: 17px; height: 17px;
                stroke: white; fill: none;
                stroke-width: 2.8; stroke-linecap: round;
            }

            /* Listings - tailles desktop */
            .listings-grid {
                grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
                gap: var(--sp-5);
            }
            .listing-card-img,
            .listing-card-img-placeholder { height: 192px; }
            .listing-card:hover {
                transform: translateY(-4px);
                box-shadow: var(--sh-lg);
                border-color: transparent;
            }
            .listing-card:hover .listing-card-img { transform: scale(1.04); }
            .listing-card:active { transform: translateY(-2px); }

            .listing-card-body { padding: 10px 13px 13px; }
            .listing-card-title { font-size: var(--fs-md); }
            .listing-card-price { font-size: var(--fs-lg); }

            .listing-fav-btn:hover {
                transform: scale(1.14);
                background: white;
            }
            .listing-fav-btn:hover svg { stroke: var(--c-danger); }

            .listing-scroll .listing-card { flex: 0 0 220px; min-width: 220px; }
            .listing-scroll .listing-card-img,
            .listing-scroll .listing-card-img-placeholder { height: 155px; }

            /* Flèches rangées desktop */
            .scroll-arrow {
                display: flex;
                position: absolute; top: 50%;
                transform: translateY(-50%);
                z-index: 10;
                width: 36px; height: 36px;
                border: 1px solid var(--c-line);
                border-radius: 50%;
                background: var(--c-surface);
                box-shadow: var(--sh-sm);
                align-items: center; justify-content: center;
                opacity: 0; pointer-events: none;
                transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
            }
            .listing-scroll-wrap:hover .scroll-arrow { opacity: 1; pointer-events: auto; }
            .scroll-arrow:hover {
                transform: translateY(-50%) scale(1.1);
                box-shadow: var(--sh-md);
                border-color: var(--c-primary);
            }
            .scroll-arrow-left  { left: -14px; }
            .scroll-arrow-right { right: -14px; }
            .scroll-arrow svg {
                width: 15px; height: 15px;
                stroke: var(--c-ink-2);
                stroke-width: 2.5; fill: none;
            }

            .listing-row-title { font-size: var(--fs-xl); }
            .section-title { font-size: var(--fs-2xl); }

            /* Toasts desktop : top-right */
            .toast-container {
                top: 82px; right: var(--sp-5);
                left: auto; bottom: auto;
            }
            .toast { max-width: 360px; }
            @keyframes toast-in { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

            /* Footer 4 colonnes en desktop */
            .footer-grid { grid-template-columns: 1.4fr 1.2fr 1fr 1.1fr; gap: var(--sp-8); }
            .footer-bottom {
                flex-direction: row;
                justify-content: space-between;
                text-align: left;
            }

            /* Container plus large */
            .container { padding: 0 var(--sp-5); }

            main { padding: var(--sp-8) 0 var(--sp-8); }
        }

        /* ================================================================
           ============= ENRICHISSEMENT GRAND ECRAN >= 1280px =============
           ================================================================ */
        @media (min-width: 1280px) {
            .container { padding: 0 var(--sp-6); }
            .listings-grid {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                gap: var(--sp-5);
            }
        }

/* ============================================================
   Bottom-nav masquee quand le clavier virtuel est ouvert
   La classe body.kb-open est posee/retiree par le JS de base.html
   (focus/blur sur un champ a clavier). Mobile-first / 3G.
   ============================================================ */
body.kb-open .bottom-nav {
    display: none;
}


/* ============================================================
   CONVENTION RETOUR - .back-link (composant global Nimba)
   Tertiaire, present sans choquer. Option 1 : chevron navy,
   texte discret, pastille blanche, chevron qui glisse au survol.
   Tokens uniquement. Mobile-first.
   ============================================================ */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 6px 16px 6px 6px;
    font-family: var(--f-body);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--c-ink-3);
    background: var(--c-primary-soft);
    border: 1px solid transparent;
    border-radius: var(--r-full);
    text-decoration: none;
    transition: background 0.22s, border-color 0.22s;
}
.back-link .back-link-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-primary-pastel);
    flex-shrink: 0;
}
.back-link .back-link-pin svg {
    width: 15px;
    height: 15px;
    stroke: var(--c-primary);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.22s;
}
.back-link:active { transform: translateY(1px); }
.back-link:focus-visible { outline: none; border-color: var(--c-primary); }
.back-link--mb { margin-bottom: 14px; }

/* Animation au survol - desktop uniquement */
@media (min-width: 640px) {
    .back-link:hover {
        background: var(--c-primary-pastel);
        border-color: var(--c-primary);
    }
    .back-link:hover .back-link-pin svg { transform: translateX(-3px); }
}


/* ============================================================
   CONVENTION BASCULE DE ZONE - .zone-switch (composant global)
   Pour basculer entre deux vues jumelles (ex: Commandes <-> Archives).
   Distinct de .back-link (retour simple) : ici va-et-vient frequent.
   En coin de header, separe des onglets. Tokens navy uniquement.
   - .zone-switch        : ALLER (vers zone secondaire) - soft discret
   - .zone-switch--back  : RETOUR (vers zone principale) - navy plein
   ============================================================ */
.zone-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 14px;
    font-family: var(--f-body);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--c-primary);
    background: var(--c-primary-soft);
    border: 1px solid transparent;
    border-radius: var(--r-full);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s, border-color 0.18s;
}
.zone-switch svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}
.zone-switch-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 18px;
    padding: 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 9px;
    background: var(--c-primary-pastel);
    color: var(--c-primary);
}
.zone-switch:active { transform: translateY(1px); }
.zone-switch:focus-visible { outline: none; border-color: var(--c-primary); }

/* Variante RETOUR : navy plein (ramene a la vue principale) */
.zone-switch--back {
    color: var(--c-surface);
    background: var(--c-primary);
}
.zone-switch--back .zone-switch-count {
    background: rgba(255, 255, 255, 0.22);
    color: var(--c-surface);
}

@media (min-width: 640px) {
    .zone-switch:hover { background: var(--c-primary-pastel); }
    .zone-switch--back:hover { background: var(--c-primary-dark); }
}

/* ============================================================
   Module de selection multiple (generique, reutilisable)
   Pages : commandes, archives, messagerie.
   - Cases discretes a gauche, toujours visibles.
   - Barre d'action en haut (remplace le header pendant la selection).
   - Pilote par .has-selection sur [data-select-root].
   ============================================================ */

/* La barre d'action est masquee par defaut ; le header est visible. */
.sel-actionbar { display: none; }
[data-select-root].has-selection .sel-header { display: none; }
[data-select-root].has-selection .sel-actionbar { display: flex; }

/* Barre d'action (haut) : navy plein */
.sel-actionbar {
    align-items: center;
    gap: 10px;
    background: var(--c-primary);
    border-radius: var(--r-sm);
    padding: 7px 12px;
    min-height: 46px;
}
.sel-cancel {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    color: var(--c-surface);
    cursor: pointer;
    transition: background var(--t-base);
}
.sel-cancel svg { width: 20px; height: 20px; stroke: var(--c-surface); fill: none; stroke-width: 2; }
.sel-cancel:active { background: var(--c-primary-dark); }
.sel-count {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--c-surface);
    white-space: nowrap;
}
.sel-actions {
    margin-left: auto;
    display: flex;
    gap: 7px;
}
.sel-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 13px;
    font-family: var(--f-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-surface);
    background: transparent;
    border: 1.5px solid var(--c-primary-pastel);
    border-radius: var(--r-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-base), border-color var(--t-base);
}
.sel-action svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.sel-action:active { background: var(--c-primary-dark); border-color: var(--c-surface); }
/* Variante danger (Supprimer) : rouge, hierarchie de gravite */
.sel-action--danger { background: transparent; color: var(--c-danger-soft); border-color: var(--c-danger-soft); }
.sel-action--danger:active { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-surface); }

/* "Tout selectionner" : ligne discrete, visible seulement en selection */
.sel-all {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 2px;
    font-size: 0.82rem;
    color: var(--c-ink-2);
    cursor: pointer;
    user-select: none;
}
[data-select-root].has-selection .sel-all { display: flex; }

/* Case a cocher generique */
.sel-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-xs);
    background: var(--c-surface);
    position: relative;
    transition: background var(--t-base), border-color var(--t-base);
}
.sel-checkbox.is-checked {
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.sel-checkbox.is-checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid var(--c-surface);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Element selectionnable : case a gauche + contenu */
.sel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 2px;
}
.sel-item .sel-checkbox { align-self: center; }
/* Le contenu de l'element occupe le reste */
.sel-item > .sel-content { flex: 1; min-width: 0; }
/* Element coche : leger surlignage navy (applique au contenu carte) */
.sel-item.is-checked .sel-content { outline: 2px solid var(--c-primary); outline-offset: -2px; border-radius: var(--r-sm); }
[data-select-root].has-selection .olst-archive-btn { display: none; }

[data-select-root].has-selection .oarch-actions { display: none; }

/* Barre de selection : compacte sur mobile etroit (evite le debordement
   quand il y a 2 actions, ex. page Archives : Desarchiver + Supprimer). */
@media (max-width: 400px) {
    .sel-count-label { display: none; }
    .sel-actionbar { gap: 7px; padding: 7px 9px; }
    .sel-actions { gap: 6px; }
    .sel-action { padding: 6px 9px; gap: 5px; }
}

/* ================================================================
   ALERTE CTA - bouton "Creer une alerte" (page de recherche)
   Affiche en fin de resultats et dans le cas zero resultat,
   quand au moins un filtre structure est actif.
   ================================================================ */
/* =====================================================================
   PAGE RESTEE VIDE : LE RYTHME VERTICAL S'Y RESSERRE, ET NULLE PART AILLEURS
   =====================================================================
   Pose le 2026-10-16. La classe vient de <body> (voir base.html) et n'est
   declaree que par la recherche et la categorie quand elles n'ont aucun
   resultat.

   LE DEFAUT QUE CES REGLES CORRIGENT : sur un telephone, la barre de
   navigation du bas est FIXE et recouvre le contenu. La zone reellement
   vue s'arrete a son bord superieur - sur 413 x 780, 718 px, moins la
   barre de gestes du systeme. Un etat vide empile quatre blocs - message,
   bouton de sortie, pastilles, encart d'alerte - et le bouton « Creer une
   alerte » finissait DESSOUS : il fallait defiler pour le voir, sur la
   page meme ou l'on n'a rien d'autre a faire.

   POURQUOI C'EST PORTE PAR UNE CLASSE D'ETAT ET NON PAR LES REGLES DE
   BASE : la premiere version resserrait .breadcrumb, .section-header et
   .cf pour tout le site. SIX pages y perdaient 4 px alors que cinq
   n'avaient jamais eu le probleme, et une categorie PLEINE - qui affiche
   elle aussi l'encart d'alerte, tout en bas - payait pour une categorie
   vide. C'est ainsi qu'un site se resserre annee apres annee sans que
   personne ne l'ait decide. Ici, une page qui a des resultats garde
   exactement l'allure qu'elle avait avant ce commit.

   AUCUN ELEMENT N'EST RETIRE NI RAPETISSE : uniquement des marges et des
   interieurs. La mesure se refait au banc, et elle est chiffree :
       BANC_CHEMIN=/recherche/?q=... BANC_LARGEUR=413 BANC_HAUTEUR=780
       BANC_MESURER=.alerte-cta-btn
   ===================================================================== */
body.page-vide .breadcrumb    { margin-bottom: var(--sp-3); }
body.page-vide .section-header { margin-bottom: var(--sp-3); }
/* Interieur HAUT a sp-3 : 4 px de plus au-dessus du bouton, donc 4 px de
   moins sous lui. Le bas reste a sp-4, il ferme l'encart. */
body.page-vide .alerte-cta    { padding: var(--sp-3) var(--sp-4) var(--sp-4); }


/* RYTHME RESSERRE LE 15/10/2026, UNIQUEMENT DANS LES ESPACEMENTS.
   Sur un telephone de 427 x 782, le bouton « Creer une alerte » commencait
   a 690 px alors que la barre flottante du bas masque tout au-dela de 700 :
   il fallait defiler pour le voir. Quatre blocs se partagent l'ecran d'un
   etat vide - message, bouton de sortie, pastilles, cet encart - et un
   telephone n'en tient pas quatre aux marges d'origine.
   AUCUN ELEMENT N'EST RETIRE NI RAPETISSE : ni l'icone, ni un texte, ni une
   pastille. Seules les marges et les paddings rendent la place. */
.alerte-cta {
    margin: var(--sp-3) auto var(--sp-5);
    max-width: 640px;
    text-align: center;
    padding: var(--sp-4) var(--sp-4);
    background: var(--c-action-soft);
    border: 1px solid var(--c-action-soft);
    border-radius: var(--r-md, 12px);
}

.alerte-cta-txt {
    margin: 0 0 var(--sp-3);
    font-size: 0.95rem;
    color: var(--c-action-dark);
    line-height: 1.5;
}

/* ── Sortie d'une page restee vide ─────────────────────────────────
   Posee par la balise sortie_page_vide (core/templatetags/nimba_sorties.py) dans l'etat vide de la categorie et de
   la recherche. Elle precede l'encart d'alerte, qui etait jusqu'au
   15/10/2026 le SEUL geste propose - et qui est @login_required.

   SA COULEUR N'EST PAS CELLE DE L'ENCART D'ALERTE, ET C'EST VOULU : deux
   boutons cuivre pleins l'un au-dessus de l'autre se concurrencent. Celui-ci
   est contour, l'encart garde son fond teinte : on lit deux propositions
   distinctes, pas deux fois la meme. */
.sortie-vide {
    text-align: center;
    /* RESSERRE LE 15/10/2026 : ce bloc s'intercale entre le message d'etat
       vide et l'encart d'alerte, qu'il repoussait sous la ligne de
       flottaison sur un telephone. Chaque marge compte.
       HAUT RAMENE A sp-3 LE 16/10/2026 : le message qui precede porte deja
       sa propre descente. Mesure a l'appui, page de categorie vide a
       413 x 780. */
    margin: var(--sp-3, 12px) auto var(--sp-3, 12px);
}

.sortie-vide-btn {
    display: inline-block;
    padding: 11px 26px;
    border: 1px solid var(--c-action);
    border-radius: var(--r-sm, 8px);
    background: var(--c-surface, #fff);
    color: var(--c-action-dark);
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.sortie-vide-btn:hover,
.sortie-vide-btn:active {
    background: var(--c-action);
    color: #fff;
}

.sortie-vide-txt {
    margin: var(--sp-2, 8px) 0 var(--sp-2, 8px);
    font-size: 0.9rem;
    color: var(--c-muted);
}

/* Les pastilles se replient plutot que de deborder : trois noms de
   categorie suivis de leur compteur depassent la largeur d'un telephone des
   que les noms sont longs. */
.sortie-vide-puces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2, 8px);
}

/* Calquee sur .cat-pill, le vocabulaire deja employe par la barre de
   categories : le visiteur reconnait une cible tactile. */
.sortie-vide-puce {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1, 4px);
    padding: 7px var(--sp-4, 16px);
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-line);
    border-radius: var(--r-full, 999px);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-primary);
    text-decoration: none;
    white-space: nowrap;
}

.sortie-vide-puce span { color: var(--c-muted); font-weight: 700; }

.sortie-vide-puce:hover,
.sortie-vide-puce:active {
    border-color: var(--c-primary);
    background: var(--c-bg);
}

.alerte-cta-btn {
    display: inline-block;
    padding: 11px 26px;
    background: var(--c-action);
    color: #fff;
    border-radius: var(--r-sm, 8px);
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}

.alerte-cta-btn:hover,
.alerte-cta-btn:active {
    background: var(--c-action-dark);
}