/* ===== merged: showcase-themes.css ===== */

/* Thèmes vitrine V1 (utilisable sur /boutique et /auth/ma-vitrine) */

:root {
  --vt-white: #fff;
  --vt-white-full: #ffffff;
  --vt-white-warm: #fff4d6;
  --vt-white-cream: #fffbe5;
  --vt-white-gold: #fff8d8;
  --vt-white-peach: #fff0d6;
  --vt-white-sand: #fff0d8;
  --vt-white-soft: rgba(255, 255, 255, 0.04);
  --vt-white-line: rgba(255, 255, 255, 0.06);
  --vt-white-line-medium: rgba(255, 255, 255, 0.08);
  --vt-white-line-strong: rgba(255, 255, 255, 0.14);
  --vt-white-text: rgba(255, 255, 255, 0.92);
  --vt-black-shadow: rgba(0, 0, 0, 0.4);
  --vt-loguetown-primary: #385e6b;
  --vt-loguetown-primary-dark: #2c3e50;
  --vt-loguetown-gold: #f2deb9;
  --vt-loguetown-gold-hover: #e5d4a8;
  --vt-gold-classic: #d4af37;
  --vt-gold-champagne: #d4af7a;
  --vt-neon-cyan: #00f0ff;
  --vt-neon-pink: #ff2bd6;
}

/* Dark luxe (noir profond + or doux) */
.shop-theme-dark_luxe {
  --shop-accent: #c9a46a;
  --shop-accent-2: #6d5b3d;
  --shop-link: #f3e7d3;
  --shop-ink: #0b0f14;
  --shop-surface: #0b0f14;
  --shop-border: rgba(255,255,255,0.12);

  --vitrine-bg-start: #07090d;
  --vitrine-bg-mid: #0b0f14;
  --vitrine-bg-end: #06070a;
  --vitrine-frame: #05060a;
  --vitrine-led: rgba(255, 216, 140, 0.88);
  --vitrine-led-glow: rgba(255, 190, 110, 0.36);
  --vitrine-slot-border: rgba(255, 255, 255, 0.10);
  --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #151a22 0%, #0d1118 55%, #07090d 100%);
  --vitrine-badge-bg: rgba(8, 10, 14, 0.88);
  --vitrine-badge-gold-bg: rgba(201, 164, 106, 0.22);
  --vitrine-badge-gold-text: #f3e2c6;
}

/* Galerie blanche (clair, muséal) */
.shop-theme-white_gallery {
  --shop-accent: #2b4b63;
  --shop-accent-2: #89a5b5;
  --shop-link: #2b4b63;
  --shop-ink: #0f172a;
  --shop-surface: #ffffff;
  --shop-border: rgba(15, 23, 42, 0.12);

  --vitrine-bg-start: #ffffff;
  --vitrine-bg-mid: #f6f7fb;
  --vitrine-bg-end: #eef1f6;
  --vitrine-frame: rgba(15, 23, 42, 0.18);
  --vitrine-frame-highlight: rgba(15, 23, 42, 0.05);
  --vitrine-led: rgba(90, 140, 170, 0.40);
  --vitrine-led-glow: rgba(90, 140, 170, 0.20);
  --vitrine-slot-border: rgba(15, 23, 42, 0.10);
  --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #ffffff 0%, #f6f7fb 55%, #eef1f6 100%);
  --vitrine-glass: rgba(15, 23, 42, 0.04);
  --vitrine-badge-bg: rgba(255, 255, 255, 0.72);
}

/* Forêt (vert profond) */
.shop-theme-forest {
  --shop-accent: #16a34a;
  --shop-accent-2: #0f766e;
  --shop-link: #dcfce7;
  --shop-ink: #071a12;
  --shop-surface: #071a12;
  --shop-border: rgba(255,255,255,0.12);

  --vitrine-bg-start: #071a12;
  --vitrine-bg-mid: #0b241a;
  --vitrine-bg-end: #05110b;
  --vitrine-led: rgba(160, 255, 200, 0.92);
  --vitrine-led-glow: rgba(110, 230, 170, 0.45);
  --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #0f2a1d 0%, #0b1f16 55%, #071a12 100%);
}

/* Néon manga (néon contrôlé, pas “kitsch”) */
.shop-theme-neon_manga {
  --shop-accent: #22c55e;
  --shop-accent-2: #a855f7;
  --shop-link: #e9d5ff;
  --shop-ink: #070a12;
  --shop-surface: #070a12;
  --shop-border: rgba(255,255,255,0.14);

  --vitrine-bg-start: #050613;
  --vitrine-bg-mid: #0a0b1a;
  --vitrine-bg-end: #04040d;
  --vitrine-led: rgba(168, 85, 247, 0.88);
  --vitrine-led-glow: rgba(34, 197, 94, 0.20);
  --vitrine-slot-border: rgba(255,255,255,0.12);
  --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #111232 0%, #0a0b1a 55%, #050613 100%);
  --vitrine-badge-gold-bg: rgba(168, 85, 247, 0.20);
  --vitrine-badge-gold-text: #e9d5ff;
}

/* Musée moderne (béton clair, minimal) */
.shop-theme-modern_museum {
  --shop-accent: #111827;
  --shop-accent-2: #6b7280;
  --shop-link: #111827;
  --shop-ink: #0b1220;
  --shop-surface: #f4f5f7;
  --shop-border: rgba(17, 24, 39, 0.12);

  --vitrine-bg-start: #f4f5f7;
  --vitrine-bg-mid: #e7e9ee;
  --vitrine-bg-end: #d9dde6;
  --vitrine-frame: rgba(17, 24, 39, 0.20);
  --vitrine-led: rgba(17, 24, 39, 0.22);
  --vitrine-led-glow: rgba(17, 24, 39, 0.12);
  --vitrine-slot-border: rgba(17, 24, 39, 0.12);
  --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #f8f9fb 0%, #e7e9ee 55%, #d9dde6 100%);
  --vitrine-glass: rgba(17, 24, 39, 0.04);
  --vitrine-badge-bg: rgba(255,255,255,0.72);
}

/* Loguetown — océan ardoise + or sable (signature du site) */
.shop-theme-loguetown {
  --shop-accent: #f2deb9;
  --shop-accent-2: #385e6b;
  --shop-link: #f2deb9;
  --shop-ink: #06131b;
  --shop-surface: #06131b;
  --shop-border: rgba(242,222,185,0.14);

  --vitrine-bg-start: #06131b;
  --vitrine-bg-mid: #0a1a24;
  --vitrine-bg-end: #050c12;
  --vitrine-frame: #050a10;
  --vitrine-frame-highlight: rgba(242, 222, 185, 0.06);
  --vitrine-led: rgba(242, 222, 185, 0.72);
  --vitrine-led-glow: rgba(56, 94, 107, 0.22);
  --vitrine-slot-border: rgba(242, 222, 185, 0.14);
  --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #132531 0%, #0b1821 55%, #06131b 100%);
  --vitrine-glass: rgba(242, 222, 185, 0.04);
  --vitrine-badge-bg: rgba(6, 12, 18, 0.86);
  --vitrine-badge-gold-bg: rgba(242, 222, 185, 0.16);
  --vitrine-badge-gold-text: #f6e7cd;
}

/* Midnight — bleu nuit + reflets “acier” (froid, élégant) */
.shop-theme-midnight {
  --shop-accent: #93c5fd;
  --shop-accent-2: #a78bfa;
  --shop-link: #dbeafe;
  --shop-ink: #050814;
  --shop-surface: #050814;
  --shop-border: rgba(147, 197, 253, 0.14);

  --vitrine-bg-start: #040814;
  --vitrine-bg-mid: #0a1022;
  --vitrine-bg-end: #02040b;
  --vitrine-frame: #0a1224;
  --vitrine-frame-highlight: rgba(147, 197, 253, 0.06);
  --vitrine-led: rgba(147, 197, 253, 0.70);
  --vitrine-led-glow: rgba(167, 139, 250, 0.22);
  --vitrine-slot-border: rgba(147, 197, 253, 0.12);
  --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #121a34 0%, #0a1022 55%, #040814 100%);
  --vitrine-glass: rgba(147, 197, 253, 0.05);
  --vitrine-badge-bg: rgba(2, 6, 18, 0.86);
  --vitrine-badge-gold-bg: rgba(147, 197, 253, 0.14);
  --vitrine-badge-gold-text: #dbeafe;
}

.shop-theme-ocean {
  --shop-accent: #111827;
  --shop-accent-2: #6b7280;
  --shop-link: #111827;
  --shop-ink: #0b1220;
  --shop-surface: #f4f5f7;
  --shop-border: rgba(17, 24, 39, 0.12);

  --vitrine-bg-start: #f4f5f7;
  --vitrine-bg-mid: #e7e9ee;
  --vitrine-bg-end: #d9dde6;
  --vitrine-frame: rgba(17, 24, 39, 0.20);
  --vitrine-led: rgba(17, 24, 39, 0.22);
  --vitrine-led-glow: rgba(17, 24, 39, 0.12);
  --vitrine-slot-border: rgba(17, 24, 39, 0.12);
  --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #f8f9fb 0%, #e7e9ee 55%, #d9dde6 100%);
  --vitrine-glass: rgba(17, 24, 39, 0.04);
  --vitrine-badge-bg: rgba(255,255,255,0.72);
}

.shop-theme-sunset {
  --shop-accent: #22c55e;
  --shop-accent-2: #a855f7;
  --shop-link: #e9d5ff;
  --shop-ink: #070a12;
  --shop-surface: #070a12;
  --shop-border: rgba(255,255,255,0.14);

  --vitrine-bg-start: #050613;
  --vitrine-bg-mid: #0a0b1a;
  --vitrine-bg-end: #04040d;
  --vitrine-led: rgba(168, 85, 247, 0.88);
  --vitrine-led-glow: rgba(34, 197, 94, 0.20);
  --vitrine-slot-border: rgba(255,255,255,0.12);
  --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #111232 0%, #0a0b1a 55%, #050613 100%);
  --vitrine-badge-gold-bg: rgba(168, 85, 247, 0.20);
  --vitrine-badge-gold-text: #e9d5ff;
}

/* Ambre & braise — rouge profond, accents or / ambre / LED chaudes (rouge → jaune) */
.shop-theme-ember_amber {
  --shop-accent: #fbbf24;
  --shop-accent-2: #ef4444;
  --shop-link: #fde68a;
  --shop-ink: #1a0a0a;
  --shop-surface: #140808;
  --shop-border: rgba(251, 191, 36, 0.16);

  --vitrine-bg-start: #100505;
  --vitrine-bg-mid: #1a0a0c;
  --vitrine-bg-end: #0a0303;
  --vitrine-frame: #3f1518;
  --vitrine-frame-highlight: rgba(251, 191, 36, 0.08);
  --vitrine-led: rgba(251, 191, 36, 0.92);
  --vitrine-led-glow: rgba(248, 113, 113, 0.38);
  --vitrine-slot-border: rgba(251, 191, 36, 0.14);
  --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #2a1214 0%, #1a0a0c 55%, #0d0404 100%);
  --vitrine-glass: rgba(251, 191, 36, 0.04);
  --vitrine-badge-bg: rgba(12, 4, 4, 0.88);
  --vitrine-badge-gold-bg: rgba(251, 191, 36, 0.20);
  --vitrine-badge-gold-text: #fef3c7;
}

/* Saphir minuit — bleu nuit, cyan & indigo (contraste frais) */
.shop-theme-midnight_sapphire {
  --shop-accent: #38bdf8;
  --shop-accent-2: #818cf8;
  --shop-link: #e0f2fe;
  --shop-ink: #050a14;
  --shop-surface: #050a14;
  --shop-border: rgba(56, 189, 248, 0.14);

  --vitrine-bg-start: #040814;
  --vitrine-bg-mid: #0a1224;
  --vitrine-bg-end: #03060e;
  --vitrine-frame: #0c1a2e;
  --vitrine-frame-highlight: rgba(56, 189, 248, 0.06);
  --vitrine-led: rgba(56, 189, 248, 0.88);
  --vitrine-led-glow: rgba(129, 140, 248, 0.35);
  --vitrine-slot-border: rgba(56, 189, 248, 0.12);
  --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #122038 0%, #0c1828 55%, #060d18 100%);
  --vitrine-glass: rgba(56, 189, 248, 0.05);
  --vitrine-badge-bg: rgba(6, 12, 24, 0.88);
  --vitrine-badge-gold-bg: rgba(56, 189, 248, 0.18);
  --vitrine-badge-gold-text: #bae6fd;
}

/* Grès chaud — clair, beige / sable / terracotta (vitrine lumineuse type salon) */
.shop-theme-sandstone_warm {
  --shop-accent: #c2410c;
  --shop-accent-2: #b45309;
  --shop-link: #9a3412;
  --shop-ink: #1c1917;
  --shop-surface: #faf7f2;
  --shop-border: rgba(120, 53, 15, 0.14);

  --vitrine-bg-start: #fffdfb;
  --vitrine-bg-mid: #f5ebe0;
  --vitrine-bg-end: #e8ddd0;
  --vitrine-frame: rgba(180, 83, 9, 0.22);
  --vitrine-frame-highlight: rgba(255, 255, 255, 0.45);
  --vitrine-led: rgba(245, 158, 11, 0.50);
  --vitrine-led-glow: rgba(234, 88, 12, 0.22);
  --vitrine-slot-border: rgba(120, 53, 15, 0.12);
  --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #ffffff 0%, #f7efe6 55%, #ead9c8 100%);
  --vitrine-glass: rgba(120, 53, 15, 0.04);
  --vitrine-badge-bg: rgba(255, 255, 255, 0.82);
  --vitrine-badge-gold-bg: rgba(194, 65, 12, 0.12);
  --vitrine-badge-gold-text: #7c2d12;
}



/* ===== merged: ma-vitrine.css ===== */

/* Ma Vitrine – Interface Loguetown (alignée Mon espace) */

.vitrine-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 48px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* En-tête */
.vitrine-header {
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--shop-accent, var(--vt-loguetown-gold)) 20%, var(--vt-loguetown-gold)) 0%,
        color-mix(in oklab, var(--shop-accent-2, var(--vt-loguetown-gold-hover)) 18%, var(--vt-loguetown-gold-hover)) 55%,
        color-mix(in oklab, var(--shop-accent, #f5e5c8) 14%, #f5e5c8) 100%
    );
    color: var(--shop-ink, var(--vt-loguetown-primary-dark));
    padding: 28px 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(44, 62, 80, 0.1);
    border: 1px solid color-mix(in oklab, var(--shop-accent, rgba(229, 212, 168, 0.5)) 22%, rgba(229, 212, 168, 0.5));
}

.vitrine-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
}

.vitrine-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.vitrine-preview-link--spaced {
    margin-left: 10px;
}

.vitrine-header-text {
    flex: 1;
    min-width: 200px;
}

.vitrine-subtitle {
    margin: 0;
    font-size: 15px;
    color: color-mix(in oklab, var(--shop-accent, var(--vt-loguetown-primary)) 55%, var(--vt-loguetown-primary));
    line-height: 1.45;
}

.btn-add-annonce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: var(--vt-white);
    color: var(--vt-loguetown-primary-dark);
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-add-annonce:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    color: #1f2937;
}

.btn-add-icon {
    font-size: 20px;
    line-height: 1;
}

.btn-add-annonce-large {
    padding: 16px 28px;
    font-size: 16px;
}

.vitrine-header-top{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.vitrine-header-copy{
    min-width: 0;
    flex: 1;
}

.vitrine-header-links{
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vitrine-link-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(44, 62, 80, 0.10);
    color: rgba(44, 62, 80, 0.92);
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.vitrine-link-pill:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,0.75);
    box-shadow: 0 8px 20px rgba(44, 62, 80, 0.10);
}

.vitrine-header-ctas{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    justify-content: flex-start;
}

.vitrine-cta-primary{
    background: rgba(255,255,255,0.92);
}
.vitrine-cta-secondary{
    background: rgba(255,255,255,0.78);
}

.vitrine-header-stats{
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* Stats */
.vitrine-stat-card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    padding: 16px 24px;
    border-radius: 12px;
    text-align: center;
    min-width: 80px;
}

.vitrine-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--vt-loguetown-primary-dark);
}

.vitrine-stat-label {
    font-size: 13px;
    color: var(--vt-loguetown-primary);
}

.vitrine-preview-link {
    margin-left: auto;
    color: var(--vt-loguetown-primary-dark);
    text-decoration: underline;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.2s;
}

.vitrine-preview-link:hover {
    color: var(--vt-loguetown-primary);
}

