/* 1. Couleurs et Fond (TON DESIGN ORIGINAL) */
/* Transition douce des couleurs de thème entre deux chansons :
   pilotée côté JS (player.js → applyAmbientColorsSmooth avec lerpCssColor).
   Le CSS ne sait pas interpoler un custom property de manière fiable sur
   toutes les plateformes sans @property, donc on anime les variables
   depuis player.js via requestAnimationFrame (smoothstep, 1200ms). */
:root {
    --main-color: #2a2e2a;
    --bg-color-2: rgb(39, 39, 39);
}

/* Animation de défilement du titre (utilisée par player.js sur .track-info h3) */
@keyframes scroll-text {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}.track-info {
    overflow: hidden;
    white-space: nowrap;
    /* FIX « GROS RECTANGLE GRIS » 2026-07-30 (cf. accueil.css) : on
       retire le mask-image du base rule. Le fade transparent aux bords
       laissait le fond `.opening` (gris foncé en ambient, blanc en
       light) paraître à travers les zones de mask, créant l'effet
       « gros rectangle » rapporté par l'user. Le mask ne servait que
       pour le mode scroll-text (défilement continu), masqué hors-vue
       dès que le conteneur est étroit (220px en mode horizontal). On
       retire globalement : rendu propre en tous modes. */
}

.track-info h3 {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    /* Doubler transition pour song-change fade-in/fade-out. */
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Pause l'animation scroll-text dès qu'on survole le titre (lecture humaine). */
.track-info:hover > h3 {
    animation-play-state: paused;
}

/* === Mode "static" : titre wrap multi-lignes, pas d'animation === */
html[data-title-mode="static"] .track-info {
    overflow: visible !important;
    white-space: normal !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
}
html[data-title-mode="static"] .track-info h3 {
    white-space: normal !important;
    display: block !important;
    word-break: break-word !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
}

/* === Animation de transition entre deux morceaux (cover + titre + artiste) === */
.track-cover {
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
.track-cover.is-changing {
    opacity: 0;
    transform: scale(0.94);
}
.track-info h3.is-changing,
.track-info p.is-changing {
    opacity: 0;
    transform: translateY(8px);
}

/* Le lien à gauche */
a {
    text-decoration: none;
    color: #ffffff;
    font-size: 3rem; 
    flex: 1; 
}

a:hover {
    color: var(--bg-color-2); 
    text-shadow: 0 0 10px var(--bg-color-2);
}

/* Le titre au centre */
.main-title {
    margin-top: 20px;
    font-size: 3rem;
    text-align: center;
    flex: 2; 
}

.spacer {
    flex: 1;
}

body {
    background-image: linear-gradient(135deg, var(--bg-color-2) 0%, var(--main-color) 100%);
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    height: 100vh;
    color: rgb(255, 255, 255);
    font-family: sans-serif;
    transition: background 0.8s ease;
    overflow: hidden; 
}

/* 2. Structure Principale - AJUSTEMENT PROPORTIONNEL */
.main-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3vw; /* Espace entre les blocs basé sur la largeur écran */
    padding: 20px 4vw;
    width: 100%;
    max-width: 1920px; /* Évite l'éclatement sur les très grandes TV */
    margin: 0 auto;
    box-sizing: border-box;
    height: calc(100vh - 120px); 
}

/* 3. Lecteur Gauche - FIXÉ EN PROPORTION */
.left-column {
    flex: 0 0 22vw; /* Prend toujours 22% de la largeur */
    min-width: 320px;
    max-width: 400px;
}

.opening {
    width: 100%; 
    background: rgba(18, 18, 18, 0.9);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    text-align: center;
    box-sizing: border-box;
}

.track-cover { 
    width: 100%; 
    aspect-ratio: 1/1; 
    border-radius: 8px; 
    object-fit: cover; 
    margin-bottom: 15px; 
}

/* 4. LA COLONNE DU MILIEU (Albums) - S'ADAPTE AU RESTE */
.middle-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; 
}

