/* ============================================================
   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;
            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); }
        .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); }
        .nav-cat-count {
            font-size: var(--fs-2xs);
            color: var(--c-primary);
            opacity: 0.7;
        }
        .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; } }


        /* ================================================================
           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;
        }
        /* 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;
        }
        /* 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);
        }

        /* 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);
        }
        .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;
        }
        .breadcrumb a { color: var(--c-primary); }
        .breadcrumb a:active { text-decoration: underline; }
        .breadcrumb-sep { color: var(--c-line); }

        /* Filtres */
        .filters-bar {
            display: flex; flex-direction: column;
            gap: var(--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-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 */
        .empty-state {
            text-align: center;
            padding: var(--sp-12) var(--sp-5);
            color: var(--c-muted);
        }
        .empty-state-icon { font-size: 3rem; margin-bottom: var(--sp-3); }
        .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 1 - REASSURANCE */
        .footer-reassurance {
            background: var(--c-warm-deep);
            padding: var(--sp-6) 0;
            margin-top: var(--sp-10);
        }
        .footer-reassurance-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--sp-4) var(--sp-3);
        }
        .footer-pilier {
            display: flex;
            align-items: flex-start;
            gap: var(--sp-3);
        }
        .footer-pilier-icon {
            width: 40px; height: 40px;
            border-radius: 50%;
            background: var(--c-surface);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            box-shadow: var(--sh-xs);
        }
        .footer-pilier-icon svg {
            width: 18px; height: 18px;
            stroke: var(--c-primary); fill: none;
            stroke-width: 1.8;
            stroke-linecap: round; stroke-linejoin: round;
        }
        .footer-pilier-text strong {
            display: block;
            font-size: var(--fs-sm);
            font-weight: 700;
            color: var(--c-ink);
            margin-bottom: 2px;
            line-height: 1.3;
        }
        .footer-pilier-text small {
            font-size: var(--fs-xs);
            color: var(--c-ink-3);
            line-height: 1.45;
        }

        /* ZONE 2 - FOOTER PRINCIPAL (navy profond) */
        .footer {
            background: var(--c-primary-dark);
            color: var(--c-footer-text-2);
            padding: var(--sp-10) 0 var(--sp-6);
            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; }
        .footer-links li { margin-bottom: var(--sp-2); }
        .footer-links-cols { columns: 2; column-gap: var(--sp-6); }
        .footer-links-cols li { break-inside: avoid; }
        .footer-links a {
            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-2);
        }
        .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 {
            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-4);
            flex-wrap: wrap;
            justify-content: center;
        }
        .footer-bottom-links a {
            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.575rem;
            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: 10px; }
            .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; }

            /* Footer piliers en 1 colonne */
            .footer-reassurance-grid { grid-template-columns: 1fr; gap: var(--sp-3); }

            /* 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-bar { flex-direction: row; flex-wrap: wrap; }
            .footer-reassurance-grid { grid-template-columns: repeat(4, 1fr); }
            .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; }

            /* ── 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.58rem; 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 auth desktop */
            .btn-connexion {
                padding: 8px var(--sp-5);
                border: 1.5px solid var(--c-line);
                border-radius: var(--r-full);
                font-size: var(--fs-base);
                font-weight: 600;
                color: var(--c-ink-2);
                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-line);
                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.66rem; 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.6rem;
                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); }
            .nav-cat-count { font-size: var(--fs-2xs); color: var(--c-muted); font-weight: 500; 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);
            }
        }