@media (max-width: 820px) {
    .vitrine-header-top{
        flex-direction: column;
        align-items: stretch;
    }
    .vitrine-header-ctas{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .vitrine-header-ctas .btn-add-annonce{
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .vitrine-header-stats{
        grid-template-columns: 1fr;
    }
    .vitrine-header-ctas{
        flex-direction: column;
    }
}

/* =============================================================================
   Mosaïque : taille visuelle par case (S/M/L) — dashboard uniquement
   - Ne change pas la grille (évite chevauchements), ajuste padding/min-height/image
   ============================================================================= */
.vitrine-showcase .vitrine.vitrine--mosaic .mosaic-slot[data-slot-size="s"] {
    min-height: 92px;
}
.vitrine-showcase .vitrine.vitrine--mosaic .mosaic-slot[data-slot-size="m"] {
    min-height: 104px;
}
.vitrine-showcase .vitrine.vitrine--mosaic .mosaic-slot[data-slot-size="l"] {
    min-height: 128px;
}

.vitrine-showcase .vitrine.vitrine--mosaic .mosaic-slot[data-slot-size="s"] .slot__link {
    padding: 14px 10px 10px;
}
.vitrine-showcase .vitrine.vitrine--mosaic .mosaic-slot[data-slot-size="l"] .slot__link {
    padding: 22px 12px 14px;
}

.vitrine-showcase .vitrine.vitrine--mosaic .mosaic-slot[data-slot-size="s"] .slot__img {
    max-height: 140px;
}
.vitrine-showcase .vitrine.vitrine--mosaic .mosaic-slot[data-slot-size="l"] .slot__img {
    max-height: 280px;
}

.vitrine-showcase .vitrine.vitrine--mosaic .mosaic-slot.slot--ui-selected {
    outline: 2px solid color-mix(in oklab, var(--shop-accent, var(--vt-loguetown-gold)) 70%, var(--vt-white) 30%);
    outline-offset: 2px;
}

/* Zone contenu */
.vitrine-content {
    background: var(--vt-white);
    border-radius: 16px;
    border: 1px solid #eee;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Layout "Grille" : pas de meuble, focus sur la liste */
.vitrine-layout-grid .vitrine-content {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}
.vitrine-layout-grid .vitrine-grid {
    margin-top: 8px;
}

/* Preset "minimal" : cartes plus compactes */
.vitrine-cards-minimal .vitrine-card-body {
    padding: 14px 14px 16px;
}
.vitrine-cards-minimal .vitrine-card-title {
    margin-bottom: 0;
    font-size: 15px;
}
.vitrine-cards-minimal .vitrine-card-actions {
    margin-top: 10px;
}

/* Preset "marketplace" : masque les contrôles (déjà côté PHP), respire sur infos */
.vitrine-cards-marketplace .vitrine-card-price {
    color: var(--shop-accent, var(--vt-loguetown-primary));
}

/* ========== Visuel vitrine type présentoir (grille 3x3 niches) ========== */
/* Bloc vitrine (meuble + footer) : fond sombre pour le pied de section */
.vitrine-showcase {
    margin-bottom: 32px;
    background: linear-gradient(165deg, #1a1d23 0%, #252a33 30%, #1e2228 100%);
    border-radius: 20px;
    padding: 16px 16px 20px;
    box-shadow: 0 8px 32px var(--vt-black-shadow), inset 0 1px 0 var(--vt-white-line);
    border: 1px solid var(--vt-white-line-medium);
}

.vitrine-showcase .vitrine {
    margin-bottom: 0;
}

.vitrine-niches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
    aspect-ratio: 1;
    max-height: 420px;
}

.vitrine-niche {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, #2d323a 0%, #1e2228 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--vt-white-line), inset 0 60px 80px -40px var(--vt-white-soft);
}

.vitrine-niche-inner {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.vitrine-niche-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.vitrine-niche-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    padding: 8px;
    transition: transform 0.35s ease;
}

.vitrine-niche:hover .vitrine-niche-link img {
    transform: scale(1.06);
}

.vitrine-niche-placeholder {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    padding: 12px;
    text-align: center;
    display: block;
    word-break: break-word;
}

.vitrine-niche-badges {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.vitrine-niche-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.7);
    color: var(--vt-loguetown-gold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.vitrine-niche-badge-sm {
    font-size: 9px;
    padding: 2px 6px;
    background: rgba(242, 222, 185, 0.25);
    color: var(--vt-white);
}

/* Effet vitre devant chaque niche (statue derrière une vitre) */
.vitrine-niche::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.2) 0%,
        var(--vt-white-line) 28%,
        transparent 52%,
        transparent 72%,
        var(--vt-white-soft) 100%
    );
    box-shadow: inset 0 0 0 1px var(--vt-white-line-strong), inset 0 2px 6px var(--vt-white-line);
}

.vitrine-niche-empty .vitrine-niche-inner {
    background: linear-gradient(180deg, #252a33 0%, #1e2228 100%);
}

.vitrine-niche-slot-vide {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    text-align: center;
    padding: 12px;
}

/* Pied de la vitrine : titre + prix + boutons */
.vitrine-showcase-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin-top: 16px;
    padding: 12px 4px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.vitrine-showcase-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--vt-loguetown-gold);
}

.vitrine-showcase-total {
    font-size: 22px;
    font-weight: 800;
    color: var(--vt-white);
    margin-left: auto;
}

.vitrine-showcase-actions {
    display: flex;
    gap: 10px;
}

.vitrine-placement-banner{
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(15, 23, 42, 0.35);
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 1.35;
    backdrop-filter: blur(10px);
}

.vitrine-placement-banner strong{
    font-weight: 900;
}

.vitrine-placement-banner__kbd{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 8px;
    margin-left: 6px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.28);
    font-weight: 900;
    letter-spacing: 0.02em;
}

.btn-showcase {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    /* Empêcher la casse lettre par lettre sur mobile */
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Priorité sur le style global .account-page-content a (qui casse les mots) */
.vitrine-showcase-actions a.btn-showcase,
.vitrine-showcase-actions button.btn-showcase {
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    white-space: normal !important;
    hyphens: manual;
}

.btn-showcase-primary {
    background: var(--vt-loguetown-gold);
    color: #1a1d23;
}

.btn-showcase-primary:hover {
    background: var(--vt-loguetown-gold-hover);
    color: #1a1d23;
    transform: translateY(-1px);
}

.btn-showcase-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: var(--vt-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-showcase-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--vt-white);
}

/* État vide */
.vitrine-empty {
    text-align: center;
    padding: 64px 24px;
}

.vitrine-empty-icon {
    font-size: 72px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.vitrine-empty-title {
    margin: 0 0 12px 0;
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
}

.vitrine-empty-text {
    margin: 0 0 28px 0;
    color: #6b7280;
    font-size: 16px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Grille d’annonces — alignée sur « Personnaliser ma vitrine » (grid_cols + slot_size) */
.vitrine-grid {
    display: grid;
    padding: 0.25rem 0;
    align-items: start; /* évite l’étirement vertical des cartes */
}

/* Bandeau “Inventaire + filtre” : barre au-dessus de la grille */
.vitrine-page .vitrine-grid > .vitrine-grid-head {
    grid-column: 1 / -1;
    position: sticky;
    top: 12px;
    z-index: 5;
    margin: 0 0 18px 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--vt-white-text);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
}

.vitrine-page .vitrine-grid > .vitrine-grid-head .vitrine-grid-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--primary-dark);
}

.vitrine-page .vitrine-grid > .vitrine-grid-head .vitrine-grid-subtitle {
    margin-top: 4px;
    color: rgba(71, 85, 105, 0.95);
}

.vitrine-page .vitrine-grid > .vitrine-grid-head .vitrine-grid-tools {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: min(520px, 100%);
}

.vitrine-page .vitrine-grid > .vitrine-grid-head .vitrine-grid-search {
    width: min(360px, 56vw);
}

@media (max-width: 640px) {
    .vitrine-page .vitrine-grid > .vitrine-grid-head {
        position: static;
        padding: 12px 12px;
    }
    .vitrine-page .vitrine-grid > .vitrine-grid-head .vitrine-grid-tools {
        width: 100%;
        justify-content: stretch;
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
    }
    .vitrine-page .vitrine-grid > .vitrine-grid-head .vitrine-grid-search {
        width: 100%;
    }
}

/* ============================
   Pills “STYLE” sous la vitrine
   ============================ */
.vitrine-stylehint{
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: rgba(226,232,240,0.75);
    margin-right: 2px;
}
.vitrine-pill--save{
    margin-left: auto;
    border-color: rgba(242,222,185,0.55);
    background: rgba(242,222,185,0.14);
    color: rgba(242,222,185,0.95);
}
.vitrine-pill--save:hover{
    border-color: rgba(242,222,185,0.9);
    background: rgba(242,222,185,0.18);
}
.vitrine-pill--save[data-saving="1"]{
    opacity: 0.75;
    cursor: progress;
}
.vitrine-pill--save[data-saved="1"]{
    border-color: rgba(34,211,238,0.65);
    background: rgba(34,211,238,0.14);
    color: rgba(226,232,240,0.96);
}
.vitrine-style-note{
    margin-top: 8px;
    color: rgba(226,232,240,0.70);
    font-size: 0.88rem;
    font-weight: 500;
}

#vitrine-density-preview{
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.22);
    color: rgba(255, 255, 255, 0.86);
}

#vitrine-density-preview strong{
    font-weight: 900;
    color: var(--vt-white);
}

/* Réorganisation du panneau STYLE (pills) */
.vitrine-stylepanel{
    align-items: stretch;
}
.vitrine-stylepanel-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.vitrine-stylehead-left{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.vitrine-stylehead-actions{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.vitrine-style-summary{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    color: rgba(226,232,240,0.78);
    font-size: 0.86rem;
    font-weight: 600;
}
.vitrine-style-summary .chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.18);
    color: rgba(255,255,255,0.88);
    white-space: nowrap;
}

.vitrine-pill--ghost{
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: rgba(226,232,240,0.92);
}
.vitrine-pill--ghost:hover{
    background: rgba(255,255,255,0.09);
}

.vitrine-stylepanel-body{
    margin-top: 10px;
}
.vitrine-stylepanel.is-collapsed .vitrine-stylepanel-body{
    display: none;
}