.playlist-sidebar {
    background: transparent;
    border-radius: 15px;
    padding: 10px;
    overflow-y: auto; 
    height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.playlist-sidebar::-webkit-scrollbar {
    display: none;
}

/* 5. Grille d'Albums - PROPORTIONNEL AUX ÉCRANS */
.album-grid {
    display: grid;
    /* Base : 4 covers per line par défaut, responsive shrink, SANS espace vide
       à droite quand moins de 4 cards : on utilise `auto-fit` +
       minmax(220px, 1fr). Avec auto-fit, les tracks GRID vides sont
       COLLAPSÉES (contrairement à `auto-fill` qui les laisse visibles
       et crée exactement le bug "espace vide sur la droite" pour les
       albums à 1-3 cards). Les cards qui restent s'étirent via 1fr
       pour fill la row entière.
       Math cible (viewport 1280px, .main-container + .left-column 320px
       + gap 3vw + 4vw padding latéral ⇒ middle-column ≈ 820px utiles) :
         - 820px : 820/240 = 3.4 → 3 cards per row (auto-fit, stretch)
         - 1920px : 1308/240 = 5.4 → 5 cards per row (large)
         - Mobile @media 600px : 180/240 = ... (cf. mobile override
           plus bas, qui prend le pas à <600px).
       L'ancien minmax(280px,1fr) donnait seulement 2 cards sur 1280px
       (trop gourmand pour la colonne player). 220px est le sweet spot
       Spotify-style qui donne 3+ cards sans écraser visuellement.
       Mobile (<600px) : pas d'override mobile dans ce fichier, le
       minmax(220,1fr) reste actif. Sur un viewport 600px, le grid réel
       fait ~194px (post 4vw padding + .left-column 320px + 3vw gap +
       .playlist-sidebar 20px) ⇒ 194/240 = 0.8 → 1 card unique qui fill la
       largeur via 1fr. Pas de track vide grâce à auto-fit, pas de card
       écrasée non plus (1 card sur toute la row = UI correcte).
       NB : pour les vues Playlist / Favorites, on override plus bas avec
       une grille FIXE 4 colonnes (cf. `.middle-column:has(...)`) pour
       éviter que les covers s'étirent quand la liste contient 1-3
       tracks (auto-fit + 1fr fait passer chaque track à 50% de la
       largeur — beaucoup trop gros). */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 10px;
}

/* Carte d'album individuelle */
.album-card {
    background: rgba(18, 18, 18, 0.8); 
    padding: 1.2vw; /* Padding proportionnel */
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: left;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.album-card:hover {
    background: rgba(30, 30, 30, 0.9);
    transform: translateY(-5px);
}

.album-card.active {
    background: rgba(51, 51, 51, 0.9);
    border: 1px solid var(--main-color);
}

.album-cover-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    margin-bottom: 12px;
}

.album-cover-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* LE BOUTON PLAY VERT */
.play-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 45px;
    height: 45px;
    background: var(--main-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.album-card:hover .play-overlay {
    opacity: 1;
    transform: translateY(0);
}

.album-info h4 {
    margin: 5px 0;
    font-size: 0.875rem; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #b3b3b3;
}

/* 6. Player UI & Volume */
.time-wrapper { display: flex; align-items: center; gap: 10px; font-size: 12px; margin: 15px 0; }
.progress-bar { flex-grow: 1; height: 5px; background: #4f4f4f; border-radius: 10px; cursor: pointer; position: relative; }
.progress { width: 0%; height: 100%; background-color: var(--main-color); border-radius: 10px; }

/* Container des contrôles (ajoute cette classe à la div qui entoure tes boutons) */
.controls {
    display: flex;
    align-items: center; /* Aligne verticalement au centre */
    justify-content: center; /* Centre le groupe horizontalement */
    gap: 20px;
}/* Style unifié pour TOUS les boutons du lecteur */
.btn-random,
.btn-repeat,
.btn-prev,
.btn-next,
#play-pause {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;

    /* On force une boîte de même taille pour tout le monde */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;  /* Ajuste selon tes besoins */
    height: 50px;

    font-size: 1.8rem; /* Taille uniforme des symboles */
    line-height: 1;    /* Supprime les espaces de texte parasites */
    padding: 0;
}

/* Spécificité pour les modes (opacité) */
.btn-random, .btn-repeat {
    opacity: 0.5;
}

.btn-random.active, .btn-repeat.active {
    opacity: 1;
    color: var(--main-color);
    text-shadow: 0 0 10px var(--main-color);
}/* On ajuste Play/Pause s'il paraît trop petit ou gros */
#play-pause {
    font-size: 2.5rem;
}

/* Volume - ALIGNÉ AVEC LE LECTEUR */
.volume-container {
    background: rgba(18, 18, 18, 0.9);
    padding: 12px 25px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%; 
    margin: 20px 0; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    box-sizing: border-box;
}

#volume-slider {
    flex-grow: 1;
    accent-color: var(--main-color);
}

