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; }

        /* ========== BUTTONS ========== */
        .btn {
            padding: 0.55rem 1.15rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.88rem;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }
        .btn-primary {
            background: var(--mm-indigo-600, #5b6cf0);
            color: white;
            border: 1px solid transparent;
            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);
        }

        /* Bouton "ghost" (transparent + bordure) — repris du modèle */
        .btn-secondary {
            background: transparent;
            color: var(--mm-ink, #1a202c);
            border: 1px solid var(--mm-hairline, #e2e8f0);
        }
        .btn-secondary:hover {
            background: var(--mm-surface-3, #eef2f7);
            color: var(--mm-ink, #1a202c);
        }
        .btn-small { padding: 0.4rem 0.85rem; font-size: 0.8rem; border-radius: 8px; }
        .btn-danger { background: #ef4444; color: white; }
        .btn-danger:hover { background: #dc2626; }

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

        /* ========== 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.05;
            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;
            /* background-clip:text rogne la jambe italique du dernier caractère :
               on lui donne un peu d'espace + un padding pour le gradient. */
            display: inline-block;
            padding-right: 0.12em;
            margin-right: -0.06em;
        }
        .page-sub {
            color: #a0aec0;
            margin-top: 0.35rem;
            font-size: 0.92rem;
        }
        .page-head-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        /* ========== TOOLBAR (search + view toggle) ========== */
        .coll-toolbar {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }
        .search {
            position: relative;
            flex: 1;
            min-width: 240px;
        }
        .search input {
            width: 100%;
            padding: 0.7rem 0.9rem 0.7rem 2.4rem;
            font-size: 0.92rem;
            color: #1a202c;
            background: white;
            border: 1px solid transparent;
            border-radius: 12px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            outline: none;
            transition: box-shadow 0.15s, border-color 0.15s;
            font-family: inherit;
        }
        .search input::placeholder { color: #a0aec0; }
        .search input:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
        }
        .search .search-icon {
            position: absolute;
            left: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1rem;
            color: #a0aec0;
            pointer-events: none;
        }

        /* Segmented control — même principe que le modèle (active = "tuile blanche
           surélevée" sur creux gris). On utilise un gris un poil plus marqué que
           --surface-2 car le fond de page (#f0f2f5) est déjà assez clair : sans ça
           la tuile active blanche ne ressort pas. */
        .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);
        }

        /* ========== FACETS (chips de filtre) ========== */
        .facets {
            display: flex;
            gap: 0.45rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }
        .chip {
            padding: 0.4rem 0.85rem;
            font-size: 0.82rem;
            font-weight: 600;
            border-radius: 999px;
            background: white;
            color: #4a5568;
            border: none;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            cursor: pointer;
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }
        .chip:hover { color: #1a202c; }
        .chip .count {
            font-size: 0.72rem;
            opacity: 0.7;
            font-weight: 700;
        }
        .chip.is-on {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .chip.is-on .count { opacity: 0.9; }

        /* ========== GRID DES COLLECTIONS ========== */
        .coll-grid,
        .coll-group-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
            gap: 1.25rem;
        }

        /* Regroupement par catégorie */
        .coll-group { margin-bottom: 1.5rem; }
        .coll-group-head {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0 0.75rem;
            cursor: pointer;
            user-select: none;
            color: #4a5568;
            font-weight: 600;
            font-size: 0.95rem;
            border-bottom: 1px solid #edf2f7;
            margin-bottom: 0.85rem;
        }
        .coll-group-head .chevron {
            display: inline-block;
            transition: transform 0.15s;
            color: #a0aec0;
        }
        .coll-group-head.is-collapsed .chevron {
            transform: rotate(-90deg);
        }
        .coll-group-head .label { flex: 1; }
        .coll-group-head .count {
            background: #edf2f7;
            color: #4a5568;
            padding: 0.15rem 0.55rem;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        .coll-group-add { margin-top: 0.5rem; }

        .coll-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            transition: all 0.25s;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }
        .coll-card:hover {
            box-shadow: 0 8px 28px rgba(0,0,0,0.09);
            transform: translateY(-3px);
        }

        .coll-mosaic {
            /* Ratio 21/9 imposé par le padding-top (9/21 = 42.857%) plutôt que
               par aspect-ratio : ce dernier était mal respecté par Chrome quand
               le contenu (images) définissait une hauteur intrinsèque, rendant
               les mosaïques géantes en WebView/Chrome (OK sous Firefox). */
            position: relative;
            /* Fond subtil indigo très pâle → papier chaud (tokens du redesign) */
            background: linear-gradient(135deg, oklch(97.5% 0.012 280), oklch(97% 0.008 88));
        }
        .coll-mosaic::before {
            content: "";
            display: block;
            padding-top: 42.857%; /* 9 / 21 */
        }
        .coll-mosaic-inner {
            position: absolute;
            inset: 0;
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 4px;
            padding: 8px;
        }

        .coll-mosaic .slot {
            background: oklch(94% 0.012 88); /* surface-3 du redesign */
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            min-width: 0;
            min-height: 0;
        }
        .coll-mosaic .slot:nth-child(1) { grid-row: span 2; }
        .coll-mosaic .slot img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: block;
        }
        /* Quand un slot est vide, on affiche l'icône de visibilité dans le 1er */
        .coll-mosaic .slot.empty.with-icon {
            display: grid;
            place-items: center;
            font-size: 1.4rem;
            color: oklch(52% 0.018 280); /* muted */
        }

        .coll-body {
            padding: 0.85rem 1.1rem 0.95rem;
            display: flex; flex-direction: column;
            gap: 0.4rem;
            flex: 1;
        }
        .coll-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.5rem;
        }
        .coll-title {
            font-family: var(--mm-font-display, inherit);
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: -0.015em;
            color: #1a202c;
            line-height: 1.25;
            margin: 0;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .coll-count {
            font-family: var(--mm-font-mono, inherit);
            background: #eef2ff;
            color: #667eea;
            font-size: 0.78rem;
            font-weight: 700;
            padding: 0.2rem 0.55rem;
            border-radius: 999px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .coll-desc {
            color: #a0aec0;
            font-size: 0.85rem;
            line-height: 1.45;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .coll-foot {
            display: flex; align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-top: auto;
            padding-top: 0.6rem;
            border-top: 1px solid #f0f2f5;
            font-size: 0.75rem;
            color: #a0aec0;
        }
        .coll-foot .badge {
            padding: 0.15rem 0.55rem;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .coll-foot .badge svg { display: block; }
        /* Pastilles de visibilité (alignées avec la maquette collectheque 16). */
        .badge-public  { background: #d3eaf3; color: #1f6c8f; }
        .badge-friends { background: #d8efde; color: #1f7a3a; }
        .badge-private { background: #fbe1dd; color: #b54237; }
        /* Chips de filtre : même teinte de fond que les badges quand l'option
           n'est pas active (cohérence visuelle avec la maquette). */
        .chip.vis-chip-public  { background: #d3eaf3; color: #1f6c8f; }
        .chip.vis-chip-friends { background: #d8efde; color: #1f7a3a; }
        .chip.vis-chip-private { background: #fbe1dd; color: #b54237; }
        .chip .chip-icon { display: inline-flex; align-items: center; }
        .chip .chip-icon svg { display: block; }
        /* L'état actif (is-on) garde le gradient indigo défini plus haut. */
        /* Badge « collection partagée » — autoportant (padding inclus) car
           aussi utilisé hors .coll-foot, dans la vue liste. */
        .badge-shared {
            padding: 0.15rem 0.6rem;
            border-radius: 6px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            background: #ede9fe;
            color: #5b21b6;
        }

        /* Tuile "Nouvelle collection" en pointillé */
        .coll-card-add {
            background: transparent;
            border: 2px dashed #cbd5e0;
            border-radius: 16px;
            min-height: 260px;
            display: grid;
            place-items: center;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
            padding: 1.5rem;
            font-family: inherit;
            color: #a0aec0;
        }
        .coll-card-add:hover {
            border-color: #667eea;
            color: #667eea;
            background: rgba(102, 126, 234, 0.03);
        }
        .coll-card-add .add-icon {
            width: 56px; height: 56px;
            border-radius: 16px;
            background: white;
            margin: 0 auto 0.75rem;
            display: grid; place-items: center;
            font-size: 1.6rem;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            color: #667eea;
        }
        .coll-card-add .add-title {
            font-family: var(--mm-font-display, inherit);
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: -0.01em;
            color: #4a5568;
            margin-bottom: 0.2rem;
        }
        .coll-card-add:hover .add-title { color: #1a202c; }
        .coll-card-add .add-sub { font-size: 0.8rem; }

        /* ========== LIST VIEW ========== */
        .coll-list {
            background: white;
            border-radius: 16px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            overflow: hidden;
        }
        .coll-list-row {
            display: grid;
            grid-template-columns: 56px 1fr 110px 90px 110px;
            gap: 1rem;
            align-items: center;
            padding: 0.85rem 1.15rem;
            border-bottom: 1px solid #f0f2f5;
            text-decoration: none;
            color: #2d3748;
            font-size: 0.9rem;
            transition: background 0.12s;
            position: relative;
        }
        .coll-list-row:last-child { border-bottom: none; }
        .coll-list-row:hover { background: #eef2ff; }
        .coll-list-row:hover .row-name { color: var(--mm-indigo-700, #4338ca); }
        .coll-list-row:hover::before {
            content: '';
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
        }
        .coll-list-row.head {
            background: #fafbfc;
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #a0aec0;
            cursor: default;
        }
        .coll-list-row .row-icon {
            width: 40px; height: 40px;
            border-radius: 10px;
            display: grid; place-items: center;
            font-size: 1.1rem;
            background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
        }
        .coll-list-row .row-name { font-weight: 600; color: #1a202c; }
        .coll-list-row .row-sub { font-size: 0.75rem; color: #a0aec0; margin-top: 2px; }
        .coll-list-row .row-cell { color: #4a5568; }
        .coll-list-row .row-cell strong { color: #1a202c; }

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

        /* ========== MODALS ========== */
        .modal {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            z-index: 1000;
        }
        .modal.active { display: flex; justify-content: center; align-items: center; }
        .modal-content {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            max-width: 600px;
            width: 90%;
            /* % du parent (overlay plein écran) plutôt que vh : les unités vh
               sur max-height se calculent parfois à 0 en WebView Android, ce
               qui écrase la modale (contenu masqué). */
            max-height: 90%;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            animation: fadeIn 0.3s ease;
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        .modal-header h2 { color: #2d3748; font-weight: 700; }
        .close-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #718096;
            width: 36px; height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        .close-btn:hover { background: #f0f0f5; color: #2d3748; }

        .form-group { margin-bottom: 1rem; }
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #4a5568;
            font-weight: 600;
        }
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid #f0f0f5;
            border-radius: 12px;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            outline: none;
            font-family: inherit;
        }
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        .form-group textarea { resize: vertical; min-height: 100px; }

        /* ========== IMPORT PROGRESS ========== */
        .import-progress {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.98);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            text-align: center;
            min-width: 320px;
            animation: fadeIn 0.3s ease;
        }
        .import-progress h4 { color: #2d3748; margin-bottom: 0.75rem; }
        .import-progress-bar {
            width: 100%;
            height: 8px;
            background: #f0f0f5;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 0.5rem;
        }
        .import-progress-fill {
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 4px;
            transition: width 0.3s ease;
        }
        .import-progress-text { color: #718096; font-size: 0.85rem; }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 900px) {
            .coll-grid, .coll-group-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
        }
        @media (max-width: 640px) {
            .container { padding: 1rem 0.75rem 2rem; }
            .page-head h1 { font-size: 1.5rem; }
            .page-head-actions { width: 100%; }
            .page-head-actions .btn { flex: 1; justify-content: center; }
            /* Search + toggle sur la même ligne — la search laisse tomber son
               min-width pour s'adapter à l'espace restant. */
            .coll-toolbar { flex-wrap: nowrap; gap: 0.5rem; }
            .search { min-width: 0; }
            .search input { padding-left: 2.1rem; padding-right: 0.6rem; }
            .seg { flex-shrink: 0; }
            .seg-btn { padding: 0.35rem 0.55rem; }
            .coll-grid, .coll-group-grid { grid-template-columns: 1fr; gap: 0.85rem; }

            /* Cartes plus compactes sur mobile : mosaïque réduite (ratio 3/1)
               + corps resserré. Ratio via padding-top (1/3 = 33.333%). */
            .coll-mosaic::before { padding-top: 33.333%; }
            .coll-mosaic-inner {
                padding: 6px;
                gap: 3px;
            }
            .coll-body {
                padding: 0.85rem 1rem 1rem;
                gap: 0.35rem;
            }
            .coll-foot { padding-top: 0.6rem; }
            .coll-title { font-size: 0.98rem; -webkit-line-clamp: 1; }
            .coll-desc { -webkit-line-clamp: 1; }
            .coll-card-add { min-height: 120px; padding: 1rem; }
            .coll-card-add .add-icon { width: 44px; height: 44px; font-size: 1.4rem; margin-bottom: 0.5rem; }

            .coll-list-row { grid-template-columns: 40px 1fr 80px; gap: 0.6rem; padding: 0.7rem 0.9rem; font-size: 0.85rem; }
            .coll-list-row .head-vis, .coll-list-row .head-date,
            .coll-list-row .row-vis, .coll-list-row .row-date { display: none; }
        }