/* Modal Album - Boîtier CD */
/* Charte: ratio 1.137 (142x125mm), tranche striée gauche, pochette remplit le reste */
.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 .3s,visibility .3s}
.album-modal-overlay.active{opacity:1;visibility:visible}

/* Boîtier mobile: 284x250px ratio 1.136 */
.cdm-case{position:relative;width:284px;height:250px;perspective:1200px}
.cdm-case-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.cdm-case.flipped .cdm-case-inner{transform:rotateY(180deg)}

/* Recto: tranche + pochette */
.cdm-front{position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;border-radius:4px;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-fav-icon{position:absolute;top:4px;right:4px;color:#FFD700;font-size:1.8rem;text-shadow:0 0 10px rgba(255,215,0,0.9),0 0 20px rgba(255,215,0,0.5);z-index:3;animation:fav-pulse 2s ease-in-out infinite;cursor:pointer}
.cdm-cover-placeholder{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-family:'Playfair Display',serif;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:.78rem;font-weight:700;color:#fff;margin:0 0 4px}
.cdm-artist-year{font-size:.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 .2s,transform .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-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)}

/* Verso - structure miroir du recto: contenu + tranche droite */
.cdm-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg);border-radius:4px;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.2;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:.75rem;font-weight:700;color:#000;margin:0 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdm-back-artist{font-size:.68rem;color:#000;margin:0}
.cdm-back-artist-name{cursor:pointer;color:var(--accent,#9b59b6);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:opacity .2s}
.cdm-back-artist-name:hover{opacity:.7}
.cdm-back-style{position:absolute;bottom:8px;left:8px;font-size:.6rem;color:#fff;background:rgba(0,0,0,0.6);padding:4px 10px;border-radius:12px;z-index:1;cursor:pointer;transition:background .2s}
.cdm-back-style:hover{background:var(--accent,#9b59b6)}
.cdm-back-play,.cdm-back-close{width:28px;height:28px;background:var(--accent,#9b59b6);border:none;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;flex-shrink:0;transition:transform .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-chronique{flex:1;padding:8px;font-size:.75rem;line-height:1.5;color:#000;overflow-y:auto;text-align:justify;text-indent:0.8em;transition:flex .3s,height .3s,opacity .3s,padding .3s;border-left:3px solid var(--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}

/* Signature dans chronique - masquée sur mobile */
.cdm-signature{display:none}

/* Player dans verso */
.cdm-player{height:0;margin:0 8px 6px;background:#000;border-radius:4px;overflow:hidden;transition:height .3s,flex .3s,margin .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%}

/* =====================================================
   THEME MUSIQUE - FILTRES & NAVIGATION
===================================================== */
.theme-musique .sticky-header{position:sticky;top:60px;background:var(--bg);z-index:100;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.08)}
.theme-musique .filters-row{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.theme-musique .filters-row .search-wrapper{position:relative;flex:1 1 150px;min-width:120px;max-width:500px;order:0}
.theme-musique .filters-row .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#555;pointer-events:none}
.theme-musique .filters-row #search-input{width:100%;height:40px;padding:0 32px 0 42px;background:#fff;border:2px solid var(--accent);border-radius:8px;color:#1a1a2e;font-size:0.9rem;font-family:'Inter',sans-serif;outline:none;-webkit-appearance:none;box-sizing:border-box}
.theme-musique .filters-row #search-input::-webkit-search-cancel-button{display:none}
.theme-musique .filters-row #search-input::placeholder{color:#555}
.theme-musique .filters-row #search-input:focus{box-shadow:0 0 0 3px rgba(155,89,182,0.25)}
.theme-musique .filters-row .search-wrapper #clear-search{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:#666;font-size:1.2rem;cursor:pointer;display:none;line-height:1}
.theme-musique .filters-count{font-size:0.9rem;color:#fff;white-space:nowrap;order:1}
.theme-musique .nav-pills{display:flex;gap:8px;width:100%;order:2}
.theme-musique .nav-link{font-size:0.85rem;color:var(--accent);text-decoration:none;white-space:nowrap;font-family:'Inter',sans-serif;padding:8px 16px;background:rgba(155,89,182,0.1);border:1px solid var(--accent);border-radius:20px;transition:all 0.2s;font-weight:500}
.theme-musique .nav-link:hover{color:#fff;background:var(--accent)}
.theme-musique .filters-pills{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:4px 0;scrollbar-width:none;-ms-overflow-style:none;flex:1}
.theme-musique .filters-pills::-webkit-scrollbar{display:none}
.theme-musique .filter-pill{flex-shrink:0;padding:8px 16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.15);border-radius:20px;color:rgba(255,255,255,0.8);font-size:0.85rem;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.theme-musique .filter-pill:hover{border-color:var(--accent);color:#fff;background:rgba(155,89,182,0.1)}
.theme-musique .filter-pill.active{background:linear-gradient(135deg,var(--accent) 0%,rgba(155,89,182,0.8) 100%);border-color:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(155,89,182,0.3)}
.theme-musique .filter-pill--small{padding:4px 10px;font-size:0.75rem}
.theme-musique .filters-sub-row{display:flex;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);animation:fadeInFilter 0.2s ease;margin-top:2px}
.theme-musique .filters-sub-row .filters-pills{flex:1}
.theme-musique .filters-label{font-size:0.75rem;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.5px;flex-shrink:0}
.theme-musique .scroll-hint{color:rgba(255,255,255,0.3);font-size:1rem;flex-shrink:0}
@keyframes fadeInFilter{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

/* =====================================================
   PAGE ESSENTIELS
===================================================== */
/* Mobile: 3 colonnes */
.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 rgba(255,255,255,0.04);padding:6px;border-radius:3px;display:flex;flex-direction:column;transition:0.3s;cursor:pointer;height:100%;min-width:0}
.essential-card:hover{border-color:var(--accent);background:rgba(155,89,182,0.08);box-shadow:0 4px 12px rgba(155,89,182,0.3)}
.essential-card.to-listen{border-color:rgba(155,89,182,0.2);background:rgba(155,89,182,0.03);cursor:default;position:relative}
.essential-card.to-listen:hover{border-color:rgba(155,89,182,0.3);background:rgba(155,89,182,0.05);transform:none}
.essential-card.to-listen::before{content:"BIENTÔT";position:absolute;top:4px;right:4px;background:var(--accent);color:var(--white);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(--gradient-placeholder)}
.fav-icon{position:absolute;top:2px;right:2px;color:#FFD700;font-size:1.4rem;text-shadow:0 0 8px rgba(255,215,0,0.9),0 0 16px rgba(255,215,0,0.5);z-index:3;animation:fav-pulse 2s ease-in-out infinite;cursor:pointer}
@keyframes fav-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.85;transform:scale(1.08)}}
.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(--white);line-height:1.2;word-break:break-word}
.essential-card.to-listen .no-img-placeholder span{color:rgba(255,255,255,0.4);filter:blur(0.5px)}
.album-rank{font-size:0.5rem;color:var(--accent);letter-spacing:1px;margin-bottom:4px;font-weight:600}
.album-title{font-size:0.6rem;font-weight:600;color:var(--white);margin:0 0 2px 0;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-artist{font-family:'Playfair Display',serif;font-style:italic;color:rgba(255,255,255,0.4);font-size:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.year-block{margin-bottom:50px}
.year-block.hidden{display:none}
.year-block .column-title{font-size:1.8rem;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid rgba(155,89,182,0.2)}
.decade-section{margin-bottom:80px}
.decade-header{display:flex;align-items:center;gap:20px;margin-bottom:30px}
.decade-title{font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--accent);margin:0}
.decade-header::after{content:"";flex:1;height:1px;background:rgba(155,89,182,0.15);min-width:50px}
.sticky-header{position:sticky;top:60px;background:var(--bg);z-index:100;padding:12px 15px 10px;border-bottom:1px solid rgba(255,255,255,0.08)}
.sticky-header h1{font-size:1.1rem;margin:0 0 8px;color:var(--white);font-family:'Playfair Display',serif;text-align:center}
.filters-bar{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.filter-btn{background:rgba(255,255,255,0.05);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:#fff;padding:5px 10px;font-size:0.6rem;font-weight:600;letter-spacing:0.5px;cursor:pointer;transition:0.3s;border-radius:2px;font-family:'Inter',sans-serif}
.filter-btn:hover{border-color:var(--accent)}
.filter-btn.active{background:var(--accent);border-color:var(--accent)}
.decade-section.visible{opacity:1;transform:translateY(0)}
.decade-section.hidden{display:none}
.decade-link{text-decoration:none;color:var(--accent);font-size:0.55rem;font-weight:600;letter-spacing:0.5px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:4px 8px;transition:0.3s;white-space:nowrap;border-radius:2px}
.decade-link:hover{background:var(--accent);color:#fff}
.decade-description{color:rgba(255,255,255,0.45);font-size:0.75rem;line-height:1.5;margin-bottom:15px;max-width:600px;font-style:italic}
.page-essentiels .essentiels-grid{grid-template-columns:repeat(3,1fr)}
.page-essentiels .decade-header::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--accent) 20%,transparent);min-width:30px}

/* =====================================================
   PAGES DÉCENNIES (1940s, 2020s, etc.)
===================================================== */
/* Navigation sticky */
.decade-sticky-nav{position:sticky;top:60px;background:var(--bg);z-index:100;padding:10px 15px;border-bottom:1px solid rgba(255,255,255,0.08);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 rgba(255,255,255,0.12);border-radius:20px;color:rgba(255,255,255,0.6);font-size:0.65rem;font-weight:500;text-decoration:none;transition:all 0.2s;font-family:'Inter',sans-serif}
.decade-pill:hover{border-color:var(--accent);color:#fff;background:rgba(155,89,182,0.1)}
.decade-pill.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(155,89,182,0.3)}
.decade-filters{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* Sections */
.decade-section{margin-bottom:50px}
.section-title{font-family:'Playfair Display',serif;font-size:1.6rem;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid rgba(155,89,182,0.2);color:#fff;display:flex;align-items:baseline;gap:12px}
.update-badge{font-family:'Inter',sans-serif;font-size:0.55rem;color:rgba(255,255,255,0.35);font-weight:400;letter-spacing:0}

/* Grille albums mobile: 3 colonnes */
.albums-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}

/* Utilitaires */
.sep{margin:0 6px;opacity:0.3}
.error-msg{color:rgba(255,255,255,0.4);font-size:0.85rem;text-align:center;padding:40px}

/* =====================================================
   PAGE FONDAMENTAUX
===================================================== */
.tab-panel{display:none}
.tab-panel.active{display:block}
/* Mobile: 1 colonne */
.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 rgba(255,255,255,0.06);padding:25px;cursor:pointer;transition:0.3s;border-radius:4px;position:relative;overflow:hidden}
.artist-card:hover{background:rgba(255,255,255,0.05);border-color:var(--accent);transform:translateY(-2px)}
.artist-card[aria-expanded="true"]{background:rgba(155,89,182,0.15);border-color:var(--accent)}
.artist-card.pilier{grid-column:span 1;border-color:rgba(155,89,182,0.3);background:rgba(155,89,182,0.05)}
.artist-card.pilier::before{content:"PILIER";position:absolute;top:12px;right:12px;font-size:0.5rem;letter-spacing:2px;color:var(--accent);font-weight:700;background:rgba(155,89,182,0.2);padding:4px 8px;border-radius:2px}
.artist-card h3{font-family:'Playfair Display',serif;font-size:1.4rem;margin:0 0 8px 0;color:#fff;font-weight:600}
.artist-style{display:block;font-size:0.65rem;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:12px;font-weight:600}
.artist-bio-preview{font-size:0.85rem;line-height:1.6;color:rgba(255,255,255,0.5);margin:0}
.artist-count{display:block;margin-top:15px;font-size:0.6rem;color:rgba(255,255,255,0.4);text-align:right}
#artist-detail-anchor{scroll-margin-top:90px}
.artist-detail{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);padding:40px;border-radius:4px;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 rgba(255,255,255,0.1)}
.artist-detail h2{font-family:'Playfair Display',serif;font-size:2.2rem;margin:0 0 8px 0;color:#fff}
.artist-detail .meta-line{font-size:0.75rem;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:1px}
.artist-bio{font-size:1rem;line-height:1.8;color:rgba(255,255,255,0.7);margin-bottom:35px}
/* Mobile: 2 colonnes pour albums artiste */
.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 rgba(255,255,255,0.04);padding:12px;cursor:pointer;transition:0.3s;border-radius:4px}
.artist-album-card:hover{background:rgba(155,89,182,0.1);border-color:var(--accent)}
.artist-album-cover{position:relative;width:100%;padding-bottom:100%;margin-bottom:10px;border-radius:2px;overflow:hidden;background:linear-gradient(135deg,#1a1a2e 0%,#0f0f1a 100%)}
.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:'Playfair Display';font-style:italic;color:#fff;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:#fff;margin-bottom:4px;line-height:1.3}
.artist-album-info em{font-size:0.75rem;font-style:normal;color:var(--accent);font-weight:600}
/* Mobile: 2 colonnes pour fav albums */
.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 rgba(255,255,255,0.04);padding:16px;cursor:pointer;transition:0.3s;border-radius:4px}
.fav-album-card:hover{background:rgba(155,89,182,0.1);border-color:var(--accent);transform:translateY(-2px)}
.fav-album-cover-container{position:relative;width:100%;padding-bottom:100%;margin-bottom:12px;border-radius:2px;overflow:hidden;background:linear-gradient(135deg,#1a1a2e 0%,#0f0f1a 100%)}
.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:'Playfair Display';font-style:italic;color:#fff;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:#fff;margin:0 0 4px 0;line-height:1.3}
.fav-album-artist{font-family:'Playfair Display';font-style:italic;font-size:0.75rem;color:rgba(255,255,255,0.4);margin-bottom:8px}
.fav-album-reason{font-size:0.7rem;color:rgba(255,255,255,0.5);line-height:1.5;font-style:italic}
/* Mobile: 1 colonne pour titres */
.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 rgba(255,255,255,0.04);padding:12px 16px;border-radius:4px;transition:0.3s}
.titre-card:hover{background:rgba(155,89,182,0.1);border-color:var(--accent)}
.titre-rank{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--accent);font-weight:600;text-align:center}
.titre-info h4{font-size:0.9rem;color:#fff;margin:0 0 4px 0;font-weight:500}
.titre-info span{font-size:0.75rem;color:rgba(255,255,255,0.4)}
.titre-play{width:36px;height:36px;border-radius:50%;background:var(--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:rgba(155,89,182,0.15);border-color:var(--accent)}

/* =====================================================
   PAGE DISCOGRAPHIE - CD SHELF
===================================================== */
.shelf-container{margin-bottom:80px}
.shelf-decade{margin-bottom:40px}
.shelf-decade-title{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--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(--accent) 0%,rgba(155,89,182,0.7) 100%);border-radius:13px;font-size:0.75rem;font-weight:600;color:#fff;letter-spacing:0.3px;box-shadow:0 2px 8px rgba(155,89,182,0.3)}
.shelf-year-count{font-size:0.65rem;color:rgba(255,255,255,0.4)}
.shelf-row{display:flex;gap:4px;overflow-x:auto;overflow-y:clip;padding:15px 5px 25px;scrollbar-width:thin;scrollbar-color:var(--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(--accent);border-radius:2px}
/* Mobile: CD 10x110 */
.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(155,89,182,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:'Playfair Display',serif;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(155,89,182,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:'Playfair Display',serif}
.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:rgba(255,255,255,0.6);border-top:1px solid rgba(255,255,255,0.08)}
.disco-indicator-decade,.disco-indicator-year{text-decoration:none;transition:opacity 0.2s}
.disco-indicator-decade{color:var(--accent);font-weight:600}
.disco-indicator-year{color:#fff}
.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(--accent);border-radius:50%;animation:spin 0.8s linear infinite}

/* =====================================================
   PAGE CHRONIQUES MUSICALES
===================================================== */
/* Mobile: 2 colonnes simplifiées */
#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;overflow:hidden}
.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(--accent);border-radius:50%;animation:spin 1s linear infinite}
.loader-text{font-size:0.75rem;color:rgba(255,255,255,0.4);letter-spacing:1px}
.meta-date{display:none}
.chronique-entry{display:block;padding:6px;background:#fafafa;border:none;margin-bottom:0;cursor:pointer;transition:0.3s;min-height:auto;max-width:100%;box-sizing:border-box;border-radius:var(--radius-lg);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.chronique-entry:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.25)}
.album-aside{width:100%;display:block;text-align:center}
.cover-box{width:100%;height:auto;aspect-ratio:1;background:var(--gradient-placeholder);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-md);padding:8px;margin:0 auto}
.cover-box img{width:100%;height:100%;object-fit:cover}
.cover-box span{font-family:'Playfair Display',serif;font-style:italic;color:var(--white);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(--accent);line-height:1.3;text-transform:uppercase;margin-top:6px}
.listen-date strong{font-size:0.75rem;display:inline;color:#666;font-weight:600}
.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:#1a1a2e;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;display:block}
.meta{font-family:'Playfair Display',serif;font-style:italic;color:#555;font-size:0.65rem;text-align:center;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.album-text{display:none}

/* =====================================================
   PAGE MUSIQUE INDEX
===================================================== */
/* Mobile: 2 colonnes */
.album-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:700px;margin:0 auto}
.album-card{aspect-ratio:1/1;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:15px;position:relative;transition:all 0.3s ease;overflow:hidden}
.album-card:hover{background:rgba(255,255,255,0.06);border-color:var(--accent);box-shadow:0 4px 12px rgba(155,89,182,0.3)}
.album-card .card-num{position:absolute;top:15px;left:15px;font-size:0.75rem;font-weight:600;color:var(--accent);opacity:0.5}
.album-card h3{font-family:'Playfair Display',serif;font-size:1rem;margin-bottom:15px;color:#fff}
.album-card p{display:none}
.album-card a{position:absolute;inset:0;z-index:1}

/* =====================================================
   PAGE CARNET D'ÉCOUTES
===================================================== */
/* Mobile: layout colonne */
.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)}
.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)}

/* =====================================================
   TABLET/DESKTOP: min-width 1024px
===================================================== */
@media(min-width:1024px){
/* Modal: 398x350px */
.cdm-case{width:398px;height:350px}
.cdm-spine{width:15px}
.cdm-info{padding:12px;left:0}
.cdm-title{font-size:.95rem}
.cdm-artist-year{font-size:.8rem}
.cdm-flip{width:30px;height:30px;bottom:12px;right:12px}
.cdm-flip::before{font-size:14px}
.cdm-back-spine{width:15px}
.cdm-back-header{gap:8px;padding:6px 8px}
.cdm-back-title{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700}
.cdm-back-artist{font-size:.7rem}
.cdm-back-play,.cdm-back-close{width:34px;height:34px}
.cdm-chronique{font-size:.95rem;line-height:1.7;text-align:left;text-indent:1em;padding:10px 12px 10px 15px}
.cdm-signature{display:block;text-align:right;margin-top:8px;font-size:.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: 6 colonnes */
.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}
.page-essentiels .essentiels-grid{grid-template-columns:repeat(6,1fr)}
.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: 2 colonnes */
.artist-grid{grid-template-columns:repeat(2,1fr)}
.artist-albums-grid{grid-template-columns:repeat(3,1fr)}
.fav-albums-grid{grid-template-columns:repeat(3,1fr)}
.titres-grid{grid-template-columns:repeat(2,1fr)}

/* CD Shelf: 10x140 */
.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: grille desktop */
#albums-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.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}
.listen-date{margin-top:0}
.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:#444;line-height:1.6;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;text-align:justify}

/* Musique index */
.album-grid{gap:20px}
.album-card{padding:30px}
.album-card h3{font-size:1.3rem;margin-bottom:30px}
.album-card p{display:block;font-size:0.8rem;color:rgba(255,255,255,0.6);line-height:1.5}

/* Carnet: layout desktop */
.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}
}

/* =====================================================
   LARGE SCREENS: min-width 1440px
===================================================== */
@media(min-width:1440px){
/* Grilles: 10 colonnes */
.essentiels-grid{grid-template-columns:repeat(10,1fr)}
.page-essentiels .essentiels-grid{grid-template-columns:repeat(10,1fr)}
.albums-grid{grid-template-columns:repeat(10,1fr)}

/* Fondamentaux: 4 colonnes pour albums */
.artist-albums-grid{grid-template-columns:repeat(4,1fr)}
.fav-albums-grid{grid-template-columns:repeat(4,1fr)}
}