.vitrine-stylepanel-grid{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px 14px;
    margin-top: 10px;
    width: 100%;
}
.vitrine-styleblock{
    min-width: 0;
}
.vitrine-stylelabel{
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(226,232,240,0.70);
    margin: 2px 0 8px;
}
/* Le groupe "thème" prend toute la largeur */
.vitrine-styleblock:first-child{
    grid-column: 1 / -1;
}
/* Thèmes: scroll horizontal propre si trop de pills */
.vitrine-styleblock:first-child .vitrine-stylegroup{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    gap: 8px;
    scroll-snap-type: x mandatory;
}
.vitrine-styleblock:first-child .vitrine-pill{
    scroll-snap-align: start;
    white-space: nowrap;
}
/* Les autres groupes peuvent wrap */
.vitrine-styleblock:not(:first-child) .vitrine-stylegroup{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vitrine-styleblock--mosaic-only{
    display: none;
}
.vitrine-stylepanel.is-mosaic .vitrine-styleblock--mosaic-only{
    display: block;
}
/* Mobile: une seule colonne */
@media (max-width: 720px){
    .vitrine-stylepanel-grid{
        grid-template-columns: 1fr;
    }
    .vitrine-style-summary{
        display: none; /* trop chargé sur mobile : on garde juste “Options” */
    }
}

/* Ma vitrine (compte) : grille fluide, évite colonnes trop étroites */
.vitrine-page .vitrine-grid[class*="shop-grid-cols"] {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

@media (min-width: 1200px) {
    .vitrine-page .vitrine-grid[class*="shop-grid-cols"] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
}
.vitrine-page.vitrine-slot-s .vitrine-grid {
    gap: 1.25rem;
}
.vitrine-page.vitrine-slot-m .vitrine-grid {
    gap: 1.75rem;
}
.vitrine-page.vitrine-slot-l .vitrine-grid {
    gap: 2rem;
}
/* Taille M — mêmes minmax que la boutique publique (boutique.css) */
.vitrine-page.vitrine-slot-m .vitrine-grid.shop-grid-cols-2 { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
.vitrine-page.vitrine-slot-m .vitrine-grid.shop-grid-cols-3 { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
.vitrine-page.vitrine-slot-m .vitrine-grid.shop-grid-cols-4 { grid-template-columns: repeat(4, minmax(200px, 1fr)); }
.vitrine-page.vitrine-slot-m .vitrine-grid.shop-grid-cols-5 { grid-template-columns: repeat(5, minmax(180px, 1fr)); }
.vitrine-page.vitrine-slot-m .vitrine-grid.shop-grid-cols-6 { grid-template-columns: repeat(6, minmax(170px, 1fr)); }
/* Taille S — cases plus compactes */
.vitrine-page.vitrine-slot-s .vitrine-grid.shop-grid-cols-2 { grid-template-columns: repeat(2, minmax(175px, 1fr)); }
.vitrine-page.vitrine-slot-s .vitrine-grid.shop-grid-cols-3 { grid-template-columns: repeat(3, minmax(175px, 1fr)); }
.vitrine-page.vitrine-slot-s .vitrine-grid.shop-grid-cols-4 { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
.vitrine-page.vitrine-slot-s .vitrine-grid.shop-grid-cols-5 { grid-template-columns: repeat(5, minmax(145px, 1fr)); }
.vitrine-page.vitrine-slot-s .vitrine-grid.shop-grid-cols-6 { grid-template-columns: repeat(6, minmax(135px, 1fr)); }
/* Taille L — cases plus larges */
.vitrine-page.vitrine-slot-l .vitrine-grid.shop-grid-cols-2 { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
.vitrine-page.vitrine-slot-l .vitrine-grid.shop-grid-cols-3 { grid-template-columns: repeat(3, minmax(260px, 1fr)); }
.vitrine-page.vitrine-slot-l .vitrine-grid.shop-grid-cols-4 { grid-template-columns: repeat(4, minmax(240px, 1fr)); }
.vitrine-page.vitrine-slot-l .vitrine-grid.shop-grid-cols-5 { grid-template-columns: repeat(5, minmax(220px, 1fr)); }
.vitrine-page.vitrine-slot-l .vitrine-grid.shop-grid-cols-6 { grid-template-columns: repeat(6, minmax(210px, 1fr)); }
/* Fallback si classes absentes */
.vitrine-grid:not([class*="shop-grid-cols"]) {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.75rem;
}

/* Empêcher le débordement horizontal : réduire le nombre de colonnes si l’écran est trop étroit */
@media (max-width: 1200px) {
    .vitrine-page .vitrine-grid.shop-grid-cols-6 { grid-template-columns: repeat(4, minmax(200px, 1fr)); }
    .vitrine-page .vitrine-grid.shop-grid-cols-5 { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
    .vitrine-page .vitrine-grid.shop-grid-cols-4 { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 900px) {
    .vitrine-page .vitrine-grid.shop-grid-cols-6,
    .vitrine-page .vitrine-grid.shop-grid-cols-5,
    .vitrine-page .vitrine-grid.shop-grid-cols-4,
    .vitrine-page .vitrine-grid.shop-grid-cols-3 { grid-template-columns: repeat(2, minmax(175px, 1fr)); }
}
@media (max-width: 600px) {
    .vitrine-page .vitrine-grid[class*="shop-grid-cols"] { grid-template-columns: 1fr; }
}

.vitrine-card {
    border: 1px solid rgba(44, 62, 80, 0.06);
    border-radius: 16px;
    overflow: hidden;
    background: var(--vt-white);
    box-shadow: 0 2px 12px rgba(44, 62, 80, 0.04), 0 8px 32px -8px rgba(44, 62, 80, 0.08);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.vitrine-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -8px rgba(44, 62, 80, 0.12);
    border-color: var(--vt-loguetown-gold);
}

.vitrine-card-image {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    overflow: hidden;
}

/* Effet vitre devant l'image (comme derrière une vitrine) */
.vitrine-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Reflet de verre + bord de vitre */
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.22) 0%,
        var(--vt-white-line-medium) 30%,
        transparent 55%,
        transparent 75%,
        var(--vt-white-soft) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.vitrine-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.vitrine-card:hover .vitrine-card-image img {
    transform: scale(1.04);
}

.vitrine-card-placeholder {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.vitrine-card-status {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.6);
    color: var(--vt-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(6px);
}

.vitrine-card-active .vitrine-card-status {
    background: rgba(16, 185, 129, 0.9);
}

.vitrine-card-sold .vitrine-card-status {
    background: rgba(107, 114, 128, 0.9);
}

.vitrine-card-archived .vitrine-card-status {
    background: rgba(156, 163, 175, 0.9);
}

.vitrine-card-body {
    padding: 1.25rem 1.35rem;
    background: linear-gradient(to bottom, var(--vt-white-full) 0%, #fefefe 100%);
    flex: 1 1 auto;
    min-height: 0;
}

.vitrine-card-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.vitrine-card-title a {
    color: #1f2937;
    text-decoration: none;
    transition: color 0.2s;
}

.vitrine-card-title a:hover {
    color: var(--vt-loguetown-gold);
}

.vitrine-card-price {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--vt-loguetown-gold);
}

.vitrine-card-date {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: #6b7280;
}

.vitrine-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: auto; /* colle les boutons en bas de carte */
}

/* Contrôles vitrine (vedette / avant / note) */
.showcase-controls {
    margin: 12px 0 14px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in oklab, var(--shop-accent, var(--vt-loguetown-gold)) 22%, rgba(44, 62, 80, 0.08));
    background: color-mix(in oklab, var(--vt-white-full) 92%, var(--shop-accent, var(--vt-loguetown-gold)));
}

.showcase-controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.showcase-chip {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(44, 62, 80, 0.12);
    color: rgba(44, 62, 80, 0.8);
    background: rgba(255, 255, 255, 0.75);
}

.showcase-chip.is-on {
    border-color: color-mix(in oklab, var(--shop-accent, var(--vt-loguetown-primary)) 40%, rgba(44, 62, 80, 0.18));
    color: var(--vt-white);
    background: linear-gradient(135deg, var(--shop-accent, var(--vt-loguetown-primary)), var(--shop-accent-2, #6f8d99));
}

.showcase-controls-form {
    margin: 0;
}

.showcase-btn {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(44, 62, 80, 0.16);
    background: rgba(255, 255, 255, 0.85);
    color: rgba(31, 41, 55, 0.95);
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}

.showcase-btn:hover {
    border-color: color-mix(in oklab, var(--shop-accent, var(--vt-loguetown-primary)) 45%, rgba(44, 62, 80, 0.18));
}

.showcase-note-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0;
}

.showcase-note-input {
    flex: 1;
    min-width: 220px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(44, 62, 80, 0.14);
    font-family: inherit;
}

.vitrine-card-delete-form {
    display: inline-block;
    margin: 0;
}

.btn-card-action {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.btn-card-primary {
    background: var(--vt-loguetown-gold);
    color: var(--vt-white);
}

.btn-card-primary:hover {
    background: var(--vt-loguetown-gold-hover);
    color: var(--vt-white);
}

.btn-card-secondary {
    background: #f3f4f6;
    color: #374151;
}

.btn-card-secondary:hover {
    background: #e5e7eb;
    color: #1f2937;
}

.btn-card-danger {
    background: transparent;
    color: #b91c1c;
    border: 1px solid #b91c1c;
    cursor: pointer;
    font-family: inherit;
}

.btn-card-danger:hover {
    background: #fef2f2;
    color: #991b1b;
}

/* Responsive */
/* Responsive vitrine showcase */
@media (max-width: 768px) {
    .vitrine-niches {
        max-height: 320px;
        gap: 8px;
    }

    .vitrine-showcase-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .vitrine-showcase-total {
        margin-left: 0;
    }

    .vitrine-showcase-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Boutons de la vitrine : 2 colonnes lisibles (puis 1 colonne si nécessaire) */
    .vitrine-showcase-actions a.btn-showcase,
    .vitrine-showcase-actions button.btn-showcase {
        flex: 1 1 calc(50% - 10px) !important;
        max-width: calc(50% - 10px);
        min-width: 160px;
        min-height: 44px;
        padding: 12px 14px;
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .vitrine-showcase-actions a.btn-showcase,
    .vitrine-showcase-actions button.btn-showcase {
        flex: 1 1 100% !important;
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .vitrine-niches {
        max-height: 260px;
        gap: 6px;
    }

    .vitrine-niche-badge {
        font-size: 9px;
        padding: 2px 6px;
    }
}

@media (max-width: 768px) {
    .vitrine-page {
        padding: 0 16px 32px;
    }

    .vitrine-header {
        padding: 24px 20px;
    }

    .vitrine-header-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .btn-add-annonce,
    .btn-add-annonce-large {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .vitrine-stats-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .vitrine-stat-card {
        min-width: auto;
    }

    .vitrine-preview-link {
        margin-left: 0;
        text-align: center;
    }

    /* Une colonne sur mobile même si shop-grid-cols-* (spécificité > règles desktop) */
    .vitrine-page .vitrine-grid[class*="shop-grid-cols"] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vitrine-content {
        padding: 20px 16px;
    }

    .vitrine-card-actions {
        flex-wrap: wrap;
    }

    .btn-card-action {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .vitrine-page {
        padding: 0 12px 24px;
    }

    .vitrine-content {
        padding: 16px 12px;
    }
}

/* Mobile : ergonomie "Ma vitrine" (zones tap, textes, débordements) */
@media (max-width: 480px) {
    .vitrine-showcase-title {
        font-size: 16px;
    }
    .vitrine-showcase-subtitle {
        font-size: 12px;
    }
    .vitrine-showcase-total {
        font-size: 18px;
    }

    /* Liens pill du header : plein écran, plus facile à cliquer */
    .vitrine-header-links {
        flex-direction: column;
        align-items: stretch;
    }
    .vitrine-link-pill {
        width: 100%;
    }

    /* Panneau STYLE : éviter que les groupes débordent */
    .vitrine-stylegroup {
        max-width: 100%;
    }
    .vitrine-stylepanel-grid {
        gap: 10px;
    }
    .vitrine-pill {
        min-height: 40px;
    }
}

@media (max-width: 360px) {
    .vitrine-showcase-actions a.btn-showcase,
    .vitrine-showcase-actions button.btn-showcase {
        padding: 12px 12px;
        font-size: 13px;
    }
}

/* Mobile web Ma vitrine : cartes annonces (photos moins hautes) — le meuble est affiné dans vitrine.css */
@media (max-width: 768px) {
    .vitrine-page .vitrine-card-image {
        aspect-ratio: 4 / 3;
        max-height: 160px;
    }

    .vitrine-page .vitrine-card-placeholder {
        min-height: 0;
        aspect-ratio: 4 / 3;
        max-height: 160px;
    }

    .vitrine-page .vitrine-card-body {
        padding: 10px 12px 12px;
    }

    .vitrine-page .vitrine-card-title {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .vitrine-page .vitrine-card-price {
        font-size: 17px;
        margin-bottom: 4px;
    }

    .vitrine-page .showcase-controls {
        margin: 8px 0 10px;
        padding: 10px;
    }

    /* Mise en avant : réservé au bureau / tablette (allège la liste sur téléphone) */
    .vitrine-page .showcase-highlight-tools {
        display: none;
    }

    .vitrine-page .vitrine-showcase {
        padding: 10px 8px 14px;
        margin-bottom: 16px;
    }
}

@media (max-width: 420px) {
    .vitrine-page .vitrine-card-image,
    .vitrine-page .vitrine-card-placeholder {
        max-height: 132px;
    }
}

/* Messages flash (ex. CSRF vitrine) */
.vitrine-flash {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-weight: 600;
}
.vitrine-flash--err {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ==========================================================
   Vitrine "glass" (réintroduite, sans compilation Tailwind)
   ========================================================== */

.vitrine-showcase--glass{
    position: relative;
    overflow: hidden;
}
.vitrine-showcase--glass .vitrine-showcase-stage{
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.vitrine-showcase--glass .vitrine-showcase-glass{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 260px at 20% 0%, rgba(242,222,185,0.12), transparent 60%),
        radial-gradient(900px 260px at 80% 0%, rgba(56,94,107,0.20), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 35%, rgba(0,0,0,0.0) 100%);
    backdrop-filter: blur(12px);
    opacity: 0.95;
}
.vitrine-showcase--glass .vitrine-showcase-spotlights{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(260px 160px at 18% 18%, rgba(255,255,255,0.10), transparent 70%),
        radial-gradient(300px 180px at 52% 14%, rgba(255,255,255,0.10), transparent 72%),
        radial-gradient(260px 160px at 84% 18%, rgba(255,255,255,0.10), transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.8;
}
.vitrine-showcase--glass .vitrine-showcase-vignette{
    position: absolute;
    inset: 0;
    background: radial-gradient(90% 75% at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.65) 100%);
}
.vitrine-showcase--glass .vitrine-showcase-inner{
    position: relative;
    padding: 22px 18px 12px 18px;
}

/* Pills (ligne de style) */
.vitrine-stylehint{
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: rgba(226,232,240,0.75);
    margin-right: 2px;
}
.vitrine-pill--save{
    margin-left: auto;
    border-color: rgba(242,222,185,0.55);
    background: rgba(242,222,185,0.14);
    color: rgba(242,222,185,0.95);
}
.vitrine-pill--save:hover{
    border-color: rgba(242,222,185,0.9);
    background: rgba(242,222,185,0.18);
}
.vitrine-style-note{
    margin-top: 8px;
    color: rgba(226,232,240,0.70);
    font-size: 0.88rem;
    font-weight: 500;
}


/* ===== merged: vitrine.css ===== */

/**
 * Vitrine – Meuble vitré premium (réaliste, verre, LED, slots)
 * Variables CSS, responsive, prefers-reduced-motion.
 */

/* ---- Variables ---- */
:root {
    --vitrine-bg-start: #16191f;
    --vitrine-bg-mid: #1e2229;
    --vitrine-bg-end: #14171c;
    --vitrine-frame: #0d0f12;
    --vitrine-frame-highlight: rgba(255, 255, 255, 0.04);
    --vitrine-shadow-deep: 0 24px 60px rgba(0, 0, 0, 0.6);
    --vitrine-shadow-inner: inset 0 2px 20px rgba(0, 0, 0, 0.4);
    --vitrine-glass: rgba(255, 255, 255, 0.04);
    --vitrine-slot-bg: radial-gradient(ellipse 80% 70% at 50% 40%, #2a2f38 0%, #1f232a 50%, #181c22 100%);
    --vitrine-slot-border: rgba(255, 255, 255, 0.06);
    --vitrine-slot-shadow-out: 0 8px 24px rgba(0, 0, 0, 0.45);
    --vitrine-slot-shadow-in: inset 0 2px 12px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
    /* Par défaut: lumière chaude premium (showroom) */
    --vitrine-led: rgba(255, 216, 140, 0.88);
    --vitrine-led-glow: rgba(255, 190, 110, 0.36);
    --vitrine-badge-bg: rgba(20, 22, 28, 0.85);
    --vitrine-badge-gold-bg: rgba(212, 175, 55, 0.25);
    --vitrine-badge-gold-text: #e8d48a;
    --vitrine-empty-icon-bg: rgba(255, 255, 255, 0.06);
    --vitrine-empty-icon-border: rgba(255, 255, 255, 0.12);

    /* Spotlight / hiérarchie (vedette / mise en avant) */
    --vitrine-spot-featured: rgba(255, 214, 140, 0.22);
    --vitrine-spot-highlight: rgba(255, 214, 140, 0.12);
    --vitrine-spot-ring: rgba(255, 214, 140, 0.35);
}

/* ---- Meuble (cadre + fond + profondeur) ---- */
.vitrine {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    overflow: hidden;
    /* Fond premium + profondeur (coin vignette + halo ambre discret) */
    background:
        radial-gradient(1200px 420px at 18% 0%, color-mix(in oklab, var(--vitrine-led) 16%, transparent) 0%, transparent 60%),
        radial-gradient(900px 380px at 82% 0%, color-mix(in oklab, var(--vitrine-led) 10%, transparent) 0%, transparent 62%),
        radial-gradient(1100px 520px at 50% 40%, var(--vt-white-soft) 0%, transparent 55%),
        linear-gradient(175deg, var(--vitrine-bg-start) 0%, var(--vitrine-bg-mid) 35%, var(--vitrine-bg-end) 100%);
    /* Cadre extérieur (épaisseur visuelle) + double liseré “écrin” */
    border: 2px solid color-mix(in oklab, var(--vitrine-frame) 70%, rgba(255, 255, 255, 0.10));
    border-radius: 20px;
    box-shadow:
        var(--vitrine-shadow-deep),
        0 8px 32px var(--vt-black-shadow),
        var(--vitrine-shadow-inner),
        inset 0 1px 0 var(--vitrine-frame-highlight);
}

/* Taille des cases : doit impacter la taille réelle des slots.
   Comme les slots sont en aspect-ratio:1, le plus visible est d'ajuster
   l'espace intérieur du meuble (padding) pour changer la largeur disponible. */
.vitrine.vitrine-size-s { padding: 12px; border-radius: 18px; }
.vitrine.vitrine-size-m { padding: 20px; border-radius: 20px; }
.vitrine.vitrine-size-l { padding: 28px; border-radius: 24px; }

/*
 * Taille des cases (S / M / L) : les slots sont carrés (aspect-ratio:1), donc leur
 * côté suit surtout la largeur utile. On borne la largeur du meuble pour que S/M/L
 * restent clairement distincts (Ma vitrine + boutique publique).
 */
.vitrine-showcase .vitrine.vitrine-size-s,
.shop-shelf .vitrine.vitrine-size-s {
    max-width: min(520px, 100%);
    margin-inline: auto;
}
.vitrine-showcase .vitrine.vitrine-size-m,
.shop-shelf .vitrine.vitrine-size-m {
    max-width: min(760px, 100%);
    margin-inline: auto;
}
.vitrine-showcase .vitrine.vitrine-size-l,
.shop-shelf .vitrine.vitrine-size-l {
    max-width: 100%;
}

.vitrine::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
        inset 0 1px 0 var(--vt-white-line),
        0 0 0 1px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 0;
}

/* Reflet verre diagonal global (animé très subtil) */
.vitrine::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        128deg,
        rgba(255, 255, 255, 0.07) 0%,
        transparent 25%,
        transparent 60%,
        rgba(255, 255, 255, 0.02) 100%
    );
    pointer-events: none;
    animation: vitrine-glass-shine 9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .vitrine::after {
        animation: none;
    }
}

@keyframes vitrine-glass-shine {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* ---- Étagère ---- */
.etagere {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 22px 6px 26px;
    position: relative;
    min-height: 140px;
}

/* Colonnes configurables (2..6) */
.vitrine-cols-2 .etagere { grid-template-columns: repeat(2, 1fr); }
.vitrine-cols-3 .etagere { grid-template-columns: repeat(3, 1fr); }
.vitrine-cols-4 .etagere { grid-template-columns: repeat(4, 1fr); }
.vitrine-cols-5 .etagere { grid-template-columns: repeat(5, 1fr); }
.vitrine-cols-6 .etagere { grid-template-columns: repeat(6, 1fr); }

/* Mobile: éviter l'effet "tout se resserre" -> on cape les colonnes */
@media (max-width: 720px) {
    .vitrine-cols-3 .etagere,
    .vitrine-cols-4 .etagere,
    .vitrine-cols-5 .etagere,
    .vitrine-cols-6 .etagere {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .vitrine.vitrine-size-s {
        padding: 10px;
        border-radius: 16px;
    }
    .vitrine.vitrine-size-m {
        padding: 12px;
        border-radius: 18px;
    }
    .vitrine.vitrine-size-l {
        padding: 14px;
        border-radius: 20px;
    }
    .vitrine-size-s .etagere {
        gap: 8px;
        padding: 12px 3px 16px;
        min-height: 100px;
        border-radius: 14px;
    }
    .vitrine-size-m .etagere {
        gap: 10px;
        padding: 14px 4px 18px;
        min-height: 110px;
        border-radius: 16px;
    }
    .vitrine-size-l .etagere {
        gap: 12px;
        padding: 16px 5px 20px;
        min-height: 122px;
        border-radius: 16px;
    }
}

@media (max-width: 420px) {
    .vitrine-cols-2 .etagere,
    .vitrine-cols-3 .etagere,
    .vitrine-cols-4 .etagere,
    .vitrine-cols-5 .etagere,
    .vitrine-cols-6 .etagere {
        grid-template-columns: 1fr;
    }
    .vitrine-size-s .etagere {
        gap: 8px;
        padding: 10px 3px 12px;
        min-height: 86px;
    }
    .vitrine-size-m .etagere {
        gap: 10px;
        padding: 12px 4px 14px;
        min-height: 96px;
    }
    .vitrine-size-l .etagere {
        gap: 10px;
        padding: 13px 4px 15px;
        min-height: 104px;
    }
}

/* Mosaïque (page vitrine compte) : 1 colonne sur très petits écrans */
@media (max-width: 360px) {
    .vitrine-page .vitrine-showcase .vitrine--mosaic .mosaic-grid {
        grid-template-columns: 1fr !important;
    }
    .vitrine-page .vitrine-showcase .vitrine--mosaic .mosaic-slot--0 {
        grid-column: 1 / 2 !important;
    }
}

/* Tailles (presets) */
.vitrine-size-s .etagere { gap: 12px; padding: 18px 4px 24px; min-height: 120px; }
.vitrine-size-m .etagere { gap: 16px; padding: 22px 6px 26px; min-height: 140px; }
.vitrine-size-l .etagere { gap: 18px; padding: 26px 8px 30px; min-height: 160px; }

.etagere + .etagere {
    border-top: 1px solid var(--vt-white-soft);
}

/* LED + support d’étagère (montée en scène, warm) */
.etagere::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 0;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--vitrine-led) 12%,
        color-mix(in oklab, var(--vitrine-led) 65%, rgba(255, 255, 255, 1)) 50%,
        var(--vitrine-led) 88%,
        transparent 100%
    );
    box-shadow:
        0 0 14px var(--vitrine-led-glow),
        0 0 28px color-mix(in oklab, var(--vitrine-led-glow) 70%, transparent),
        0 2px 4px rgba(0, 0, 0, 0.2);
    animation: vitrine-led-pulse 4s ease-in-out infinite;
}

.etagere::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    height: 10px;
    border-radius: 999px;
    background:
        linear-gradient(180deg,
            var(--vt-white-line) 0%,
            rgba(255, 255, 255, 0.02) 45%,
            rgba(0, 0, 0, 0.35) 100%
        );
    box-shadow:
        inset 0 1px 0 var(--vt-white-line),
        0 10px 22px rgba(0, 0, 0, 0.28);
    opacity: 0.65;
    pointer-events: none;
}

/* “Plateau” d’étagère en bas (effet support, pas une bordure) */
.etagere {
    padding-bottom: 34px; /* laisse de la place au plateau */
}
.etagere .slot {
    z-index: 1; /* au-dessus du plateau */
}
.etagere::marker { content: ""; } /* no-op (évite styles listes) */
.etagere::selection { background: transparent; } /* no-op */
.etagere .slot__link { padding-bottom: 8px; }
.etagere::after {
    /* garde le support haut existant, mais on ajoute le plateau bas via box-shadow */
    box-shadow:
        inset 0 1px 0 var(--vt-white-line),
        0 10px 22px rgba(0, 0, 0, 0.28),
        0 46px 0 -36px rgba(255, 216, 140, 0.06); /* lueur douce vers le bas */
}

.etagere::after,
.etagere::before {
    pointer-events: none;
}

.etagere::after {
    /* support haut inchangé, mais on ajoute un “plateau bas” via pseudo-element dédié */
}
.etagere::after { }

.etagere::after { }

.etagere::after { }

/* Plateau bas dédié */
.etagere::before { }
.etagere::after { }

.etagere::after { }

.etagere::before { }

.etagere::after { }

.etagere::before { }

.etagere::after { }

.etagere::before { }

/* NB: on utilise un nouveau pseudo-element via background du conteneur vitrine,
   mais comme ::before/::after sont déjà pris, on crée le plateau avec un gradient sur la rangée */
.etagere {
    background:
        /* plateau bas */
        linear-gradient(180deg,
            transparent 0%,
            transparent 78%,
            rgba(255, 216, 140, 0.10) 82%,
            rgba(255, 216, 140, 0.06) 86%,
            rgba(0, 0, 0, 0.40) 100%
        );
    border-radius: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .etagere::before {
        animation: none;
        opacity: 0.9;
    }
}

@keyframes vitrine-led-pulse {
    0%, 100% { opacity: 0.88; filter: brightness(0.95); }
    50%      { opacity: 1;   filter: brightness(1.05); }
}

/* ---- Slot premium ---- */
.slot {
    position: relative;
    aspect-ratio: 1;
    min-height: 100px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* objets posés, pas centrés */
    justify-content: center;
    /* Slots “invisibles”: zone d’exposition sans quadrillage apparent */
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.25s ease;
}

/* Reflet léger sur chaque slot */
.slot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: none; /* supprime le “verre de case” */
    pointer-events: none;
}

/* Effet vitre devant chaque statue (verre de vitrine) */
.slot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: none;
    box-shadow: none;
    opacity: 1;
}

.slot--highlighted {
    border-color: transparent;
}

.slot--featured::before,
.slot--highlighted::before {
    /* Spotlight: faisceau doux venant du haut + halo */
    background:
        /* faisceau */
        radial-gradient(140px 80px at 50% 0%, rgba(255, 235, 200, 0.22) 0%, transparent 70%),
        linear-gradient(180deg, rgba(255, 214, 140, 0.18) 0%, rgba(255, 214, 140, 0.07) 28%, transparent 62%),
        /* halo */
        radial-gradient(600px 260px at 50% 5%, var(--vitrine-spot-featured) 0%, transparent 58%),
        /* vitre */
        linear-gradient(145deg, var(--vt-white-line) 0%, transparent 55%);
}

.slot--highlighted::before {
    background:
        radial-gradient(120px 70px at 50% 0%, rgba(255, 235, 200, 0.16) 0%, transparent 72%),
        linear-gradient(180deg, rgba(255, 214, 140, 0.12) 0%, rgba(255, 214, 140, 0.05) 30%, transparent 65%),
        radial-gradient(600px 260px at 50% 5%, var(--vitrine-spot-highlight) 0%, transparent 60%),
        linear-gradient(145deg, var(--vt-white-line) 0%, transparent 55%);
}

/* L’objet “prend” un peu la lumière */
.slot--highlighted .slot__img {
    filter:
        drop-shadow(0 11px 24px rgba(0, 0, 0, 0.48))
        drop-shadow(0 3px 9px rgba(0, 0, 0, 0.34))
        brightness(1.03)
        saturate(1.01);
}

.slot:focus {
    outline: none;
}

.slot:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--vitrine-led) 55%, rgba(255,255,255,0.65));
    outline-offset: 2px;
}

.slot:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.45),
        0 2px 10px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 216, 140, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .slot:hover {
        transform: none;
    }
}

/* Tailles (presets) – rendre la différence bien visible */
.vitrine-size-s .slot {
    min-height: 84px;
    border-radius: 14px;
}
.vitrine-size-m .slot {
    min-height: 104px;
}
.vitrine-size-l .slot {
    min-height: 128px;
    border-radius: 18px;
}

/* Lien slot */
.slot__link {
    display: flex;
    align-items: flex-end; /* statue posée sur l’étagère */
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: 14px 18px 8px; /* plus de bas pour la pose */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Lien "dummy" sur slots vides: utile pour drag&drop, mais non cliquable */
.slot--empty .slot__link--empty,
.slot.is-empty .slot__link--empty {
    pointer-events: none;
}

/* Tailles (presets) */
.vitrine-size-s .slot__link { padding: 10px 12px 6px; }
.vitrine-size-m .slot__link { padding: 14px 18px 8px; }
.vitrine-size-l .slot__link { padding: 18px 22px 10px; }

/* Image avec drop-shadow naturel */
.slot__img {
    max-width: 88%;
    max-height: 92%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
    filter:
        drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45))
        drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}

/* Ajuste la “présence” de l’objet selon la taille */
.vitrine-size-s .slot__img {
    max-width: 82%;
    max-height: 88%;
    filter:
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.42))
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.32));
}
.vitrine-size-l .slot__img { max-width: 92%; max-height: 96%; }