#volume-icon {
    font-size: 1.2rem;
    cursor: pointer;
}

/* Masquage des éléments inutiles */
.search-box, .nav-links, .navigation-panel, .nav-column { display: none; }

/* Masquage des pistes filtrées par la recherche (mode grid) */
.hidden-song { display: none !important; }

/* Masque la cover et le titre tant que la première chanson n'est pas chargée */
.opening.player-loading .track-cover,
.opening.player-loading .track-info {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* --- SECTION BANNIÈRE FINALE (DOUBLE CLIPART) --- */

.custom-header {
    display: flex;
    width: 94vw;
    margin: 20px auto;
    height: 100px;
    gap: 4px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.8));
}

.btn-back {
    flex: 0 0 160px;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    font-size: 2.8rem;
    /* Tous les coins arrondis (25px sur 100px de haut → forme pilule).
       On supprime le clip-path polygon qui écrasait border-radius au hover
       et révélait des coins angulaires au lieu des coins arrondis attendus. */
    border-radius: 25px;
    z-index: 2;
    transition: background 0.3s;
}

.title-banner {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Comme le .btn-back, on retire le clip-path et on passe border-radius
       à 25px sur les 4 coins pour que la couleur de hover remplisse une
       forme arrondie cohérente (pilule) au lieu de révéler l'angle coupé. */
    border-radius: 25px;
    background-color: rgba(0,0,0,0.8);
    border: 5px solid rgba(0,0,0,0.8);
    box-sizing: border-box;
    text-align: left;
    /* padding-left 120px (etait 50px) pour liberer la place du logo
       (clipart-left) qui prend ~50px de large a droite de l'edge.
       Ancien 50px = logo (45+5) se superposait au titre. */
    padding-left: 120px;
}

/* h1 du title-banner : superieur au logo (z-index:2) pour eviter
   que le clipart overlap les premiers caracteres du titre. */
