/* Page Tops — design repris de docs/Tops (autonome).html, adapté au style
   du site (fond #f0f2f5, cartes blanches, accent indigo #667eea, or pour
   les rangs/étoiles). La popup créer/modifier utilise collection-modals.css
   (ccm-*) ; seuls le sélecteur de références et la liste triable sont ici. */

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

/* ===== PAGE HEAD ===== */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.1rem;
    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;
    display: inline-block;
    padding-right: 0.12em;
    margin-right: -0.06em;
}
.page-sub {
    color: #718096;
    margin-top: 0.35rem;
    font-size: 0.92rem;
    max-width: 56ch;
    line-height: 1.55;
}
.page-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ===== BANDEAU D'ANCRES ===== */
.tp-jump {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    margin-bottom: 1.8rem;
    border-bottom: 1px solid var(--mm-hairline, #e2e8f0);
}
.tp-jump a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #4a5568;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.14s, color 0.14s;
}
.tp-jump a:hover { background: #eef2ff; color: #4338ca; }
.tp-jump .n { font-size: 0.72rem; font-weight: 800; color: #a0aec0; }

/* ===== SECTIONS ===== */
.sec { margin-bottom: 3rem; scroll-margin-top: 90px; }
.sec-head {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.sec-title {
    margin: 0;
    font-family: var(--mm-font-display, inherit);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1a202c;
}
.sec-note { font-size: 0.86rem; color: #a0aec0; font-weight: 500; padding-bottom: 2px; }
.sec-more {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.86rem;
    font-weight: 700;
    color: #667eea;
    text-decoration: none;
    padding-bottom: 2px;
    transition: gap 0.15s;
}
.sec-more:hover { gap: 10px; }

/* ===== FILTRES COMMUNAUTÉ ===== */
.tp-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.search { position: relative; flex: 1; min-width: 220px; }
.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-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mm-muted, #a0aec0);
    display: grid;
    place-items: center;
    pointer-events: none;
}
.sort-select {
    padding: 0.7rem 2.4rem 0.7rem 0.95rem;
    background: white url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    color: #1a202c;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sort-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
}
.tp-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.tp-chip {
    height: 36px;
    padding: 0 14px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
    background: white;
    border: 1px solid var(--mm-hairline, #e2e8f0);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.tp-chip:hover { color: #1a202c; border-color: #cbd5e0; }
.tp-chip.on { color: #fff; background: #667eea; border-color: #667eea; }

/* ===== BRIQUES (couvertures, avatars, chips catégorie, étoiles) ===== */
.tp-cov {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
    background: #eef2f7;
}
.tp-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-cov-grad::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(255,255,255,0.28), transparent 46%);
}
.tp-cov-mono {
    position: relative;
    z-index: 1;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 3px rgba(26,32,44,0.28);
}
.tp-av {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.tp-av-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
}
.tp-cat {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
/* Étoiles : remplissage clippé étoile par étoile (pas de rangée superposée). */
.tp-stars { display: inline-flex; gap: 2px; line-height: 0; }
.tp-star { position: relative; display: block; color: #cbd5e0; }
.tp-star svg { display: block; }
.tp-star-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    color: #f0b429;
}

/* ===== CARTES TOP ===== */
.tp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
}
@media (max-width: 1140px) { .tp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px) { .tp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tp-grid { grid-template-columns: 1fr; } }

.tcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid transparent;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden;
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
a.tcard:hover, .tcard a:hover { color: inherit; }
a.tcard:hover, .tcard.mine:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.09);
    border-color: rgba(102, 126, 234, 0.35);
}
.tcard-covers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    padding: 14px 16px 0;
}
.tcard-slot { position: relative; }
.tcard-slot .tp-cov { width: 100%; }
.tcard-rank {
    position: absolute;
    top: -5px;
    left: -5px;
    z-index: 2;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 2px 5px rgba(26,32,44,0.28);
}
.r1 { background: linear-gradient(140deg, #f7c948, #dc9b1f); }
.r2 { background: linear-gradient(140deg, #c3c8d1, #9aa1ae); }
.r3 { background: linear-gradient(140deg, #e0a473, #b9773f); }
.tcard-rest {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    background: #f6f7f9;
    border: 1px dashed #cbd5e0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #a0aec0;
}
.tcard-body {
    padding: 14px 16px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.tcard-title {
    margin: 0;
    font-family: var(--mm-font-display, inherit);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.32;
    color: #1a202c;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tcard-by {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #4a5568;
    font-weight: 600;
    margin-top: auto;
    white-space: nowrap;
    overflow: hidden;
}
.tcard-by .dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    display: inline-block;
    flex-shrink: 0;
}
.tcard-foot {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-top: 1px solid var(--mm-hairline, #e2e8f0);
    background: #fafbfc;
}
.tcard-stats {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #a0aec0;
}
.tcard-stats span { display: inline-flex; align-items: center; gap: 5px; }
.tcard-stats svg { display: block; }

/* Carte vedette (1re de la communauté) */
.tp-grid .tcard.feat { grid-column: span 2; }
.tcard.feat .tcard-covers { grid-template-columns: 1.35fr 1fr 1fr 1fr; padding: 16px 18px 0; }
.tcard.feat .tcard-title { font-size: 1.28rem; letter-spacing: -0.02em; }
.tcard.feat .tp-cov-mono { font-size: 18px; }
@media (max-width: 880px) {
    /* Vedette pleine largeur : borner la hauteur des couvertures */
    .tcard.feat .tcard-covers .tp-cov,
    .tcard.feat .tcard-rest { max-height: 190px; }
}
@media (max-width: 560px) {
    .tp-grid .tcard.feat { grid-column: span 1; }
    .tcard.feat .tcard-covers { grid-template-columns: repeat(3, 1fr); }
    .tcard.feat .tcard-slot:nth-child(4) { display: none; }
}

/* Actions « mes tops » */
.tcard-own { display: flex; gap: 8px; padding: 0 16px 14px; }
.tcard-own button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: #4a5568;
    background: white;
    border: 1px solid var(--mm-hairline, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.14s, border-color 0.14s;
}
.tcard-own button:hover { color: #667eea; border-color: #667eea; }
.tcard-own button.del:hover { color: #d0454a; border-color: #e79a9d; }

/* Tuile « créer » */
.tp-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 230px;
    padding: 24px;
    background: rgba(102, 126, 234, 0.04);
    border: 1.5px dashed rgba(102, 126, 234, 0.4);
    border-radius: 16px;
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
}
.tp-new:hover { background: rgba(102, 126, 234, 0.08); border-color: #667eea; }
.tp-new-ic {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
}
.tp-new b { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: #1a202c; }
.tp-new span { font-size: 0.82rem; color: #4a5568; max-width: 22ch; line-height: 1.45; }

/* Bouton « voir plus » de la communauté */
.tp-more-wrap { display: flex; justify-content: center; margin-top: 1.1rem; }

/* ===== RAIL DERNIERS TOPS ===== */
.tp-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(276px, 1fr);
    gap: 14px;
    overflow-x: auto;
    padding: 2px 2px 14px;
    scroll-snap-type: x proximity;
}
.tp-rail::-webkit-scrollbar { height: 8px; }
.tp-rail::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 99px; }
.rail-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    background: white;
    border: 1px solid transparent;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.rail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.09);
    border-color: rgba(102, 126, 234, 0.35);
    color: inherit;
}
.rail-stack { display: flex; flex-shrink: 0; }
.rail-stack .tp-cov { width: 34px; border: 2px solid white; box-shadow: 0 1px 3px rgba(26,32,44,0.16); }
.rail-stack .tp-cov + .tp-cov { margin-left: -13px; }
.rail-stack .tp-cov-mono { font-size: 11px; }
.rail-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.rail-title {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #1a202c;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rail-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: #a0aec0;
    font-weight: 550;
    white-space: nowrap;
    overflow: hidden;
}

/* ===== DERNIERS AVIS ===== */
.rv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 1040px) { .rv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) { .rv-grid { grid-template-columns: 1fr; } }
/* Carte entièrement cliquable → fiche de la référence. */
.rv {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 17px 18px;
    background: white;
    border: 1px solid transparent;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.rv:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.09);
    border-color: rgba(102, 126, 234, 0.35);
    color: inherit;
}
.rv-top { display: flex; align-items: center; gap: 10px; }
.rv-who { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.rv-name { font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em; color: #1a202c; }
.rv-ago { font-size: 0.75rem; color: #a0aec0; font-weight: 550; }
.rv-note { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.rv-note b { font-size: 0.82rem; font-weight: 800; color: #1a202c; }
.rv-prod {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border-radius: 12px;
    background: #fafbfc;
    border: 1px solid var(--mm-hairline, #e2e8f0);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.14s;
}
.rv-prod:hover { border-color: rgba(102, 126, 234, 0.45); color: inherit; }
.rv-prod .tp-cov { width: 38px; }
.rv-prod-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rv-prod-name {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1a202c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rv-prod-ed { font-size: 0.75rem; color: #a0aec0; font-weight: 550; }
.rv-text {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: #4a5568;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== LOADING / EMPTY ===== */
.loading { text-align: center; padding: 2rem; color: var(--mm-muted, #94a3b8); }
.sec-empty {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    padding: 2rem;
    text-align: center;
    color: var(--mm-muted, #94a3b8);
    font-size: 0.92rem;
}

/* ===== POPUP : sélecteur de références + liste triable ===== */
.items-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.6rem;
}
.item-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--mm-surface-2, #f6f7f9);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--mm-hairline, #e2e8f0);
    cursor: grab;
}
.item-row:active { cursor: grabbing; }
.item-row .rank {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    font-family: var(--mm-font-mono, inherit);
}
.item-row .item-name {
    flex: 1;
    font-size: 0.9rem;
    color: #1a202c;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item-row .btn-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mm-muted, #94a3b8);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: all 0.15s;
}
.item-row .btn-remove:hover { color: #b91c1c; background: #fee2e2; }
.items-empty {
    color: var(--mm-muted, #94a3b8);
    font-size: 0.85rem;
    padding: 0.65rem 0.85rem;
    background: var(--mm-surface-2, #f6f7f9);
    border-radius: 10px;
    text-align: center;
}

.search-ref { position: relative; }
.search-ref .ccm-input { height: 44px; font-size: 14px; }
.search-ref-results {
    position: fixed;
    background: white;
    border: 1px solid var(--mm-hairline, #e2e8f0);
    border-radius: 12px;
    /* max-height posée dynamiquement par positionSearchResults() selon
       l'espace disponible (le menu bascule au-dessus du champ si besoin). */
    max-height: 60vh;
    overflow-y: auto;
    z-index: 1100;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    display: none;
}
.search-ref-results.active { display: block; }
.search-ref-item {
    padding: 0.65rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #1a202c;
    border-bottom: 1px solid var(--mm-hairline, #e2e8f0);
    transition: background 0.12s;
}
.search-ref-item:hover { background: var(--mm-surface-2, #f6f7f9); }
.search-ref-item:last-child { border-bottom: 0; }
.search-ref-item small {
    color: var(--mm-muted, #94a3b8);
    margin-left: 0.5rem;
    font-size: 0.78rem;
}
.search-ref-item-meta {
    margin-top: 0.3rem;
    color: var(--mm-muted, #94a3b8);
    font-size: 0.78rem;
    line-height: 1.45;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.45rem;
}
.search-ref-item-meta > span { display: inline-block; }
.search-ref-item-meta .meta-sep { color: #cbd5e0; }
@media (max-width: 600px) {
    .search-ref-item-meta { flex-direction: column; gap: 0.1rem; }
    .search-ref-item-meta .meta-sep { display: none; }
    .search-ref-results {
        position: relative;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto;
        width: auto !important;
        max-height: none !important;
        box-shadow: none;
        margin-top: 0.4rem;
        z-index: auto;
    }
}

.search-ref-popover {
    position: fixed;
    background: white;
    border: 1px solid var(--mm-hairline, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    color: var(--mm-ink-2, #4a5568);
    line-height: 1.5;
    z-index: 1200;
    max-width: 320px;
    min-width: 220px;
    pointer-events: none;
}
.search-ref-popover .pop-title {
    font-family: var(--mm-font-display, inherit);
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.35rem;
    word-wrap: break-word;
}
.search-ref-popover .pop-row { display: flex; gap: 0.4rem; margin-top: 0.15rem; }
.search-ref-popover .pop-key { color: var(--mm-muted, #94a3b8); min-width: 90px; }
.search-ref-popover .pop-val { color: var(--mm-ink, #1a202c); word-break: break-word; }

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

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .container { padding: 1rem 0.75rem 4.5rem; }
    .page-head h1 { font-size: 1.6rem; }
    .page-sub { font-size: 0.88rem; }
    /* Créer un top passe en bouton flottant ; la tuile de création
       de « Mes tops » disparaît (redondante). */
    #createTopBtn { display: none; }
    .tp-new { display: none; }
    .mobile-fab { display: flex; }
    .sec { margin-bottom: 2.2rem; }
    .sec-title { font-size: 1.15rem; }

    /* Bandeau d'ancres : une seule ligne défilante */
    .tp-jump {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
        margin-bottom: 1.2rem;
        scrollbar-width: none;
    }
    .tp-jump::-webkit-scrollbar { display: none; }
    .tp-jump a { flex-shrink: 0; height: 34px; padding: 0 12px; font-size: 0.82rem; white-space: nowrap; }

    /* Recherche pleine largeur, tri en dessous pleine largeur */
    .tp-bar { gap: 0.5rem; }
    .tp-bar .search { flex-basis: 100%; min-width: 0; }
    .tp-bar .sort-select { flex: 1; }

    /* Pastilles de catégories : une seule ligne défilante */
    .tp-bar .tp-chips {
        flex: 1 1 100%;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .tp-bar .tp-chips::-webkit-scrollbar { display: none; }
    .tp-chip { flex-shrink: 0; height: 34px; padding: 0 12px; font-size: 0.82rem; }
}