/* Badges : taille adaptée */
.vitrine-size-s .slot__badge { font-size: 9px; padding: 3px 8px; }
.vitrine-size-l .slot__badge { font-size: 11px; padding: 5px 12px; }

/* Drag & drop placement */
body.vitrine-is-dragging {
    cursor: grabbing;
}

.vitrine.vitrine-placement-mode {
    outline: 2px solid color-mix(in oklab, var(--vitrine-led) 28%, rgba(255,255,255,0.10));
    outline-offset: 4px;
}

.vitrine.vitrine-placement-mode .slot{
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.vitrine.vitrine-placement-mode .slot:hover{
    transform: translateY(-2px);
    box-shadow:
        0 14px 32px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

.vitrine.vitrine-placement-mode .slot--empty::after{
    content: "Déposer ici";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(0, 0, 0, 0.28);
    border: 1px dashed var(--vt-white-line-strong);
    pointer-events: none;
    z-index: 4;
}

.vitrine.vitrine-placement-mode .slot--empty .slot__empty{
    opacity: 0.65;
}

.vitrine.vitrine-placement-mode .slot {
    cursor: grab;
}

.vitrine.vitrine-placement-mode .slot--selected::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 16px;
    border: 2px solid color-mix(in oklab, var(--vitrine-led) 55%, rgba(255,255,255,0.12));
    box-shadow: 0 0 18px color-mix(in oklab, var(--vitrine-led) 22%, transparent);
    pointer-events: none;
    z-index: 4;
}

.vitrine.vitrine-placement-mode .slot {
    cursor: pointer;
}

.vitrine.vitrine-has-pending {
    outline-color: color-mix(in oklab, var(--vitrine-led) 40%, rgba(255,255,255,0.10));
}

.vitrine.vitrine-placement-mode .slot__spotlights,
.vitrine.vitrine-placement-mode .slot__badges,
.vitrine.vitrine-placement-mode .slot__add {
    opacity: 0.9;
}

.slot--dragging {
    opacity: 0.35;
}

.slot--drop::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 16px;
    border: 1px solid color-mix(in oklab, var(--vitrine-led) 45%, rgba(255,255,255,0.14));
    box-shadow: 0 0 18px color-mix(in oklab, var(--vitrine-led) 18%, transparent);
    pointer-events: none;
    z-index: 4;
}

.vitrine-ghost {
    position: fixed;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none;
    object-fit: contain;
    filter:
        drop-shadow(0 18px 40px rgba(0,0,0,0.55))
        drop-shadow(0 4px 14px rgba(0,0,0,0.35));
}

/* Spotlights (auth/ma-vitrine) — boutons au-dessus des slots */
.slot__spotlights {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: flex-end; /* discret: coin supérieur droit */
    z-index: 3;
    pointer-events: none;
    opacity: 0.78;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.slot__tag{
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 4;
    pointer-events: none;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--vt-white-text);
    background: rgba(10, 12, 16, 0.55);
    border: 1px solid var(--vt-white-line-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}
.slot__tag--wanted{
    background: rgba(29, 78, 216, 0.22);
    border-color: rgba(29, 78, 216, 0.40);
    color: rgba(219, 234, 254, 0.95);
}

.slot__remove{
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--vt-white-line-strong);
    background: rgba(10, 12, 16, 0.55);
    color: rgba(255, 255, 255, 0.88);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 4;
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.slot:hover .slot__remove,
.slot:focus-within .slot__remove{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.slot__remove:hover{
    border-color: rgba(248, 113, 113, 0.55);
    background: rgba(244, 63, 94, 0.14);
}
.slot__spotlight-form { margin: 0; pointer-events: auto; }

/* Ampoule ON/OFF centrée en haut */
.slot__spotlight-bulb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--vt-white-line-strong);
    background: rgba(10, 12, 16, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.slot__bulb-icon {
    font-size: 14px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

.slot__spotlight-bulb:hover {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--vitrine-led) 45%, rgba(255,255,255,0.14));
}

.slot__spotlight-bulb.is-on {
    background: color-mix(in oklab, var(--vitrine-led) 18%, rgba(10, 12, 16, 0.55));
    border-color: color-mix(in oklab, var(--vitrine-led) 55%, rgba(255,255,255,0.14));
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.28),
        0 10px 26px rgba(0,0,0,0.35),
        0 0 18px color-mix(in oklab, var(--vitrine-led) 30%, transparent);
}

.slot__spotlight-bulb.is-on .slot__bulb-icon {
    color: rgba(255, 242, 220, 0.95);
    filter:
        drop-shadow(0 0 10px color-mix(in oklab, var(--vitrine-led) 55%, transparent))
        drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}

/* Plus visible uniquement quand on interagit avec le slot */
.slot:hover .slot__spotlights,
.slot:focus-within .slot__spotlights {
    opacity: 1;
}

.slot__placeholder {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    padding: 8px;
}

/* ---- Slot vide (.slot--empty / .is-empty) ---- */
.slot--empty,
.slot.is-empty {
    background: transparent;
    border-style: solid;
    border-color: transparent;
    /* Le menu "Ajouter" est positionné hors du slot : ne pas le rogner */
    overflow: visible;
}

.slot__empty {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    position: relative;
    z-index: 2; /* au-dessus du lien dummy */
}

.slot--empty .slot__placeholder,
.slot.is-empty .slot__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

/* Icône "+" circulaire */
.slot__empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--vitrine-empty-icon-bg) 85%, transparent);
    border: 1px solid color-mix(in oklab, var(--vitrine-empty-icon-border) 85%, rgba(255, 216, 140, 0.10));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.34);
    line-height: 1;
    box-shadow: inset 0 1px 0 var(--vt-white-soft);
}

.slot__add {
    position: relative;
}

/* summary = bouton + (sans flèche native) */
.slot__add > summary {
    list-style: none;
    cursor: pointer;
}
.slot__add > summary::-webkit-details-marker {
    display: none;
}

.slot__add-menu {
    position: absolute;
    left: 50%;
    bottom: 54px;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: min(260px, calc(100vw - 32px));
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--vt-white-line-strong);
    background: rgba(10, 12, 16, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    display: none;
    z-index: 5;
}

/* Éviter que le menu "Ajouter" soit rogné sur les bords du meuble */
.vitrine-cols-3 .etagere > .slot:nth-child(3n) .slot__add-menu {
    left: auto;
    right: 0;
    transform: none;
}
.vitrine-cols-3 .etagere > .slot:nth-child(3n+1) .slot__add-menu {
    left: 0;
    right: auto;
    transform: none;
}
.vitrine-cols-2 .etagere > .slot:nth-child(2n) .slot__add-menu {
    left: auto;
    right: 0;
    transform: none;
}
.vitrine-cols-2 .etagere > .slot:nth-child(2n+1) .slot__add-menu {
    left: 0;
    right: auto;
    transform: none;
}