.title-banner > h1 {
    position: relative;
    z-index: 2;
    /* tranche gauche sure pour rejoin le padding du banner */
    margin: 0;
    /* Harmonisé avec shared-header.css (famille Norex) : system-ui,
       dégradé blanc → --main-color, clamp. nowrap + ellipsis car les
       titres d'album/saga sont longs. */
    min-width: 0;
    max-width: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(90deg, #ffffff 0%, var(--main-color, #FF66B3) 85%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* BASE COMMUNE : On verrouille la hauteur */
.clipart-left, .clipart-right {
    position: absolute;
    top: 0;
    bottom: 0; /* Force l'ancrage vertical */
    height: 100%; /* L'image fera exactement 100px */
    width: auto;  /* La largeur s'adapte au ratio de l'image */
    /* max-width 60px (cap dur pour eviter que le logo domine). Ancien
       100% = sur grand ecran le logo pouvait prendre 200-300px et
       superposer le titre. 60px est le sweet-spot "ico-discret". */
    max-width: 60px;
    /* "contain" assure que l'image est entièrement visible en hauteur */
    object-fit: contain;
    /* z-index 0 : place DERRIERE .title-banner > h1 (z-index:2) pour
       ne jamais chevaucher visuellement le titre. */
    z-index: 0;
    pointer-events: none;
    opacity: 0.75; /* discret */
}

/* IMAGE GAUCHE : Collée à gauche, le "vide" se crée à droite */
.clipart-left {
    left: 0;
    object-position: left center;
    /* padding-left 8px (etait 45px) : le logo est maintenant colle a
       l'edge du banner. L'ancien 45px combinée avec .title-banner
       padding-left:120px = les deux reservaient 165px au total, ecrasant
       la zone du titre. */
    padding-left: 8px;
    box-sizing: border-box;
}

/* IMAGE DROITE : Collée à droite, le "vide" se crée à gauche */
.clipart-right {
    right: 0;
    object-position: right center;
    padding-right: 0px;
    box-sizing: border-box;
}

/* Transitions alignées sur shared-header.css. */
.title-banner {
    transition: background 0.4s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.btn-back {
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.title-banner:hover, .btn-back:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: white;
    /* Halo + léger lift, comme les autres apps. */
    box-shadow: 0 0 32px var(--main-color);
    transform: translateY(-1px);
}
/* Au survol la pill prend --main-color : on force le titre en blanc
   sinon le dégradé (blanc → main-color) se confond avec le fond. */
.title-banner:hover > h1,
.title-banner:focus-within > h1 {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
    text-shadow: 0 0 14px rgba(0, 0, 0, 0.45);
}

.btn-EN, .btn-FR, .btn-JP {
    display: block;
    width: fit-content;
    margin: 10px 0 20px 15px; /* Aligné avec le texte de la liste */
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--main-color);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-EN:hover, .btn-FR:hover, .btn-JP:hover,
.btn-EN.active, .btn-FR.active, .btn-JP.active {
    background: var(--main-color);
    color: #000; /* Texte noir sur fond vert pour le contraste */
    box-shadow: 0 0 15px var(--main-color);
    transform: translateY(-2px);
}

.lang-container {
    display: flex;          /* Active le mode Flexbox */
    flex-direction: row;    /* Force les éléments à se mettre en ligne */
    gap: 10px;              /* Un petit espace de 10px entre chaque lien */
    margin-bottom: 15px;    /* Crée de l'espace avec la barre de recherche en dessous */
    padding: 15px;
    padding-bottom: 0;
}

/* C'est la balise <a> qui doit maintenant gérer la taille flexible */
.lang-container a {
    flex: 1;                /* Permet aux liens d'avoir tous la même largeur */
    max-width: 150px;       /* Limite la largeur max des liens */
    text-decoration: none;  /* Optionnel : retire le soulignement textuel des liens */
}/* Le bouton prend simplement 100% de la place de son lien parent <a> */
.lang-container button {
    width: 100%;
    display: block;         /* Évite les petits espaces vides sous le bouton */
}

/* =============================================================
   FAVORITES — Bouton cœur sur chaque carte d'album (grid mode)
   ============================================================= */

/* Le btn est positionné en absolu top-right de album-cover-wrapper (qui est
   déjà position:relative via album.css). On le garde discret (opacity 0.65)
   par défaut, pleinement visible au hover de la card ou quand déjà favori,
   pour qu'il n'écrase pas visuellement les covers. Les transitions sont
   posée ici pour ne pas dépendre des surcharges tardives du bloc base .fav-btn. */
.album-cover-wrapper .fav-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    opacity: 0.65;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
                color 0.25s ease, background 0.25s ease, border-color 0.25s ease,
                box-shadow 0.25s ease;
}
.album-card .play-overlay {
    /* Le play-overlay reste au-dessus du coin bas-droit de la cover ; on
       réserve la priorité au fav-btn en haut-droite via z-index:3 ci-dessus. */
    z-index: 2;
}
.album-card:hover .album-cover-wrapper .fav-btn {
    opacity: 1;
}
/* Si déjà favori, on l'affiche en permanence (sinon l'utilisateur ne sait
   pas que c'est dans sa library sans hover). */
.album-cover-wrapper .fav-btn.is-favorite {
    opacity: 1;
}

/* ---- Bouton cœur — base partagée avec accueil.css ---- */
.fav-btn {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    vertical-align: middle;
}
.fav-btn:hover {
    color: var(--main-color);
    border-color: var(--main-color);
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35),
                0 0 14px color-mix(in srgb, var(--main-color) 40%, transparent);
}
.fav-btn:active {
    transform: scale(0.94);
}
.fav-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-color) 35%, transparent);
}
.fav-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill 0.2s ease;
}
/* État favori : cœur rempli + accent color + glow */
.fav-btn.is-favorite {
    color: var(--main-color);
    background: color-mix(in srgb, var(--main-color) 20%, rgba(0, 0, 0, 0.42));
    border-color: var(--main-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--main-color) 55%, transparent);
}
.fav-btn.is-favorite svg {
    fill: currentColor;
}
/* Animation pop à chaque toggle (JS pose et retire .pop-anim en ~420ms) */
.fav-btn.pop-anim svg {
    animation: fav-pop 0.42s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes fav-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.40); }
    60%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}
