body {
            font-family: var(--mm-font-ui, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
            font-feature-settings: "ss01", "cv11";
            background: #f0f2f5;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(102, 126, 234, 0.3); border-radius: 3px; }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1.5rem 1.25rem 3rem;
            animation: fadeIn 0.4s ease;
        }

        /* ===== BOUTONS (modèle redesign) ===== */
        .btn {
            padding: 0.55rem 1.15rem;
            border: 1px solid transparent;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.88rem;
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            font-family: inherit;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
        }
        .btn-primary {
            background: var(--mm-indigo-600, #5b6cf0);
            color: white;
            box-shadow:
                0 1px 0 0 var(--mm-indigo-700, #4a59cf) inset,
                0 6px 20px -8px var(--mm-indigo-500, #6478f3);
        }
        .btn-primary:hover { background: var(--mm-indigo-700, #4a59cf); }
        .btn-secondary {
            background: transparent;
            color: var(--mm-ink, #1a202c);
            border-color: var(--mm-hairline, #e2e8f0);
        }
        .btn-secondary:hover { background: var(--mm-surface-3, #eef2f7); }
        .btn-small { padding: 0.4rem 0.85rem; font-size: 0.8rem; border-radius: 8px; }

        /* ===== PAGE HEAD ===== */
        .page-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }
        .page-head h1 {
            font-family: var(--mm-font-display, inherit);
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: -0.025em;
            color: #1a202c;
            line-height: 1.2;
            margin: 0;
        }
        .page-head h1 .accent {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-style: italic;
            font-weight: 600;
            display: inline-block;
            padding: 0.05em 0.12em 0.15em 0;
            margin: -0.05em -0.06em -0.1em 0;
        }
        .page-sub {
            color: #a0aec0;
            margin-top: 0.35rem;
            font-size: 0.92rem;
        }
        .page-head-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        /* ===== TOOLBAR FILTRES ===== */
        .cat-toolbar-card {
            background: white;
            border-radius: 16px;
            padding: 1rem 1.15rem;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            margin-bottom: 1rem;
        }
        .cat-toolbar {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
        .cat-toolbar .search {
            position: relative;
            flex: 1;
            min-width: 240px;
        }
        .cat-toolbar .search input {
            width: 100%;
            padding: 0.55rem 0.9rem 0.55rem 2.4rem;
            font-size: 0.92rem;
            color: #1a202c;
            background: var(--mm-surface-2, #f6f7f9);
            border: 1px solid transparent;
            border-radius: 10px;
            outline: none;
            transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
            font-family: inherit;
        }
        .cat-toolbar .search input::placeholder { color: #a0aec0; }
        .cat-toolbar .search input:focus {
            border-color: var(--mm-indigo-600, #5b6cf0);
            background: white;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
        }
        .cat-toolbar .search .search-icon {
            position: absolute;
            left: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--mm-muted, #a0aec0);
            display: grid;
            place-items: center;
            pointer-events: none;
        }
        .cat-toolbar .search .search-icon svg { display: block; }

        /* Bouton scan : utile uniquement sur mobile (caméra). Masqué en desktop. */
        .cat-toolbar .cat-scan-btn { display: none; }
        @media (max-width: 768px) {
            .cat-toolbar .cat-scan-btn { display: inline-flex; }
        }

        /* Selects "ghost" inline avec le reste */
        .cat-toolbar select.cat-select {
            padding: 0.45rem 2rem 0.45rem 0.85rem;
            border: 1px solid var(--mm-hairline, #e2e8f0);
            border-radius: 10px;
            background: transparent;
            color: var(--mm-ink, #1a202c);
            font-size: 0.88rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
            background-repeat: no-repeat;
            background-position: right 0.7rem center;
            transition: background-color 0.15s, border-color 0.15s;
        }
        .cat-toolbar select.cat-select:hover { background-color: var(--mm-surface-3, #eef2f7); }
        .cat-toolbar select.cat-select:focus { outline: none; border-color: var(--mm-indigo-600, #5b6cf0); }

        /* Segmented control vue */
        .seg {
            display: inline-flex;
            padding: 3px;
            background: #e2e8f0;
            border: 1px solid var(--mm-hairline, #e2e8f0);
            border-radius: 10px;
        }
        .seg-btn {
            padding: 0.4rem 0.7rem;
            color: var(--mm-muted, #94a3b8);
            background: transparent;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s, box-shadow 0.15s;
            display: grid;
            place-items: center;
            line-height: 1;
        }
        .seg-btn svg { display: block; }
        .seg-btn:hover { color: var(--mm-ink, #1a202c); }
        .seg-btn.is-on {
            background: white;
            color: var(--mm-ink, #1a202c);
            box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.04);
        }

        /* Filtres avancés (catégorie cascade + champs custom) repliés dans une 2e ligne */
        .cat-advanced {
            margin-top: 0.75rem;
            display: none;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px solid var(--mm-hairline, #e2e8f0);
        }
        .cat-advanced.is-open { display: grid; }
        .cat-advanced .label {
            display: block;
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--mm-muted, #94a3b8);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.4rem;
        }
        .cat-advanced select {
            width: 100%;
            padding: 0.55rem 0.85rem;
            border: 1px solid var(--mm-hairline, #e2e8f0);
            border-radius: 10px;
            background: white;
            color: var(--mm-ink, #1a202c);
            font-size: 0.88rem;
            font-family: inherit;
            outline: none;
        }
        .cat-advanced select:focus { border-color: var(--mm-indigo-600, #5b6cf0); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12); }

        /* ===== INFO LIGNE DE RÉSULTATS ===== */
        .cat-results-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
            font-size: 0.88rem;
            color: var(--mm-muted, #94a3b8);
            flex-wrap: wrap;
        }
        .cat-results-info strong { color: var(--mm-ink, #1a202c); font-weight: 700; }
        .cat-filter-pills {
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
            font-size: 0.78rem;
        }

        /* ===== GRILLE (mode "grid" = vignettes 3:4) ===== */
        .cat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
            gap: 16px;
        }

        .cat-card {
            background: transparent;
            border-radius: 0;
            padding: 0;
            display: block;
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }
        .cat-card .art {
            width: 100%;
            aspect-ratio: 3 / 4;
            background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 60%, #ddd6fe 100%);
            overflow: hidden;
            border-radius: 12px;
            position: relative;
            box-shadow: 0 1px 2px rgba(0,0,0,0.06);
            transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s;
        }
        .cat-card:hover .art {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px -8px rgba(0,0,0,0.18);
        }
        .cat-card .art img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            opacity: 0;
            transition: opacity 0.25s ease-out;
        }
        /* Image plus haute que large (portrait) → cover pour remplir le cadre 3/4 */
        .cat-card .art img.is-tall {
            object-fit: cover;
        }
        .cat-card .art img.loaded { opacity: 1; }
        .cat-card .art-placeholder {
            width: 100%; height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: rgba(255, 255, 255, 0.85);
        }

        /* Voile sombre + nom centré au hover */
        .cat-card .art::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
            opacity: 0;
            transition: opacity 0.25s;
            pointer-events: none;
            z-index: 1;
        }
        .cat-card:hover .art::after { opacity: 1; }
        .cat-card .hover-title {
            position: absolute;
            left: 0; right: 0; top: 0; bottom: 38%;
            padding: 12px;
            display: grid;
            place-items: center;
            text-align: center;
            color: white;
            font-family: var(--mm-font-display, inherit);
            font-size: 14px;
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: -0.01em;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
            opacity: 0;
            transition: opacity 0.25s;
            z-index: 2;
            pointer-events: none;
        }
        .cat-card:hover .hover-title { opacity: 1; }
        .cat-card .hover-meta {
            position: absolute;
            left: 10px; right: 10px; bottom: 8px;
            color: white;
            opacity: 0;
            transform: translateY(8px);
            font-size: 11px;
            line-height: 1.35;
            transition: opacity 0.25s, transform 0.25s;
            z-index: 2;
            pointer-events: none;
        }
        .cat-card:hover .hover-meta { opacity: 1; transform: none; }
        .cat-card .hover-meta .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .cat-card .hover-meta .stars { color: #fcd34d; }

        /* Texte sous la vignette */
        .cat-card .info { padding: 10px 4px 0; }
        .cat-card .name {
            color: #1a202c;
            margin: 0;
            font-family: var(--mm-font-display, inherit);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: -0.01em;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cat-card .platform {
            font-size: 11px;
            color: var(--mm-muted, #94a3b8);
            margin: 3px 0 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Badges (rating, owned, wishlist) sur l'art */
        .cat-card .badges {
            position: absolute;
            top: 10px; left: 10px;
            z-index: 2;
            display: flex; gap: 4px;
        }
        .cat-card .b {
            background: rgba(0, 0, 0, 0.62);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: white;
            padding: 3px 7px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .cat-card .b-rating {
            background: rgba(0, 0, 0, 0.62);
            color: #fcd34d;
            text-transform: none;
            letter-spacing: 0;
        }

        /* ===== LISTE (mode "list" = lignes horizontales) ===== */
        .cat-grid.view-list-mode {
            display: block;
            background: white;
            border-radius: 16px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            overflow: hidden;
        }
        .cat-row {
            display: grid;
            grid-template-columns: 56px 1fr 110px auto;
            gap: 1rem;
            align-items: center;
            padding: 0.7rem 1.1rem;
            border-bottom: 1px solid #f0f2f5;
            text-decoration: none;
            color: #2d3748;
            transition: background 0.12s;
            position: relative;
        }
        .cat-row:last-child { border-bottom: none; }
        .cat-row:hover { background: #eef2ff; }
        .cat-row:hover .row-name { color: var(--mm-indigo-700, #4338ca); }
        .cat-row:hover::before {
            content: '';
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
        }
        .cat-row .row-thumb {
            width: 48px; height: 48px;
            border-radius: 10px;
            background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
            display: grid; place-items: center;
            overflow: hidden;
            font-size: 1.2rem;
        }
        .cat-row .row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .cat-row .row-info { min-width: 0; }
        .cat-row .row-name {
            font-weight: 600;
            color: #1a202c;
            font-size: 0.95rem;
            line-height: 1.3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .cat-row .row-sub {
            font-size: 0.78rem;
            color: #a0aec0;
            margin-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .cat-row .row-cell {
            color: #4a5568;
            font-size: 0.85rem;
            white-space: nowrap;
        }
        .cat-row .row-rating {
            color: var(--mm-muted, #94a3b8);
            font-size: 0.85rem;
            white-space: nowrap;
        }
        .cat-row .row-rating .star { color: #f6ad55; }

        /* ===== ÉTAT / LOADING / EMPTY ===== */
        .loading { text-align: center; padding: 3rem; color: #718096; }
        .spinner {
            border: 3px solid #edf2f7;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            width: 40px; height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        .empty-state { text-align: center; padding: 3rem; color: #a0aec0; }
        .empty-state h3 { color: #4a5568; font-size: 1.1rem; margin-bottom: 0.5rem; }
        .empty-state p { color: #a0aec0; }
        .empty-state-icon { font-size: 3rem; margin-bottom: 1rem; }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .container { padding: 1rem 0.75rem 2rem; }
            .page-head h1 { font-size: 1.5rem; }
            /* Mobile : « Nouvelle référence » au-dessus et à droite, le toggle
               des vues en pleine largeur en dessous. */
            .page-head-actions {
                width: 100%;
                flex-direction: column;
                align-items: stretch;
            }
            .page-head-actions #moderatorActions {
                order: -1;
                align-self: flex-end;
            }
            .page-head-actions .cat-mode-toggle { width: 100%; }
            .cat-toolbar { flex-wrap: wrap; gap: 0.5rem; }
            /* Sur mobile : ligne 1 = search (pleine largeur restante) +
               bouton scan. Tous les autres boutons (Filtres, reset, save,
               grille/liste) tombent sur la ligne 2. On y arrive en forçant
               la search à occuper ~95% : la somme search + scan ≈ 100% →
               les items suivants wrappent. */
            .cat-toolbar .search { flex: 1 1 calc(100% - 60px); min-width: 0; }
            .cat-toolbar .search input { padding-left: 2.1rem; padding-right: 0.6rem; font-size: 0.85rem; }
            .cat-toolbar .cat-scan-btn { flex: 0 0 auto; }
            /* Ligne 2 : boutons compacts (tous icon-only pour tenir sur
               une seule ligne, sf-widget compris). */
            .cat-toolbar #advancedToggle { flex: 0 0 auto; padding-left: 0.5rem; padding-right: 0.5rem; }
            .cat-toolbar #advancedToggle span:not(.filter-active-dot) { display: none; }
            .cat-toolbar .btn-small { padding-left: 0.45rem; padding-right: 0.45rem; }
            .sf-widget { gap: 3px; }
            .cat-toolbar select.cat-select { display: none; } /* selects accessibles via "Filtres" */
            /* Sélecteur grille/liste poussé à droite de la ligne 2.
               flex-shrink: 0 pour qu'il garde sa taille face à un sf-widget
               visible, sans déborder. */
            .cat-toolbar .seg { flex-shrink: 0; margin-left: auto; padding: 2px; }
            .cat-toolbar .seg-btn { padding: 5px 7px; }
            .cat-toolbar .seg-btn svg { width: 16px; height: 16px; }
            /* Catégorie + filtres spécifiques restent côte à côte en mobile */
            .cat-advanced { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
            .cat-row { grid-template-columns: 44px 1fr auto; gap: 0.7rem; padding: 0.6rem 0.85rem; }
            .cat-row .row-thumb { width: 44px; height: 44px; }
            .cat-row .row-cell { display: none; }
            /* Au moins 3 cartes / ligne en mobile, vignettes plus petites.
               minmax(0, 1fr) au lieu de 1fr : sinon les noms en nowrap font grossir
               leur colonne (min-content) et la 2e (ou autre) finit plus large. */
            .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
            .cat-card .info { padding: 6px 2px 0; }
            .cat-card .name { font-size: 12px; line-height: 1.2; }
            .cat-card .platform { font-size: 10px; }
        }
        @media (max-width: 380px) {
            /* Très petit écran : on garde 3 colonnes mais on resserre le gap */
            .cat-grid { gap: 10px; }
            .cat-advanced { grid-template-columns: 1fr; }
        }

        /* ===== COLLECTIONS DE RÉFÉRENCES (filtres publics) ===== */

        /* Bouton « Sauvegarder filtres » version publique (modérateurs) */
        .sf-public-btn {
            background: oklch(50% 0.18 280);
            border: 1px solid oklch(50% 0.18 280);
            color: #fff;
        }
        .sf-public-btn:hover:not(:disabled) { background: oklch(43% 0.18 280); }
        .sf-public-btn:disabled { opacity: 0.45; cursor: not-allowed; }

        /* ===== Segmented control « Vue références / Vue collections » =====
           Repris du handoff design (docs/collectheque7) — tokens --mm-* du site,
           polices conservées (pas de Bricolage Grotesque ni JetBrains Mono). */
        .cat-mode-toggle {
            display: inline-flex;
            background: var(--mm-surface-2, oklch(97% 0.008 88));
            border: 1px solid var(--mm-hairline, oklch(91% 0.008 280));
            border-radius: 10px;
            padding: 3px;
        }
        .cat-mode-toggle button {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 13px;
            background: transparent;
            border: 0;
            border-radius: 8px;
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            color: var(--mm-muted, oklch(52% 0.018 280));
            cursor: pointer;
            transition: color 0.15s, background 0.15s, box-shadow 0.15s;
        }
        .cat-mode-toggle button:hover { color: var(--mm-ink, oklch(18% 0.025 280)); }
        .cat-mode-toggle button.is-on {
            background: var(--mm-white, #fff);
            color: var(--mm-ink, oklch(18% 0.025 280));
            box-shadow: var(--mm-shadow-sm, 0 1px 2px oklch(20% 0.05 280 / 0.06));
        }
        @media (max-width: 720px) {
            .cat-mode-toggle { width: 100%; }
            .cat-mode-toggle button { flex: 1; justify-content: center; }
        }

        /* Sections de la vue collections (regroupées par catégorie) */
        .coll-section { margin-bottom: 28px; }
        /* Titre de section avec barre indigo — repris du handoff (.cat-coll-section-title) */
        .coll-section-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: var(--mm-font-display, inherit);
            font-size: 18px;
            font-weight: 700;
            color: var(--mm-ink, oklch(18% 0.025 280));
            letter-spacing: -0.015em;
            margin: 0 0 14px;
        }
        .coll-section-title::before {
            content: "";
            flex: 0 0 4px;
            height: 18px;
            border-radius: 2px;
            background: var(--mm-indigo-500, oklch(58% 0.165 280));
        }

        /* Boutons de modération au survol d'une carte collection */
        .coll-mod-btns {
            position: absolute;
            top: 8px; right: 8px;
            display: flex;
            gap: 6px;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 3;
        }
        .cat-card:hover .coll-mod-btns,
        .catcoll-card:hover .coll-mod-btns,
        .coll-mod-btns:focus-within { opacity: 1; }
        .coll-mod-btn {
            width: 30px; height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.62);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: #fff;
            cursor: pointer;
            transition: background 0.15s;
        }
        .coll-mod-btn:hover { background: oklch(50% 0.18 280); }
        .coll-mod-btn-danger:hover { background: oklch(55% 0.2 25); }

        /* Bouton « Ajouter à la fusion » au survol d'une ref-card (modos) */
        .cat-merge-btn,
        .cat-dup-btn {
            position: absolute;
            left: 8px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 9px;
            border: none;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.62);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.18s, background 0.15s;
            z-index: 3;
        }
        .cat-merge-btn { top: 8px; }
        /* Dupliquer juste sous Fusion (≈ hauteur du bouton + 4 px). */
        .cat-dup-btn { top: 38px; }
        .cat-card:hover .cat-merge-btn,
        .cat-card:hover .cat-dup-btn,
        .cat-merge-btn:focus,
        .cat-dup-btn:focus { opacity: 1; }
        .cat-merge-btn:hover { background: oklch(50% 0.18 280); }
        .cat-dup-btn:hover { background: oklch(50% 0.16 200); }
        .cat-dup-btn:disabled { opacity: 0.5; cursor: wait; }

        /* Badge « À fusionner » après sélection (toujours visible) */
        .cat-merge-badge {
            position: absolute;
            top: 8px; left: 8px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border: none;
            border-radius: 999px;
            background: oklch(55% 0.22 280);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            z-index: 3;
            box-shadow: 0 2px 8px rgba(91, 33, 182, 0.35);
        }
        .cat-merge-badge:hover { background: oklch(48% 0.24 280); }
        .cat-merge-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px; height: 16px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.22);
            font-size: 10px;
        }

        /* ===== Modale de fusion (reprend la structure .product-modal) ===== */
        .merge-modal .modal-sheet { max-width: 580px; }
        .merge-modal .modal-body {
            display: flex;
            flex-direction: column;
            gap: 18px;
            grid-template-columns: none !important; /* override product-modal body grid */
            padding: 22px 26px;
        }
        .merge-flow {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 12px;
            align-items: stretch;
        }
        .merge-slot {
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 14px 14px 12px;
            background: #fbfbfd;
            display: flex; flex-direction: column;
            gap: 6px;
            transition: border-color 0.15s, background 0.15s;
        }
        .merge-slot-source { border-color: oklch(88% 0.06 25); background: oklch(98.5% 0.013 25); }
        .merge-slot-target { border-color: oklch(88% 0.07 150); background: oklch(98.5% 0.016 150); }
        .merge-slot-head {
            display: flex; align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 11px;
            margin-bottom: 2px;
        }
        .merge-slot-pill {
            display: inline-flex; align-items: center;
            padding: 3px 9px;
            border-radius: 999px;
            font-weight: 700;
            letter-spacing: 0.3px;
            font-size: 10.5px;
            text-transform: uppercase;
        }
        .merge-slot-pill-danger {
            background: oklch(58% 0.18 25);
            color: #fff;
        }
        .merge-slot-pill-success {
            background: oklch(58% 0.16 150);
            color: #fff;
        }
        .merge-slot-fate {
            font-size: 10.5px;
            font-weight: 600;
            opacity: 0.85;
        }
        .merge-slot-fate-danger { color: oklch(45% 0.18 25); }
        .merge-slot-fate-success { color: oklch(40% 0.17 150); }
        .merge-slot-name {
            font-weight: 700;
            color: #1a202c;
            font-size: 14.5px;
            line-height: 1.3;
            word-break: break-word;
        }
        .merge-slot-barcode {
            font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
            font-size: 11.5px;
            color: #718096;
            letter-spacing: 0.2px;
        }
        .merge-slot-barcode:empty { display: none; }
        .merge-swap-btn {
            align-self: center;
            width: 38px; height: 38px;
            border: 1px solid #e2e8f0;
            border-radius: 50%;
            background: #fff;
            color: #4a5568;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.25s;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }
        .merge-swap-btn:hover {
            background: oklch(50% 0.18 280);
            color: #fff;
            border-color: transparent;
            transform: rotate(180deg);
        }
        .merge-note {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 10px 12px;
            border-radius: 10px;
            background: #f6f7f9;
            border: 1px solid #e2e8f0;
            color: #4a5568;
            font-size: 12.5px;
            line-height: 1.45;
        }
        .merge-note svg {
            flex-shrink: 0;
            margin-top: 1px;
            color: #94a3b8;
        }
        .merge-foot-hint {
            font-size: 12px;
            color: #94a3b8;
        }
        @media (max-width: 520px) {
            .merge-flow { grid-template-columns: 1fr; }
            .merge-swap-btn { transform: rotate(90deg); justify-self: center; }
            .merge-swap-btn:hover { transform: rotate(270deg); }
        }

        /* Menu flottant de sélection de catégorie */
        .coll-cat-menu {
            position: fixed;
            z-index: 1000;
            background: #fff;
            border: 1px solid #e2e2ec;
            border-radius: 10px;
            box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.25);
            padding: 6px;
            max-height: 320px;
            overflow-y: auto;
            min-width: 200px;
        }
        /* En-tête de menu (ex. « Déplacer X vers… ») */
        .coll-cat-menu-head {
            padding: 6px 10px 8px;
            margin-bottom: 4px;
            border-bottom: 1px solid #ececf3;
            font-size: 0.78rem;
            font-weight: 700;
            color: #64748b;
        }
        .coll-cat-item {
            display: block;
            width: 100%;
            text-align: left;
            padding: 7px 10px;
            border: none;
            background: none;
            border-radius: 6px;
            font: inherit;
            font-size: 0.85rem;
            color: #2d3748;
            cursor: pointer;
        }
        .coll-cat-item:hover { background: #f3f0fa; }
        .coll-cat-item.is-current { color: oklch(50% 0.18 280); font-weight: 600; }

        /* « + Ajouter une catégorie » + formulaire inline */
        .coll-cat-add-btn {
            margin-top: 4px;
            border-top: 1px solid #ececf3;
            border-radius: 0 0 6px 6px;
            color: oklch(50% 0.18 280);
            font-weight: 600;
        }
        .coll-cat-adder {
            display: none;
            padding: 8px;
            border-top: 1px solid #ececf3;
            margin-top: 4px;
        }
        .coll-cat-adder.is-open { display: block; }
        .coll-cat-new-input {
            width: 100%;
            padding: 7px 10px;
            border: 1px solid #d6d4e0;
            border-radius: 6px;
            font: inherit;
            font-size: 0.85rem;
            color: #2d3748;
            box-sizing: border-box;
        }
        .coll-cat-new-input:focus {
            outline: none;
            border-color: oklch(50% 0.18 280);
            box-shadow: 0 0 0 2px oklch(50% 0.18 280 / 0.15);
        }
        .coll-cat-adder-actions {
            display: flex;
            gap: 6px;
            margin-top: 8px;
        }
        .coll-cat-add-confirm,
        .coll-cat-add-cancel {
            flex: 1;
            padding: 6px 10px;
            border-radius: 6px;
            font: inherit;
            font-size: 0.8rem;
            cursor: pointer;
            border: 1px solid transparent;
        }
        .coll-cat-add-confirm {
            background: oklch(50% 0.18 280);
            color: #fff;
        }
        .coll-cat-add-confirm:hover { background: oklch(45% 0.18 280); }
        .coll-cat-add-cancel {
            background: #fff;
            border-color: #d6d4e0;
            color: #2d3748;
        }
        .coll-cat-add-cancel:hover { background: #f3f0fa; }

        /* Quand la vue « collections » est active, on masque le catalogue.
           !important permet d'écraser les styles inline posés par le rendu
           asynchrone du catalogue (il continue de charger en arrière-plan). */
        body.collections-view .cat-toolbar-card,
        body.collections-view #stats,
        body.collections-view #paginationContainer,
        body.collections-view #productsGrid,
        body.collections-view #emptyState,
        body.collections-view #loading {
            display: none !important;
        }

        /* ============================================================
           Cartes catégorie (groupe plusieurs collections) — design
           collectheque14 : carte 18px ronde, mosaïque preview carrée,
           hover lift + bordure accent.
           ============================================================ */
        .catcoll-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            margin-bottom: 28px;
        }
        @media (max-width: 1040px) { .catcoll-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 720px)  { .catcoll-grid { grid-template-columns: repeat(2, 1fr); } }

        .catcoll-card {
            position: relative;
            background: #fff;
            border: 1px solid #e9e7df;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 1px 2px rgba(33,31,51,0.04), 0 8px 22px rgba(33,31,51,0.05);
            display: flex;
            flex-direction: column;
            cursor: pointer;
            transition: transform 0.18s, box-shadow 0.18s;
        }
        .catcoll-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 2px 4px rgba(33,31,51,0.05), 0 16px 36px rgba(33,31,51,0.10);
        }
        .catcoll-mosaic {
            /* Ratio 1/1 imposé par padding-top plutôt que par aspect-ratio :
               ce dernier était mal respecté par Chrome quand le contenu (grille
               d'images) définissait une hauteur intrinsèque → mosaïques géantes
               en WebView/Chrome (OK sous Firefox). Le contenu vit dans
               .catcoll-mosaic-inner, positionné en absolu. */
            position: relative;
            background: linear-gradient(160deg, #f6f4ef, #efeee8);
        }
        .catcoll-mosaic::before { content: ""; display: block; padding-top: 100%; }
        .catcoll-mosaic-inner {
            position: absolute;
            inset: 0;
            display: grid;
            gap: 7px;
            padding: 14px;
        }
        /* Variantes selon le nombre d'images (calqué sur collectheque14).
           Tous slots de taille égale pour n=1, n=2 et n=4. Pour n=3 :
           un grand au-dessus + 2 côte-à-côte. La classe .nX reste sur
           .catcoll-mosaic, on cible l'inner pour la grille. */
        .catcoll-mosaic.n1 .catcoll-mosaic-inner { grid-template-columns: 1fr; }
        .catcoll-mosaic.n2 .catcoll-mosaic-inner { grid-template-columns: 1fr 1fr; }
        .catcoll-mosaic.n3 .catcoll-mosaic-inner { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
        .catcoll-mosaic.n3 .slot:nth-child(1) { grid-column: 1 / 3; }
        .catcoll-mosaic.n4 .catcoll-mosaic-inner { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

        .catcoll-mosaic .slot {
            position: relative;
            border-radius: 11px;
            background: #ece9fb;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
            overflow: hidden;
            min-width: 0;
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .catcoll-mosaic .slot img {
            width: 100%; height: 100%;
            object-fit: contain;
            display: block;
        }
        .catcoll-mosaic .slot.empty.with-icon {
            font-size: 1.6rem;
            color: #94a3b8;
        }
        .catcoll-body {
            padding: 14px 16px;
            border-top: 1px solid #e9e7df;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .catcoll-title {
            font-family: var(--mm-font-display, inherit);
            font-size: 16px;
            font-weight: 700;
            letter-spacing: -0.2px;
            color: #211f33;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
        }
        .catcoll-count {
            font-size: 13px;
            font-weight: 700;
            color: #4a3dbd;
            background: color-mix(in oklab, #6c5ce7 12%, white);
            padding: 3px 11px;
            border-radius: 999px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* Carte « feuille » (collection finale) : même conteneur que les
           cartes catégorie, mais une seule grosse image et un chevron à
           droite qui slide à l'hover (calque collectheque14). */
        .catcoll-card.is-leaf .catcoll-mosaic .slot {
            background: transparent;
        }
        .catcoll-card.is-leaf .catcoll-mosaic .slot img {
            object-fit: contain;
        }
        .catcoll-leaf-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.4rem;
            color: #94a3b8;
            background: #ece9fb;
        }
        .catcoll-chev {
            font-size: 16px;
            font-weight: 700;
            color: #9b98ab;
            flex-shrink: 0;
            transition: transform 0.15s, color 0.15s;
        }
        .catcoll-card.is-leaf:hover .catcoll-chev {
            transform: translateX(3px);
            color: #6c5ce7;
        }

        /* ============================================================
           Barre de section drill — design collectheque14 :
           back-chip carré + nom + count pill, alignement horizontal.
           ============================================================ */
        .section-bar {
            display: flex;
            align-items: center;
            gap: 14px;
            margin: 4px 0 20px;
            flex-wrap: wrap;
        }
        .back-chip {
            width: 38px;
            height: 38px;
            border-radius: 11px;
            border: 1px solid #e9e7df;
            background: #fff;
            color: #211f33;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: border-color 0.15s, color 0.15s, transform 0.15s;
        }
        .back-chip:hover {
            border-color: #6c5ce7;
            color: #6c5ce7;
        }
        .back-chip:hover svg { transform: translateX(-2px); }
        .back-chip svg { transition: transform 0.15s; }
        .section-name {
            margin: 0;
            font-family: var(--mm-font-display, inherit);
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -0.5px;
            color: #211f33;
            min-width: 0;
        }
        .section-count {
            font-size: 13.5px;
            font-weight: 700;
            color: #4a3dbd;
            background: color-mix(in oklab, #6c5ce7 12%, white);
            border-radius: 999px;
            padding: 4px 12px;
            white-space: nowrap;
        }

        /* Sous-titres internes au drill (« Sous-catégories », « Collections »).
           Plus discret que le titre de page, plus marqué qu'un libellé brut. */
        .coll-subsection-title {
            font-family: var(--mm-font-display, inherit);
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #94a3b8;
            margin: 22px 0 12px;
        }
        .coll-subsection-title:first-child { margin-top: 0; }