@media (max-width: 420px) {
    .slot__add-menu {
        min-width: 0;
        width: calc(100vw - 32px);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

.slot__add[open] .slot__add-menu {
    display: grid;
    gap: 8px;
}

.slot__add-link {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    color: var(--vt-white-text);
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: var(--vt-white-line);
}

.slot__add-link:hover {
    border-color: color-mix(in oklab, var(--vitrine-led) 35%, rgba(255,255,255,0.12));
    background: color-mix(in oklab, var(--vitrine-led) 10%, var(--vt-white-line));
}

.slot__add[open] > summary.slot__empty-icon {
    color: rgba(255, 242, 220, 0.95);
    border-color: color-mix(in oklab, var(--vitrine-led) 45%, var(--vitrine-empty-icon-border));
    box-shadow:
        0 0 18px color-mix(in oklab, var(--vitrine-led) 25%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.slot--empty:hover .slot__empty-icon,
.slot.is-empty:hover .slot__empty-icon {
    color: rgba(255, 255, 255, 0.62);
    background: color-mix(in oklab, var(--vitrine-led) 12%, var(--vt-white-line));
    border-color: color-mix(in oklab, var(--vitrine-led) 25%, var(--vitrine-empty-icon-border));
}

/* ---- Badges premium (glass + gold) ---- */
.slot__badges {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.slot__badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    /* Glass */
    background: var(--vitrine-badge-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--vt-white-line-medium);
}

.slot__badge--gold {
    background: var(--vitrine-badge-gold-bg);
    color: var(--vitrine-badge-gold-text);
    border-color: rgba(212, 175, 55, 0.35);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Vitrine (auth): images only, pas de textes/badges */
.vitrine-page .vitrine-showcase .slot__badges,
.vitrine-page .vitrine-showcase .slot__badge {
    display: none !important;
}

/* ---- Pièces de collection (issues de Ma collection) ---- */
.lt-collection-section {
    margin-top: 18px;
    margin-bottom: 22px;
}
.lt-collection-title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--vt-white-text);
}
.shop-page .lt-collection-title,
.shop-content .lt-collection-title {
    color: #0f172a;
}
.lt-collection-subtitle {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
}
.shop-page .lt-collection-subtitle {
    color: #64748b;
}
.lt-collection-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 900px) {
    .lt-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lt-collection-card {
    border-radius: 14px;
    overflow: hidden;
    background: var(--vt-white-line);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.shop-page .lt-collection-card {
    background: var(--vt-white);
    border: 1px solid #e2e8f0;
}
.lt-collection-card-link {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 10px;
}
.lt-collection-thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--vt-white-line-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lt-collection-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lt-collection-thumb-placeholder {
    color: rgba(255, 255, 255, 0.55);
}
.shop-page .lt-collection-thumb-placeholder {
    color: #64748b;
}
.lt-collection-name {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.2;
}
.lt-collection-meta {
    margin-top: 4px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
}
.shop-page .lt-collection-meta {
    color: #64748b;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .etagere {
        grid-template-columns: repeat(2, 1fr);
        min-height: 120px;
        padding: 16px 4px 18px;
    }

    .etagere::before {
        left: 6px;
        right: 6px;
    }
    /* Ne pas fixer un seul padding : laisse .vitrine.vitrine-size-{s,m,l} */
}

@media (max-width: 480px) {
    .vitrine-cols-2 .etagere,
    .vitrine-cols-3 .etagere,
    .vitrine-cols-4 .etagere,
    .vitrine-cols-5 .etagere,
    .vitrine-cols-6 .etagere {
        grid-template-columns: 1fr;
    }

    .vitrine-size-s .etagere {
        padding: 10px 3px 12px;
        min-height: 88px;
    }
    .vitrine-size-m .etagere {
        padding: 12px 4px 14px;
        min-height: 100px;
    }
    .vitrine-size-l .etagere {
        padding: 14px 4px 16px;
        min-height: 112px;
    }

    .etagere::before {
        left: 6px;
        right: 6px;
    }

    .vitrine-size-s .slot {
        min-height: 96px;
        aspect-ratio: 1;
    }
    .vitrine-size-m .slot {
        min-height: 120px;
        aspect-ratio: 1;
    }
    .vitrine-size-l .slot {
        min-height: 148px;
        aspect-ratio: 1;
    }

    .vitrine.vitrine-size-s {
        padding: 10px;
        border-radius: 14px;
        border-width: 2px;
    }
    .vitrine.vitrine-size-m {
        padding: 12px;
        border-radius: 16px;
        border-width: 2px;
    }
    .vitrine.vitrine-size-l {
        padding: 14px;
        border-radius: 18px;
        border-width: 2px;
    }

    .slot__empty-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
}

/*
 * Espace compte (compte-mobile.css charge avant ce fichier) : règles plus spécifiques
 * pour que « Taille des cases » reste visible sur Ma vitrine mobile.
 */
@media (max-width: 768px) {
    .vitrine-showcase .vitrine.vitrine-size-s {
        padding: 10px 9px 12px;
        max-width: min(480px, 100%);
        margin-inline: auto;
    }
    .vitrine-showcase .vitrine.vitrine-size-m {
        padding: 12px 10px 14px;
        max-width: min(640px, 100%);
        margin-inline: auto;
    }
    .vitrine-showcase .vitrine.vitrine-size-l {
        padding: 14px 12px 18px;
        max-width: 100%;
    }

    .vitrine-showcase .vitrine.vitrine-size-s .etagere {
        gap: 7px;
        padding: 11px 2px 13px;
        min-height: 82px;
    }
    .vitrine-showcase .vitrine.vitrine-size-m .etagere {
        gap: 8px;
        padding: 12px 2px 14px;
        min-height: 92px;
    }
    .vitrine-showcase .vitrine.vitrine-size-l .etagere {
        gap: 10px;
        padding: 14px 4px 16px;
        min-height: 102px;
    }

    .vitrine-showcase .vitrine.vitrine-size-s .slot {
        min-height: 64px;
    }
    .vitrine-showcase .vitrine.vitrine-size-m .slot {
        min-height: 76px;
    }
    .vitrine-showcase .vitrine.vitrine-size-l .slot {
        min-height: 88px;
    }
}

/* =============================================================================
   Vitrine mosaïque — grille 4 col., vedette 2×2 (couleurs = thème .shop-theme-*)
   ============================================================================= */

/* Même « coque » que .vitrine : variables --vitrine-bg-*, --vitrine-led, --vitrine-frame */
.vitrine.vitrine--mosaic {
    background:
        radial-gradient(1200px 420px at 18% 0%, color-mix(in oklab, var(--vitrine-led) 16%, transparent) 0%, transparent 60%),
        radial-gradient(900px 380px at 82% 0%, color-mix(in oklab, var(--vitrine-led) 10%, transparent) 0%, transparent 62%),
        radial-gradient(1100px 520px at 50% 40%, var(--vt-white-soft) 0%, transparent 55%),
        linear-gradient(175deg, var(--vitrine-bg-start) 0%, var(--vitrine-bg-mid) 35%, var(--vitrine-bg-end) 100%);
    border: 2px solid color-mix(in oklab, var(--vitrine-frame) 70%, rgba(255, 255, 255, 0.1));
    box-shadow:
        var(--vitrine-shadow-deep),
        0 8px 32px var(--vt-black-shadow),
        var(--vitrine-shadow-inner),
        inset 0 1px 0 var(--vitrine-frame-highlight, var(--vt-white-soft));
}

/* Pas d’override des ::before/::after : on garde verre + cadre intérieur du bloc .vitrine */

.vitrine--mosaic .mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(var(--mosaic-row-min, 108px), auto);
    grid-auto-flow: row dense;
    gap: var(--mosaic-gap-y, 12px) var(--mosaic-gap-x, 14px);
    padding: var(--mosaic-pad-y, 24px) var(--mosaic-pad-x, 18px) var(--mosaic-pad-b, 30px);
    position: relative;
    z-index: 1;
    --mosaic-divider: color-mix(in oklab, var(--shop-border) 85%, var(--shop-accent) 15%);
    background-image:
        linear-gradient(var(--mosaic-divider), var(--mosaic-divider)),
        linear-gradient(var(--mosaic-divider), var(--mosaic-divider)),
        linear-gradient(var(--mosaic-divider), var(--mosaic-divider));
    background-size: 1px 100%, 1px 100%, 1px 100%;
    background-position: 25% 0, 50% 0, 75% 0;
    background-repeat: no-repeat;
}

/* Densité mosaïque : rend les cases plus petites (dashboard) */
.vitrine--mosaic[data-density="xs"] .mosaic-grid{
    --mosaic-row-min: 74px;
    --mosaic-gap-y: 8px;
    --mosaic-gap-x: 8px;
    --mosaic-pad-y: 14px;
    --mosaic-pad-x: 12px;
    --mosaic-pad-b: 16px;
}
.vitrine--mosaic[data-density="s"] .mosaic-grid{
    --mosaic-row-min: 88px;
    --mosaic-gap-y: 10px;
    --mosaic-gap-x: 10px;
    --mosaic-pad-y: 18px;
    --mosaic-pad-x: 14px;
    --mosaic-pad-b: 20px;
}
.vitrine--mosaic[data-density="m"] .mosaic-grid{
    --mosaic-row-min: 108px;
    --mosaic-gap-y: 12px;
    --mosaic-gap-x: 14px;
    --mosaic-pad-y: 24px;
    --mosaic-pad-x: 18px;
    --mosaic-pad-b: 30px;
}

/* Spans libres : auto-flow dense permet de redimensionner chaque case indépendamment. */
/* Défaut : slot 0 = vedette 2×2, les autres = 1×1 */
.vitrine--mosaic .mosaic-slot { grid-column: span 1; grid-row: span 1; }
.vitrine--mosaic .mosaic-slot--0:not([data-span]) { grid-column: span 2; grid-row: span 2; }

/* Spans explicites définis par le propriétaire (persistés via JS) */
.vitrine--mosaic .mosaic-slot[data-span="1x1"] { grid-column: span 1; grid-row: span 1; }
.vitrine--mosaic .mosaic-slot[data-span="2x1"] { grid-column: span 2; grid-row: span 1; }
.vitrine--mosaic .mosaic-slot[data-span="1x2"] { grid-column: span 1; grid-row: span 2; }
.vitrine--mosaic .mosaic-slot[data-span="2x2"] { grid-column: span 2; grid-row: span 2; }
.vitrine--mosaic .mosaic-slot[data-span="3x1"] { grid-column: span 3; grid-row: span 1; }
.vitrine--mosaic .mosaic-slot[data-span="1x3"] { grid-column: span 1; grid-row: span 3; }
.vitrine--mosaic .mosaic-slot[data-span="3x2"] { grid-column: span 3; grid-row: span 2; }
.vitrine--mosaic .mosaic-slot[data-span="2x3"] { grid-column: span 2; grid-row: span 3; }
.vitrine--mosaic .mosaic-slot[data-span="3x3"] { grid-column: span 3; grid-row: span 3; }

/* --- Bouton resize + picker --- */
.mosaic-resize-btn {
    position: absolute;
    bottom: 7px;
    right: 7px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(20, 20, 30, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid color-mix(in oklab, var(--shop-accent, var(--vt-gold-classic)) 50%, transparent);
    color: var(--shop-accent, var(--vt-gold-classic));
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.15s ease, border-color 0.15s;
    z-index: 50;
    font-size: 13px;
    line-height: 1;
    padding: 0;
}
.mosaic-slot:hover .mosaic-resize-btn,
.mosaic-slot:focus-within .mosaic-resize-btn,
.mosaic-slot.slot--ui-selected .mosaic-resize-btn {
    opacity: 1;
}
/* Toujours visible sur mobile/tactile (pas de :hover) */
@media (hover: none) {
    .mosaic-resize-btn {
        opacity: 0.85;
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }
}
.mosaic-resize-btn:hover {
    transform: scale(1.1);
    border-color: color-mix(in oklab, var(--shop-accent, var(--vt-gold-classic)) 70%, transparent);
}
.vitrine-placement-mode .mosaic-resize-btn {
    display: none !important;
}

/* Feedback pendant le "touch + glisser" (snap) */
/* Picker popup */
.mosaic-resize-picker {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(20, 20, 30, 0.96);
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in oklab, var(--shop-accent, var(--vt-gold-classic)) 50%, transparent);
    border-radius: 12px;
    padding: 8px 8px 6px;
    display: none;
    flex-direction: column;
    gap: 5px;
    z-index: 100;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.6),
        inset 0 1px 0 color-mix(in oklab, var(--vt-white) 8%, transparent);
    min-width: 118px;
    max-width: min(240px, calc(100vw - 24px));
    transform-origin: top right;
}
.mosaic-resize-picker.is-open {
    display: flex;
    animation: mosaicPickerIn 0.14s ease;
}
@keyframes mosaicPickerIn {
    from { opacity: 0; transform: scale(0.88) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.mosaic-resize-picker-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--shop-ink, #f0e6c8) 50%, transparent);
    padding: 0 2px 2px;
}
.mosaic-resize-picker-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
}
.mosaic-span-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 6px 4px 5px;
    border-radius: 8px;
    border: 1.5px solid color-mix(in oklab, var(--shop-border, #333) 60%, transparent);
    background: color-mix(in oklab, var(--shop-surface, #1a1a2e) 40%, transparent);
    transition: background 0.14s, border-color 0.14s;
}
.mosaic-span-option:hover {
    background: color-mix(in oklab, var(--shop-accent, var(--vt-gold-classic)) 14%, transparent);
    border-color: color-mix(in oklab, var(--shop-accent, var(--vt-gold-classic)) 55%, transparent);
}
.mosaic-span-option.is-active {
    background: color-mix(in oklab, var(--shop-accent, var(--vt-gold-classic)) 20%, transparent);
    border-color: var(--shop-accent, var(--vt-gold-classic));
}
.mosaic-span-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.mosaic-span-cell {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: color-mix(in oklab, var(--shop-ink, #f0e6c8) 20%, transparent);
}
.mosaic-span-cell.filled {
    background: var(--shop-accent, var(--vt-gold-classic));
}
.mosaic-span-label {
    font-size: 9px;
    font-weight: 700;
    color: color-mix(in oklab, var(--shop-ink, #f0e6c8) 65%, transparent);
    letter-spacing: 0.02em;
}
.mosaic-span-option.is-active .mosaic-span-label {
    color: var(--shop-accent, var(--vt-gold-classic));
}

.vitrine--mosaic .mosaic-slot {
    position: relative;
    aspect-ratio: auto;
    border-radius: 14px;
    overflow: clip;
    background:
        radial-gradient(120% 90% at 50% 100%, color-mix(in oklab, var(--shop-accent) 14%, transparent) 0%, transparent 55%),
        var(--vitrine-slot-bg);
    border: 1px solid var(--vitrine-slot-border, var(--shop-border));
    box-shadow:
        inset 0 1px 0 color-mix(in oklab, var(--vt-white) 14%, var(--shop-accent) 8%),
        0 6px 16px color-mix(in oklab, var(--shop-ink) 28%, transparent);
    min-height: 104px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vitrine--mosaic .mosaic-slot--0.slot--mosaic-hero,
.vitrine--mosaic .mosaic-slot--0:not(.is-empty) {
    min-height: 220px;
}

/* LED par case = couleurs du thème (--vitrine-led) */
.vitrine--mosaic .mosaic-slot::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 6px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--vitrine-led) 15%,
        color-mix(in oklab, var(--vitrine-led) 75%, var(--vt-white)) 50%,
        var(--vitrine-led) 85%,
        transparent 100%
    );
    box-shadow:
        0 0 12px var(--vitrine-led-glow),
        0 0 22px color-mix(in oklab, var(--vitrine-led-glow) 65%, transparent);
    pointer-events: none;
    z-index: 2;
}

.vitrine--mosaic .mosaic-slot:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklab, var(--vt-white) 12%, var(--shop-accent) 10%),
        0 12px 28px color-mix(in oklab, var(--shop-ink) 35%, transparent);
    border-color: color-mix(in oklab, var(--shop-accent) 45%, var(--vitrine-slot-border, var(--shop-border)));
}

.vitrine--mosaic .slot__link {
    align-items: center;
    justify-content: center;
    padding: 18px 10px 12px;
}

.vitrine--mosaic .slot__img {
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px color-mix(in oklab, var(--shop-ink) 45%, transparent));
}

/* Slots 2×2 (slot vedette par défaut ou redimensionné) : image plus grande */
.vitrine--mosaic .mosaic-slot--0:not([data-span]) .slot__img,
.vitrine--mosaic .mosaic-slot[data-span="2x2"] .slot__img {
    max-height: min(52vh, 340px);
}

.vitrine--mosaic .slot__badges {
    z-index: 3;
}

.vitrine--mosaic .mosaic-slot.slot--featured::before,
.vitrine--mosaic .mosaic-slot.slot--highlighted::before {
    opacity: 1;
    height: 6px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in oklab, var(--vitrine-led) 70%, var(--shop-accent)),
        transparent
    );
    box-shadow:
        0 0 16px var(--vitrine-led-glow),
        0 0 24px color-mix(in oklab, var(--shop-accent) 35%, transparent);
}

.shop-shelf .vitrine.vitrine--mosaic.vitrine-size-s,
.vitrine-showcase .vitrine.vitrine--mosaic.vitrine-size-s {
    max-width: min(560px, 100%);
    margin-inline: auto;
}
.shop-shelf .vitrine.vitrine--mosaic.vitrine-size-m,
.vitrine-showcase .vitrine.vitrine--mosaic.vitrine-size-m {
    max-width: min(880px, 100%);
    margin-inline: auto;
}
.shop-shelf .vitrine.vitrine--mosaic.vitrine-size-l,
.vitrine-showcase .vitrine.vitrine--mosaic.vitrine-size-l {
    max-width: 100%;
}

@media (max-width: 720px) {
    .vitrine--mosaic .mosaic-grid {
        /* Mobile : garder la mosaïque, mais en "vitrine plus petite" (sans écraser les spans).
           On réduit surtout l'empreinte (rows/gaps/padding) et on adapte le nb de colonnes. */
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(var(--mosaic-row-min, 96px), auto);
        gap: var(--mosaic-gap-y, 10px) var(--mosaic-gap-x, 10px);
        padding: var(--mosaic-pad-y, 14px) var(--mosaic-pad-x, 10px) var(--mosaic-pad-b, 16px);
        background-image: none;
    }

    .vitrine--mosaic .mosaic-slot {
        width: 100%;
        min-height: 0;
    }

    .vitrine--mosaic .mosaic-slot--0 {
        min-height: 0;
    }

    /* La vedette (2×2) reste lisible sur petit écran */
    .vitrine--mosaic .mosaic-slot--0:not([data-span]) .slot__img,
    .vitrine--mosaic .mosaic-slot[data-span="2x2"] .slot__img,
    .vitrine--mosaic .mosaic-slot[data-span="3x3"] .slot__img {
        max-height: min(42vh, 280px);
    }
}

/* Très petits écrans : fallback 1 colonne (évite des tuiles trop étroites) */
@media (max-width: 360px) {
    .vitrine--mosaic .mosaic-grid {
        grid-template-columns: 1fr;
    }
    .vitrine--mosaic .mosaic-slot--0 {
        grid-column: 1 / 2;
    }
}

/* Très petits mobiles : 2 colonnes plutôt que 3 */
@media (max-width: 420px) {
    .vitrine--mosaic .mosaic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .vitrine--mosaic .mosaic-slot:hover {
        transform: none;
    }
}

/* ---------- Ma vitrine (page compte) : mobile lisible (pas de mosaïque 4 col. tassée) ---------- */
@media (max-width: 768px) {
    .vitrine-page .vitrine-showcase .vitrine.vitrine-size-s,
    .vitrine-page .vitrine-showcase .vitrine.vitrine-size-m,
    .vitrine-page .vitrine-showcase .vitrine.vitrine-size-l {
        max-width: 100%;
        padding: 10px 8px 12px;
    }

    .vitrine-page .vitrine-showcase .vitrine.vitrine-size-s .etagere,
    .vitrine-page .vitrine-showcase .vitrine.vitrine-size-m .etagere,
    .vitrine-page .vitrine-showcase .vitrine.vitrine-size-l .etagere {
        gap: 8px;
        padding: 9px 4px 12px;
        min-height: 0;
    }

    /* Étagère : hauteur suffisante pour les photos (slots « shelf » uniquement) */
    .vitrine-page .vitrine-showcase .vitrine.vitrine-size-s .slot:not(.mosaic-slot),
    .vitrine-page .vitrine-showcase .vitrine.vitrine-size-m .slot:not(.mosaic-slot),
    .vitrine-page .vitrine-showcase .vitrine.vitrine-size-l .slot:not(.mosaic-slot) {
        min-height: 72px;
        max-height: min(46vw, 200px);
    }

    .vitrine-page .vitrine-showcase .vitrine.vitrine-size-s .slot:not(.mosaic-slot) {
        max-height: min(42vw, 180px);
    }

    .vitrine-page .vitrine-showcase .vitrine.vitrine-size-l .slot:not(.mosaic-slot) {
        max-height: min(48vw, 220px);
    }

    /* Mosaïque : garder l'effet "mosaïque" sur mobile (2 colonnes + hero pleine largeur) */
    .vitrine-page .vitrine-showcase .vitrine--mosaic .mosaic-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(116px, auto);
        gap: 12px;
        padding: 14px 10px 18px;
        background-image: none !important;
    }

    .vitrine-page .vitrine-showcase .vitrine--mosaic .mosaic-slot {
        width: 100% !important;
        min-height: 132px !important;
        max-height: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .vitrine-page .vitrine-showcase .vitrine--mosaic .mosaic-slot--0 {
        grid-column: 1 / -1;
    }

    .vitrine-page .vitrine-showcase .vitrine--mosaic .mosaic-slot--0.slot--mosaic-hero,
    .vitrine-page .vitrine-showcase .vitrine--mosaic .mosaic-slot--0:not(.is-empty) {
        min-height: min(48vh, 280px) !important;
        max-height: none !important;
    }

    .vitrine-page .vitrine-showcase .vitrine--mosaic .mosaic-slot .slot__img {
        max-height: min(40vh, 240px);
        width: auto;
        object-fit: contain;
    }

    .vitrine-page .vitrine-showcase .vitrine--mosaic .mosaic-slot--0 .slot__img {
        max-height: min(52vh, 320px);
    }

    /* Masquer mise en avant / badges / ampoule sur mobile (évite bandeaux qui tassent la grille) */
    .vitrine-page .vitrine-showcase .slot__badges,
    .vitrine-page .vitrine-showcase .slot__spotlights {
        display: none !important;
    }
}

@media (max-width: 420px) {
    /* Étagère : 3 col. max — cases un peu plus hautes que l’ancien plafond ~92px */
    .vitrine-page .vitrine-cols-2 .etagere,
    .vitrine-page .vitrine-cols-3 .etagere,
    .vitrine-page .vitrine-cols-4 .etagere,
    .vitrine-page .vitrine-cols-5 .etagere,
    .vitrine-page .vitrine-cols-6 .etagere {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .vitrine-page .vitrine-showcase .vitrine .slot:not(.mosaic-slot) {
        max-height: min(40vw, 176px);
    }
}


/* ===== merged: vitrine-realistic.css ===== */

/* =============================================================================
   LOGUETOWN — Vitrine photoréaliste (meuble d'exposition)
   Transforme le layout "shelf" en véritable meuble vitrine 3D-ish via CSS pur.
   Skins : cabinet_walnut, cabinet_oak, cabinet_carbon, cabinet_glass,
           gallery_marble, neon_arcade.
   Aucun changement de DOM requis : on stylise .vitrine / .etagere / .slot.
   ========================================================================== */

/* ====== Variables par défaut (cabinet_walnut) ====== */
.vitrine-layout-shelf .vitrine,
.shop-shelf .vitrine {
  --vr-back-1: #2a1810;
  --vr-back-2: #1a0e08;
  --vr-grain: rgba(255, 220, 170, 0.04);
  --vr-frame: #4a2f1f;
  --vr-frame-edge: #6b4528;
  --vr-shelf-top: #5d3a24;
  --vr-shelf-face: #3d2515;
  --vr-shelf-shadow: rgba(0, 0, 0, 0.55);
  --vr-led: #fff4d6;
  --vr-led-glow: color-mix(in srgb, var(--vr-led) 50%, transparent);
  --vr-led-spread: 38px;
  --vr-led-pos-x: 50%;       /* 0% = à gauche, 100% = à droite */
  --vr-led-pos-y: 0%;        /* 0% = au plafond, 100% = au sol */
  --vr-led-intensity: 1;     /* multiplicateur 0–1.5 */
  --vr-glass-tint: rgba(255, 255, 255, 0.04);
  --vr-glass-spec: rgba(255, 255, 255, 0.18);
  --vr-floor-reflect: 0.32;
  --vr-vignette: rgba(0, 0, 0, 0.3);
  --vr-piece-shadow: rgba(0, 0, 0, 0.5);
  --vr-radius: 12px;
  --vr-shelf-h-s: 130px;
  --vr-shelf-h-m: 170px;
  --vr-shelf-h-l: 220px;
}

/* ====== Conteneur meuble ====== */
.vitrine-layout-shelf .vitrine,
.shop-shelf .vitrine {
  position: relative;
  display: block;
  padding: 18px 18px 22px;
  margin: 0 auto;
  max-width: 1200px;
  background:
    /* grain bois */
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 3px,
      var(--vr-grain) 3px,
      var(--vr-grain) 4px
    ),
    /* veines bois */
    radial-gradient(ellipse at 30% 20%, rgba(255,200,140,0.05), transparent 40%),
    radial-gradient(ellipse at 70% 80%, rgba(255,200,140,0.04), transparent 50%),
    /* fond profond */
    linear-gradient(180deg, var(--vr-back-1) 0%, var(--vr-back-2) 100%);
  border-radius: var(--vr-radius);
  /* Cadre du meuble : bordure intérieure + ombre portée */
  border: 14px solid var(--vr-frame);
  border-image: linear-gradient(160deg, var(--vr-frame-edge), var(--vr-frame) 50%, var(--vr-frame-edge)) 1;
  box-shadow:
    /* ombre extérieure du meuble (pose au sol) */
    0 32px 48px -16px rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.25),
    /* relief intérieur : bord clair en haut, sombre en bas */
    inset 0 1px 0 var(--vt-white-line-medium),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    inset 0 0 80px rgba(0, 0, 0, 0.35);
  isolation: isolate;
  overflow: hidden;
}

/* Vignette globale (intensifie le centre) */
.vitrine-layout-shelf .vitrine::before,
.shop-shelf .vitrine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, var(--vr-vignette) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Reflet diagonal "façade verre" en surimpression */
.vitrine-layout-shelf .vitrine::after,
.shop-shelf .vitrine::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 35%,
      var(--vr-glass-spec) 50%,
      transparent 60%,
      transparent 100%
    );
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 4;
}

/* ====== Étagère ====== */
.vitrine-layout-shelf .vitrine .etagere,
.shop-shelf .vitrine .etagere {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--vr-cols, 3), 1fr);
  gap: 14px;
  margin-bottom: 22px;
  padding: 12px 14px 14px;
  background: transparent;
  z-index: 2;
}

/* Plateau de l'étagère + LED bandeau intégré sous le plateau supérieur */
.vitrine-layout-shelf .vitrine .etagere::before,
.shop-shelf .vitrine .etagere::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -8px;
  height: 14px;
  background:
    linear-gradient(180deg, var(--vr-shelf-top) 0%, var(--vr-shelf-face) 60%, #000 100%);
  border-radius: 2px;
  box-shadow:
    /* Ombre portée du plateau sur le contenu en dessous */
    0 8px 16px var(--vr-shelf-shadow),
    /* Relief plateau */
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
  z-index: 0;
}

/* Bandeau LED au-dessus de chaque étagère */
.vitrine-layout-shelf .vitrine .etagere::after,
.shop-shelf .vitrine .etagere::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: -2px;
  height: 2px;
  background: var(--vr-led);
  border-radius: 2px;
  box-shadow:
    0 0 calc(6px * var(--vr-led-intensity)) var(--vr-led-glow),
    0 6px calc(16px * var(--vr-led-intensity)) var(--vr-led-glow),
    0 12px calc(var(--vr-led-spread) * var(--vr-led-intensity)) var(--vr-led-glow);
  opacity: calc(0.85 * var(--vr-led-intensity));
  z-index: 1;
  pointer-events: none;
}

.vitrine-layout-shelf .vitrine .etagere:last-child {
  margin-bottom: 8px;
}

/* ====== Slot ====== */
.vitrine-layout-shelf .vitrine .slot,
.shop-shelf .vitrine .slot {
  position: relative;
  aspect-ratio: 3 / 4;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2;
}

/* Halo lumineux derrière chaque pièce (spot LED) — orientable */
.vitrine-layout-shelf .vitrine .slot:not(.is-empty)::before,
.shop-shelf .vitrine .slot:not(.is-empty)::before {
  content: "";
  position: absolute;
  inset: 5% 5% 25% 5%;
  background: radial-gradient(
    ellipse at var(--vr-led-pos-x) var(--vr-led-pos-y),
    var(--vr-led-glow) 0%,
    transparent calc(60% / var(--vr-led-intensity))
  );
  opacity: calc(0.55 * var(--vr-led-intensity));
  pointer-events: none;
  z-index: 1;
  transition: opacity 220ms ease;
}

/* Lien (le contenu cliquable) */
.vitrine-layout-shelf .vitrine .slot__link,
.shop-shelf .vitrine .slot__link {
  position: relative;
  width: 100%;
  height: 90%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-decoration: none;
  z-index: 3;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vitrine-layout-shelf .vitrine .slot:not(.is-empty):hover .slot__link,
.shop-shelf .vitrine .slot:not(.is-empty):hover .slot__link {
  transform: translateY(-4px);
}

/* Image de la pièce : posée au sol, sans fond */
.vitrine-layout-shelf .vitrine .slot__img,
.shop-shelf .vitrine .slot__img {
  position: relative;
  max-width: 92%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 14px 18px var(--vr-piece-shadow))
          drop-shadow(0 4px 6px var(--vt-black-shadow));
  transition: filter 320ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 3;
  /* L'image se base sur le bas (le sol) */
  align-self: end;
}
.vitrine-layout-shelf .vitrine .slot:hover .slot__img,
.shop-shelf .vitrine .slot:hover .slot__img {
  filter: drop-shadow(0 18px 22px var(--vr-piece-shadow))
          drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 12px var(--vr-led-glow));
  transform: scale(1.04);
}

/* Réflexion au sol : copie miroir de l'image, atténuée par mask */
.vitrine-layout-shelf .vitrine .slot:not(.is-empty)::after,
.shop-shelf .vitrine .slot:not(.is-empty)::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -2px;
  height: 18%;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(0, 0, 0, calc(var(--vr-floor-reflect) + 0.18)) 0%,
    rgba(0, 0, 0, 0.18) 35%,
    transparent 70%
  );
  filter: blur(4px);
  pointer-events: none;
  z-index: 2;
}