/* Bouton désactivé si library.js n'a pas chargé */
.fav-btn.is-disabled,
.fav-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
/* Mode no-animations : coupe tout proprement */
html.no-animations .fav-btn,
html.no-animations .fav-btn:hover,
html.no-animations .fav-btn:active,
html.no-animations .fav-btn svg,
html.no-animations .fav-btn.pop-anim svg {
    transition: none !important;
    animation: none !important;
}
/* Mode clair : override pour la lisibilité du cœur sur fond clair */
html.theme-light .fav-btn {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.18);
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
html.theme-light .fav-btn.is-favorite {
    color: var(--main-color);
    background: color-mix(in srgb, var(--main-color) 22%, rgba(255, 255, 255, 0.6));
    border-color: var(--main-color);
}
/* ==========================================================================
   LECTEUR HORIZONTAL SPOTIFY-STYLE (opt-in) — propagé depuis accueil.css
   ==========================================================================
   Les pages d''albums (vocaloid/tdimh/tadc/...) ne chargent QUE album.css,
   pas accueil.css. Le bloc  restait donc invisible.
   On duplique ici les règles pour que le Settings → Player → Reader layout
   fonctionne aussi dans la grille d''albums.
   Différences par rapport à accueil.css :
   - Pas de  (album.css n''a pas de sphère audio).
   -  a  au lieu de  — sans impact en mode
     horizontal puisque  est  (hors flux) et que
      est désormais un enfant flex interne de .
   - Cette copie remplace l''ancienne règle centrée sur le sibling fixed
     (right:0 / width:220px). Le volume-container est DANS .opening, à
     côté du spotify-player (cf. *.html). */
