/* Musique - CSS Spécifique (Nouvelle Charte) */

/* MUSIQUE - CSS SPÉCIFIQUE */
/* --- Blocs SEO pré-rendus (masqués visuellement, accessibles aux crawlers) --- */
.seo-decennies,.seo-playlists,.seo-albums{display:none}
/* --- Variables Musique --- */
:root{--mus-accent:#c48898;--mus-accent-hover:#d4a0b0;--mus-accent-dim:rgba(196, 136, 152, 0.1);--mus-gradient:linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);--fav-love:#C4889A;--fav-reference:#8EAAB4;--fav-essential:#C9A96E}
/* MODAL ALBUM - BOÎTIER CD */
.album-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.85);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0.3s}
.album-modal-overlay.active{opacity:1;visibility:visible}
.cdm-case{position:relative;width:284px;height:250px;perspective:1200px}
.cdm-case-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)}
.cdm-case.flipped .cdm-case-inner{transform:rotateY(180deg)}
.cdm-front{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;border-radius:var(--radius-sm);overflow:hidden}
.cdm-spine{width:11px;height:100%;background:repeating-linear-gradient(180deg, #1a1a1a 0px, #333 1px, #0a0a0a 3px);flex-shrink:0}
.cdm-cover{flex:1;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#000;position:relative}
.cdm-cover-placeholder{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-family:var(--font-display);font-size:4rem;color:rgba(255, 255, 255, 0.3);background:#111}
.cdm-info{padding:8px;background:linear-gradient(transparent, rgba(0, 0, 0, 0.9));position:absolute;bottom:0;left:0;right:0}
.cdm-title{font-size:0.78rem;font-weight:700;color:#fff;margin:0 0 4px}
.cdm-artist-year{font-size:0.65rem;color:rgba(255, 255, 255, 0.7);margin:0}
.cdm-flip{position:absolute;bottom:8px;right:8px;width:26px;height:26px;background:rgba(0, 0, 0, 0.5);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s, transform 0.2s;z-index:10}
.cdm-flip:hover{background:rgba(0, 0, 0, 0.7);transform:scale(1.1)}
.cdm-flip::before{content:'↻';color:#fff;font-size:12px}
.cdm-back-flip{display:none !important}
.cdm-case.flipped .cdm-ribbon{display:none !important}
.cdm-case.flipped .cdm-front-flip{display:none !important}
.cdm-case.flipped .cdm-back-flip{display:flex !important;transform:rotateY(180deg)}
.cdm-case.flipped .cdm-back-flip:hover{transform:rotateY(180deg) scale(1.1)}
.cdm-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;transform:rotateY(180deg);border-radius:var(--radius-sm);display:flex;flex-direction:row;overflow:hidden}
.cdm-back-content{flex:1;height:100%;display:flex;flex-direction:column;background:linear-gradient(135deg, var(--cdm-bg-light, #f8f8f8), var(--cdm-bg-dark, #eee));position:relative;overflow:hidden}
.cdm-back-content::before{content:'';position:absolute;inset:0;background:var(--cdm-cover-url) center/cover no-repeat;opacity:0.1;pointer-events:none;transform:scaleX(-1)}
.cdm-back-content::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:0.03;pointer-events:none}
.cdm-back-spine{width:11px;height:100%;background:repeating-linear-gradient(180deg, #1a1a1a 0px, #333 1px, #0a0a0a 3px);flex-shrink:0}
.cdm-back-header{display:flex;align-items:center;gap:6px;padding:8px;border-bottom:1px solid rgba(0, 0, 0, 0.08);background:rgba(255, 255, 255, 0.5);flex-shrink:0;position:relative;z-index:1}
.cdm-back-info{flex:1;min-width:0}
.cdm-back-title{font-size:0.75rem;font-weight:700;color:#000;margin:0 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdm-back-artist{font-size:0.68rem;color:#000;margin:0}
.cdm-back-artist-name{cursor:pointer;color:var(--mus-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:opacity 0.2s}
.cdm-back-artist-name:hover{opacity:0.7}
.cdm-back-style{position:absolute;bottom:8px;left:8px;font-size:0.6rem;color:#fff;background:rgba(0, 0, 0, 0.6);padding:4px 10px;border-radius:12px;z-index:1;cursor:pointer;transition:background 0.2s}
.cdm-back-style:hover{background:var(--mus-accent)}
.cdm-back-play, .cdm-back-close{width:28px;height:28px;background:var(--mus-accent);border:none;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;flex-shrink:0;transition:transform 0.2s}
.cdm-back-play.has-yt{display:flex}
.cdm-back-play:hover, .cdm-back-close:hover{transform:scale(1.1);filter:brightness(1.1)}
.cdm-back-play::before{content:'';width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.cdm-case.playing .cdm-back-play::before{border-left:4px solid #fff;border-right:4px solid #fff;border-top:none;border-bottom:none;width:4px;height:12px;margin-left:0}
.cdm-back-close::before{content:'✕';color:#fff;font-size:14px;font-weight:700}
.cdm-case.playing .cdm-back-close{display:flex}
.cdm-permalink{position:absolute;bottom:42px;right:8px;color:var(--mus-accent);text-decoration:none;font-size:0.8rem;z-index:10}
.cdm-chronique{flex:1;padding:8px;font-size:0.65rem;line-height:1.5;color:#000;font-weight:500;overflow-y:auto;text-align:justify;text-indent:0.8em;transition:flex 0.3s, height 0.3s, opacity 0.3s, padding 0.3s;border-left:3px solid var(--mus-accent);background:linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, transparent 50%);position:relative;z-index:1}
.cdm-chronique::-webkit-scrollbar{width:4px}
.cdm-chronique::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.15);border-radius:2px}
.cdm-case.playing .cdm-chronique{flex:0;height:0;padding:0;opacity:0;overflow:hidden}
.cdm-signature{display:none}
.cdm-player{height:0;margin:0 8px 6px;background:#000;border-radius:var(--radius-sm);overflow:hidden;transition:height 0.3s, flex 0.3s, margin 0.3s;flex-shrink:0;position:relative;z-index:1}
.cdm-case.playing .cdm-player.has-yt{flex:1;height:auto;margin:0 8px 6px}
.cdm-player iframe{display:block;width:100%;height:100%}
/* FILTRES */
.sticky-header{position:sticky;top:80px;background:var(--color-bg);z-index:100;padding:var(--space-sm) 0;border-bottom:1px solid var(--color-border)}
.filters-row{gap:8px 12px}
.search-wrapper{position:relative;flex:1 1 150px;min-width:120px;max-width:500px}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--color-text-muted);pointer-events:none}
#search-input{width:100%;height:40px;padding:0 32px 0 42px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:0.9rem;font-family:var(--font-body);outline:none;transition:border-color var(--duration-fast)}
#search-input::placeholder{color:var(--color-text-muted)}
#search-input:focus{border-color:var(--mus-accent);box-shadow:0 0 0 3px var(--mus-accent-dim)}
#clear-search{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--color-text-muted);font-size:1.2rem;cursor:pointer;display:none;line-height:1}
.fav-filters{display:flex;gap:6px;align-items:center}
.fav-filter-btn{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--color-border);background:transparent;cursor:pointer;font-size:0.8rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:all 0.2s;opacity:0.4;padding:0}
.fav-filter-btn:hover{opacity:0.7}
.fav-filter-btn[data-fav="1"]{color:var(--fav-love);border-color:rgba(196, 136, 154, 0.3)}
.fav-filter-btn[data-fav="2"]{color:var(--fav-reference);border-color:rgba(142, 170, 180, 0.3)}
.fav-filter-btn[data-fav="3"]{color:var(--fav-essential);border-color:rgba(201, 169, 110, 0.3)}
.fav-filter-btn.active{opacity:1}
.fav-filter-btn[data-fav="1"].active{background:rgba(196, 136, 154, 0.15);border-color:var(--fav-love);box-shadow:0 0 6px rgba(196, 136, 154, 0.3)}
.fav-filter-btn[data-fav="2"].active{background:rgba(142, 170, 180, 0.15);border-color:var(--fav-reference);box-shadow:0 0 6px rgba(142, 170, 180, 0.3)}
.fav-filter-btn[data-fav="3"].active{background:rgba(201, 169, 110, 0.15);border-color:var(--fav-essential);box-shadow:0 0 6px rgba(201, 169, 110, 0.3)}
.filters-count{font-size:0.9rem;color:var(--color-text);white-space:nowrap}
.nav-pills{display:flex;gap:8px}
.nav-pills .nav-link{font-size:0.85rem;color:var(--mus-accent);text-decoration:none;white-space:nowrap;font-family:var(--font-body);padding:8px 16px;background:var(--mus-accent-dim);border:1px solid var(--mus-accent);border-radius:20px;transition:all 0.2s;font-weight:500}
.nav-pills .nav-link:hover{color:#fff;background:var(--mus-accent)}
.filter-pill{flex-shrink:0;padding:8px 16px;background:rgba(255, 255, 255, 0.04);border:1px solid var(--color-border);border-radius:20px;color:var(--color-text-secondary);font-size:0.85rem;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.filter-pill:hover{border-color:var(--mus-accent);color:var(--color-text);background:var(--mus-accent-dim)}
.filter-pill.active{background:linear-gradient(135deg, var(--mus-accent) 0%, var(--mus-accent-hover) 100%);border-color:var(--mus-accent);color:#fff;box-shadow:0 2px 8px rgba(196, 136, 152, 0.3)}
.filter-pill--small{padding:4px 10px;font-size:0.75rem}
.filters-pills{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:4px 0;scrollbar-width:none;flex:1}
.filters-pills::-webkit-scrollbar{display:none}
.filters-sub-row{display:flex;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid var(--color-border);animation:fadeInFilter 0.2s ease;margin-top:2px}
.filters-label{font-size:0.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.5px;flex-shrink:0}
@keyframes fadeInFilter{from{opacity:0;transform:translateY(-5px)}
to{opacity:1;transform:translateY(0)}
}
@media(max-width:900px){.filters-row{flex-direction:row;align-items:center;flex-wrap:nowrap}
.search-wrapper{flex:1 1 0;min-width:0}
.nav-pills{display:none}
.filters-count{font-size:0.8rem;margin-left:0;text-align:right}
.fav-filters{gap:4px}
.fav-filter-btn{width:26px;height:26px;font-size:0.75rem}
}
/* Bandeaux modal (cdm-) */
.cdm-ribbon{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:3;pointer-events:none}
.cdm-ribbon::before{position:absolute;top:14px;left:-28px;width:110px;text-align:center;padding:3px 0;color:#fff;font-size:0.55rem;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,0.3)}
.cdm-ribbon.cdm-f3::before{content:'Essential';background:var(--fav-essential)}
.cdm-ribbon.cdm-f2::before{content:'Reference';background:var(--fav-reference)}
.cdm-ribbon.cdm-f1::before{content:'Love';background:var(--fav-love)}
/* Bandeaux cartes essentiels + favoris */
.fav-ribbon{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:3;pointer-events:none}
.fav-ribbon::before{position:absolute;top:10px;left:-22px;width:85px;text-align:center;padding:2px 0;color:#fff;font-size:0.4rem;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;transform:rotate(-45deg);box-shadow:0 1px 4px rgba(0,0,0,0.3)}
.fav-ribbon.f3::before{content:'Essential';background:var(--fav-essential)}
.fav-ribbon.f2::before{content:'Reference';background:var(--fav-reference)}
.fav-ribbon.f1::before{content:'Love';background:var(--fav-love)}
/* Bandeaux miniatures CD */
.cd-ribbon{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:3;pointer-events:none}
.cd-ribbon::before{position:absolute;top:8px;left:-18px;width:70px;text-align:center;padding:1px 0;color:#fff;font-size:0.3rem;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;transform:rotate(-45deg);box-shadow:0 1px 3px rgba(0,0,0,0.3)}
.cd-ribbon.f3::before{content:'Essential';background:var(--fav-essential)}
.cd-ribbon.f2::before{content:'Reference';background:var(--fav-reference)}
.cd-ribbon.f1::before{content:'Love';background:var(--fav-love)}
/* DISCOGRAPHIE - CD SHELF */
.shelf-container{margin-bottom:80px}
.shelf-decade{margin-bottom:40px}
.shelf-decade-title{font-family:var(--font-display);font-size:1.1rem;color:var(--mus-accent);margin-bottom:20px;padding-left:5px}
.shelf-year{margin-bottom:25px}
.shelf-decade .shelf-year:not(:first-child){padding-top:30px}
.shelf-year-label{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.shelf-year-badge{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:26px;padding:0 12px;background:linear-gradient(135deg, var(--mus-accent) 0%, var(--mus-accent-hover) 100%);border-radius:13px;font-size:0.75rem;font-weight:600;color:#fff;letter-spacing:0.3px;box-shadow:0 2px 8px rgba(196, 136, 152, 0.3)}
.shelf-year-count{font-size:0.65rem;color:var(--color-text-muted)}
.shelf-row{display:flex;gap:4px;overflow-x:auto;overflow-y:clip;padding:15px 5px 25px;scrollbar-width:thin;scrollbar-color:var(--mus-accent) transparent;flex-wrap:nowrap;align-items:flex-end}
.shelf-row::-webkit-scrollbar{height:4px}
.shelf-row::-webkit-scrollbar-track{background:rgba(255, 255, 255, 0.03);border-radius:2px}
.shelf-row::-webkit-scrollbar-thumb{background:var(--mus-accent);border-radius:2px}
.cd-case{position:relative;width:10px;height:110px;cursor:pointer;flex-shrink:0;animation:cascadeIn 0.3s ease-out backwards}
.cd-stack{display:flex;flex-direction:column;gap:2px;margin:0 8px;align-self:flex-end}
.cd-stack .cd-case{width:125px;height:10px;transform:none;animation:none}
.cd-stack .cd-case-spine{flex-direction:row;justify-content:flex-start;padding-left:8px;background:linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%);box-shadow:inset 0 -1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3)}
.cd-stack .cd-case-text{writing-mode:horizontal-tb;transform:none;max-height:none;max-width:125px;font-size:0.4rem}
.cd-stack .cd-case.active{z-index:100}
.cd-front{position:relative;box-sizing:border-box;width:125px;height:110px;padding:3px;background:linear-gradient(145deg, rgba(200, 200, 200, 0.2) 0%, rgba(150, 150, 150, 0.15) 50%, rgba(100, 100, 100, 0.2) 100%);border:1px solid rgba(255, 255, 255, 0.15);border-left:8px solid #1a1a1a;border-radius:2px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);cursor:pointer;flex-shrink:0;margin:0 6px;align-self:flex-end;transition:transform 0.2s, box-shadow 0.2s}
.cd-front:hover{transform:scale(1.03);box-shadow:0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 12px rgba(196, 136, 152, 0.3)}
.cd-front img{width:100%;height:100%;object-fit:cover;display:block;border-radius:1px}
.cd-front-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, #2a2a2a, #1a1a1a);color:#444;font-size:2rem;font-family:var(--font-display);border-radius:1px}
.cd-case-spine{width:100%;height:100%;background:linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%);border-radius:1px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset -1px 0 2px rgba(0, 0, 0, 0.4), inset 1px 0 1px rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3);transition:filter 0.2s, box-shadow 0.2s}
.cd-case:hover .cd-case-spine{filter:brightness(1.3);box-shadow:inset -1px 0 2px rgba(0, 0, 0, 0.4), inset 1px 0 1px rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 8px rgba(196, 136, 152, 0.4)}
.cd-case-spine::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 10%, transparent 90%, rgba(0, 0, 0, 0.1) 100%);border-radius:1px}
.cd-case-text{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-size:0.4rem;font-weight:600;font-style:normal;color:#fff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:100px;padding:3px 1px;letter-spacing:-0.02em}
.cd-case.active{z-index:100}
.cd-case-cover{position:absolute;top:0;left:0;box-sizing:border-box;width:125px;height:110px;padding:3px;background:linear-gradient(145deg, rgba(200, 200, 200, 0.2) 0%, rgba(150, 150, 150, 0.15) 50%, rgba(100, 100, 100, 0.2) 100%);border:1px solid rgba(255, 255, 255, 0.15);border-left:8px solid #1a1a1a;border-radius:2px;overflow:hidden;opacity:0;pointer-events:none;box-shadow:0 10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);cursor:pointer}
.cd-case-cover img{width:100%;height:100%;object-fit:cover;display:block}
.cd-case-cover-info{position:absolute;bottom:0;left:0;right:0;padding:10px;background:linear-gradient(transparent, rgba(0, 0, 0, 0.95));color:#fff}
.cd-case-cover-title{font-size:0.7rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.cd-case-cover-artist{font-size:0.6rem;opacity:0.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-case-cover-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, #2a2a2a, #1a1a1a);color:#444;font-size:2.5rem;font-family:var(--font-display)}
.cd-case::after{content:'';position:absolute;inset:-3px;border-radius:3px;opacity:0;transition:opacity 0.3s;z-index:-1;filter:blur(12px)}
.cd-case.active::after{opacity:0.6}
@keyframes cascadeIn{from{opacity:0;transform:translateY(-20px)}
to{opacity:1;transform:translateY(0)}
}
.disco-indicator{padding:10px 0;margin-top:10px;font-size:0.85rem;color:var(--color-text-muted);border-top:1px solid var(--color-border)}
.disco-indicator-decade, .disco-indicator-year{text-decoration:none;transition:opacity 0.2s}
.disco-indicator-decade{color:var(--mus-accent);font-weight:600}
.disco-indicator-year{color:var(--color-text)}
.disco-indicator-decade:hover, .disco-indicator-year:hover{opacity:0.7}
#disco-sentinel{display:flex;justify-content:center;padding:20px 0}
#disco-sentinel .mini-loader{width:24px;height:24px;border:2px solid rgba(255, 255, 255, 0.1);border-top-color:var(--mus-accent);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
/* DÉCENNIES */
.essentiels-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:6px;align-items:stretch}
.essential-card{background:rgba(255, 255, 255, 0.02);border:1px solid var(--color-border);padding:6px;border-radius:var(--radius-sm);display:flex;flex-direction:column;transition:0.3s;cursor:pointer;height:100%;min-width:0}
.essential-card:hover{border-color:var(--mus-accent);background:var(--mus-accent-dim);box-shadow:0 4px 12px rgba(196, 136, 152, 0.3)}
.essential-card.to-listen{border-color:rgba(196, 136, 152, 0.2);background:rgba(196, 136, 152, 0.03);cursor:default;position:relative}
.essential-card.to-listen:hover{border-color:rgba(196, 136, 152, 0.3);background:rgba(196, 136, 152, 0.05);transform:none}
.essential-card.to-listen::before{content:"BIENTÔT";position:absolute;top:4px;right:4px;background:var(--mus-accent);color:#fff;font-size:0.4rem;padding:2px 4px;border-radius:2px;font-weight:700;letter-spacing:0.5px;z-index:2}
.cover-container{position:relative;width:100%;aspect-ratio:1;margin-bottom:6px;border-radius:2px;overflow:hidden;background:var(--mus-gradient)}
.cover-container img, .essential-card .album-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.essential-card.to-listen .cover-container::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.4)}
.essential-card .no-img-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;box-sizing:border-box}
.essential-card .no-img-placeholder span{font-size:0.6rem;font-weight:600;color:var(--color-text);line-height:1.2;word-break:break-word}
.essential-card.to-listen .no-img-placeholder span{color:var(--color-text-muted);filter:blur(0.5px)}
.album-rank{font-size:0.5rem;color:var(--mus-accent);letter-spacing:1px;margin-bottom:4px;font-weight:600}
.album-title{font-size:0.6rem;font-weight:600;color:var(--color-text);margin:0 0 2px 0;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-artist{font-family:var(--font-display);font-style:italic;color:var(--color-text-muted);font-size:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.year-block{margin-bottom:50px}
.year-block.hidden, .decade-section.hidden{display:none}
.decade-section{margin-bottom:80px}
.decade-header{display:flex;align-items:center;gap:20px;margin-bottom:30px}
.decade-title{font-family:var(--font-display);font-size:1.3rem;color:var(--mus-accent);margin:0}
.decade-header::after{content:"";flex:1;height:1px;background:rgba(196, 136, 152, 0.15);min-width:50px}
/* PAGES DÉCENNIES */
.decade-sticky-nav{position:sticky;top:80px;background:var(--color-bg);z-index:100;padding:10px var(--space-md);border-bottom:1px solid var(--color-border);display:flex;flex-direction:column;align-items:center;gap:8px}
.decade-nav-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.decade-pill{padding:5px 10px;background:rgba(255, 255, 255, 0.04);border:1px solid var(--color-border);border-radius:20px;color:var(--color-text-muted);font-size:0.65rem;font-weight:500;text-decoration:none;transition:all 0.2s;font-family:var(--font-body)}
.decade-pill:hover{border-color:var(--mus-accent);color:var(--color-text);background:var(--mus-accent-dim)}
.decade-pill.active{background:var(--mus-accent);border-color:var(--mus-accent);color:#fff;box-shadow:0 2px 8px rgba(196, 136, 152, 0.3)}
.decade-pill.loading{pointer-events:none;opacity:0.7}
.decade-pill.loading::after{content:'';display:inline-block;width:10px;height:10px;margin-left:6px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin 0.6s linear infinite;vertical-align:middle}
.decade-filters{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.section-title{font-family:var(--font-display);font-size:1.6rem;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid rgba(196, 136, 152, 0.2);color:var(--color-text);display:flex;align-items:baseline;gap:12px}
.update-badge{font-family:var(--font-body);font-size:0.55rem;color:var(--color-text-muted);font-weight:400;letter-spacing:0;margin-left:20px;padding-left:20px;border-left:1px solid var(--color-border)}
.albums-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:6px}
.decade-description{color:var(--color-text-muted);font-size:0.75rem;line-height:1.5;margin-bottom:15px;max-width:600px;font-style:italic}
/* CHRONIQUES MUSICALES */
#albums-list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:6px;margin-bottom:80px;min-height:200px;margin-top:15px;padding:0;width:100%;box-sizing:border-box}
.loader-container{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:15px}
.loader{width:40px;height:40px;border:3px solid rgba(255, 255, 255, 0.1);border-top-color:var(--mus-accent);border-radius:50%;animation:spin 1s linear infinite}
.loader-text{font-size:0.75rem;color:var(--color-text-muted);letter-spacing:1px}
.chronique-entry{display:block;padding:6px;background:var(--color-bg-card);border:1px solid var(--color-border);margin-bottom:0;cursor:pointer;transition:0.3s;min-height:auto;max-width:100%;box-sizing:border-box;border-radius:var(--radius-md);box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);scroll-margin-top:180px}
.chronique-entry:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0, 0, 0, 0.25);border-color:var(--mus-accent)}
.album-aside{width:100%;display:block;text-align:center}
.cover-box{position:relative;width:100%;height:auto;aspect-ratio:1;background:var(--mus-gradient);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-sm);padding:0;margin:0 auto}
.cover-box img{width:100%;height:100%;object-fit:cover}
.cover-box span{font-family:var(--font-display);font-style:italic;color:var(--color-text);font-size:0.6rem;text-align:center;opacity:0.6;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.listen-date{display:block;text-align:center;font-size:0.7rem;color:var(--mus-accent);line-height:1.3;margin-bottom:6px}
.album-info{margin-top:4px;display:block;text-align:center;width:100%;min-width:0}
.album-info h3{font-size:0.75rem;margin:0 auto;color:var(--color-text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;display:block}
.meta{font-family:var(--font-display);font-style:italic;color:var(--color-text-muted);font-size:0.65rem;text-align:center;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta-date{display:none}
.album-text{display:none}
.empty-state{grid-column:1 / -1;text-align:center;padding:60px 20px;color:var(--color-text-muted)}
/* CHRONIQUES - STRUCTURE ANNÉE/MOIS */
#albums-list.chrono-grouped{display:block}
.year-section{margin-bottom:32px;scroll-margin-top:200px}
.year-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:10px 0;border-bottom:2px solid rgba(196,136,152,0.3);margin-bottom:12px}
.year-summary-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--color-text);margin:0}
.year-summary-count{font-size:0.75rem;color:var(--mus-accent);font-weight:600}
.year-summary-styles{font-size:0.65rem;color:var(--color-text-muted);font-style:italic;flex-basis:100%}
.month-section{margin-bottom:12px;scroll-margin-top:200px}
.month-header{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,0.03);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all 0.2s;user-select:none}
.month-header:hover{border-color:var(--mus-accent);background:var(--mus-accent-dim)}
.month-name{font-family:var(--font-display);font-size:0.95rem;font-weight:600;color:var(--color-text)}
.month-count{font-size:0.65rem;color:var(--color-text-muted)}
.month-current-badge{font-size:0.5rem;color:var(--mus-accent);text-transform:uppercase;letter-spacing:0.5px;font-weight:700;padding:2px 6px;border:1px solid var(--mus-accent);border-radius:8px}
.month-toggle{margin-left:auto;color:var(--color-text-muted);transition:transform 0.3s;font-size:0.65rem}
.month-header.collapsed .month-toggle{transform:rotate(-90deg)}
.month-header.month-current{border-color:var(--mus-accent);background:var(--mus-accent-dim)}
.month-header.month-current .month-name{color:var(--mus-accent)}
.month-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}
.month-entries.collapsed{display:none}
.year-summary{cursor:pointer}
.year-summary:hover{opacity:0.85}
.year-summary-toggle{font-size:0.7rem;color:var(--color-text-muted);transition:transform 0.3s;margin-left:4px}
.year-section.year-collapsed .year-summary-toggle{transform:rotate(-90deg)}
.year-section.year-collapsed .month-section{display:none}
.sticky-month-row{padding:6px 0}
.sticky-month-row:not(.visible) .sticky-month-label{opacity:0}
.sticky-month-label{font-family:var(--font-display);font-size:0.85rem;font-weight:600;color:var(--mus-accent);transition:opacity 0.15s}
.sticky-month-label.fading{opacity:0}
/* INCONTOURNABLES */
.tab-panel{display:none}
.tab-panel.active{display:block}
.artist-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:40px}
.artist-card{background:rgba(255, 255, 255, 0.02);border:1px solid var(--color-border);padding:25px;cursor:pointer;transition:0.3s;border-radius:var(--radius-sm);position:relative;overflow:hidden}
.artist-card:hover{background:rgba(255, 255, 255, 0.05);border-color:var(--mus-accent);transform:translateY(-2px)}
.artist-card[aria-expanded="true"]{background:var(--mus-accent-dim);border-color:var(--mus-accent)}
.artist-card.pilier{grid-column:span 1;border-color:rgba(196, 136, 152, 0.3);background:rgba(196, 136, 152, 0.05)}
.artist-card.pilier::before{content:"PILIER";position:absolute;top:12px;right:12px;font-size:0.5rem;letter-spacing:2px;color:var(--mus-accent);font-weight:700;background:var(--mus-accent-dim);padding:4px 8px;border-radius:2px}
.artist-card h3{font-family:var(--font-display);font-size:1.4rem;margin:0 0 8px 0;color:var(--color-text);font-weight:600}
.artist-style{display:block;font-size:0.65rem;text-transform:uppercase;letter-spacing:1px;color:var(--mus-accent);margin-bottom:12px;font-weight:600}
.artist-bio-preview{font-size:0.85rem;line-height:1.6;color:var(--color-text-muted);margin:0}
.artist-count{display:block;margin-top:15px;font-size:0.6rem;color:var(--color-text-muted);text-align:right}
.artist-permalink{color:var(--mus-accent);text-decoration:none;font-size:0.8rem;margin-top:12px;display:block;text-align:right}
.artist-card.highlight{animation:artist-highlight 2s ease-out}
@keyframes artist-highlight{0%,30%{box-shadow:0 0 0 3px var(--mus-accent)}100%{box-shadow:none}}
#artist-detail-anchor{scroll-margin-top:90px}
.artist-detail{background:rgba(255, 255, 255, 0.03);border:1px solid var(--color-border);padding:40px;border-radius:var(--radius-sm);margin:30px 0 60px;animation:slideUp 0.4s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
.artist-detail-header{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid var(--color-border)}
.artist-detail h2{font-family:var(--font-display);font-size:2.2rem;margin:0 0 8px 0;color:var(--color-text)}
.artist-detail .meta-line{font-size:0.75rem;color:var(--mus-accent);font-weight:600;text-transform:uppercase;letter-spacing:1px}
.artist-bio{font-size:1rem;line-height:1.8;color:var(--color-text-secondary);margin-bottom:35px}
.artist-albums-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:15px}
.artist-album-card{background:rgba(255, 255, 255, 0.02);border:1px solid var(--color-border);padding:12px;cursor:pointer;transition:0.3s;border-radius:var(--radius-sm)}
.artist-album-card:hover{background:var(--mus-accent-dim);border-color:var(--mus-accent)}
.artist-album-cover{position:relative;width:100%;padding-bottom:100%;margin-bottom:10px;border-radius:2px;overflow:hidden;background:var(--mus-gradient)}
.artist-album-cover img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.artist-album-cover .placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:15px}
.artist-album-cover .placeholder span{font-family:var(--font-display);font-style:italic;color:var(--color-text);font-size:0.7rem;text-align:center;opacity:0.6;line-height:1.3}
.artist-album-info strong{display:block;font-size:0.85rem;color:var(--color-text);margin-bottom:4px;line-height:1.3}
.artist-album-info em{font-size:0.75rem;font-style:normal;color:var(--mus-accent);font-weight:600}
.fav-albums-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:20px}
.fav-album-card{background:rgba(255, 255, 255, 0.02);border:1px solid var(--color-border);padding:16px;cursor:pointer;transition:0.3s;border-radius:var(--radius-sm)}
.fav-album-card:hover{background:var(--mus-accent-dim);border-color:var(--mus-accent);transform:translateY(-2px)}
.fav-album-cover-container{position:relative;width:100%;padding-bottom:100%;margin-bottom:12px;border-radius:2px;overflow:hidden;background:var(--mus-gradient)}
.fav-album-cover-container img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.fav-album-cover-container .placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:15px}
.fav-album-cover-container .placeholder span{font-family:var(--font-display);font-style:italic;color:var(--color-text);font-size:0.7rem;text-align:center;opacity:0.6;line-height:1.3}
.fav-album-title{font-size:0.9rem;font-weight:600;color:var(--color-text);margin:0 0 4px 0;line-height:1.3}
.fav-album-artist{font-family:var(--font-display);font-style:italic;font-size:0.75rem;color:var(--color-text-muted);margin-bottom:8px}
.fav-album-reason{font-size:0.7rem;color:var(--color-text-muted);line-height:1.5;font-style:italic}
/* Niveaux de distinction */
.essential-card.fav-love{border:1px solid rgba(196, 136, 154, 0.4);box-shadow:0 0 6px rgba(196, 136, 154, 0.15)}
.essential-card.fav-love:hover{border-color:rgba(196, 136, 154, 0.6);box-shadow:0 0 10px rgba(196, 136, 154, 0.25), 0 4px 12px rgba(196, 136, 152, 0.2)}
.essential-card.fav-top{border:1px solid rgba(142, 170, 180, 0.4);box-shadow:0 0 6px rgba(142, 170, 180, 0.15)}
.essential-card.fav-top:hover{border-color:rgba(142, 170, 180, 0.6);box-shadow:0 0 10px rgba(142, 170, 180, 0.25), 0 4px 12px rgba(196, 136, 152, 0.2)}
.essential-card.fav-indispensable{border:1px solid rgba(201, 169, 110, 0.5);box-shadow:0 0 8px rgba(201, 169, 110, 0.2)}
.essential-card.fav-indispensable:hover{border-color:rgba(201, 169, 110, 0.7);box-shadow:0 0 12px rgba(201, 169, 110, 0.3), 0 4px 12px rgba(196, 136, 152, 0.2)}
.fav-album-card.fav-love{border:1px solid rgba(196, 136, 154, 0.4);box-shadow:0 0 6px rgba(196, 136, 154, 0.15)}
.fav-album-card.fav-love:hover{border-color:rgba(196, 136, 154, 0.6);box-shadow:0 0 10px rgba(196, 136, 154, 0.25)}
.fav-album-card.fav-top{border:1px solid rgba(142, 170, 180, 0.4);box-shadow:0 0 6px rgba(142, 170, 180, 0.15)}
.fav-album-card.fav-top:hover{border-color:rgba(142, 170, 180, 0.6);box-shadow:0 0 10px rgba(142, 170, 180, 0.25)}
.fav-album-card.fav-indispensable{border:1px solid rgba(201, 169, 110, 0.5);box-shadow:0 0 8px rgba(201, 169, 110, 0.2)}
.fav-album-card.fav-indispensable:hover{border-color:rgba(201, 169, 110, 0.7);box-shadow:0 0 12px rgba(201, 169, 110, 0.3)}
.cdm-case.fav-love{box-shadow:0 0 8px rgba(196, 136, 154, 0.2)}
.cdm-case.fav-top{box-shadow:0 0 8px rgba(142, 170, 180, 0.2)}
.cdm-case.fav-indispensable{box-shadow:0 0 10px rgba(201, 169, 110, 0.25)}
.cd-front.fav-love{box-shadow:0 0 8px rgba(196, 136, 154, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15)}
.cd-front.fav-top{box-shadow:0 0 8px rgba(142, 170, 180, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15)}
.cd-front.fav-indispensable{box-shadow:0 0 10px rgba(201, 169, 110, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15)}
.titres-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:30px}
.titre-card{display:grid;grid-template-columns:50px 1fr auto;gap:15px;align-items:center;background:rgba(255, 255, 255, 0.02);border:1px solid var(--color-border);padding:12px 16px;border-radius:var(--radius-sm);transition:0.3s}
.titre-card:hover{background:var(--mus-accent-dim);border-color:var(--mus-accent)}
.titre-rank{font-family:var(--font-display);font-size:1.2rem;color:var(--mus-accent);font-weight:600;text-align:center}
.titre-info h4{font-size:0.9rem;color:var(--color-text);margin:0 0 4px 0;font-weight:500}
.titre-info span{font-size:0.75rem;color:var(--color-text-muted)}
.titre-play{width:36px;height:36px;border-radius:50%;background:var(--mus-accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:0.3s;opacity:0.7}
.titre-play:hover{opacity:1;transform:scale(1.1)}
.titre-play svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.titre-card.active{background:var(--mus-accent-dim);border-color:var(--mus-accent)}
/* RESPONSIVE - TABLET */
@media(min-width:601px){.essentiels-grid{grid-template-columns:repeat(4, 1fr);gap:8px}
.albums-grid{grid-template-columns:repeat(4, 1fr);gap:8px}
#albums-list{grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px}
.month-entries{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
/* RESPONSIVE - DESKTOP */
@media(min-width:901px){
/* Modal */
.cdm-case{width:398px;height:350px}
.cdm-spine{width:15px}
.cdm-info{padding:12px;left:0}
.cdm-title{font-size:0.95rem}
.cdm-artist-year{font-size:0.8rem}
.cdm-flip{width:30px;height:30px;bottom:12px;right:12px}
.cdm-flip::before{font-size:14px}
.cdm-permalink{bottom:46px;right:12px}
.cdm-back-spine{width:15px}
.cdm-back-header{gap:8px;padding:6px 8px}
.cdm-back-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700}
.cdm-back-artist{font-size:0.7rem}
.cdm-back-play, .cdm-back-close{width:34px;height:34px}
.cdm-chronique{font-size:0.75rem;line-height:1.7;text-align:justify;text-indent:1em;padding:10px 12px 10px 15px}
.cdm-signature{display:block;text-align:right;margin-top:8px;font-size:0.75rem;font-style:italic;color:rgba(0, 0, 0, 0.5);text-indent:0}
.cdm-player{margin:0 12px 10px}
.cdm-case.playing .cdm-player.has-yt{margin:0 12px 10px}
/* Grilles */
.essentiels-grid{grid-template-columns:repeat(6, 1fr);gap:10px}
.essential-card{padding:8px}
.album-title{font-size:0.65rem}
.album-artist{font-size:0.55rem}
.decade-title{font-size:2.2rem}
.albums-grid{grid-template-columns:repeat(6, 1fr);gap:10px}
.decade-sticky-nav{padding:12px 20px;gap:10px}
.decade-pill{padding:6px 12px;font-size:0.7rem}
/* Fondamentaux */
.artist-grid{grid-template-columns:repeat(2, 1fr)}
.artist-albums-grid{grid-template-columns:repeat(3, 1fr)}
.fav-albums-grid{grid-template-columns:repeat(5, 1fr)}
.titres-grid{grid-template-columns:repeat(2, 1fr)}
/* CD Shelf */
.cd-case{width:10px;height:140px}
.cd-case-text{font-size:0.45rem;max-height:130px}
.cd-case-cover{width:159px;height:140px}
.cd-front{width:159px;height:140px}
.cd-stack .cd-case{width:159px}
.cd-stack .cd-case-text{max-width:125px}
.shelf-decade-title{font-size:1.3rem}
.shelf-decade .shelf-year:not(:first-child){padding-top:40px}
/* Chroniques */
#albums-list{grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:20px}
.month-entries{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.year-summary-title{font-size:1.8rem}
.month-name{font-size:1.05rem}
.chronique-entry{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:20px;min-height:180px}
.album-aside{width:auto;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.cover-box{width:100px;height:100px;aspect-ratio:auto}
.album-info{margin-top:0;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;width:auto}
.album-info h3{font-size:0.95rem;text-align:left;margin:0}
.meta{font-size:0.8rem;text-align:left}
.album-text{display:-webkit-box;font-size:0.75rem;color:var(--color-text-secondary);line-height:1.6;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;text-align:justify}
}
/* RESPONSIVE - LARGE SCREENS */
@media(min-width:1440px){.essentiels-grid{grid-template-columns:repeat(10, 1fr)}
.albums-grid{grid-template-columns:repeat(10, 1fr)}
.artist-albums-grid{grid-template-columns:repeat(4, 1fr)}
.fav-albums-grid{grid-template-columns:repeat(6, 1fr)}
}
/* TABS NAVIGATION */
.tabs-container{margin-bottom:30px}
.tabs-nav{display:flex;gap:10px;padding-bottom:20px;flex-wrap:wrap;justify-content:center}
.tab-btn{padding:12px 28px;background:rgba(255,255,255,0.04);border:1px solid var(--color-border);border-radius:25px;color:var(--color-text-secondary);font-size:0.9rem;font-family:var(--font-body);font-weight:500;cursor:pointer;transition:all 0.2s;letter-spacing:0.3px}
.tab-btn:hover{border-color:var(--mus-accent);color:var(--color-text);background:var(--mus-accent-dim)}
.tab-btn.active{background:linear-gradient(135deg,var(--mus-accent) 0%,var(--mus-accent-hover) 100%);border-color:var(--mus-accent);color:#fff;box-shadow:0 4px 15px rgba(196,136,152,0.4)}
.titres-layout{display:grid;gap:30px}
.player-container{background:rgba(0, 0, 0, 0.3);border-radius:var(--radius-md);overflow:hidden}
#youtube-player{aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center}
#youtube-player iframe{width:100%;height:100%}
.player-placeholder{color:var(--color-text-muted);font-size:0.85rem}
#now-playing{padding:15px;text-align:center}
.now-playing-title{font-size:1rem;font-weight:600;color:var(--color-text);margin:0 0 4px}
.now-playing-meta{font-size:0.8rem;color:var(--color-text-muted);margin:0}
/* Player sticky mobile pour Titres */
.player-container{display:none}
.player-container.has-video{display:block;position:fixed;bottom:0;left:0;right:0;z-index:500;border-radius:0;box-shadow:0 -4px 20px rgba(0, 0, 0, 0.5)}
.player-container.has-video #youtube-player{aspect-ratio:16/9;max-height:30vh}
.player-close-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(0, 0, 0, 0.7);border:none;border-radius:50%;color:#fff;font-size:16px;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center}
.player-close-btn:hover{background:var(--mus-accent)}
@media(min-width:901px){.titres-layout{grid-template-columns:1fr 400px}
.player-container{display:block;position:sticky;top:100px;box-shadow:none;border-radius:var(--radius-md)}
.player-container.has-video{position:sticky;bottom:auto;left:auto;right:auto;z-index:auto;border-radius:var(--radius-md)}
.player-close-btn{display:none}
}
/* CARNET D'ÉCOUTES */
.carnet-container{position:relative;max-width:950px;margin:0 10px;display:flex;flex-direction:column}
.carnet-sidebar{position:relative;top:0;display:flex;flex-direction:row;align-items:center;padding:0 0 15px 0;gap:6px}
.carnet-tabs{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px}
.carnet-tab{font-family:'Caveat', cursive;font-size:1.1rem;font-weight:500;color:#5a4d40;background:#e8dfd4;border:none;padding:6px 12px;cursor:pointer;border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.15);transition:all 0.2s;text-align:right;min-width:55px;position:relative;right:0}
.carnet-tab:hover{background:#f4ede4;color:#3a3226}
.carnet-tab.active{background:#f4ede4;color:#2c2416;font-weight:600;box-shadow:-3px 2px 8px rgba(0, 0, 0, 0.2);z-index:60;right:0}
.carnet-wrapper{flex:1;max-width:800px;position:relative;background:repeating-linear-gradient(transparent, transparent 23px, rgba(180, 160, 140, 0.3) 23px, rgba(180, 160, 140, 0.3) 24px), repeating-linear-gradient(transparent, transparent 23px, transparent 24px, transparent 47px, transparent 48px, transparent 71px, transparent 72px, transparent 95px, transparent 96px, rgba(180, 160, 140, 0.5) 96px, rgba(180, 160, 140, 0.5) 97px);background-color:#f4ede4;background-size:100% 24px, 100% 120px;border-radius:4px;box-shadow:0 2px 20px rgba(0, 0, 0, 0.3), inset 0 0 60px rgba(139, 119, 101, 0.1);min-height:600px}
.carnet-wrapper::before{content:'';position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(to right, #8b7355 0%, #a08b6f 20%, #c4b49a 40%, #d4c4a8 60%, #e8dfd4 80%, #f4ede4 100%);border-radius:2px 0 0 2px}
.carnet-wrapper::after{content:'';position:absolute;left:35px;top:0;bottom:0;width:2px;background:rgba(200, 100, 100, 0.35)}
.carnet-corner-top{position:absolute;top:0;right:0;width:25px;height:25px;background:linear-gradient(135deg, transparent 50%, #e0d5c8 50%, #d4c9bc 100%);box-shadow:-2px 2px 3px rgba(0, 0, 0, 0.1);z-index:10}
.carnet-corner-bottom{position:absolute;bottom:0;right:0;width:25px;height:25px;background:linear-gradient(-45deg, transparent 50%, #e0d5c8 50%, #d4c9bc 100%);box-shadow:-2px -2px 3px rgba(0, 0, 0, 0.1);z-index:10}
.carnet-header{position:sticky;top:60px;background:#f4ede4;z-index:40;padding:12px 15px 12px 10px;border-bottom:2px solid rgba(180, 160, 140, 0.4);display:flex;align-items:flex-start}
.carnet-header-name{font-family:'Caveat', cursive;font-size:1rem;font-weight:600;color:#5a4a3a;width:28px;text-align:center;flex-shrink:0}
.carnet-header-main{flex:1;padding-left:15px;display:flex;flex-direction:column;gap:8px}
.carnet-header-date{font-family:'Caveat', cursive;font-size:1.1rem;font-weight:500;color:#4a3f35;flex:1;text-align:left}
.carnet-teacher-note{font-family:'Caveat', cursive;font-size:0.95rem;color:#c45c5c;transform:rotate(-1deg);text-align:left;white-space:normal}
.carnet-teacher-note::after{content:'';display:block;width:50px;height:2px;background:#c45c5c;margin-top:4px;margin-left:0;transform:rotate(-1deg)}
.carnet-teacher-note.tb{font-size:1.8rem;font-weight:600}
.carnet-teacher-note.tb::after{width:30px}
.carnet-content{padding:15px 15px 40px 45px;position:relative}
.carnet-year-section{display:none}
.carnet-year-section.active{display:block}
.carnet-year-header{font-family:'Caveat', cursive;font-size:2rem;font-weight:600;color:#4a3f35;margin:0 0 30px 0;padding-bottom:10px;border-bottom:2px solid rgba(74, 63, 53, 0.3)}
.carnet-month{font-family:'Caveat', cursive;font-size:1.4rem;font-weight:500;color:#6b5d50;margin:30px 0 12px 0}
.carnet-month:first-of-type{margin-top:0}
.carnet-missing{font-family:'Caveat', cursive;font-size:1.3rem;color:#c45c5c;font-style:italic;margin-left:8px}
.carnet-entry{font-family:'Caveat', cursive;font-size:1.2rem;color:#3a3226;padding:4px 0 4px 10px;line-height:1.5;transition:background 0.2s}
.carnet-entry:hover{background:rgba(212, 175, 55, 0.1)}
.carnet-day{color:#8b7355;margin-right:8px}
.carnet-album{color:#2c2416;font-weight:500;text-decoration:underline;text-decoration-color:rgba(44, 36, 22, 0.4);cursor:pointer}
.carnet-artist{color:#3a3226;font-weight:600;background:linear-gradient(to top, #fff176 50%, transparent 50%);padding:0 2px}
.carnet-album-year{color:#8b7355;font-style:italic}
.carnet-loader{text-align:center;padding:60px;font-family:'Caveat', cursive;font-size:1.5rem;color:#8b7355}
/* Post-it overlay */
.postit-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}
.postit-overlay.open{display:block}
.postit{position:fixed;width:280px;max-width:90vw;background:linear-gradient(135deg, #ffeb3b 0%, #fdd835 50%, #f9a825 100%);padding:16px 18px 20px;box-shadow:4px 4px 15px rgba(0, 0, 0, 0.25), -1px -1px 3px rgba(255, 255, 255, 0.3) inset;transform:rotate(-2deg);animation:postitPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);cursor:grab;top:50%;left:50%;margin-left:-140px;margin-top:-150px;user-select:none;touch-action:none}
.postit.dragging{cursor:grabbing;box-shadow:8px 8px 25px rgba(0, 0, 0, 0.35), -1px -1px 3px rgba(255, 255, 255, 0.3) inset}
@keyframes postitPop{0%{opacity:0;transform:rotate(-2deg) scale(0.5)}
100%{opacity:1;transform:rotate(-2deg) scale(1)}
}
.postit::before{content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:60px;height:20px;background:rgba(255, 255, 255, 0.4);border-radius:0 0 3px 3px}
.postit-header{font-family:'Caveat', cursive;font-size:0.7rem;font-weight:600;color:#5d4e37;margin-bottom:12px;line-height:1.3}
.postit-body{font-family:'Caveat', cursive;font-size:1.1rem;color:#3a3226;line-height:1.5;transform:rotate(0.5deg)}
.postit-permalink{position:absolute;bottom:8px;right:10px;color:#5d4e37;text-decoration:none;font-size:0.8rem;z-index:1}
/* Playlists */
.playlist-category{opacity:0;transform:translateY(20px);transition:opacity 0.5s var(--ease-out),transform 0.5s var(--ease-out);margin-bottom:var(--space-xl)}
.playlist-category.visible{opacity:1;transform:translateY(0)}
.playlist-category-title{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--color-text);margin-bottom:var(--space-md);padding-bottom:var(--space-xs);border-bottom:1px solid var(--color-border);display:flex;align-items:baseline;gap:0}
.playlist-category-count{font-family:var(--font-body);font-size:0.75rem;font-weight:400;color:var(--color-text-muted);margin-left:var(--space-sm);text-transform:uppercase;letter-spacing:0.05em}
.playlist-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}
.playlist-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-md);transition:border-color var(--duration-normal) var(--ease-out);align-self:start}
.playlist-card:hover{border-color:var(--color-accent)}
.playlist-card--featured{border-left:3px solid var(--color-accent);margin-bottom:var(--space-lg)}
.playlist-card--featured .playlist-card-title{font-size:1.15rem;font-weight:600}
.playlist-card-header{display:flex;align-items:center;gap:var(--space-sm)}
.playlist-card.has-items .playlist-card-header{cursor:pointer}
.playlist-card-title-wrap{flex:1;min-width:0}
.playlist-card-title{font-family:var(--font-display);font-size:1rem;font-weight:500;color:var(--color-text);line-height:1.4;margin-bottom:0.15rem}
.playlist-card-meta{font-family:var(--font-body);font-size:0.8rem;color:var(--color-text-muted)}
.playlist-card-source{display:inline-block;font-family:var(--font-body);font-size:0.65rem;color:var(--color-text-muted);text-decoration:none;border:1px solid var(--color-border);border-radius:12px;padding:3px 8px;white-space:nowrap;transition:all var(--duration-fast);margin-top:var(--space-md)}
.playlist-card-source:hover{color:var(--color-accent);border-color:var(--color-accent)}
.playlist-permalink{color:var(--mus-accent);text-decoration:none;font-size:0.8rem;align-self:flex-end;display:block;text-align:right}
.playlist-card-toggle{font-size:0.9rem;color:var(--color-accent);flex-shrink:0;transition:transform var(--duration-fast)}
.playlist-card-detail{max-height:0;overflow:hidden;transition:max-height 0.5s var(--ease-out),opacity 0.3s;opacity:0}
.playlist-card.open .playlist-card-detail{max-height:none;opacity:1;margin-top:var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--color-border)}
.playlist-card.open .playlist-card-header{position:sticky;top:100px;z-index:10;background:var(--color-bg-card);padding-top:var(--space-xs)}
.playlist-card-subtitle{font-family:var(--font-body);font-size:0.8rem;color:var(--color-text-muted);font-style:italic;margin-bottom:var(--space-sm)}
.playlist-player{position:relative;max-width:600px;aspect-ratio:16/9;background:#000;border-radius:var(--radius-sm);overflow:hidden;margin-top:var(--space-sm);display:none}
.playlist-player.visible{display:block;animation:fadeInPlayer 0.3s ease}
.playlist-player iframe{width:100%;height:100%;display:block}
.playlist-player-close{position:absolute;top:6px;right:6px;z-index:2;width:28px;height:28px;border-radius:50%;border:none;background:rgba(0,0,0,0.6);color:#fff;font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.playlist-player-close:hover{background:rgba(0,0,0,0.85)}
@keyframes fadeInPlayer{from{opacity:0;transform:scale(0.98)}to{opacity:1;transform:scale(1)}}
.playlist-sort-row{display:flex;align-items:center;gap:8px;margin-bottom:var(--space-sm)}
.playlist-sort-label{font-size:0.7rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.5px;flex-shrink:0}
.playlist-sort-pill{flex-shrink:0;padding:4px 10px;background:rgba(255,255,255,0.04);border:1px solid var(--color-border);border-radius:20px;color:var(--color-text-secondary);font-size:0.7rem;cursor:pointer;transition:all 0.2s;white-space:nowrap;font-family:var(--font-body)}
.playlist-sort-pill:hover{border-color:var(--mus-accent);color:var(--color-text);background:var(--mus-accent-dim)}
.playlist-sort-pill.active{background:linear-gradient(135deg,var(--mus-accent) 0%,var(--mus-accent-hover) 100%);border-color:var(--mus-accent);color:#fff;box-shadow:0 2px 8px rgba(196,136,152,0.3)}
.playlist-items{list-style:none}
.playlist-item{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);transition:background var(--duration-fast)}
.playlist-item:last-child{border-bottom:none}
.playlist-item.playing{background:var(--mus-accent-dim);border-radius:var(--radius-sm);padding:8px;margin:0 -8px}
.playlist-item-row{display:flex;align-items:flex-start;gap:var(--space-sm)}
.playlist-item-rank{font-family:var(--font-display);font-size:0.8rem;color:var(--color-accent);font-weight:600;flex-shrink:0;min-width:32px;padding-top:2px}
.playlist-item-info{flex:1;min-width:0}
.playlist-item-song{font-family:var(--font-display);font-size:0.9rem;font-weight:500;color:var(--color-text);line-height:1.4}
.playlist-item-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.playlist-item-artist{font-family:var(--font-body);font-size:0.8rem;color:var(--color-text-secondary)}
.playlist-item-play{background:none;border:1px solid var(--color-accent);border-radius:12px;padding:2px 10px;cursor:pointer;font-family:var(--font-body);font-size:0.7rem;color:var(--color-accent);transition:all var(--duration-fast);white-space:nowrap;flex-shrink:0;margin-top:2px}
.playlist-item-play:hover{background:var(--color-accent);color:#fff}
.playlist-item.playing .playlist-item-play{background:var(--color-accent);color:#fff}
.playlist-item-orig-label{font-family:var(--font-body);font-size:0.75rem;color:var(--color-text-muted);font-style:italic}
.playlist-item-orig-btn{background:none;border:1px solid var(--color-border);border-radius:10px;padding:1px 8px;cursor:pointer;font:inherit;font-size:0.7rem;color:var(--color-text-muted);font-style:italic;transition:all var(--duration-fast);white-space:nowrap;flex-shrink:0;margin-top:2px}
.playlist-item-orig-btn:hover{color:var(--color-accent);border-color:var(--color-accent)}
.playlist-item-year{font-family:var(--font-body);font-size:0.75rem;color:var(--color-text-muted)}
.playlist-item.matched .playlist-item-row{cursor:pointer}
.playlist-item.matched .playlist-item-song{transition:color var(--duration-fast)}
.playlist-item.matched:hover .playlist-item-song{color:var(--color-accent)}
.playlist-item.unmatched{opacity:0.4}
/* Match ou pas */
.match-row{display:flex;align-items:flex-start;gap:var(--space-sm)}
.match-pair{display:flex;align-items:flex-start;gap:var(--space-md);flex:1;min-width:0}
.match-side{flex:1;min-width:0}
.match-side .playlist-item-play{margin-top:6px}
.match-vs{font-family:var(--font-display);font-size:0.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:1px;flex-shrink:0;padding-top:4px;opacity:0.6}
@media(max-width:600px){.match-pair{flex-direction:column;gap:var(--space-xs)}
.match-vs{padding:0;align-self:center}}
@media(max-width:600px){.playlist-grid{grid-template-columns:1fr}
.playlist-item-actions{gap:6px}
.playlist-player{max-width:100%;aspect-ratio:16/10}}
/* Carnet Desktop */
@media(min-width:901px){.carnet-container{margin:0 auto;flex-direction:row;align-items:flex-start}
.carnet-sidebar{flex-direction:column;align-items:flex-end;padding-top:100px;position:sticky;top:80px;z-index:50}
.carnet-tabs{flex-direction:column;gap:4px}
.carnet-tab{border-radius:8px 0 0 8px;right:-4px;padding:10px 12px 10px 8px;text-align:right}
.carnet-tab.active{right:0}
.carnet-wrapper{border-radius:2px 4px 4px 2px}
.carnet-wrapper::before{width:12px}
.carnet-wrapper::after{left:55px}
.carnet-header{padding:15px 30px 15px 20px}
.carnet-header-name{font-size:1.2rem;width:35px}
.carnet-header-main{padding-left:25px;flex-direction:row;justify-content:space-between;align-items:flex-start}
.carnet-header-date{font-size:1.35rem;text-align:center}
.carnet-teacher-note{font-size:1.15rem;transform:rotate(-2deg);text-align:right;white-space:nowrap}
.carnet-teacher-note::after{margin-left:auto}
.carnet-content{padding:20px 30px 60px 70px}
.carnet-corner-top{width:40px;height:40px}
.carnet-corner-bottom{width:35px;height:35px}
.carnet-year-header{font-size:2.4rem}
.carnet-month{font-size:1.6rem}
.carnet-entry{font-size:1.35rem;padding-left:15px}
/* Post-it */
.postit{width:320px;padding:20px 22px 25px;margin-left:-160px}
.postit-header{font-size:1.4rem}
.postit-body{font-size:1.25rem}
}
/* HUB MUSIQUE - CARTES */
.card-mus{position:relative;overflow:hidden}
.card-mus::after{content:'';position:absolute;right:15px;top:15px;width:64px;height:64px;opacity:0.22;background-size:contain;background-repeat:no-repeat;background-position:center;transition:opacity 0.4s;z-index:1;pointer-events:none}
.card-mus:hover::after,.card-mus:active::after{opacity:0.45}
/* Discographie — vinyles — rouge */
.card-mus--disco{--card-rgb:208,64,64}
.card-mus--disco:hover .card-title,.card-mus--disco:active .card-title{color:#d04040}
.card-mus--disco::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='38' cy='38' r='30' fill='none' stroke='%23d04040' stroke-width='2'/%3E%3Ccircle cx='38' cy='38' r='11' fill='%23d04040'/%3E%3Ccircle cx='38' cy='38' r='2.5' fill='%2318181c'/%3E%3Ccircle cx='60' cy='60' r='32' fill='none' stroke='%23d04040' stroke-width='2.5'/%3E%3Ccircle cx='60' cy='60' r='24' fill='none' stroke='%23d04040' stroke-width='0.5' opacity='0.4'/%3E%3Ccircle cx='60' cy='60' r='13' fill='%23d04040'/%3E%3Ccircle cx='60' cy='60' r='3' fill='%2318181c'/%3E%3C/svg%3E")}
/* Décennies — strates — bleu */
.card-mus--dec{--card-rgb:74,138,208}
.card-mus--dec:hover .card-title,.card-mus--dec:active .card-title{color:#4a8ad0}
.card-mus--dec::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='10' width='85' height='8' rx='2' fill='%234a8ad0'/%3E%3Crect x='5' y='24' width='55' height='8' rx='2' fill='%234a8ad0'/%3E%3Crect x='5' y='38' width='70' height='8' rx='2' fill='%234a8ad0'/%3E%3Crect x='5' y='52' width='40' height='8' rx='2' fill='%234a8ad0'/%3E%3Crect x='5' y='66' width='75' height='8' rx='2' fill='%234a8ad0'/%3E%3Crect x='5' y='80' width='50' height='8' rx='2' fill='%234a8ad0'/%3E%3C/svg%3E")}
/* Incontournables — couronne — doré */
.card-mus--inco{--card-rgb:212,160,48}
.card-mus--inco:hover .card-title,.card-mus--inco:active .card-title{color:#d4a030}
.card-mus--inco::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='10,72 22,28 36,52 50,12 64,52 78,28 90,72' fill='%23d4a030'/%3E%3Crect x='10' y='72' width='80' height='12' rx='2' fill='%23d4a030'/%3E%3C/svg%3E")}
/* Chroniques — plume — violet */
.card-mus--chro{--card-rgb:136,104,192}
.card-mus--chro:hover .card-title,.card-mus--chro:active .card-title{color:#8868c0}
.card-mus--chro::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M75 8C70 22 58 38 28 82' fill='none' stroke='%238868c0' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M75 8C52 14 40 32 36 55C52 42 63 25 75 8Z' fill='%238868c0'/%3E%3Cpath d='M28 82L22 92L30 88Z' fill='%238868c0'/%3E%3C/svg%3E")}
/* Playlists — play — orange */
.card-mus--play{--card-rgb:224,128,48}
.card-mus--play:hover .card-title,.card-mus--play:active .card-title{color:#e08030}
.card-mus--play::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%23e08030' stroke-width='3'/%3E%3Cpolygon points='40,25 40,75 80,50' fill='%23e08030'/%3E%3C/svg%3E")}
/* ── HERO-NEWS CARTE ALBUM ── */
.hn-card{background:var(--light-bg);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 16px rgba(0,0,0,0.22);transition:transform 0.2s,box-shadow 0.2s;text-decoration:none;color:inherit;cursor:pointer}
.hn-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.hn-card-top{height:4px;background:var(--color-accent);flex-shrink:0}
.hn-card-header{display:flex;align-items:center;gap:10px;padding:10px 16px 8px;border-bottom:1px solid rgba(30,41,59,0.1)}
.hn-avatar{width:32px;height:32px;border-radius:50%;background:var(--color-accent);color:var(--light-bg);display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:700;flex-shrink:0;letter-spacing:0.5px}
.hn-date{font-size:0.6rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--color-accent)}
.hn-body{padding:12px 16px 8px;flex:1;display:flex;gap:12px;align-items:flex-start}
.hn-cover{width:52px;height:52px;border-radius:4px;object-fit:cover;flex-shrink:0;background:rgba(168,96,122,0.12)}
.hn-cover-info{flex:1;min-width:0}
.hn-label{font-size:0.55rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--color-accent);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.hn-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--color-accent);animation:heroNewsPulse 2s infinite;flex-shrink:0}
.hn-title{font-family:'Playfair Display',serif;font-size:0.95rem;color:var(--light-text);line-height:1.35;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hn-meta{font-size:0.6rem;color:var(--light-text-dim)}
.hn-cta{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 12px;border-top:1px solid rgba(30,41,59,0.1);background:transparent;border-left:none;border-right:none;border-bottom:none;width:100%;font-family:inherit;transition:background 0.15s}
.hn-cta:hover{background:rgba(30,41,59,0.06)}
.hn-cta-label{font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--color-accent)}
.hn-cta-arrow{font-size:0.85rem;color:var(--color-accent);transition:transform 0.15s}
.hn-card:hover .hn-cta-arrow{transform:translateX(3px)}

/* Mobile — masquer descriptions et footer */
/* Mobile — descriptions et footer visibles comme sur la home */
@media(max-width:600px){#albums-list{grid-template-columns:1fr}.month-entries{grid-template-columns:1fr}.chronique-entry{display:flex;gap:10px;align-items:flex-start;padding:8px;position:relative}.album-aside{width:70px;flex-shrink:0}.cover-box{width:70px;aspect-ratio:1}.listen-date{position:absolute;top:8px;left:88px;color:var(--mus-accent);font-size:0.6rem;line-height:1;margin-bottom:0}.meta-date{display:none}.album-info{text-align:left;padding-top:14px}.album-info h3{text-align:left;white-space:normal;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.meta{text-align:left}.content-section{padding:0 var(--space-xs) var(--space-xl)}}