/* Slot vide : étiquette discrète */
.vitrine-layout-shelf .vitrine .slot--empty,
.shop-shelf .vitrine .slot--empty {
  border: 1px dashed var(--vt-white-line-medium);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  align-items: center;
}
.vitrine-layout-shelf .vitrine .slot--empty .slot__placeholder,
.shop-shelf .vitrine .slot--empty .slot__placeholder {
  color: rgba(255, 255, 255, 0.18);
}
.vitrine-layout-shelf .vitrine .slot__empty-icon,
.shop-shelf .vitrine .slot__empty-icon {
  color: rgba(255, 255, 255, 0.35);
  font-size: 28px;
  cursor: pointer;
  transition: color 200ms ease, transform 200ms ease;
}
.vitrine-layout-shelf .vitrine .slot__empty-icon:hover,
.shop-shelf .vitrine .slot__empty-icon:hover {
  color: var(--vr-led);
  transform: scale(1.1);
}

/* Tag (intent) flottant sur la pièce */
.vitrine-layout-shelf .vitrine .slot__tag,
.shop-shelf .vitrine .slot__tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: var(--vr-led);
  color: #1a0e08;
  border-radius: 999px;
  box-shadow: 0 2px 6px var(--vt-black-shadow);
}
.vitrine-layout-shelf .vitrine .slot__tag--wanted,
.shop-shelf .vitrine .slot__tag--wanted {
  background: #E94560;
  color: var(--vt-white);
}

/* Bouton retirer (édition) */
.vitrine-layout-shelf .vitrine .slot__remove,
.shop-shelf .vitrine .slot__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 6;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: var(--vt-white);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.vitrine-layout-shelf .vitrine .slot:hover .slot__remove,
.shop-shelf .vitrine .slot:hover .slot__remove {
  display: flex;
}

/* Pièce maîtresse / mise en avant */
.vitrine-layout-shelf .vitrine .slot--highlighted::before,
.shop-shelf .vitrine .slot--highlighted::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 215, 130, 0.6) 0%, transparent 60%) !important;
  opacity: 0.85 !important;
}
.vitrine-layout-shelf .vitrine .slot--highlighted .slot__img,
.shop-shelf .vitrine .slot--highlighted .slot__img {
  filter: drop-shadow(0 14px 22px var(--vr-piece-shadow))
          drop-shadow(0 0 14px rgba(255, 215, 130, 0.45));
}

/* ============================================================
   SKINS DE MEUBLE — chaque skin = identité matérielle propre
   ============================================================ */

/* ============================================================================
   1. CABINET WALNUT — Hôtel particulier (boiserie + coins dorés)
   ============================================================================ */
.shop-theme-cabinet_walnut.vitrine-layout-shelf .vitrine,
.shop-theme-cabinet_walnut .shop-shelf .vitrine {
  --vr-back-1: #2a1810;
  --vr-back-2: #1a0e08;
  --vr-frame: #3d2515;
  --vr-frame-edge: #6b4528;
  --vr-shelf-top: #6b4528;
  --vr-shelf-face: #3d2515;
  --vr-led: #fff4d6;
  --vr-floor-reflect: 0.35;
  background:
    /* Tasseaux verticaux de boiserie */
    repeating-linear-gradient(90deg,
      transparent 0, transparent 48px,
      rgba(255,200,140,0.05) 48px, rgba(255,200,140,0.08) 50px,
      transparent 50px, transparent 96px),
    /* Veines bois subtiles */
    radial-gradient(ellipse at 22% 32%, rgba(180,100,50,0.10), transparent 50%),
    radial-gradient(ellipse at 78% 68%, rgba(180,100,50,0.08), transparent 60%),
    linear-gradient(180deg, #2a1810 0%, #1a0e08 100%) !important;
  border: 18px solid #3d2515 !important;
  border-image: linear-gradient(160deg, #6b4528, #3d2515 50%, #6b4528) 1 !important;
}
/* Coins dorés "ferrures" décoratifs */
.shop-theme-cabinet_walnut.vitrine-layout-shelf .vitrine::before,
.shop-theme-cabinet_walnut .shop-shelf .vitrine::before {
  background:
    /* Cornières dorées dans chaque coin */
    linear-gradient(135deg, var(--vt-gold-champagne) 0 8px, transparent 8px) top left/24px 24px no-repeat,
    linear-gradient(225deg, var(--vt-gold-champagne) 0 8px, transparent 8px) top right/24px 24px no-repeat,
    linear-gradient(45deg, var(--vt-gold-champagne) 0 8px, transparent 8px) bottom left/24px 24px no-repeat,
    linear-gradient(315deg, var(--vt-gold-champagne) 0 8px, transparent 8px) bottom right/24px 24px no-repeat,
    /* Vignette */
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.32) 100%);
}

/* ============================================================================
   2. CABINET OAK — Scandinave Detolf (verre + bois clair)
   ============================================================================ */
.shop-theme-cabinet_oak.vitrine-layout-shelf .vitrine,
.shop-theme-cabinet_oak .shop-shelf .vitrine {
  --vr-back-1: #f0e6d4;
  --vr-back-2: #e0d2b8;
  --vr-frame: #a08560;
  --vr-frame-edge: #c4a878;
  --vr-led: #ffffff;
  --vr-floor-reflect: 0.15;
  --vr-vignette: rgba(80,60,30,0.1);
  --vr-piece-shadow: rgba(60,40,20,0.45);
  background:
    /* Veines bois horizontales très fines */
    repeating-linear-gradient(0deg,
      transparent 0, transparent 24px,
      rgba(120,80,40,0.04) 24px, rgba(120,80,40,0.06) 25px,
      transparent 25px, transparent 50px),
    linear-gradient(180deg, #f0e6d4 0%, #d8c8a8 100%) !important;
  border: 6px solid #c4a878 !important;
  border-radius: 4px !important;
  box-shadow:
    0 24px 48px -12px rgba(80,60,30,0.25),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(80,60,30,0.15) !important;
}
/* Pas de vignette sombre — ambiance lumineuse */
.shop-theme-cabinet_oak.vitrine-layout-shelf .vitrine::before,
.shop-theme-cabinet_oak .shop-shelf .vitrine::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.15), transparent 70%) !important;
}
/* Plateaux en verre fin */
.shop-theme-cabinet_oak.vitrine-layout-shelf .vitrine .etagere::before,
.shop-theme-cabinet_oak .shop-shelf .vitrine .etagere::before {
  height: 4px;
  background: linear-gradient(180deg, rgba(220,235,245,0.9) 0%, rgba(180,200,220,0.7) 100%) !important;
  box-shadow: 0 3px 6px rgba(80,60,30,0.18) !important;
}
/* LED tube fin et discret */
.shop-theme-cabinet_oak.vitrine-layout-shelf .vitrine .etagere::after,
.shop-theme-cabinet_oak .shop-shelf .vitrine .etagere::after {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--vt-white-full) 15%, var(--vt-white-full) 85%, transparent 100%) !important;
}

/* ============================================================================
   3. CABINET CARBON — Tech showroom Apple
   ============================================================================ */