@media (min-width: 1025px) {
    html.player-horizontal .left-column {
        display: contents;
    }
    html.player-horizontal .main-container {
        height: calc(100vh - 120px - 90px);
    }

    /* ===== Barre du bas — .opening (cover + info + controls + progress + volume) ===== */
    html.player-horizontal .opening {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 90px;
        z-index: 60;
        display: flex;
        align-items: center;
        padding: 0 20px;
        border-radius: 0;
        text-align: left;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
        margin: 0;
        animation: none !important;
    }
    html.player-horizontal .track-cover {
        width: 56px;
        height: 56px;
        aspect-ratio: 1 / 1;
        margin: 0 14px 0 0;
        border-radius: 6px;
        flex: 0 0 auto;
    }
    html.player-horizontal .track-info {
        flex: 0 0 220px;
        min-width: 0;
        margin-right: 16px;
        overflow: hidden;
    }
    /* Bug fix 2026-07-29 (cf. accueil.css) : on garde l'inline-block
       de la règle de base et on neutralise proprement l'animation
       scroll-text en mode narrow. Pas de display:block / transform:none
       imposés : le comportement natif `overflow:hidden + text-overflow:
       ellipsis + white-space:nowrap` sur inline-block est suffisant
       dans Chromium/Edge quand l'animation scroll est désactivée via
       `animation:none !important`. Le précédent fix (display:block +
       transform:none + will-change:auto + text-shadow:none) créait un
       "gros rectangle gris" visible à la place du titre : on retire. */
    html.player-horizontal .track-info h3 {
        animation: none !important;
        /* On coupe l'animation scroll-text en narrow. On garde la cascade
           base rule pour le reste (cf. accueil.css). On ajoute juste
           max-width pour garantir text-overflow:ellipsis sur inline-block. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        font-size: 0.92rem;
        /* Garde-fou minimal : juste background:transparent (PAS de
           color:inherit qui battrait les couleurs de thème en
           spécificité — cf. accueil.css pour le détail). */
        background: transparent;
    }
    html.player-horizontal .track-info p {
        font-size: 0.78rem;
    }
    html.player-horizontal .spotify-player {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
        /* Bug fix 2026-07-27 : overflow hidden pour contenir le
           .progress-bar interne (flex-grow:1) dans la colonne.
           Sans ça, le progress-bar peut déborder et créer une fine
           bande noire parasite en haut du player (cf. accueil.css). */
        overflow: hidden;
    }
    html.player-horizontal .controls {
        order: 1;
        margin: 0 auto;
        gap: 18px;
    }
    html.player-horizontal #play-pause {
        width: 60px;
        height: 60px;
        font-size: 3rem;
        color: var(--main-color);
        text-shadow: 0 0 14px color-mix(in srgb, var(--main-color) 55%, transparent);
        transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
                    text-shadow 0.25s ease;
    }
    html.player-horizontal #play-pause:hover {
        transform: scale(1.06);
        text-shadow: 0 0 22px color-mix(in srgb, var(--main-color) 75%, transparent);
    }
    html.player-horizontal #play-pause:active {
        transform: scale(0.96);
    }
    /* LÉGÈRE RÉDUCTION timeline : max-width 96% au lieu de 100% plein. */
    html.player-horizontal .time-wrapper {
        order: 2;
        margin: 6px auto 0;
        width: 100%;
        max-width: 96%;
        gap: 10px;
        /* Bug fix 2026-07-27 : min-width:0 pour permettre au
           .progress-bar enfant (flex-grow:1) de shrink correctement. */
        min-width: 0;
    }
    html.player-horizontal .progress-bar {
        height: 8px;
        border-radius: 4px;
        /* Bug fix 2026-07-27 : min-width:0 pour permettre au
           progress-bar (flex-grow:1) de shrink correctement dans
           son parent flex. */
        min-width: 0;
    }
    html.player-horizontal .progress {
        border-radius: 4px;
        box-shadow: 0 0 10px color-mix(in srgb, var(--main-color) 65%, transparent);
    }

    /* ===== Barre du bas — .volume-container (enfant flex direct de .opening) ===== */
    html.player-horizontal .volume-container {
        flex: 0 0 210px;
        height: 100%;
        margin: 0 0 0 8px;
        padding: 0 14px;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    html.player-horizontal .volume-container #volume-slider {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Theme-light : barre claire pour la lisibilité. Volume-container hérite
       du background de .opening via transparent. */
    html.theme-light.player-horizontal .opening {
        background: rgba(255, 255, 255, 0.95);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.06);
    }
}

/* Sous 1024px, le @media ci-dessus ignore l''override structure, le player
   reste en layout normal. Pas de fallback particular : album.css n''a
   pas de nav-column audio-sphère. */

/* =============================================================
   BUG FIX 2026-08-15 : uniformes covers dans les vues
   Playlist (#playlist-view-root) et Favorites (#favs-view-root).
   =============================================================
   Cause du bug : `.album-grid` (cf. règle en haut de cette feuille)
   utilise `repeat(auto-fit, minmax(280px, 1fr))`. Le `1fr` fait que
   les tracks RESTANTES remplissent la row entière. Conséquence :

     - 1 track dans une playlist   → 1 card à ~50% de la row (ÉNORME)
     - 2 tracks                    → 2 cards à ~40% chacune (GROS)
     - 3 tracks                    → 3 cards à ~32% (GROS)
     - 4 tracks                    → 4 cards à ~24% (correct)
     - 5+ tracks                   → 5 cards sur 4-cols + row 2 (mix)

   L'user reportait : "les tailles des covers dans les playlist et les
   favoris varient — plus gros quand y en a moins de 4". Solution :
   on force une grille FIXE à 4 colonnes dans le contexte Playlist /
   Favorites (= #playlist-view-root OU #favs-view-root visible dans la
   middle-column). Le sélecteur `:has()` permet de matcher le parent
   sans avoir besoin d'ajouter une class côté JS — supporté Chrome 105+,
   Firefox 121+, Safari 15.4+ (= 2022+ ; on est en 2026, c'est safe).

   Pourquoi PAS la même chose sur les pages catégorie (vocaloid/tadc/etc.) :
   leur comportement actuel (auto-fit + minmax(280px, 1fr)) donne 3+
   cards sur 1280px (anchor-spacing Spotify) qui se compressent
   élégamment quand il y en a peu (= mood board = bueno). L'user a
   explicitement ciblé playlist/favoris, pas les catégories.
   ============================================================= */