.shop-theme-cabinet_carbon.vitrine-layout-shelf .vitrine,
.shop-theme-cabinet_carbon .shop-shelf .vitrine {
  --vr-back-1: #0f0f14;
  --vr-back-2: #06060a;
  --vr-frame: #1a1a22;
  --vr-frame-edge: #2a2a35;
  --vr-shelf-top: #2a2a35;
  --vr-shelf-face: #0a0a10;
  --vr-led: #d4f1ff;
  --vr-led-spread: 48px;
  --vr-floor-reflect: 0.5;
  --vr-piece-shadow: rgba(0, 0, 0, 0.7);
  background:
    /* Pattern hexagonal subtil */
    radial-gradient(circle at 25% 25%, rgba(120,200,255,0.04) 1.5px, transparent 2.5px) 0 0/48px 48px,
    radial-gradient(circle at 75% 75%, rgba(120,200,255,0.03) 1.5px, transparent 2.5px) 24px 24px/48px 48px,
    /* Lueur centrale froide */
    radial-gradient(ellipse at center, rgba(60,140,220,0.08), transparent 70%),
    linear-gradient(180deg, #15151a 0%, #06060a 100%) !important;
  border: 10px solid #1a1a22 !important;
  border-image: linear-gradient(135deg, #2a2a35 0%, #0a0a10 30%, #2a2a35 50%, #0a0a10 70%, #2a2a35 100%) 1 !important;
  box-shadow:
    0 32px 64px -16px rgba(0,0,0,0.8),
    0 0 0 1px rgba(120,200,255,0.12),
    inset 0 1px 0 rgba(120,200,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.9),
    inset 0 0 100px rgba(0,0,0,0.5) !important;
}
/* Lignes accent cyan dans les coins */
.shop-theme-cabinet_carbon.vitrine-layout-shelf .vitrine::after,
.shop-theme-cabinet_carbon .shop-shelf .vitrine::after {
  background:
    linear-gradient(90deg, transparent 0%, transparent 49%, rgba(120,200,255,0.18) 50%, transparent 51%, transparent 100%) !important;
  opacity: 0.6 !important;
}

/* ============================================================================
   4. CABINET GLASS — Bijouterie / Tiffany (marbre + chrome)
   ============================================================================ */
.shop-theme-cabinet_glass.vitrine-layout-shelf .vitrine,
.shop-theme-cabinet_glass .shop-shelf .vitrine {
  --vr-back-1: #f8f8f4;
  --vr-back-2: #ebebe5;
  --vr-frame: #b8bdc4;
  --vr-frame-edge: #e0e5ea;
  --vr-shelf-top: #e0e5ea;
  --vr-shelf-face: #98a0a8;
  --vr-led: #ffffff;
  --vr-glass-spec: rgba(255, 255, 255, 0.35);
  --vr-floor-reflect: 0.28;
  --vr-vignette: rgba(60, 80, 100, 0.1);
  --vr-piece-shadow: rgba(40, 60, 80, 0.3);
  background:
    /* Veines de marbre */
    repeating-linear-gradient(105deg,
      transparent 0, transparent 90px,
      rgba(160,170,190,0.10) 90px, rgba(160,170,190,0.18) 92px,
      transparent 92px, transparent 220px),
    repeating-linear-gradient(75deg,
      transparent 0, transparent 140px,
      rgba(140,150,170,0.06) 140px, rgba(140,150,170,0.10) 142px,
      transparent 142px, transparent 300px),
    /* Lumière douce */
    radial-gradient(ellipse 90% 50% at 30% 20%, rgba(220,230,245,0.22), transparent 60%),
    radial-gradient(ellipse 70% 40% at 70% 80%, rgba(180,200,225,0.15), transparent 65%),
    linear-gradient(180deg, #f8f8f4 0%, #e8e8e2 100%) !important;
  border: 12px solid #b8bdc4 !important;
  border-image: linear-gradient(135deg, #f5f5f0 0%, #b8bdc4 50%, #f5f5f0 100%) 1 !important;
  box-shadow:
    0 32px 56px -16px rgba(60,80,100,0.25),
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.1) !important;
}
/* Reflet façade verre plus prononcé */
.shop-theme-cabinet_glass.vitrine-layout-shelf .vitrine::after,
.shop-theme-cabinet_glass .shop-shelf .vitrine::after {
  opacity: 0.7 !important;
}

/* ============================================================================
   5. GALLERY MARBLE — Musée d'art (mur blanc + spot halogène)
   ============================================================================ */
.shop-theme-gallery_marble.vitrine-layout-shelf .vitrine,
.shop-theme-gallery_marble .shop-shelf .vitrine,
.shop-theme-white_gallery.vitrine-layout-shelf .vitrine,
.shop-theme-white_gallery .shop-shelf .vitrine {
  --vr-back-1: #fafaf6;
  --vr-back-2: #f0efe9;
  --vr-frame: transparent;
  --vr-shelf-top: #f5f3ee;
  --vr-shelf-face: #d8d4c8;
  --vr-led: #fffbe5;
  --vr-floor-reflect: 0.18;
  --vr-vignette: rgba(120,110,90,0.05);
  --vr-piece-shadow: rgba(80, 70, 50, 0.32);
  background:
    /* Grain papier très subtil */
    radial-gradient(circle at 30% 40%, rgba(180,170,150,0.04) 1px, transparent 1.5px) 0 0/8px 8px,
    /* Lumière douce du plafond */
    radial-gradient(ellipse 200% 60% at 50% -10%, rgba(255,250,235,0.4), transparent 70%),
    #fafaf6 !important;
  border: 1px solid #e8e6e0 !important;
  border-radius: 6px !important;
  box-shadow:
    0 32px 80px -20px rgba(80,70,50,0.18) !important;
}
/* Pas de vignette agressive — c'est un mur */
.shop-theme-gallery_marble.vitrine-layout-shelf .vitrine::before,
.shop-theme-gallery_marble .shop-shelf .vitrine::before,
.shop-theme-white_gallery.vitrine-layout-shelf .vitrine::before,
.shop-theme-white_gallery .shop-shelf .vitrine::before {
  background: transparent !important;
}
/* Pas de reflet de verre */
.shop-theme-gallery_marble.vitrine-layout-shelf .vitrine::after,
.shop-theme-gallery_marble .shop-shelf .vitrine::after,
.shop-theme-white_gallery.vitrine-layout-shelf .vitrine::after,
.shop-theme-white_gallery .shop-shelf .vitrine::after {
  display: none !important;
}
/* Étagères murales flottantes en pierre */
.shop-theme-gallery_marble.vitrine-layout-shelf .vitrine .etagere::before,
.shop-theme-gallery_marble .shop-shelf .vitrine .etagere::before,
.shop-theme-white_gallery.vitrine-layout-shelf .vitrine .etagere::before,
.shop-theme-white_gallery .shop-shelf .vitrine .etagere::before {
  height: 18px;
  background: linear-gradient(180deg, var(--vt-white-full) 0%, #ebe7dd 50%, #c8c5be 100%) !important;
  box-shadow: 0 8px 16px rgba(80,70,50,0.18), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  border-radius: 1px;
}
/* Pas de bandeau LED — spots venant d'en haut */
.shop-theme-gallery_marble.vitrine-layout-shelf .vitrine .etagere::after,
.shop-theme-gallery_marble .shop-shelf .vitrine .etagere::after,
.shop-theme-white_gallery.vitrine-layout-shelf .vitrine .etagere::after,
.shop-theme-white_gallery .shop-shelf .vitrine .etagere::after {
  display: none !important;
}
/* Spot halogène musée par pièce — chaud, large, depuis le haut */
.shop-theme-gallery_marble.vitrine-layout-shelf .vitrine .slot:not(.is-empty)::before,
.shop-theme-gallery_marble .shop-shelf .vitrine .slot:not(.is-empty)::before,
.shop-theme-white_gallery.vitrine-layout-shelf .vitrine .slot:not(.is-empty)::before,
.shop-theme-white_gallery .shop-shelf .vitrine .slot:not(.is-empty)::before {
  inset: 0 5% 25% 5% !important;
  background: radial-gradient(
    ellipse 70% 110% at var(--vr-led-pos-x, 50%) -10%,
    rgba(255, 220, 150, 0.5) 0%,
    rgba(255, 220, 150, 0.15) 35%,
    transparent 70%
  ) !important;
  opacity: calc(0.85 * var(--vr-led-intensity, 1)) !important;
}

/* ============================================================================
   6. CABINET NEON — Akihabara cyberpunk
   ============================================================================ */
.shop-theme-cabinet_neon.vitrine-layout-shelf .vitrine,
.shop-theme-cabinet_neon .shop-shelf .vitrine,
.shop-theme-neon_manga.vitrine-layout-shelf .vitrine,
.shop-theme-neon_manga .shop-shelf .vitrine {
  --vr-back-1: #0a0420;
  --vr-back-2: #050210;
  --vr-frame: #1a0830;
  --vr-frame-edge: #ff2bd6;
  --vr-shelf-top: #ff2bd6;
  --vr-shelf-face: #2a0840;
  --vr-led: #00f0ff;
  --vr-led-spread: 70px;
  --vr-floor-reflect: 0.55;
  --vr-piece-shadow: rgba(255, 0, 200, 0.45);
  background:
    /* Grille fluo */
    linear-gradient(rgba(255,43,214,0.06) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, rgba(0,240,255,0.06) 1px, transparent 1px) 0 0/24px 24px,
    /* Halo central pulsant */
    radial-gradient(ellipse at center, rgba(120,40,180,0.35), transparent 65%),
    /* Halo bas */
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(255,43,214,0.18), transparent 70%),
    linear-gradient(180deg, #0a0420 0%, #030108 100%) !important;
  border: 6px solid #1a0830 !important;
  border-image: linear-gradient(135deg, var(--vt-neon-pink) 0%, var(--vt-neon-cyan) 50%, var(--vt-neon-pink) 100%) 1 !important;
  box-shadow:
    0 0 50px rgba(255,43,214,0.45),
    0 0 100px rgba(0,240,255,0.25),
    inset 0 0 80px rgba(0,0,0,0.55) !important;
  animation: vr-neon-frame-glow 6s ease-in-out infinite;
}
@keyframes vr-neon-frame-glow {
  0%, 100% { box-shadow: 0 0 50px rgba(255,43,214,0.45), 0 0 100px rgba(0,240,255,0.25), inset 0 0 80px rgba(0,0,0,0.55); }
  50% { box-shadow: 0 0 60px rgba(0,240,255,0.55), 0 0 120px rgba(255,43,214,0.35), inset 0 0 80px rgba(0,0,0,0.55); }
}
/* Bandeau LED RGB animé */
.shop-theme-cabinet_neon.vitrine-layout-shelf .vitrine .etagere::after,
.shop-theme-cabinet_neon .shop-shelf .vitrine .etagere::after,
.shop-theme-neon_manga.vitrine-layout-shelf .vitrine .etagere::after,
.shop-theme-neon_manga .shop-shelf .vitrine .etagere::after {
  height: 3px !important;
  background: linear-gradient(90deg, var(--vt-neon-pink) 0%, var(--vt-neon-cyan) 33%, var(--vt-neon-pink) 66%, var(--vt-neon-cyan) 100%) !important;
  background-size: 300% 100% !important;
  animation: vr-neon-strip 5s linear infinite !important;
}
@keyframes vr-neon-strip {
  0% { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}

/* ============================================================================
   7. EMBER AMBER — Forge / Atelier alchimiste (briques + braises)
   ============================================================================ */
.shop-theme-ember_amber.vitrine-layout-shelf .vitrine,
.shop-theme-ember_amber .shop-shelf .vitrine {
  --vr-back-1: #2a1208;
  --vr-back-2: #150804;
  --vr-frame: #1a0a04;
  --vr-frame-edge: #5d2a14;
  --vr-shelf-top: #5d2a14;
  --vr-shelf-face: #1a0a04;
  --vr-led: #ffce80;
  --vr-floor-reflect: 0.4;
  background:
    /* Briques apparentes */
    repeating-linear-gradient(0deg,
      transparent 0, transparent 36px,
      rgba(50,20,8,0.6) 36px, rgba(50,20,8,0.6) 38px,
      transparent 38px, transparent 74px),
    repeating-linear-gradient(90deg,
      transparent 0, transparent 84px,
      rgba(50,20,8,0.5) 84px, rgba(50,20,8,0.5) 86px,
      transparent 86px, transparent 170px),
    /* Décalage des rangs alternés */
    repeating-linear-gradient(0deg,
      transparent 0, transparent 74px,
      rgba(50,20,8,0.5) 74px, rgba(50,20,8,0.5) 76px,
      transparent 76px, transparent 158px) 42px 0,
    /* Braises chaudes en bas */
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(255,80,30,0.3), transparent 70%),
    radial-gradient(ellipse 50% 25% at 25% 95%, rgba(255,140,60,0.2), transparent 70%),
    radial-gradient(ellipse 40% 20% at 75% 95%, rgba(255,140,60,0.18), transparent 70%),
    linear-gradient(180deg, #2a1208 0%, #0a0402 100%) !important;
  border: 14px solid #1a0a04 !important;
  border-image: linear-gradient(180deg, #1a0a04, #5d2a14 30%, #1a0a04) 1 !important;
}
/* Bandeau LED orange flickerant */
.shop-theme-ember_amber.vitrine-layout-shelf .vitrine .etagere::after,
.shop-theme-ember_amber .shop-shelf .vitrine .etagere::after {
  background: linear-gradient(90deg, transparent 0%, #ffce80 25%, #ffb45a 50%, #ffce80 75%, transparent 100%) !important;
  animation: vr-ember-flicker 3.2s ease-in-out infinite !important;
}
@keyframes vr-ember-flicker {
  0%, 100% { opacity: 0.85; }
  20% { opacity: 0.72; }
  40% { opacity: 0.95; }
  60% { opacity: 0.78; }
  80% { opacity: 0.9; }
}

/* ============================================================================
   8. MIDNIGHT SAPPHIRE — Observatoire / Galaxie (étoiles + nébuleuse)
   ============================================================================ */
.shop-theme-midnight_sapphire.vitrine-layout-shelf .vitrine,
.shop-theme-midnight_sapphire .shop-shelf .vitrine {
  --vr-back-1: #08142a;
  --vr-back-2: #030814;
  --vr-frame: #0c1c3a;
  --vr-frame-edge: #4a82c8;
  --vr-shelf-top: #4a82c8;
  --vr-shelf-face: #0c1c3a;
  --vr-led: #d4ecff;
  --vr-floor-reflect: 0.4;
  background:
    /* Étoiles éparses */
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.7) 0.7px, transparent 1.2px),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,0.55) 0.7px, transparent 1.2px),
    radial-gradient(circle at 45% 65%, rgba(255,255,255,0.5) 0.6px, transparent 1px),
    radial-gradient(circle at 88% 75%, rgba(255,255,255,0.6) 0.7px, transparent 1.2px),
    radial-gradient(circle at 22% 85%, rgba(255,255,255,0.5) 0.6px, transparent 1px),
    radial-gradient(circle at 60% 12%, rgba(255,255,255,0.45) 0.5px, transparent 1px),
    radial-gradient(circle at 33% 50%, rgba(180,200,255,0.4) 0.5px, transparent 1px),
    radial-gradient(circle at 92% 50%, rgba(180,200,255,0.5) 0.6px, transparent 1px),
    /* Nébuleuse */
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(74,130,200,0.18), transparent 65%),
    radial-gradient(ellipse 50% 35% at 70% 70%, rgba(120,80,180,0.15), transparent 70%),
    /* Voie lactée subtile */
    linear-gradient(120deg, transparent 30%, rgba(120,150,200,0.06) 50%, transparent 70%),
    linear-gradient(180deg, #08142a 0%, #02050e 100%) !important;
  border: 10px solid #0c1c3a !important;
  border-image: linear-gradient(135deg, #1c3868 0%, #4a82c8 50%, #1c3868 100%) 1 !important;
  box-shadow:
    0 32px 56px -16px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(120,180,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.7),
    inset 0 0 100px rgba(0,20,60,0.5) !important;
}
/* LED bleu glacé */
.shop-theme-midnight_sapphire.vitrine-layout-shelf .vitrine .etagere::after,
.shop-theme-midnight_sapphire .shop-shelf .vitrine .etagere::after {
  background: linear-gradient(90deg, transparent 0%, #4a82c8 20%, #d4ecff 50%, #4a82c8 80%, transparent 100%) !important;
  filter: drop-shadow(0 0 4px rgba(120,180,255,0.7));
}

/* ============================================================================
   9. FOREST — Lodge / Cabane forestière (rondins + mousse)
   ============================================================================ */
.shop-theme-forest.vitrine-layout-shelf .vitrine,
.shop-theme-forest .shop-shelf .vitrine {
  --vr-back-1: #1a2820;
  --vr-back-2: #0c1410;
  --vr-frame: #2a4a36;
  --vr-frame-edge: #4a7556;
  --vr-shelf-top: #4a7556;
  --vr-shelf-face: #1a2a20;
  --vr-led: #ffe8a8;
  --vr-floor-reflect: 0.28;
  background:
    /* Rondins horizontaux */
    repeating-linear-gradient(180deg,
      rgba(40,80,55,0.25) 0,
      rgba(50,90,65,0.4) 28px,
      rgba(30,60,40,0.3) 56px,
      rgba(40,80,55,0.25) 84px),
    /* Nœuds de bois épars */
    radial-gradient(ellipse 4% 2% at 22% 18%, rgba(80,50,30,0.5), transparent 70%),
    radial-gradient(ellipse 5% 2.5% at 77% 47%, rgba(80,50,30,0.4), transparent 70%),
    radial-gradient(ellipse 3% 1.5% at 35% 78%, rgba(80,50,30,0.45), transparent 70%),
    /* Mousse sombre */
    radial-gradient(ellipse at 25% 80%, rgba(80,140,80,0.18), transparent 60%),
    radial-gradient(ellipse at 75% 30%, rgba(80,140,80,0.12), transparent 60%),
    linear-gradient(180deg, #1a2820 0%, #0a1208 100%) !important;
  border: 16px solid #1a2820 !important;
  border-image: linear-gradient(180deg, #1a2820, #2a4a36 50%, #0a1208) 1 !important;
}
/* LED chaude type lampe à pétrole */
.shop-theme-forest.vitrine-layout-shelf .vitrine .etagere::after,
.shop-theme-forest .shop-shelf .vitrine .etagere::after {
  background: linear-gradient(90deg, transparent 0%, #ffd4a0 25%, #ffe8a8 50%, #ffd4a0 75%, transparent 100%) !important;
}

/* ============================================================================
   10. MODERN MUSEUM — Galerie béton contemporaine
   ============================================================================ */
.shop-theme-modern_museum.vitrine-layout-shelf .vitrine,
.shop-theme-modern_museum .shop-shelf .vitrine {
  --vr-back-1: #ebe8df;
  --vr-back-2: #d4cfbe;
  --vr-frame: transparent;
  --vr-shelf-top: #b8af96;
  --vr-shelf-face: #88815f;
  --vr-led: #fff8d8;
  --vr-floor-reflect: 0.16;
  --vr-vignette: rgba(120,100,70,0.08);
  --vr-piece-shadow: rgba(80, 60, 30, 0.4);
  background:
    /* Béton avec taches */
    radial-gradient(ellipse 28% 18% at 25% 28%, rgba(140,130,110,0.18), transparent),
    radial-gradient(ellipse 22% 14% at 75% 70%, rgba(140,130,110,0.15), transparent),
    radial-gradient(ellipse 18% 12% at 50% 50%, rgba(160,150,130,0.12), transparent),
    radial-gradient(ellipse 15% 10% at 15% 75%, rgba(120,110,90,0.1), transparent),
    radial-gradient(ellipse 12% 8% at 85% 20%, rgba(140,130,110,0.13), transparent),
    /* Léger grain */
    radial-gradient(circle at 30% 40%, rgba(100,90,70,0.04) 1px, transparent 1.5px) 0 0/16px 16px,
    linear-gradient(180deg, #ebe8df 0%, #d0cab8 100%) !important;
  border: 3px solid #c0b89e !important;
  border-radius: 4px !important;
  box-shadow: 0 28px 56px -16px rgba(80,60,30,0.2) !important;
}
/* Plateaux fins et minéraux */
.shop-theme-modern_museum.vitrine-layout-shelf .vitrine .etagere::before,
.shop-theme-modern_museum .shop-shelf .vitrine .etagere::before {
  height: 8px !important;
  background: linear-gradient(180deg, #c8c0a8 0%, #88815f 100%) !important;
}
/* LED jaunâtre douce */
.shop-theme-modern_museum.vitrine-layout-shelf .vitrine .etagere::after,
.shop-theme-modern_museum .shop-shelf .vitrine .etagere::after {
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent, var(--vt-white-gold), var(--vt-white-gold), transparent) !important;
}

/* ============================================================================
   11. SANDSTONE WARM — Désert / Antiquités égyptiennes
   ============================================================================ */
.shop-theme-sandstone_warm.vitrine-layout-shelf .vitrine,
.shop-theme-sandstone_warm .shop-shelf .vitrine {
  --vr-back-1: #f0d9b5;
  --vr-back-2: #c89868;
  --vr-frame: #8a5e3c;
  --vr-frame-edge: #c89868;
  --vr-shelf-top: #c89868;
  --vr-shelf-face: #6a4828;
  --vr-led: #ffe0a8;
  --vr-floor-reflect: 0.22;
  --vr-vignette: rgba(120, 70, 30, 0.15);
  --vr-piece-shadow: rgba(100, 60, 20, 0.4);
  background:
    /* Vagues de sable */
    repeating-linear-gradient(35deg,
      transparent 0, transparent 18px,
      rgba(180,120,60,0.06) 18px, rgba(180,120,60,0.1) 19px,
      transparent 19px, transparent 38px),
    repeating-linear-gradient(165deg,
      transparent 0, transparent 28px,
      rgba(160,100,50,0.05) 28px, rgba(160,100,50,0.08) 29px,
      transparent 29px, transparent 60px),
    /* Halo soleil chaud */
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,200,120,0.25), transparent 70%),
    /* Nuages sable */
    radial-gradient(ellipse at 20% 80%, rgba(220,160,100,0.12), transparent 60%),
    radial-gradient(ellipse at 80% 40%, rgba(220,160,100,0.1), transparent 60%),
    linear-gradient(180deg, #f0d9b5 0%, #b88858 100%) !important;
  border: 12px solid #8a5e3c !important;
  border-image: linear-gradient(160deg, #8a5e3c, #c89868 30%, #d4a878 50%, #c89868 70%, #8a5e3c) 1 !important;
}
/* Plateau chaud */
.shop-theme-sandstone_warm.vitrine-layout-shelf .vitrine .etagere::after,
.shop-theme-sandstone_warm .shop-shelf .vitrine .etagere::after {
  background: linear-gradient(90deg, transparent, #ffe0a8, #ffd088, #ffe0a8, transparent) !important;
}

/* ============================================================================
   12. DARK LUXE / LOGUETOWN / MIDNIGHT — Édition Collector (navy + champagne)
   ============================================================================ */
.shop-theme-dark_luxe.vitrine-layout-shelf .vitrine,
.shop-theme-dark_luxe .shop-shelf .vitrine,
.shop-theme-loguetown.vitrine-layout-shelf .vitrine,
.shop-theme-loguetown .shop-shelf .vitrine,
.shop-theme-midnight.vitrine-layout-shelf .vitrine,
.shop-theme-midnight .shop-shelf .vitrine {
  --vr-back-1: #14182a;
  --vr-back-2: #0b0d1a;
  --vr-frame: #16213E;
  --vr-frame-edge: #D4AF7A;
  --vr-shelf-top: #D4AF7A;
  --vr-shelf-face: #16213E;
  --vr-led: #fff0d6;
  --vr-floor-reflect: 0.4;
  background:
    /* Pattern losange champagne */
    repeating-linear-gradient(45deg,
      transparent 0, transparent 60px,
      rgba(212,175,122,0.025) 60px, rgba(212,175,122,0.04) 61px,
      transparent 61px, transparent 120px),
    repeating-linear-gradient(-45deg,
      transparent 0, transparent 60px,
      rgba(212,175,122,0.025) 60px, rgba(212,175,122,0.04) 61px,
      transparent 61px, transparent 120px),
    /* Halo champagne central */
    radial-gradient(ellipse at 50% 30%, rgba(212,175,122,0.1), transparent 65%),
    linear-gradient(180deg, #14182a 0%, #0b0d1a 100%) !important;
  border: 12px solid #16213E !important;
  border-image: linear-gradient(135deg, var(--vt-gold-champagne) 0%, #16213E 25%, var(--vt-gold-champagne) 50%, #16213E 75%, var(--vt-gold-champagne) 100%) 1 !important;
  box-shadow:
    0 32px 56px -16px rgba(0,0,0,0.55),
    0 0 0 1px rgba(212,175,122,0.18),
    inset 0 1px 0 rgba(212,175,122,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.7) !important;
}

/* ============================================================
   TAILLES DES SLOTS
   ============================================================ */
.vitrine-slot-s.vitrine-layout-shelf .vitrine .slot,
.vitrine-slot-s .shop-shelf .vitrine .slot { aspect-ratio: 3 / 4; }
.vitrine-slot-m.vitrine-layout-shelf .vitrine .slot,
.vitrine-slot-m .shop-shelf .vitrine .slot { aspect-ratio: 3 / 4.5; }
.vitrine-slot-l.vitrine-layout-shelf .vitrine .slot,
.vitrine-slot-l .shop-shelf .vitrine .slot { aspect-ratio: 3 / 5.2; }

/* ============================================================
   COLONNES (override dynamique)
   ============================================================ */
.vitrine-layout-shelf .vitrine.vitrine-cols-2 .etagere,
.shop-shelf .vitrine.vitrine-cols-2 .etagere { grid-template-columns: repeat(2, 1fr); }
.vitrine-layout-shelf .vitrine.vitrine-cols-3 .etagere,
.shop-shelf .vitrine.vitrine-cols-3 .etagere { grid-template-columns: repeat(3, 1fr); }
.vitrine-layout-shelf .vitrine.vitrine-cols-4 .etagere,
.shop-shelf .vitrine.vitrine-cols-4 .etagere { grid-template-columns: repeat(4, 1fr); }
.vitrine-layout-shelf .vitrine.vitrine-cols-5 .etagere,
.shop-shelf .vitrine.vitrine-cols-5 .etagere { grid-template-columns: repeat(5, 1fr); }
.vitrine-layout-shelf .vitrine.vitrine-cols-6 .etagere,
.shop-shelf .vitrine.vitrine-cols-6 .etagere { grid-template-columns: repeat(6, 1fr); }

/* ============================================================
   RESPONSIVE — meubles plus compacts sur mobile
   ============================================================ */
@media (max-width: 900px) {
  .vitrine-layout-shelf .vitrine,
  .shop-shelf .vitrine {
    border-width: 10px;
    padding: 14px 14px 18px;
  }
  .vitrine-layout-shelf .vitrine .etagere,
  .shop-shelf .vitrine .etagere {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
    padding: 10px 8px 12px;
    margin-bottom: 16px;
  }
}
@media (max-width: 600px) {
  .vitrine-layout-shelf .vitrine,
  .shop-shelf .vitrine {
    border-width: 8px;
    padding: 10px 10px 14px;
    border-radius: 8px;
  }
  .vitrine-layout-shelf .vitrine .etagere,
  .shop-shelf .vitrine .etagere {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
    padding: 8px 6px 10px;
    margin-bottom: 12px;
  }
  .vitrine-layout-shelf .vitrine .slot__tag,
  .shop-shelf .vitrine .slot__tag {
    font-size: 8px;
    padding: 3px 6px;
    top: 4px;
    left: 4px;
  }
}

/* ============================================================
   PRINT — version aplatie
   ============================================================ */
@media print {
  .vitrine-layout-shelf .vitrine,
  .shop-shelf .vitrine {
    background: var(--vt-white) !important;
    border: 1px solid #888 !important;
    box-shadow: none !important;
  }
  .vitrine-layout-shelf .vitrine::before,
  .vitrine-layout-shelf .vitrine::after,
  .shop-shelf .vitrine::before,
  .shop-shelf .vitrine::after {
    display: none !important;
  }
}

/* ============================================================
   ACCESSIBILITÉ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .vitrine-layout-shelf .vitrine .slot__link,
  .vitrine-layout-shelf .vitrine .slot__img,
  .shop-shelf .vitrine .slot__link,
  .shop-shelf .vitrine .slot__img {
    transition: none !important;
  }
  .shop-theme-cabinet_neon .shop-shelf .vitrine .etagere::after,
  .shop-theme-neon_manga .shop-shelf .vitrine .etagere::after {
    animation: none !important;
  }
}

.vitrine-layout-shelf .vitrine a:focus-visible,
.shop-shelf .vitrine a:focus-visible {
  outline: 2px solid var(--vr-led);
  outline-offset: 4px;
  border-radius: 4px;
}


/* ===== merged: vitrine-wow.css ===== */

/* Page interne de prévisualisation vitrine */

.wow-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 18px 56px;
}

.wow-title {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.wow-subtitle {
    margin: 0 0 22px;
    color: rgba(100, 116, 139, 0.9);
    font-weight: 700;
}

.wow-section {
    margin: 18px 0 28px;
}

.wow-label {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(100, 116, 139, 0.9);
}

.wow-frame {
    border-radius: 20px;
}

/* Le meuble vitrine est en .vitrine, on lui donne juste un peu d’air ici */
.wow-frame .vitrine {
    margin: 0;
}



/* ===== merged: personnaliser-vitrine.css ===== */

/* Personnaliser vitrine – UI dédiée (desktop + mobile) */

.account-page .account-page-header .showcase-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #111827;
}

.account-page .account-page-header .account-page-subtitle{
  margin: 6px 0 0;
  color: rgba(55, 65, 81, 0.78);
  line-height: 1.45;
}

.account-page .account-page-header-inner{
  gap: 14px;
}

.account-page .showcase-header-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.account-page .account-page-content{
  padding-top: 14px;
}

.account-page .alert{
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
  line-height: 1.35;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(248, 250, 252, 0.9);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.account-page .alert + .alert{
  margin-top: 10px;
}
.account-page .alert-success{
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(236, 253, 245, 0.9);
  color: #065f46;
}
.account-page .alert-warning{
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.95);
  color: #92400e;
}
.account-page .alert-error{
  border-color: rgba(239, 68, 68, 0.26);
  background: rgba(254, 242, 242, 0.95);
  color: #991b1b;
}

.showcase-customizer {
  max-width: 100%;
  width: 100%;
  margin: 0;
}

.showcase-customizer .showcase-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Cette page réutilise les classes "profil-form" qui limitent la largeur.
   Ici on veut occuper toute la largeur de la section compte. */
.showcase-customizer .profil-form{
  max-width: 100% !important;
}

.showcase-sections-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 980px) {
  .showcase-sections-grid{
    grid-template-columns: 1fr;
  }
}

/* Placement visuel des sections (desktop) */
@media (min-width: 981px) {
  .showcase-sections-grid > .showcase-section:nth-of-type(1){ /* Style */
    grid-column: 1;
  }
  .showcase-sections-grid > .showcase-section:nth-of-type(2){ /* Contenu */
    grid-column: 2;
  }
  .showcase-sections-grid > .showcase-section:nth-of-type(3){ /* Liens */
    grid-column: 1;
  }
  .showcase-sections-grid > .showcase-section:nth-of-type(4){ /* Badges */
    grid-column: 2;
  }
}

.showcase-section {
  border: 1px solid rgba(44, 62, 80, 0.08);
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(180deg, var(--vt-white-full) 0%, #fcfcfd 100%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.showcase-section__title {
  margin: 0 0 2px 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--vt-loguetown-primary);
}

.showcase-section__hint {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.45;
}

.help-text{
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(75, 85, 99, 0.92);
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 860px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }
}

.showcase-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.showcase-field label {
  font-weight: 700;
  color: #374151;
  font-size: 13px;
}

.showcase-field input[type="text"],
.showcase-field textarea,
.showcase-field select {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(44, 62, 80, 0.16);
  background: var(--vt-white);
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.showcase-field input[type="file"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(44, 62, 80, 0.22);
  background: rgba(248, 250, 252, 0.85);
  font-size: 13px;
  color: #111827;
}

.showcase-field textarea {
  min-height: 130px;
  resize: vertical;
}

.showcase-field input[type="text"]:focus,
.showcase-field textarea:focus,
.showcase-field select:focus {
  border-color: rgba(56, 94, 107, 0.55);
  box-shadow: 0 0 0 3px rgba(56, 94, 107, 0.12);
}

.showcase-range {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.showcase-range strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(242, 222, 185, 0.35);
  color: var(--vt-loguetown-primary-dark);
  font-weight: 900;
}

.showcase-field input[type="range"] {
  width: 100%;
}

.showcase-banner-preview {
  border-radius: 16px;
  border: 1px solid rgba(44, 62, 80, 0.12);
  overflow: hidden;
  background: #f8fafc;
}

.showcase-banner-preview-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .showcase-banner-preview-img {
    height: 160px;
  }
}

.showcase-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 860px) {
  .showcase-links {
    grid-template-columns: 1fr;
  }
}

.showcase-badges-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 520px) {
  .showcase-badges-grid {
    grid-template-columns: 1fr;
  }
}

.showcase-badge-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border: 1px solid rgba(44, 62, 80, 0.12);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.7);
  cursor: pointer;
  user-select: none;
}

.showcase-badge-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--vt-loguetown-primary);
}

.showcase-badge-option span {
  font-weight: 700;
  color: #1f2937;
  font-size: 13px;
}

.showcase-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

@media (max-width: 768px) {
  .showcase-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.showcase-actions{
  position: sticky;
  bottom: 14px;
  z-index: 5;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.92));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

@media (max-width: 768px) {
  .showcase-actions{
    bottom: 10px;
  }
}

.showcase-save-btn {
  width: auto;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--vt-loguetown-gold), var(--vt-loguetown-gold-hover));
  color: var(--vt-loguetown-primary-dark);
  box-shadow: 0 10px 24px rgba(44, 62, 80, 0.08);
}

.showcase-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(44, 62, 80, 0.12);
}

@media (max-width: 520px) {
  .account-page .showcase-header-actions a{
    width: 100%;
    text-align: center;
  }
  .showcase-save-btn{
    width: 100%;
  }
}


/* ============================================================
   GALERIE DE THÈMES VISUELS (theme-tile)
   ============================================================ */
.showcase-field--full { grid-column: 1 / -1; }
.showcase-field-hint {
  font-size: 0.85rem;
  color: var(--gray, #64748b);
  margin: 4px 0 12px;
}
.theme-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.theme-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--surface-card, var(--vt-white));
  border: 2px solid var(--border-light, #e2e8f0);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  overflow: hidden;
}
.theme-tile:hover { transform: translateY(-2px); border-color: var(--primary, var(--vt-loguetown-primary)); }
.theme-tile input { position: absolute; opacity: 0; pointer-events: none; }
.theme-tile.is-selected,
.theme-tile:has(input:checked) {
  border-color: var(--primary, var(--vt-loguetown-primary));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, var(--vt-loguetown-primary)) 18%, transparent);
}
.theme-tile__preview {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.theme-tile__shelf {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 6px;
  border-radius: 1px;
  box-shadow: 0 4px 8px var(--vt-black-shadow);
}
.theme-tile__shelf:nth-of-type(1) { top: 28%; }
.theme-tile__shelf:nth-of-type(2) { top: 64%; }
.theme-tile__led {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1.5px;
  border-radius: 2px;
  top: 18%;
  filter: blur(0.5px);
  box-shadow: 0 0 12px currentColor;
}
.theme-tile__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dark, var(--vt-loguetown-primary-dark));
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.theme-tile__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary, var(--vt-loguetown-primary));
  color: var(--vt-white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 180ms ease, transform 180ms ease;
}
.theme-tile.is-selected .theme-tile__check,
.theme-tile:has(input:checked) .theme-tile__check {
  opacity: 1;
  transform: scale(1);
}

/* ===== Aperçus colorés par skin ===== */
.theme-tile--cabinet_walnut .theme-tile__preview { background: linear-gradient(180deg, #2a1810 0%, #1a0e08 100%); border-color: #4a2f1f; }
.theme-tile--cabinet_walnut .theme-tile__shelf { background: linear-gradient(180deg, #6b4528, #3d2515); }
.theme-tile--cabinet_walnut .theme-tile__led { background: var(--vt-white-warm); color: #ffce80; }

.theme-tile--cabinet_oak .theme-tile__preview { background: linear-gradient(180deg, #d4b896 0%, #b89976 100%); border-color: #8b6a45; }
.theme-tile--cabinet_oak .theme-tile__shelf { background: linear-gradient(180deg, #a08560, #6b4f30); }
.theme-tile--cabinet_oak .theme-tile__led { background: var(--vt-white-full); color: var(--vt-white-full); }

.theme-tile--cabinet_carbon .theme-tile__preview { background: linear-gradient(180deg, #1a1a1f 0%, #0a0a0d 100%); border-color: #2a2a30; }
.theme-tile--cabinet_carbon .theme-tile__shelf { background: linear-gradient(180deg, #2a2a30, #0a0a0d); }
.theme-tile--cabinet_carbon .theme-tile__led { background: #d4f1ff; color: #78c8ff; }

.theme-tile--cabinet_glass .theme-tile__preview { background: linear-gradient(180deg, #f5f5f0 0%, #e8e8e2 100%); border-color: #c0c5cc; }
.theme-tile--cabinet_glass .theme-tile__shelf { background: linear-gradient(180deg, #d8dde2, #a0a8b0); }
.theme-tile--cabinet_glass .theme-tile__led { background: var(--vt-white-full); color: var(--vt-white-full); }

.theme-tile--gallery_marble .theme-tile__preview,
.theme-tile--white_gallery .theme-tile__preview { background: linear-gradient(180deg, #fafaf6 0%, #efefe9 100%); border-color: #e0ddd5; }
.theme-tile--gallery_marble .theme-tile__shelf,
.theme-tile--white_gallery .theme-tile__shelf { background: linear-gradient(180deg, #f5f3ee, #c8c5be); }
.theme-tile--gallery_marble .theme-tile__led,
.theme-tile--white_gallery .theme-tile__led { background: var(--vt-white-cream); color: #ffd980; }

.theme-tile--cabinet_neon .theme-tile__preview,
.theme-tile--neon_manga .theme-tile__preview { background: linear-gradient(180deg, #0a0420 0%, #050210 100%); border-color: var(--vt-neon-pink); }
.theme-tile--cabinet_neon .theme-tile__shelf,
.theme-tile--neon_manga .theme-tile__shelf { background: linear-gradient(180deg, var(--vt-neon-pink), #4a0840); box-shadow: 0 4px 14px rgba(255, 43, 214, 0.5); }
.theme-tile--cabinet_neon .theme-tile__led,
.theme-tile--neon_manga .theme-tile__led { background: var(--vt-neon-cyan); color: var(--vt-neon-cyan); }

.theme-tile--dark_luxe .theme-tile__preview { background: linear-gradient(180deg, #14182a 0%, #0b0d1a 100%); border-color: #16213E; }
.theme-tile--dark_luxe .theme-tile__shelf { background: linear-gradient(180deg, var(--vt-gold-champagne), #16213E); }
.theme-tile--dark_luxe .theme-tile__led { background: var(--vt-white-peach); color: var(--vt-gold-champagne); }

.theme-tile--forest .theme-tile__preview { background: linear-gradient(180deg, #1a2820 0%, #0c1410 100%); border-color: #2a4a36; }
.theme-tile--forest .theme-tile__shelf { background: linear-gradient(180deg, #3d6b4f, #1a2a20); }
.theme-tile--forest .theme-tile__led { background: #d4f5d8; color: #d4f5d8; }

.theme-tile--modern_museum .theme-tile__preview { background: linear-gradient(180deg, #f0ede5 0%, #d8d4c8 100%); border-color: #c0b89e; }
.theme-tile--modern_museum .theme-tile__shelf { background: linear-gradient(180deg, #d8d0b6, #98906f); }
.theme-tile--modern_museum .theme-tile__led { background: var(--vt-white-gold); color: #ffd980; }

.theme-tile--ember_amber .theme-tile__preview { background: linear-gradient(180deg, #2a1208 0%, #150804 100%); border-color: #5d2a14; }
.theme-tile--ember_amber .theme-tile__shelf { background: linear-gradient(180deg, #c97840, #4a1f0a); }
.theme-tile--ember_amber .theme-tile__led { background: #ffce80; color: #ffb45a; }

.theme-tile--midnight_sapphire .theme-tile__preview { background: linear-gradient(180deg, #0a1a35 0%, #050a18 100%); border-color: #1c3868; }
.theme-tile--midnight_sapphire .theme-tile__shelf { background: linear-gradient(180deg, #4a82c8, #142450); }
.theme-tile--midnight_sapphire .theme-tile__led { background: #d4ecff; color: #78b4ff; }

.theme-tile--sandstone_warm .theme-tile__preview { background: linear-gradient(180deg, #f0d9b5 0%, #d8b888 100%); border-color: #b8845a; }
.theme-tile--sandstone_warm .theme-tile__shelf { background: linear-gradient(180deg, #d09870, #8a5e3c); }
.theme-tile--sandstone_warm .theme-tile__led { background: var(--vt-white-sand); color: #ffdca8; }

/* ============================================================
   PREVIEWS DE TUILES — vraies différences visuelles entre skins
   ============================================================ */

/* Walnut : boiseries + coins dorés */
.theme-tile--cabinet_walnut .theme-tile__preview {
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 14px, rgba(255,200,140,0.08) 14px, transparent 16px, transparent 28px),
    linear-gradient(180deg, #2a1810 0%, #1a0e08 100%) !important;
  border-color: #6b4528 !important;
}
.theme-tile--cabinet_walnut .theme-tile__preview::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, var(--vt-gold-champagne) 0 4px, transparent 4px) top left/8px 8px no-repeat,
    linear-gradient(225deg, var(--vt-gold-champagne) 0 4px, transparent 4px) top right/8px 8px no-repeat,
    linear-gradient(45deg, var(--vt-gold-champagne) 0 4px, transparent 4px) bottom left/8px 8px no-repeat,
    linear-gradient(315deg, var(--vt-gold-champagne) 0 4px, transparent 4px) bottom right/8px 8px no-repeat;
}

/* Oak : verre clair + grain horizontal */
.theme-tile--cabinet_oak .theme-tile__preview {
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 6px, rgba(120,80,40,0.08) 6px, transparent 7px, transparent 14px),
    linear-gradient(180deg, #f0e6d4 0%, #d8c8a8 100%) !important;
  border-color: #c4a878 !important;
}
.theme-tile--cabinet_oak .theme-tile__shelf {
  background: linear-gradient(180deg, rgba(220,235,245,0.9) 0%, rgba(180,200,220,0.7) 100%) !important;
  height: 3px !important;
}

/* Carbon : pattern hexagone + edge cyan */
.theme-tile--cabinet_carbon .theme-tile__preview {
  background:
    radial-gradient(circle at 25% 25%, rgba(120,200,255,0.06) 1px, transparent 1.5px) 0 0/16px 16px,
    radial-gradient(circle at 75% 75%, rgba(120,200,255,0.05) 1px, transparent 1.5px) 8px 8px/16px 16px,
    linear-gradient(180deg, #15151a 0%, #06060a 100%) !important;
  border-color: #2a2a35 !important;
  box-shadow: inset 0 1px 0 rgba(120,200,255,0.18) !important;
}

/* Glass : marbre veiné */
.theme-tile--cabinet_glass .theme-tile__preview {
  background:
    repeating-linear-gradient(105deg, transparent 0, transparent 30px, rgba(160,170,190,0.18) 30px, rgba(160,170,190,0.25) 31px, transparent 31px, transparent 64px),
    linear-gradient(180deg, #f8f8f4 0%, #ebebe5 100%) !important;
  border-color: #b8bdc4 !important;
}

/* Gallery : mur blanc immaculé, pas de cadre */
.theme-tile--gallery_marble .theme-tile__preview,
.theme-tile--white_gallery .theme-tile__preview {
  background:
    radial-gradient(ellipse 200% 80% at 50% 0%, rgba(255,250,235,0.45), transparent 70%),
    #fafaf6 !important;
  border-color: #e8e6e0 !important;
}
.theme-tile--gallery_marble .theme-tile__shelf,
.theme-tile--white_gallery .theme-tile__shelf {
  background: linear-gradient(180deg, var(--vt-white-full) 0%, #c8c5be 100%) !important;
  height: 4px !important;
  box-shadow: 0 2px 4px rgba(80,70,50,0.15) !important;
}
.theme-tile--gallery_marble .theme-tile__led,
.theme-tile--white_gallery .theme-tile__led {
  display: none !important;
}

/* Neon : grille fluo + bordure RGB */
.theme-tile--cabinet_neon .theme-tile__preview,
.theme-tile--neon_manga .theme-tile__preview {
  background:
    linear-gradient(rgba(255,43,214,0.08) 1px, transparent 1px) 0 0/10px 10px,
    linear-gradient(90deg, rgba(0,240,255,0.08) 1px, transparent 1px) 0 0/10px 10px,
    radial-gradient(ellipse at center, rgba(120,40,180,0.4), transparent 65%),
    linear-gradient(180deg, #0a0420 0%, #050210 100%) !important;
  border: 1.5px solid var(--vt-neon-pink) !important;
  box-shadow: 0 0 8px rgba(255,43,214,0.4), 0 0 14px rgba(0,240,255,0.25) !important;
}
.theme-tile--cabinet_neon .theme-tile__led,
.theme-tile--neon_manga .theme-tile__led {
  background: linear-gradient(90deg, var(--vt-neon-pink), var(--vt-neon-cyan), var(--vt-neon-pink)) !important;
  background-size: 200% 100% !important;
  height: 2px !important;
  animation: tile-neon-strip 4s linear infinite;
}
@keyframes tile-neon-strip {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Ember : briques + braises */
.theme-tile--ember_amber .theme-tile__preview {
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 14px, rgba(50,20,8,0.6) 14px, rgba(50,20,8,0.6) 15px, transparent 15px, transparent 30px),
    repeating-linear-gradient(90deg, transparent 0, transparent 28px, rgba(50,20,8,0.5) 28px, rgba(50,20,8,0.5) 29px, transparent 29px, transparent 58px),
    radial-gradient(ellipse 90% 30% at 50% 100%, rgba(255,80,30,0.35), transparent 70%),
    linear-gradient(180deg, #2a1208 0%, #150804 100%) !important;
  border-color: #5d2a14 !important;
}

/* Midnight Sapphire : étoiles + nébuleuse */
.theme-tile--midnight_sapphire .theme-tile__preview {
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,0.7) 0.5px, transparent 1px),
    radial-gradient(circle at 78% 32%, rgba(255,255,255,0.6) 0.5px, transparent 1px),
    radial-gradient(circle at 45% 65%, rgba(255,255,255,0.5) 0.5px, transparent 1px),
    radial-gradient(circle at 88% 75%, rgba(255,255,255,0.55) 0.5px, transparent 1px),
    radial-gradient(circle at 32% 80%, rgba(255,255,255,0.5) 0.5px, transparent 1px),
    radial-gradient(ellipse at 30% 30%, rgba(74,130,200,0.2), transparent 65%),
    radial-gradient(ellipse at 70% 70%, rgba(120,80,180,0.15), transparent 70%),
    linear-gradient(180deg, #08142a 0%, #02050e 100%) !important;
  border-color: #1c3868 !important;
}

/* Forest : rondins horizontaux */
.theme-tile--forest .theme-tile__preview {
  background:
    repeating-linear-gradient(180deg,
      rgba(40,80,55,0.3) 0,
      rgba(60,100,70,0.5) 12px,
      rgba(30,60,40,0.3) 24px,
      rgba(40,80,55,0.3) 36px),
    linear-gradient(180deg, #1a2820 0%, #0c1410 100%) !important;
  border-color: #2a4a36 !important;
}

/* Modern Museum : béton tacheté */
.theme-tile--modern_museum .theme-tile__preview {
  background:
    radial-gradient(ellipse 28% 18% at 25% 28%, rgba(140,130,110,0.25), transparent),
    radial-gradient(ellipse 22% 14% at 75% 70%, rgba(140,130,110,0.2), transparent),
    radial-gradient(ellipse 18% 12% at 50% 50%, rgba(160,150,130,0.18), transparent),
    linear-gradient(180deg, #ebe8df 0%, #d0cab8 100%) !important;
  border-color: #c0b89e !important;
}

/* Sandstone : vagues de sable */
.theme-tile--sandstone_warm .theme-tile__preview {
  background:
    repeating-linear-gradient(35deg, transparent 0, transparent 8px, rgba(180,120,60,0.12) 8px, rgba(180,120,60,0.18) 9px, transparent 9px, transparent 18px),
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,200,120,0.3), transparent 70%),
    linear-gradient(180deg, #f0d9b5 0%, #b88858 100%) !important;
  border-color: #8a5e3c !important;
}

/* Dark Luxe / Loguetown : losanges champagne */
.theme-tile--dark_luxe .theme-tile__preview {
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(212,175,122,0.06) 18px, rgba(212,175,122,0.1) 19px, transparent 19px, transparent 38px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 18px, rgba(212,175,122,0.06) 18px, rgba(212,175,122,0.1) 19px, transparent 19px, transparent 38px),
    linear-gradient(180deg, #14182a 0%, #0b0d1a 100%) !important;
  border-color: #16213E !important;
  box-shadow: inset 0 1px 0 rgba(212,175,122,0.2) !important;
}