.middle-column:has(#favs-view-root:not([hidden])) #playlist-container .album-grid,
.middle-column:has(#playlist-view-root:not([hidden])) #playlist-container .album-grid {
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 16px;
    /* BUG FIX 2026-08-15 : justify-content:start aligne à gauche si
       <4 tracks (au lieu de stretch à 1fr) ou si overflow >4 (la 2e ligne
       commence à gauche au lieu de centrée). Sans cette règle, `1fr`
       continuerait d'étirer les <4 tracks sur la largeur row entière
       (= on retomberait dans le bug d'origine). */
    justify-content: start;
    padding: 8px 4px;
}
/* === MOBILE FIX v51 (2026-08-14) : 3 COVERS PER ROW BROADER + BIGGER ===
   v50 fixait 3 cols uniquement à (max-width: 720px) → sur tablette
   (768-1024) on retombait en 1 col (auto-fit minmax(280px) : 768/280
   ≈ 2.74 → 2 cols, mais le user a dit « 1 cover par ligne » ce qui
   suggère que son viewport tombait juste en-dessous).
   v51 : on élargit la règle jusqu'à (max-width: 1024px) → s'applique
   sur tout mobile y compris tablet portrait. Plus de cas « ça marche
   pas sur mon tel ».

   Aussi : on HOTFIX le bug specificity :
     • accueil.css .middle-column .album-grid (3 fr) → specificity (0,0,2,0)
     • accueil.css .middle-column #playlist-container .album-grid (...1fr) →
       specificity (0,1,2,0) — GAINait le tiebreak, forçait 1 col.
   v51 supprime ce 1fr dans accueil.css. Réf: PlayerCode v51.

   v55 (2026-08-14) : on RETIRE le 3-col forcé. User « trop collé et
   disproportionné, repars de la version PC ». → on laisse l'auto-fit
   PC décider combien de cols (1 ou 2 selon viewport).

   =============================================================== */
@media (max-width: 1024px) {
    /* v55 : on laisse le browser décider via auto-fit (PC-like).
       Sur 400px viewport : fit 1 col (auto-fit minmax 280 + 2 cards
       impossibles). Sur 768 viewport : encore 1 col probablement. */
    .album-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)) !important;
        gap: 14px !important;
        padding: 8px 4px !important;
    }
    .album-card { min-width: 0 !important; }
    /* Forcer le root cause fix sur absolute-position des img pour
       covers uniformes (cf. library-page.css v54). */
    .album-cover-wrapper {
        position: relative !important;
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }
    .album-cover-wrapper img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }
    .album-card {
        padding: 1.2vw !important;
    }
    .album-info h4 {
        font-size: 0.6rem !important;  /* 9.6px : titres sous covers discrets */
        margin: 4px 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .album-info p {
        font-size: 0.55rem !important;  /* 8.8px */
        margin: 0 !important;
    }
    .play-overlay {
        width: 45px !important;
        height: 45px !important;
        bottom: 10px !important;
        right: 10px !important;
    }
}
/* Need divider sur écrans très larges (>=1800px) pour que 4 cols
   à 1fr ne deviennent pas ridicules (cards 350px+ = trop gros). */
@media (min-width: 1800px) {
    .middle-column:has(#favs-view-root:not([hidden])) #playlist-container .album-grid,
    .middle-column:has(#playlist-view-root:not([hidden])) #playlist-container .album-grid {
        grid-template-columns: repeat(4, minmax(220px, 240px));
    }
}