/* =========================================================================
   MUSICLOGS — FEUILLE DE STYLE COMPILÉE

   FICHIER GÉNÉRÉ : ne pas modifier directement.
   Sources : assets/css/_*.css
   Recette : php _tools/build-css.php
   ========================================================================= */

/* =========================================================
   INCLUSION : _variables.css
   ========================================================= */

/* ==========================================================================
   TYPOGRAPHIE & VARIABLES GLOBALES (_variables.css)
   ========================================================================== */

/* ─── 1. TYPOGRAPHIE (Space Grotesk) ─── */
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/spacegrotesk.woff2') format('woff2');
    /* Ajuste le chemin selon ton dossier */
    font-weight: 300 700;
    /* Support du Variable Font */
    font-display: swap;
    /* Performance : affiche une police de secours en attendant le chargement */
    font-style: normal;
}

/* ─── 2. THÈME (Dark Mode Natif) ─── */
:root {
    background-color: var(--bg-site);
    --sys: "Space Grotesk", Arial, sans-serif;
    /* Fallbacks ajoutés par sécurité */
    --bg-site: #000000;
    --header-top-bg: #1f1f1f;
    --player-bg: #161616;
    --player-fg: #ffffff;
    --player-fg-muted: #A0AEC0;
    --player-track: rgba(255, 255, 255, 0.15);
    --bg-card: #000000;
    --bg-search: #161616;
    --navy: #FFFFFF;
    --text-main: #FFFFFF;
    --text-muted: #A0AEC0;
    --border-color: #697384;
    --teal: #60A5FA;
    --sand: #38BDF8;
    --red: #E62117;
    --green: #2ecc71;
    --orange: #f39c12;
    --text-inverse: #FFFFFF;
    --player-hover-bg: rgba(255, 255, 255, 0.1);
    --card-action-bg: rgba(0, 0, 0, 0.6);
    --tag-count-bg: #1f1f1f;
    --dash-compact-bg: #222222;
    --header-nav-active-bg: #dbeafe;

    /* ─── Échelle de rayons (uniformisation « flat » → arrondi sobre) ─── */
    --radius-xs: 3px;     /* miniatures, chips */
    --radius-sm: 6px;     /* contrôles, champs, tuiles */
    --radius-md: 8px;     /* cartes & panneaux */
    --radius-lg: 12px;    /* modales & overlays */
    --radius-pill: 999px; /* pilules */
}

/* ─── 3. THÈME CLAIR (Surcharge) ─── */
/* Cas 1 : On force le thème clair manuellement */
html.theme-light {
    background-color: #ffffff;
    --bg-site: #ffffff;
    --header-top-bg: #ffffff;
    --player-bg: #ffffff;
    --player-fg: #1e293b;
    --player-fg-muted: #475569;
    --player-track: rgba(30, 41, 59, 0.18);
    --bg-card: #FFFFFF;
    --bg-search: #EDF2F7;
    --navy: #1A202C;
    --text-main: #2D3748;
    --text-muted: #52627b;
    --border-color: #bac0c8;
    --teal: #3182CE;
    --sand: #0284C7;
    --text-inverse: #FFFFFF;
    --red: #E53E3E;
    --green: #27ae60;
    --orange: #d68910;
    --player-hover-bg: rgba(0, 0, 0, 0.05);
    --card-action-bg: rgba(0, 0, 0, 0.6);
    --tag-count-bg: #e2e8f0;
    --dash-compact-bg: #F4F6F8;
    --header-nav-active-bg: #dbeafe;
}

/* Cas 2 : le thème clair suit la préférence système (html.theme-auto). */
@media (prefers-color-scheme: light) {
    html.theme-auto {
        --bg-site: #ffffff;
        --header-top-bg: #ffffff;
        --player-bg: #ffffff;
        --player-fg: #1e293b;
        --player-fg-muted: #475569;
        --player-track: rgba(30, 41, 59, 0.18);
        --bg-card: #FFFFFF;
        --bg-search: #EDF2F7;
        --navy: #1A202C;
        --text-main: #2D3748;
        --text-muted: #52627b;
        --border-color: #bac0c8;
        --teal: #3182CE;
        --sand: #0284C7;
        --text-inverse: #FFFFFF;
        --red: #E53E3E;
        --green: #27ae60;
        --orange: #d68910;
        --player-hover-bg: rgba(0, 0, 0, 0.05);
        --card-action-bg: rgba(0, 0, 0, 0.6);
        --tag-count-bg: #e2e8f0;
        --dash-compact-bg: #F4F6F8;
        --header-nav-active-bg: #dbeafe;
    }
}

/* =========================================================
   INCLUSION : _base.css
   ========================================================= */

/* ==========================================================================
   BASE & STRUCTURE GLOBALE (_base.css)
   ========================================================================== */

/* ─── 1. RESET & BODY ─── */
/* Le reset neutralise les rayons par défaut du navigateur ; chaque composant
   choisit ensuite son rayon dans l’échelle définie par `_variables.css`. */
* {
    box-sizing: border-box;
    border-radius: 0;
}

body {
    font-family: var(--sys);
    background-color: transparent;
    color: var(--text-main);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-weight: 400;
    position: relative;
    isolation: isolate;
}

/* ─── 2. STRUCTURE PRINCIPALE (FLEXBOX) ─── */
.site-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 40px;
    /* 100vh moins la hauteur cumulée du header/lecteur */
    display: flex;
    flex-direction: column;
}

/* Force la vue active à prendre tout l'espace libre pour repousser le footer */
.site-wrapper>div[id$="View"],
#homeView {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Le footer se cale toujours proprement tout en bas */
footer {
    margin-top: auto;
    margin-bottom: 3rem;
    padding-top: 3rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* ─── 3. GESTION DES ICÔNES ─── */
/* Aligner la taille de la balise avant ET après la conversion JS pour éviter le CLS */
.material-symbols-sharp,
.icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Cache uniquement le nom de l'icône en texte brut avant l'injection du SVG */
.material-symbols-sharp {
    font-size: 0;
    color: transparent;
    overflow: hidden;
}

.icon-svg {
    pointer-events: none;
}

.icon-svg svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Rotation de l'icône `progress_activity` : les vues qui patientent (navigation
   de la fiche morceau, timeline d'un profil) l'affichent avec `.spin`. */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ─── 4. LIENS DU FOOTER ─── */

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
}

.footer-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-link:hover,
.footer-link:focus {
    color: var(--text-main);
}

/* La version déployée ferme la ligne des liens, dans le gris et la taille du
   reste : un élément de plus, sans en être un lien (le dépôt est privé). Elle ne
   se coupe jamais entre « Version » et son numéro. */
.footer-version {
    white-space: nowrap;
}

/* =========================================================
   INCLUSION : _ui-kit.css
   ========================================================= */

/* ==========================================================================
   UI KIT & DESIGN SYSTEM (Composants réutilisables)
   ========================================================================== */

/* --- UTILITAIRES (Pour remplacer les styles en ligne des Vues PHP) --- */
.mt-0 {
    margin-top: 0;
}

.text-muted {
    color: var(--text-muted);
}

.text-main {
    color: var(--text-main);
}

.text-red {
    color: var(--red);
}

.text-teal {
    color: var(--teal);
}

.text-inverse {
    color: var(--text-inverse);
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-bold {
    font-weight: 700;
}

/* Icône de favori : la couleur suit le thème, comme le reste du site. */
.is-favorite {
    color: var(--red);
}

.is-hidden {
    display: none;
}

.flex {
    display: flex;
}

/* Initial states formerly expressed inline in the PHP views. JavaScript owns
   subsequent display changes through the style property. */
.page-view,
.admin-view,
.single-article,
.loading-msg,
.suggestions-box,
.admin-artwork-preview,
.fh-playlist-badge,
.badge-teal,
#noResults,
#articleCommentsPanel {
    display: none;
}

#standardControls {
    display: flex;
}

#googleButtonContainer {
    display: flex;
    justify-content: center;
    min-height: 40px;
}

#userProfileTitle {
    margin: 0;
    font-size: 2.5rem;
    color: var(--navy);
}

#resetFormBtn {
    display: none;
    flex: 1;
    margin-right: 20px;
}

#adminSubmitBtn {
    flex: 1;
}

.admin-form-layout .form-input {
    margin: 0;
}

.admin-form-layout textarea.form-input {
    min-height: 200px;
}

#suggestForm textarea.form-input {
    min-height: 150px;
}

.filter-popin {
    max-width: 400px;
    text-align: center;
}

#articleThumbContainer .play-icon>.icon-svg {
    width: 24px;
    height: 24px;
}

/* View composition */
#artistesView .home-search-wrapper,
#labelsView .home-search-wrapper,
#dashboardView .home-search-wrapper,
#view-commentaires .home-search-wrapper {
    margin-bottom: 30px;
}

#paginationArtistes,
#paginationLabels {
    margin-top: 30px;
}

#favorisPagination {
    justify-content: center;
    margin-top: 15px;
}

#propositionsPagination,
#adminCommentsPagination {
    justify-content: flex-start;
    margin-top: 15px;
}

#adminPagination {
    justify-content: flex-start;
}

#roleModalOverlay h2 {
    margin: 0 0 10px;
}

#roleModalOverlay p {
    color: var(--text-muted);
    margin-bottom: 30px;
}

#roleModalUsername {
    color: var(--text-main);
}

#roleForm {
    width: 100%;
}

#roleForm>div {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
}

#roleForm label {
    cursor: pointer;
}

.tag-page-grid .icon-svg {
    width: 1.2rem;
    height: 1.2rem;
}

.home-search-wrapper .icon-svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--text-muted);
}

#view-contribuer .intro-text {
    margin-bottom: 30px;
    color: var(--text-muted);
    text-align: left;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-30 {
    margin-bottom: 30px;
}

.pt-30 {
    padding-top: 30px;
}

.text-left {
    text-align: left;
}

.border-top {
    border-top: 1px solid var(--border-color);
}

.border-bottom {
    border-bottom: 1px solid var(--border-color);
}

/* ── 1. BOUTONS ICÔNES (.icon-btn) ── */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--bg-search);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    padding: 0;
    box-shadow: none;
    outline: none;
}

.icon-btn:hover {
    background: var(--player-hover-bg);
    color: var(--text-main);
    transform: translateY(-1px);
}

.icon-btn:active {
    transform: scale(0.95);
}

/* Variantes */
.icon-btn.icon-btn-play,
.icon-btn[title*="Écouter"],
.icon-btn[title*="Lire"] {
    color: var(--text-main);
}

.icon-btn.icon-btn-play:hover,
.icon-btn[title*="Écouter"]:hover,
.icon-btn[title*="Lire"]:hover {
    background: var(--teal);
    color: #ffffff;
}

.icon-btn.icon-btn-playlist,
.icon-btn[title*="playlist"],
.icon-btn[title*="attente"] {
    color: var(--text-muted);
}

.icon-btn.icon-btn-playlist:hover,
.icon-btn[title*="playlist"]:hover,
.icon-btn[title*="attente"]:hover {
    background: var(--sand);
    color: #ffffff;
}

.icon-btn.icon-btn-fav,
.icon-btn[title*="favori"],
.icon-btn[title*="Favori"] {
    color: var(--red);
}

.icon-btn.icon-btn-fav:hover,
.icon-btn[title*="favori"]:hover,
.icon-btn[title*="Favori"]:hover {
    background: var(--red);
    color: #ffffff;
}

.icon-btn.icon-btn-fav:hover .material-symbols-sharp,
.icon-btn.icon-btn-fav:hover .icon-svg,
.icon-btn.icon-btn-fav:hover svg {
    color: #ffffff;
    fill: #ffffff;
}

.icon-btn.icon-btn-edit,
.icon-btn[title*="Modifier"],
.icon-btn[title*="Éditer"],
.icon-btn[title*="Renommer"] {
    color: var(--text-muted);
}

.icon-btn.icon-btn-edit:hover,
.icon-btn[title*="Modifier"]:hover,
.icon-btn[title*="Éditer"]:hover,
.icon-btn[title*="Renommer"]:hover {
    background: var(--teal);
    color: #ffffff;
}

.icon-btn.danger,
.icon-btn.icon-btn-delete,
.icon-btn[title*="Supprimer"],
.icon-btn[title*="Rejeter"],
.icon-btn[title*="Bannir"],
.icon-btn[title*="Refuser"] {
    color: var(--red);
}

.icon-btn.danger:hover,
.icon-btn.icon-btn-delete:hover,
.icon-btn[title*="Supprimer"]:hover,
.icon-btn[title*="Rejeter"]:hover,
.icon-btn[title*="Bannir"]:hover,
.icon-btn[title*="Refuser"]:hover {
    background: var(--red);
    color: var(--text-inverse);
}

.icon-btn.success,
.icon-btn[title*="Approuver"],
.icon-btn[title*="Accepter"],
.icon-btn[title*="Réhabiliter"] {
    color: var(--green);
}

.icon-btn.success:hover,
.icon-btn[title*="Approuver"]:hover,
.icon-btn[title*="Accepter"]:hover,
.icon-btn[title*="Réhabiliter"]:hover {
    background: var(--green);
    color: var(--text-inverse);
}

.icon-btn.ghost {
    background: transparent;
    border: none;
}

/* ── 2. BADGES DE STATUT (.badge) ── */
.badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
}

.badge-pending {
    background: var(--orange);
    color: var(--text-inverse);
}

.badge-success {
    background: rgba(46, 204, 113, 0.2);
    color: var(--green);
}

.badge-danger {
    background: rgba(230, 33, 23, 0.2);
    color: var(--red);
}

/* Rôles des membres (tableau admin). */
.badge-admin {
    background: var(--navy);
    color: var(--bg-site);
    border: 1px solid var(--navy);
}

.badge-contributor {
    background: var(--teal);
    color: var(--text-inverse);
    border: 1px solid var(--teal);
}

.badge-user {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

/* Statuts des propositions : forme « plate », distincte des pilules .badge. */
.badge-waiting,
.badge-accepted,
.badge-rejected {
    border: none;
    padding: 4px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
    color: var(--text-inverse);
}

.badge-waiting {
    background: var(--text-muted);
}

.badge-accepted {
    background: var(--teal);
}

.badge-rejected {
    background: var(--red);
}

/* ── 3. TUILES DE NAVIGATION (.nav-tile) ── */
.nav-tile {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 20px 25px;
    font-size: 1.1rem;
    text-align: left;
    color: var(--text-main);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: capitalize;
    text-decoration: none;
}

.nav-tile:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--bg-search);
    transform: translateY(-2px);
}

/* ── 4. BOUTONS CLASSIQUES (.btn) ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: var(--radius-sm);
    font-family: var(--sys);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--text-main);
    color: var(--bg-card);
}

.btn-primary:hover {
    background: var(--teal);
    color: var(--text-inverse);
}

.btn-outline {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-main);
}

.btn-outline:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: #ffffff;
}

.btn-small {
    padding: 6px 12px;
    font-size: 0.9rem;
}

/* ── 5. CHAMPS DE FORMULAIRE (.form-input) ── */
.form-input {
    width: 100%;
    padding: 12px 15px;
    background: var(--bg-search);
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin: 0;
}

.form-input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(26, 188, 156, 0.2);
}

textarea.form-input {
    min-height: 120px;
    resize: vertical;
}

/* ── 6. MINIATURE ADMIN ── */
.admin-artwork-preview {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-search);
    margin-bottom: 10px;
}

.admin-artwork-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-artwork-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-size: 0.8rem;
    font-weight: 700;
}

.admin-artwork-preview:hover .admin-artwork-overlay {
    opacity: 1;
}

/* ── 7. CHAMPS TAGS (PILULES INTÉGRÉES) ── */
.form-input-pills-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    min-height: 46px;
    cursor: text;
}

.pill-search-input {
    flex: 1;
    min-width: 120px;
    border: none;
    background: transparent;
    color: var(--text-main);
    outline: none;
    font-family: inherit;
    font-size: 1rem;
    padding: 4px 0;
}

.form-pills-container .filter-pill {
    background: var(--text-main);
    color: var(--bg-site);
    padding: 4px 10px 4px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.form-pills-container .filter-pill .material-symbols-sharp {
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.form-pills-container .filter-pill .material-symbols-sharp:hover {
    opacity: 1;
    color: var(--red);
}

/* ── 8. TABLEAUX ADMIN ── */
.admin-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    background: transparent;
}

.admin-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 6px 12px;
    height: 60px;
    max-height: 50px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.admin-table td:nth-child(2) {
    white-space: normal;
    min-width: 180px;
}

.admin-table .thumb-cell img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    display: block;
}

.admin-table tr.row-data td {
    border-bottom: none;
}

.admin-table tr.row-comment td {
    background-color: var(--bg-card);
    color: var(--text-muted);
    font-style: italic;
    padding-top: 0;
    padding-bottom: 20px;
    white-space: pre-wrap;
    word-break: break-word;
}

#view-propositions .admin-table td {
    white-space: normal;
    word-break: break-word;
}

#view-propositions .admin-table td:last-child {
    white-space: nowrap;
    width: 1%;
}

/* --- UTILITAIRES DE MISE EN PAGE (Pour remplacer les style="") --- */
.mb-25 {
    margin-bottom: 25px;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.gap-15 {
    gap: 15px;
}

.text-navy {
    color: var(--navy);
}

/* Styles spécifiques extraits des vues */
.loading-msg,
#noResults {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}

/* Message occupant toute la largeur d'une grille vide. */
.grid-message {
    grid-column: 1/-1;
    text-align: center;
    color: var(--text-muted);
}

/* Espacement d'une icône placée avant un libellé de bouton. */
.icon-before {
    margin-right: 8px;
}

.badge-teal {
    background: var(--teal);
    color: #fff;
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: var(--radius-pill);
}

/* Compteurs des boutons Favoris et Commentaires de la fiche morceau :
   pastille parfaitement ronde, chiffre léger. */
#favoriteCountBadge,
#commentCountBadge {
    display: inline-flex;
    width: 22px;
    height: 22px;
    min-width: 22px;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 6px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Les libellés restent sur une ligne malgré la pastille. */
#articleFavoriteBtn,
#articleCommentBtn {
    white-space: nowrap;
}

/* =========================================================
   INCLUSION : _header.css
   ========================================================= */

/* ==========================================================================
   HEADER & NAVIGATION (_header.css)
   ========================================================================== */
#mainHeader {
    display: contents;
    /* Permet aux enfants d'agir indépendamment */
}

.site-maintenance-banner {
    width: 100%;
    background: #f59e0b;
    color: #211300;
}

.site-maintenance-banner-inner {
    max-width: 1400px;
    min-height: 42px;
    margin: 0 auto;
    padding: 8px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 0.9rem;
    line-height: 1.35;
    text-align: center;
}

.site-maintenance-banner p {
    margin: 0;
}

.site-maintenance-banner .material-symbols-sharp {
    flex: 0 0 auto;
    color: currentColor;
}

/* ─── 1. BARRE DE NAVIGATION (HAUT) ─── */
.fh-top-fullwidth {
    width: 100%;
    background-color: var(--header-top-bg);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.fh-top-bar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: space-between;
}

.fh-nav-left {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
    /* Indispensable pour que les onglets touchent le bas */
}

.fh-text-link {
    font-family: var(--sys);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
}

button.fh-text-link {
    background: none;
    border: 0;
    padding: 0 12px;
    cursor: pointer;
}

/* Liens de navigation avec icône (marque, pages de tags, aléatoire). */
.fh-icon-link {
    gap: 8px;
}

/* Taille d'icône unique pour toute la navigation de gauche. */
.fh-nav-left .material-symbols-sharp,
.fh-nav-left .icon-svg {
    font-size: 1rem;
    line-height: 1;
}

/* ─── 2. ACTIONS HAUT DROITE (Boutons Icones) ─── */
.fh-nav-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}

.fh-nav-btn {
    background-color: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
}

/* NOUVEAU : On force les icônes à être un poil plus grosses */
.fh-nav-btn .material-symbols-sharp,
.fh-nav-btn .icon-svg {
    font-size: 1rem;
}

.fh-nav-btn:hover {
    background-color: var(--header-nav-active-bg);
    color: #2D3748;
}

.fh-nav-btn.radio-btn-main:hover {
    background: var(--teal);
    color: #ffffff;
}

.fh-nav-btn.active {
    background-color: var(--header-nav-active-bg);
    color: #2D3748;
}

/* Bouton notifications : cloche fixe et pastille de décompte en bas à droite. */
.fh-nav-btn.notifications-btn {
    position: relative;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-search);
    color: var(--text-muted);
    font-family: var(--sys);
    font-size: 0.78rem;
    font-weight: 700;
}

.notifications-icon {
    font-size: 1.1rem;
}

.fh-nav-btn.notifications-btn:hover {
    background: var(--header-nav-active-bg);
    color: #2D3748;
}

.fh-nav-btn.notifications-btn.has-unread {
    background: var(--teal);
    color: var(--text-inverse);
}

.fh-nav-btn.notifications-btn.active {
    background: color-mix(in srgb, var(--teal) 16%, var(--bg-search));
    color: var(--teal);
}

.notifications-count {
    position: absolute;
    right: -1px;
    bottom: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    color: var(--teal);
    box-shadow: 0 0 0 2px var(--teal);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.notifications-count[hidden] {
    display: none;
}

/* Le lien Aléatoire de la navigation de gauche est remplacé, sur mobile, par
   ce bouton icône placé avant la recherche. */
.mobile-random-btn {
    display: none;
}

/* Bouton membre avec nom d'utilisateur (ou « Connexion »). */
.fh-nav-btn.bouton-user {
    width: auto;
    max-width: 180px;
    padding: 0 14px;
    gap: 6px;
    border-radius: 999px;
    font-family: var(--sys);
}

/* Avatar seul : même pastille que les notifications, sans pseudo. */
.fh-nav-btn.bouton-user-avatar-btn {
    width: 40px;
    height: 40px;
    max-width: none;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    background: var(--bg-search);
}

.fh-nav-btn.bouton-user-avatar-btn:hover {
    background: var(--header-nav-active-bg);
    color: #2D3748;
}

.fh-nav-btn.bouton-user-avatar-btn.active {
    background: color-mix(in srgb, var(--teal) 16%, var(--bg-search));
    color: var(--teal);
}

.fh-nav-btn.bouton-user-avatar-btn.active:hover {
    background: color-mix(in srgb, var(--teal) 22%, var(--bg-search));
}

.bouton-user-label {
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

/* Photo de profil affichée dans le bouton compte à la place de l'icône. */
.bouton-user-avatar {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    object-fit: cover;
    border-radius: 50%;
}

/* Bouton Explorer : pastille labellisée sur ordinateur, icône seule sur mobile. */
.fh-nav-btn.explorer-btn {
    width: auto;
    padding: 0 14px;
    gap: 6px;
    font-family: var(--sys);
}

.explorer-label {
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
}

.radio-btn-text {
    display: none;
    font-family: var(--sys);
    font-size: 0.8rem;
    font-weight: 400;
    margin-right: 6px;
}

.radio-btn-main {
    background-color: var(--bg-search);
}

/* Boutons liés à la radio */
.radio-btn-main.active {
    background-color: var(--teal);
    color: #ffffff;
    /* Force le texte et l'icône à rester lisibles. */
}

/* Bascule des icônes Play / Stop */
.radio-btn-main .radio-icon-stop {
    display: none;
}

.radio-btn-main.active .radio-icon-play {
    display: none;
}

.radio-btn-main.active .radio-icon-stop {
    display: block;
    /* Plus d'animation de respiration ici ! */
}

/* Pour les radios filtrées, l’icône radio remplace le mot « Radio ». */
.radio-btn-main.active.has-radio-label .radio-icon-play {
    display: block;
}

.radio-btn-main.active.has-radio-label .radio-icon-stop {
    display: none;
}

/* ─── Sélecteur de radio : deux zones, lancer et choisir ─────────────────────
   Le bouton qui lance la radio principale ne pouvait pas en contenir un autre :
   le contrôle devient un conteneur `.radio-split` qui porte les deux zones
   cliquables — la pastille qui lance ou arrête, et le chevron qui ouvre la
   liste des quatre radios principales. Le conteneur porte le fond des tuiles,
   chaque zone n'allume que la sienne au survol, et tout le contrôle passe au
   bleu quand une radio joue. */
.radio-split {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--bg-search);
    border-radius: var(--radius-pill);
}

.radio-split .fh-nav-btn.radio-btn-main {
    width: auto;
    padding: 0 8px 0 15px;
    background-color: transparent;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

/* Le chevron porte la même spécificité que la pastille : la dernière couche de
   la feuille responsive (`body .fh-nav-actions .fh-nav-btn`) arrondit tous les
   boutons du header, et il faut la battre pour que le côté gauche du chevron
   reste droit et colle à la pastille. */
.radio-split .fh-nav-btn.radio-btn-arrow {
    position: relative;
    width: 32px;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

/* Chaque zone s'allume seule au survol, et tout le contrôle passe au bleu
   quand une radio joue. La règle de base ci-dessus efface le fond de la
   pastille, et comme elle vient après le survol du site à spécificité égale,
   elle l'emporte : sans cette liste, le texte du bouton deviendrait blanc sur
   le gris de la pastille. */
.radio-split .fh-nav-btn.radio-btn-main:hover,
.radio-split .fh-nav-btn.radio-btn-arrow:hover,
.radio-split .fh-nav-btn.radio-btn-main.active,
.radio-split .fh-nav-btn.radio-btn-arrow.active {
    background-color: var(--teal);
    color: #ffffff;
}

/* Le filet qui sépare les deux zones : même grisaille que les tuiles. */
.radio-split .radio-btn-arrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 18px;
    transform: translateY(-50%);
    background-color: color-mix(in srgb, var(--border-color) 55%, transparent);
    transition: background-color 0.2s ease;
}

/* Sur le bleu, le filet se fait blanc translucide. */
.radio-split .fh-nav-btn.radio-btn-arrow:hover::before,
.radio-split .fh-nav-btn.radio-btn-arrow.active::before {
    background-color: rgba(255, 255, 255, 0.38);
}

/* ─── Le menu des quatre radios ─────────────────────────────────────────────
   Une liste courte, ouverte par le chevron : chaque ligne porte l'icône de son
   thème, son nom, et un ▶ qui n'apparaît qu'au survol. La radio en cours reste
   marquée même menu fermé — fond bleu léger, texte bleu, équaliseur à la place
   du ▶ (c'est `updateRadioSelectionUI` qui pose `.is-active`, comme sur les
   tuiles). */
.radio-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 232px;
    padding: 6px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
    z-index: 1200;
}

.radio-dropdown-menu.show {
    display: block;
}

.radio-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.radio-dropdown-item + .radio-dropdown-item {
    margin-top: 2px;
}

.radio-dropdown-item:hover {
    background-color: var(--bg-search);
}

.radio-dropdown-item .radio-tile-theme-icon {
    color: var(--text-muted);
    font-size: 1rem;
}

.radio-dropdown-libelle {
    flex: 1;
}

/* Le ▶ et l'équaliseur occupent la même boîte, comme dans les tuiles. */
.radio-dropdown-item .radio-tile-icon,
.radio-dropdown-item .eq-anim {
    width: 1.2em;
    height: 1.2em;
}

.radio-dropdown-item .radio-tile-icon {
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.radio-dropdown-item:hover .radio-tile-icon {
    opacity: 1;
}

.radio-dropdown-item .eq-anim {
    display: none;
}

.radio-dropdown-item.is-active {
    background-color: color-mix(in srgb, var(--teal) 12%, transparent);
    color: var(--teal);
    font-weight: 600;
}

.radio-dropdown-item.is-active .radio-tile-theme-icon {
    color: var(--teal);
}

.radio-dropdown-item.is-active .radio-tile-icon {
    display: none;
}

.radio-dropdown-item.is-active .eq-anim {
    display: flex;
}

/* Masqués par défaut sur bureau */
.mobile-dropdown-btn {
    display: none;
}

.mobile-home-btn {
    display: none;
}


/* ─── 3. AJUSTEMENTS BUREAU (Onglets) ─── */


/* ==========================================================================
   LOGO NAVIGATION
   ========================================================================== */

.brand-link {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Le bouton d'installation est masqué tant que le navigateur n'a pas émis
   `beforeinstallprompt`. La règle ID est nécessaire car `.fh-nav-btn` impose
   `display: flex`, qui sinon l'emporterait sur l'attribut `hidden`. */
#pwaInstallBtn[hidden] {
    display: none;
}


/* ─── DÉBORDEMENT DE LA NAVIGATION ─── */
/* Sur ordinateur, le hamburger n'apparaît que si des liens ne tiennent plus
   dans la barre. Le panneau est ancré sous les actions, pas en plein écran. */
.header-overflow-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 3;
    width: max-content;
    min-width: 220px;
    max-width: min(280px, calc(100vw - 24px));
    max-height: min(70vh, 420px);
    padding: 6px;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
    border-radius: var(--radius-md);
    background: var(--header-top-bg);
    box-shadow: 0 16px 34px -24px rgba(15, 23, 42, 0.55);
}

.header-overflow-menu[hidden] {
    display: none;
}

.header-overflow-menu .fh-text-link {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    justify-content: flex-start;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 550;
}

.header-overflow-menu .fh-text-link:hover,
.header-overflow-menu .fh-text-link:focus-visible {
    background: color-mix(in srgb, var(--teal) 12%, var(--bg-search));
    color: var(--teal);
}

.header-overflow-menu .fh-text-link.active {
    background: color-mix(in srgb, var(--teal) 16%, var(--bg-search));
    color: var(--teal);
}

.header-overflow-menu .fh-text-link .icon-svg {
    width: 1.1rem;
    height: 1.1rem;
}

@media (min-width: 769px) {
    .fh-top-fullwidth.has-nav-overflow .mobile-dropdown-btn {
        display: flex;
    }
}

@media (max-width: 768px) {
    .header-overflow-menu {
        display: none;
    }
}

/* Sur mobile, l'installation se fait par le menu du navigateur : le bouton
   d'installation de l'équipe est masqué pour laisser la place aux actions
   essentielles, dont les notifications. */
@media (max-width: 768px) {
    #pwaInstallBtn {
        display: none !important;
    }
}

/* =========================================================
   INCLUSION : _player.css
   ========================================================= */

/* ==========================================================================
   LECTEUR AUDIO SIMPLIFIÉ SOUS LE HEADER (_player.css)
   ========================================================================== */

/* ─── 1. CONTENEUR PRINCIPAL ─── */
.bottom-player-wrapper {
    position: sticky;
    top: 60px;
    left: 0;
    width: 100%;
    /* Fond translucide et flou pour le mobile ; l'ordinateur les désactive
       plus bas pour garder une barre parfaitement opaque. */
    background-color: color-mix(in srgb, var(--player-bg) 90%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    isolation: isolate;
    z-index: 999;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bottom-player-wrapper {
        background-color: var(--player-bg);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .bottom-player-wrapper {
        background-color: var(--player-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Sur ordinateur, le lecteur reste opaque : ni transparence ni flou, et une
   fine bordure grise marque simplement sa limite basse. */
@media (min-width: 701px) {
    .bottom-player-wrapper {
        background-color: var(--player-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 1px solid color-mix(in srgb, var(--text-main) 14%, transparent);
    }
}

/* ─── 2. MISE EN PAGE INTERNE (Ligne Unique) ─── */
.bottom-player-inner {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 55px;
}

/* --- Zone Gauche (Titre, Temps & Progression alignés) --- */
.fh-player-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    /* S'étend sur tout l'espace disponible */
    min-width: 0;
    padding-right: 20px;
}

.fh-player-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
    cursor: pointer;
}

.fh-player-title {
    font-family: var(--sys);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--player-fg);
    overflow: hidden;
    text-overflow: ellipsis;
}

.fh-player-thumb {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background-color: var(--border-color);
    cursor: pointer;
    flex-shrink: 0;
    /* Empêche l'image de s'aplatir si l'espace manque */
}

.fh-player-separator {
    color: var(--player-fg-muted);
}

/* Éléments réservés au lecteur mobile déplié. */
.fh-player-artist {
    display: none;
}

.bottom-player-wrapper .player-expand-btn,
.bottom-player-wrapper .player-like-btn {
    display: none;
}

/* Réservés au lecteur mobile déplié. */
.player-expanded-queue,
.player-expanded-bottom {
    display: none;
}

.fh-player-info:hover .fh-player-title {
    text-decoration: underline;
}

/* Temps & Equaliseur */
.fh-player-time-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.fh-player-time {
    font-family: var(--sys);
    font-size: 0.8rem;
    color: var(--player-fg-muted);
    font-variant-numeric: tabular-nums;
}

#playerEqualizer {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 10px;
    margin-bottom: 3px;
}

#playerEqualizer.is-playing {
    display: flex;
}

#playerEqualizer .eq-bar {
    width: 2px;
    background-color: var(--teal);
}

/* ─── 3. BARRE DE PROGRESSION (Intégrée à gauche) ─── */
.fh-player-progress {
    flex: 1;
    height: 15px;
    background-color: var(--player-track);
    position: relative;
    cursor: pointer;
    touch-action: none;
    border-radius: var(--radius-pill);
    overflow: hidden;
    transition: background-color 0.2s;
}

.fh-player-progress.is-seeking {
    cursor: grabbing;
}

.fh-player-progress:hover {
    background-color: var(--player-hover-bg);
}

.fh-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--teal);
    width: 0%;
    pointer-events: none;
}

/* ─── 4. ZONE DROITE (Contrôles sans bordures) ─── */
.fh-player-controls {
    display: flex;
    align-items: center;
    height: 100%;
}

#radioControls {
    align-items: center;
}

#radioTracklistBtn[hidden] {
    display: none;
}

#radioTracklistBtn .material-symbols-sharp,
#radioTracklistBtn .icon-svg {
    width: 22px;
    height: 22px;
}

.fh-ctrl-btn {
    background: transparent;
    border: none;
    /* Plus aucune bordure */
    color: var(--player-fg-muted);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Boutons ronds au survol */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    position: relative;
    margin-left: 2px;
}

.fh-ctrl-btn:hover {
    background: var(--teal);
    color: var(--text-inverse);
}

.play-pause-btn {
    color: var(--player-fg);
}

/* Le bouton plier/déplier ne prend pas le fond bleu du survol : sur mobile,
   cet état reste collé après le tap. */
#playerExpandBtn,
#playerExpandBtn:hover,
#playerExpandBtn:active,
#playerExpandBtn:focus {
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}

#playerExpandBtn:hover,
#playerExpandBtn:active,
#playerExpandBtn:focus {
    color: var(--player-fg-muted);
}

/* L'icône de fermeture remplace celle d'ouverture quand le lecteur est déplié. */
.player-collapse-icon {
    display: none;
}

#bottomPlayer.is-expanded .player-expand-icon {
    display: none;
}

#bottomPlayer.is-expanded .player-collapse-icon {
    display: inline-flex;
}

.fh-ctrl-btn.shuffle-active {
    color: var(--teal);
}

/* Badge de file d'attente */
.fh-playlist-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--teal);
    color: #fff;
    font-size: 0.6rem;
    font-weight: bold;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
}

/* ─── 6. MASQUAGE IFRAME YOUTUBE GLOBALE ─── */
#yt-player {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: -1000;
}

/* ─── 7. OVERLAY DE DIAGNOSTIC AUDIO (ADMIN, ?audioDebug=1) ───
   Styles sortis du JavaScript pour que la politique CSP puisse retirer
   `unsafe-inline` de style-src. L'overlay n'apparaît qu'en mode diagnostic. */
#audioDebugPanel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483000;
    max-height: 70vh;
    padding: 10px 12px;
    overflow: auto;
    border-top: 2px solid #e91e63;
    background: rgba(0, 0, 0, 0.94);
    color: #f2f2f2;
    font: 11px/1.45 ui-monospace, Menlo, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

#audioDebugPanel .audio-debug-info {
    margin-bottom: 6px;
    color: #9fe8c6;
}

#audioDebugPanel .audio-debug-output {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

#audioDebugPanel .audio-debug-actions {
    display: flex;
    gap: 8px;
    margin: 0 0 8px;
}

#audioDebugPanel .audio-debug-btn {
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    color: #111;
    font: inherit;
    cursor: pointer;
}

#audioDebugPanel .audio-debug-btn.is-clear {
    background: #9fe8c6;
}

#audioDebugPanel .audio-debug-btn.is-disable {
    background: #ffb4c4;
}

/* ─── BASCULE « HORS LIGNE UNIQUEMENT » (LECTEUR DÉPLIÉ) ─── */
/* Le conteneur reste absent de la barre compacte et de l'ordinateur. Il
   n'apparaît qu'en plein écran mobile, au-dessus du grand visuel. */
.player-offline-mode {
    display: none;
}

.player-offline-mode[hidden] {
    display: none !important;
}

.player-offline-mode-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--player-fg-muted) 24%, transparent);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--player-fg);
    font-family: var(--sys);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.player-offline-mode-btn:hover,
.player-offline-mode-btn:focus-visible {
    border-color: var(--player-fg-muted);
    background: var(--player-hover-bg);
}

.player-offline-mode-btn:disabled {
    cursor: default;
    opacity: 0.55;
}

.player-offline-mode-btn[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--teal) 42%, transparent);
}

.player-offline-mode-btn.is-warning {
    border-color: color-mix(in srgb, var(--orange) 52%, transparent);
    background: color-mix(in srgb, var(--orange) 9%, transparent);
}

.player-offline-mode-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--player-fg-muted);
}

.player-offline-mode-icon.icon-svg svg {
    width: 20px;
    height: 20px;
}

.player-offline-mode-btn[aria-checked="true"] .player-offline-mode-icon {
    color: var(--teal);
}

.player-offline-mode-btn.is-warning .player-offline-mode-icon {
    color: var(--orange);
}

.player-offline-mode-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.player-offline-mode-title {
    color: var(--player-fg);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
}

.player-offline-mode-detail {
    overflow: hidden;
    color: var(--player-fg-muted);
    font-size: 0.7rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-offline-mode-btn.is-warning .player-offline-mode-detail {
    overflow: visible;
    color: var(--orange);
    text-overflow: clip;
    white-space: normal;
}

.player-offline-mode-switch {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--player-fg-muted) 45%, transparent);
    transition: background-color 0.2s ease;
}

.player-offline-mode-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.player-offline-mode-btn[aria-checked="true"] .player-offline-mode-switch {
    background: var(--teal);
}

.player-offline-mode-btn[aria-checked="true"] .player-offline-mode-knob {
    transform: translateX(16px);
}

@media (max-width: 768px) {
    #bottomPlayer.is-expanded .player-offline-mode:not([hidden]) {
        order: 0;
        display: flex;
        width: 100%;
        max-width: 480px;
        margin-bottom: 14px;
    }

    #bottomPlayer.is-expanded .player-expanded-queue-actions[hidden] {
        display: none;
    }
}

/* =========================================================
   INCLUSION : _search.css
   ========================================================= */

/* ==========================================================================
   RECHERCHE & AUTOCOMPLÉTION (_search.css)
   ========================================================================== */

/* ─── 1. MODULE DE RECHERCHE (pages tags et dashboard) ─── */
.home-search-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Permet aux éléments de passer à la ligne si besoin */
    padding: 8px 0;
    gap: 12px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-search-wrapper:focus-within {
    border-bottom-color: var(--teal);
    box-shadow: 0 1px 0 0 var(--teal);
    background-color: transparent;
}

.home-search-wrapper .form-input {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    flex: 1;
    min-width: 200px;
    width: auto;
}

.home-search-wrapper .form-input:focus {
    border: none;
    box-shadow: none;
}

/* ─── 2. AUTOCOMPLÉTION (dashboard, proposition de morceau) ─── */
.suggestions-box {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 30px var(--player-hover-bg);
    max-height: 400px;
    overflow-y: auto;
    display: none;
    padding: 6px 0;
    z-index: 1000;
}

.suggestion-item {
    padding: 9px 18px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.suggestion-item:hover,
.suggestion-item.is-active {
    background: var(--player-hover-bg);
    color: var(--teal);
}

/* Ligne « créer ce tag » de l'autocomplétion du dashboard. */
.suggestion-create {
    display: flex;
    align-items: center;
    gap: 5px;
}

.suggestion-create .material-symbols-sharp {
    font-size: 1.2rem;
}

/* ─── 3. PALETTE DE COMMANDE (Cmd+K) ─── */
#searchModalOverlay {
    padding-top: 10vh;
}

.cmdk {
    background: var(--bg-search);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    width: min(680px, calc(100% - 32px));
    max-height: calc(90vh - 32px);
    display: flex;
    flex-direction: column;
    transform: translateY(10px) scale(0.97);
    transition: transform 0.2s ease;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.filter-popin-overlay.active .cmdk {
    transform: translateY(0) scale(1);
}

.cmdk-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: transparent;
}

.cmdk-input-row .material-symbols-sharp {
    color: var(--text-muted);
    flex-shrink: 0;
}

.cmdk-input-row:focus-within .material-symbols-sharp {
    color: var(--teal);
}

.cmdk-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-size: 1.05rem;
    color: var(--text-main);
    padding: 0;
    margin: 0;
}

.cmdk-input:focus {
    border: none;
    box-shadow: none;
}

.cmdk-footer kbd {
    font-family: var(--sys);
    font-size: 0.72rem;
    line-height: 1;
    color: var(--text-muted);
    background: var(--player-hover-bg);
    padding: 3px 6px;
    border-radius: var(--radius-xs);
    white-space: nowrap;
}

.cmdk-list {
    overflow-y: auto;
    padding: 10px 0 14px;
    min-height: 120px;
    max-height: min(66vh, 560px);
    background: var(--bg-card);
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.cmdk-list::-webkit-scrollbar {
    width: 8px;
}

.cmdk-list::-webkit-scrollbar-track {
    background: transparent;
}

.cmdk-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-pill);
}

.cmdk-group-title {
    padding: 14px 20px 7px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cmdk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 16px);
    margin: 2px 8px;
    padding: 11px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cmdk-item .material-symbols-sharp {
    font-size: 1.15rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.cmdk-item-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background-color: var(--bg-search);
}

/* Artistes et labels : médaillon rond, comme dans les grilles publiques. */
.cmdk-item-thumb.is-round {
    border-radius: 50%;
}

/* Résultat sans visuel : même rond de 40 px, avec l'icône de la catégorie. */
.cmdk-item-thumb.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
}

.cmdk-item:hover .cmdk-item-thumb.is-placeholder,
.cmdk-item.is-active .cmdk-item-thumb.is-placeholder {
    color: var(--teal);
}

.cmdk-item-thumb.is-flag {
    font-size: 1.22rem;
    line-height: 1;
}

.cmdk-item-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.cmdk-item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdk-mark {
    background: transparent;
    color: var(--teal);
    font-weight: 700;
}

.cmdk-item-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdk-item:hover,
.cmdk-item.is-active {
    background: var(--player-hover-bg);
}

.cmdk-item:hover .material-symbols-sharp,
.cmdk-item.is-active .material-symbols-sharp {
    color: var(--teal);
}

.cmdk-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.cmdk-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    padding: 11px 20px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.cmdk-footer span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Les deux familles du pied : les touches de la palette, puis celles du site.
   L'écart et le libellé les séparent — pas de filet. */
.cmdk-footer-famille {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.75;
    margin-left: 6px;
}

.cmdk-footer-famille:first-child {
    margin-left: 0;
}

/* =========================================================
   INCLUSION : _modals.css
   ========================================================= */

/* ==========================================================================
   POP-INS, MODALES & FILE D'ATTENTE (_modals.css)
   ========================================================================== */

/* ─── 1. OVERLAYS & CONTENEURS ─── */
.filter-popin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Les modales ouvertes à la demande ne doivent jamais participer au premier rendu. */
.filter-popin-overlay[hidden] {
    display: none !important;
}

.filter-popin-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* PURE CSS SCROLL LOCK */
body:has(.filter-popin-overlay.active) {
    overflow: hidden;
}

.filter-popin,
.modal-box {
    background: var(--bg-card);
    box-shadow: 0 20px 60px rgba(28, 48, 65, 0.25);
    width: calc(100% - 80px);
    max-width: 1020px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(10px) scale(0.97);
    transition: transform 0.2s ease;
    overflow: hidden;
    border: 1px solid var(--navy);
    border-radius: var(--radius-lg);
}

.modal-box {
    max-width: 450px;
    padding: 40px;
    align-items: center;
    text-align: center;
    position: relative;
}

.filter-popin-overlay.active .filter-popin {
    transform: translateY(0) scale(1);
}

/* ─── 2. BOUTON DE FERMETURE ─── */
.close-modal {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
    line-height: 1;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
}

.close-modal:hover {
    color: #E62117;
}

/* ─── 3. MODALE D'ÉDITION DU DASHBOARD ─── */
.dashboard-edit-modal {
    align-items: stretch;
    padding: 32px;
    text-align: left;
}

.dashboard-edit-modal .admin-section-kicker {
    margin: 0 0 6px;
}

.dashboard-edit-modal h2 {
    margin: 0;
    padding-right: 38px;
}

.dashboard-edit-modal p {
    margin: 8px 0 24px;
}

.dashboard-edit-modal-form {
    display: grid;
    gap: 16px;
}

.dashboard-edit-modal-form .form-row {
    margin: 0;
}

/* L'attribut HTML hidden doit primer sur le display:flex des form-row :
   les modales Genres/Labels n'affichent ainsi jamais le champ URL. */
.dashboard-edit-modal-form .form-row[hidden] {
    display: none;
}

.dashboard-edit-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

/* ─── 3. FILE D'ATTENTE (QUEUE) ─── */
.queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border: none;
    border-bottom: 1px solid var(--bg-search);
    background-color: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.queue-item:last-child {
    border-bottom: none;
}

.queue-item:hover {
    background-color: var(--player-hover-bg);
}

.queue-item.is-auto {
    background-color: transparent;
}

.queue-item.is-playing-now {
    background-color: var(--bg-search);
}

.queue-item.is-playing-now .queue-item-title {
    color: var(--teal);
}

.queue-item.dragging {
    opacity: 0.5;
    background: var(--bg-search);
}

.reorder-slot {
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
}

.reorder-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 1.4rem;
    opacity: 0.45;
    padding-right: 0;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.queue-item.dragging .reorder-handle {
    cursor: grabbing;
}

.queue-item:hover .reorder-handle {
    opacity: 1;
    color: var(--teal);
}

.queue-item-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--border-color);
}

.queue-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    overflow: hidden;
}

.queue-item-title {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Équaliseur du morceau en cours dans la file d'attente : mêmes barres que les
   cartes (`.eq-anim` / `.eq-bar`), en plus petit. */
.queue-item-title .queue-item-eq {
    display: inline-flex;
    height: 12px;
    margin-left: 8px;
    flex-shrink: 0;
}

.queue-item-artist {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.queue-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.queue-btn-remove,
.queue-btn-play {
    background: var(--bg-site);
    color: var(--text-muted);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    font-size: 1.1rem;
}

.queue-btn-play:hover {
    background-color: var(--teal);
    color: var(--text-inverse);
}

.queue-btn-remove:hover {
    background-color: #E62117;
    color: var(--text-inverse);
}

.queue-item-actions button:active {
    transform: scale(0.9);
}

/* ─── 4. MODALE DE LOGIN (GÉNÉRIQUE) ─── */
.modal-box h2 {
    margin: 0 0 10px 0;
    color: var(--text-main);
    font-family: var(--sys);
}

.modal-box p {
    margin-bottom: 30px;
    color: var(--text-muted);
    font-family: var(--sys);
}

/* =========================================================
   INCLUSION : _cards.css
   ========================================================= */

/* ==========================================================================
   COMPOSANT : CARTES MUSIQUE SANS BORDURES (_cards.css)
   ========================================================================== */

/* ─── 1. GRILLE ─── */
.music-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* Empêche l'élargissement lié au texte */
    gap: 35px;
    align-content: start;
}

/* ─── 2. CONTENEUR PRINCIPAL (La carte invisible) ─── */
.card {
    display: block;
    /* On retire Flexbox pour figer la largeur absolue */
    min-width: 0;
    /* Sécurité supplémentaire contre le dépassement du texte */
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

/* ─── 3. VISUEL & THUMBNAIL (Celui qui a la structure) ─── */
.card-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.thumbnail-container {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.4s ease;
    filter: grayscale(15%) brightness(0.97);
}

/* Indicateur admin : ce morceau n'a pas encore de MP3 dans le bucket.
   Volontairement discret, au-dessus de la miniature. Le clic sur l'icône
   remonte à la carte et continue donc de lancer la lecture. */
.card-audio-missing {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0.72;
    cursor: help;
    transition: opacity 0.2s ease;
}

.card-audio-missing .material-symbols-sharp {
    font-size: 1.15rem;
}

.card:hover .card-audio-missing {
    opacity: 1;
}

/* ─── 4. OVERLAY & BOUTON PLAY CENTRAL ─── */
.play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    /* Le voile est décoratif : seul le rond central capte le clic. */
    pointer-events: none;
}

.play-icon {
    pointer-events: none;
    width: 64px;
    height: 64px;
    background-color: #ffffff;
    color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease-out, background-color 0.2s;
}

.play-icon:hover {
    background-color: var(--teal);
    color: #ffffff;
}

/* ─── Équaliseur affiché dans le rond pendant la lecture ─── */
/* Les barres reprennent la couleur du glyphe qu'elles remplacent : sombres sur
   le rond blanc, claires quand le rond passe en teal au survol. */
.eq-anim {
    display: none;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 18px;
}

/* ─── Indicateur de chargement affiché dans le rond ─── */
/* Rempli par icons.js avec le cercle `progress_activity`, animé par `.spin`.
   Masqué par défaut : seule la classe d'état `.is-loading` l'affiche, à la
   place de la flèche, le temps que la vidéo démarre. */
.play-loading {
    display: none;
}

.eq-anim .eq-bar {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background-color: currentColor;
    transform-origin: bottom center;
    animation: eq-bar-bounce 0.9s ease-in-out infinite;
}

.eq-anim .eq-bar:nth-child(2) {
    animation-delay: 0.15s;
}

.eq-anim .eq-bar:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes eq-bar-bounce {

    0%,
    100% {
        transform: scaleY(0.35);
    }

    50% {
        transform: scaleY(1);
    }
}

/* ─── 5. ACTIONS SECONDAIRES (BAS DE CARTE) ─── */
.card-actions-bottom {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    /* Centrage horizontal parfait */
    gap: 8px;
    /* Espace entre les deux boutons */
    z-index: 10;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.2s ease;
    /* Les boutons invisibles ne doivent pas intercepter un tap. */
    pointer-events: none;
}

/* Design des boutons secondaires (Strictement carrés) */
.card-action-btn {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--sys);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.card-action-btn:hover {
    background-color: var(--teal);
    transform: scale(1.05);
}

/* Taille des icônes dans les boutons d'action de carte. */
.card-action-btn .material-symbols-sharp {
    font-size: 1.1rem;
}

/* L'apparition au survol se déclenche quand on survole la carte */
.card:hover .card-actions-bottom,
.card.is-actions-open .card-actions-bottom {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (hover: none) {
    /* Le grand bouton central apparaît avec les actions et devient le
       déclencheur de lecture. */
    .card.is-actions-open .play-overlay {
        opacity: 1;
    }

    .card.is-actions-open .play-icon {
        pointer-events: auto;
    }

    /* Pastilles compactes (icône seule) pour tenir sur une carte étroite. */
    .card-actions-bottom .card-action-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 50%;
    }

    .card-actions-bottom .card-action-label {
        display: none;
    }

}

/* ─── 6. CONTENU TEXTE (Bas de carte, sans bordure) ─── */
.card-content {
    padding: 12px 2px 5px 2px;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    text-align: left;
    cursor: pointer;
    min-height: 60px;
}

.card-title {
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.card-artists {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── 7. ÉTATS GLOBAUX (Survol & Actif) ─── */
/* Au survol de TOUTE la carte */
.card:hover .card-visual {
    transform: translateY(-4px);
    /* Fait très légèrement "lever" l'image */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    /* Accentue l'ombre */
}

.card:hover .thumbnail-container img {
    transform: scale(1.04);
    filter: grayscale(0%) brightness(1.1);
}

.card:hover .play-icon {
    pointer-events: auto;
}

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

.card:hover .card-title {
    color: var(--teal);
    /* Souligne l'interaction avec le texte */
}

/* État Actif (En lecture) */
.card.playing .card-visual {
    box-shadow: 0 0 0 3px var(--teal);
    /* Bordure colorée sur l'image seule */
}

.card.playing .thumbnail-container img {
    opacity: 1;
    filter: grayscale(0%) brightness(1.1);
}

.card.playing .play-overlay {
    opacity: 1;
    /* Le rond reste visible : c'est lui qui porte l'équaliseur. */
}

/* Le glyphe (flèche de lecture ou lien) laisse la place aux barres animées.
   `:not(.eq-anim)` couvre aussi bien le span `.material-symbols-sharp` que sa
   conversion en `.icon-svg` par icons.js. */
.card.playing .play-icon > :not(.eq-anim) {
    display: none;
}

.card.playing .eq-anim {
    display: flex;
}

.card.playing .card-title {
    color: var(--teal);
    /* Le titre reste coloré quand ça joue */
}

/* Chargement demandé (clic) : le rond reste visible et affiche le cercle qui
   tourne à la place de la flèche. L'équaliseur ne revient qu'au démarrage
   réel de la vidéo (`.card.playing`). */
.card.is-loading .play-overlay {
    opacity: 1;
}

.card.is-loading .play-icon > :not(.play-loading) {
    display: none;
}

.card.is-loading .play-loading {
    display: inline-flex;
}

/* =========================================================
   INCLUSION : _article.css
   ========================================================= */

/* ==========================================================================
   VUE ARTICLE (SINGLE) (_article.css)
   ========================================================================== */

.single-article {
    width: 100%;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ─── 1. EN-TÊTE & VISUEL ─── */
.article-header {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    min-width: 0;
}

.article-thumb-container {
    width: 100%;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-md);
    overflow: hidden;
    /* L'encadré d'écoute apparaît/disparaît en douceur, comme sur les cartes. */
    transition: box-shadow 0.3s ease;
}

.article-thumb-container .article-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    filter: grayscale(10%);
    transition: filter 0.4s;
}

.article-thumb-container .play-overlay {
    opacity: 1;
    background: rgba(28, 48, 65, 0.25);
}

.article-thumb-container:hover .article-thumb {
    filter: grayscale(0%);
}

.article-thumb-container:hover .play-overlay {
    background: rgba(28, 48, 65, 0.35);
}

/* Morceau de la fiche en cours de lecture : mêmes repères que la grille
   d'accueil (`.card.playing`) — visuel encadré, titre coloré et équaliseur
   animé au centre du rond à la place de la flèche de lecture. */
#singleArticleView.is-playing .article-thumb-container {
    box-shadow: 0 0 0 3px var(--teal);
}

#singleArticleView.is-playing .article-title-large {
    color: var(--teal);
}

#singleArticleView.is-playing .article-thumb-container .play-icon > :not(.eq-anim) {
    display: none;
}

#singleArticleView.is-playing .article-thumb-container .eq-anim {
    display: flex;
}

/* Chargement demandé (clic) : le rond de la fiche affiche le cercle qui tourne
   à la place de la flèche, jusqu'au démarrage réel de la vidéo. */
#singleArticleView.is-loading .article-thumb-container .play-icon > :not(.play-loading) {
    display: none;
}

#singleArticleView.is-loading .article-thumb-container .play-loading {
    display: inline-flex;
}

/* Colonne visuelle : vignette + boutons d'action en dessous. */
.article-visual-column {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ─── 2. INFORMATIONS & MÉTADONNÉES ─── */
.article-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
}

/* Signature : auteur + date sur une ligne, au-dessus du titre. */
.article-byline {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 20px 0 0;
    font-family: var(--sys);
    font-size: 0.9rem;
    color: var(--text-muted);
}

#articleAuthorValueStr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.article-byline-separator {
    color: var(--text-muted);
}

.article-byline.has-no-author .article-byline-separator {
    display: none;
}

/* Membres ayant aimé le morceau, sous la signature auteur + date. */
.article-likers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    width: 100%;
    min-width: 0;
    margin-top: 10px;
    font-family: var(--sys);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.article-likers[hidden] {
    display: none;
}

.article-liker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--text-muted);
    text-decoration: none;
}

.article-liker:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.article-liker:hover .article-liker-name,
.article-liker:focus-visible .article-liker-name {
    color: var(--text-main);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-liker-avatar {
    display: flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--teal);
}

.article-liker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-liker-avatar .material-symbols-sharp {
    font-size: 0.95rem;
}

.article-liker-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-liker-separator {
    color: var(--text-muted);
}

.article-title-large {
    font-family: var(--sys);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.article-title-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    margin: 8px 0 24px;
}

.article-title-row .article-title-large {
    flex: 1 1 auto;
    min-width: 0;
}

.article-author-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    font-family: var(--sys);
    font-size: 0.9rem;
    font-weight: 500;
}

.article-author-card:hover #articleAuthorValueStr,
.article-author-card:focus-visible #articleAuthorValueStr {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-author-card:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.article-author-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--teal);
    flex: 0 0 25px;
}

.article-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-author-icon {
    color: var(--teal);
    font-size: 1.05rem;
    transition: color 0.2s ease;
}

.article-author-card:hover .article-author-avatar,
.article-author-card:focus-visible .article-author-avatar,
.article-author-card:hover .article-author-icon,
.article-author-card:focus-visible .article-author-icon {
    color: currentColor;
}

.article-meta-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--sys);
    line-height: 1.2rem;
}

.article-meta-table td {
    padding: 8px 0;
    box-shadow: none;
    border-bottom: none;
    font-size: 1rem;
}

.article-meta-table tr:last-child td {
    border-bottom: none;
}

.article-meta-table .meta-label {
    font-weight: 500;
    color: var(--text-muted);
    width: 120px;
    vertical-align: top;
}

.article-meta-table .meta-value {
    font-weight: 600;
    color: var(--navy);
}

/* Artistes de la fiche morceau : un bouton discret par nom, avec la photo
   Wikipédia (ou une silhouette) pour relier immédiatement le visuel au texte. */
#articleArtistStr,
#articleCountryStr,
#articleLabelStr,
#articleYearStr,
#articleGenreStr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.article-artist-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 3px 11px 3px 3px;
    background: var(--bg-search);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.article-artist-chip:hover,
.article-artist-chip:focus-visible {
    background: color-mix(in srgb, var(--teal) 10%, var(--bg-search));
    color: var(--teal);
}

.article-artist-chip:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.article-country-chip {
    padding-left: 10px;
}

.article-country-flag {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1;
}

.article-artist-avatar {
    display: flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: 50%;
    color: var(--text-muted);
}

.article-artist-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-artist-avatar.is-placeholder .icon-svg {
    opacity: 0.5;
}

.article-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Métadonnées en une colonne pour une lecture régulière, quel que soit le type de fiche. */
#articleMetaBody {
    display: flex;
    flex-direction: column;
    width: fit-content;
    min-width: 66.666%;
    max-width: 100%;
}

#articleMetaBody > tr {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}

#articleMetaBody .meta-label {
    width: 120px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    opacity: 0.7;
}

#articleMetaBody .meta-value {
    padding: 0;
    border: none;
    font-weight: 500;
    text-align: left;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ─── 3. BOUTONS D'ACTION (sous le visuel, grille 2x2) ─── */
.article-actions-compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 44px;
    gap: 10px;
    width: 100%;
}

.article-actions-compact .btn.btn-ghost {
    width: 100%;
    height: 100%;
    justify-content: center;
}

.article-actions-compact .btn.btn-ghost {
    border: none;
    background-color: var(--bg-search);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-main);
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    cursor: pointer;
    text-decoration: none;
    min-width: 0;
    overflow-wrap: anywhere;
}

.article-actions-compact .btn.btn-ghost:hover {
    background-color: var(--teal);
    color: var(--text-inverse);
    transform: scale(1.02);
}

.article-actions-compact .btn.btn-ghost .icon-svg {
    transform: scale(0.9);
    /* Icônes très légèrement réduites pour s'adapter à la taille du bouton */
}

/* ─── 3 bis. DISPONIBLE HORS LIGNE ─── */
/* Cinquième action de la fiche, sur toute la largeur. Elle emprunte le style
   des boutons Playlist / YouTube et garde un interrupteur à droite. */
.article-actions-compact .btn.btn-ghost.article-offline-control {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
}

.article-actions-compact .btn.btn-ghost.article-offline-control[hidden] {
    display: none;
}

.article-offline-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: currentColor;
}

.article-offline-icon.icon-svg svg {
    width: 22px;
    height: 22px;
}

.article-offline-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-offline-switch {
    position: relative;
    flex: none;
    width: 40px;
    height: 22px;
    margin-left: auto;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-muted) 45%, transparent);
    transition: background-color 0.2s ease;
}

.article-offline-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease, top 0.2s ease, left 0.2s ease;
}

.article-offline-control[aria-checked="true"] .article-offline-switch {
    background: var(--green);
}

.article-offline-control[aria-checked="true"] .article-offline-knob {
    transform: translateX(18px);
}

.article-offline-control.is-busy .article-offline-switch {
    background: color-mix(in srgb, var(--teal) 35%, transparent);
}

.article-offline-control.is-busy .article-offline-knob {
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
}

/* Les icônes colorées restent lisibles au survol teal des boutons. */
.article-offline-control.is-stored:not(:hover):not(:focus-visible) .article-offline-icon {
    color: var(--green);
}

.article-offline-control.is-error:not(:hover):not(:focus-visible) .article-offline-icon {
    color: var(--red);
}

/* ─── 4. CORPS DU TEXTE ─── */
.article-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--navy);
    font-weight: 400;
    padding-top: 15px;
}

/* Contenu de page statique : collé au titre comme sur les pages d'exploration. */
#staticPageContent.article-body {
    padding-top: 0;
}

.article-info .article-body {
    margin-top: 12px;
    padding-top: 0;
    font-size: 0.95rem;
    line-height: 1.7;
}

.article-body a {
    color: var(--teal);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.article-body a:hover {
    color: var(--navy);
}

.article-body blockquote {
    position: relative;
    margin: 18px 0;
    padding: 2px 0 2px 20px;
    background-color: transparent;
    border-left: 3px solid var(--teal);
    border-radius: 0;
    color: var(--text-main);
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.65;
}

.article-body blockquote p {
    margin: 0;
}

.article-body blockquote p + p {
    margin-top: 0.6em;
}

/* ─── 5. NAVIGATION (FLÈCHES PRÉCÉDENT / SUIVANT) ─── */
.article-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    flex: 0 0 auto;
    min-height: 40px;
}

.article-navigation:empty {
    display: none;
}

/* Indicateur de chargement des flèches précédent/suivant. */
.article-nav-loading {
    width: 100%;
    padding: 4px;
    text-align: center;
    color: var(--text-muted);
}

.nav-article-arrow {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-article-arrow:hover {
    background-color: var(--header-nav-active-bg);
    color: #2D3748;
}

.nav-article-arrow .material-symbols-sharp,
.nav-article-arrow .icon-svg {
    font-size: 1.25rem;
    line-height: 1;
}

/* ─── 6. COMMENTAIRES ─── */
.comment-message {
    color: var(--text-muted);
}

.comment-error {
    color: #E62117;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-textarea {
    resize: vertical;
}

/* Champ de commentaire et liste de mentions : la liste flotte sous le champ,
   sans agrandir le formulaire ni décaler le bouton d'envoi. */
.comment-input-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}

.comment-input-wrap .comment-textarea {
    width: 100%;
}

.mention-autocomplete {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(280px, 100%);
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: 0 10px 28px color-mix(in srgb, #000 22%, transparent);
}

.mention-autocomplete[hidden] {
    display: none;
}

.mention-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
}

.mention-option:hover,
.mention-option.is-active {
    background: color-mix(in srgb, var(--teal) 14%, var(--bg-card));
    color: var(--teal);
}

.mention-option-avatar {
    display: flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bg-search);
    color: var(--teal);
}

.mention-option-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mention-option-avatar .icon-svg {
    width: 16px;
    height: 16px;
}

.mention-empty {
    padding: 8px 9px;
    color: var(--text-muted);
    font-family: var(--sys);
    font-size: 0.82rem;
}

.comment-submit {
    align-self: flex-end;
}

.comment-login-prompt {
    padding: 15px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-search);
    text-align: center;
}

.comment-login-prompt p {
    margin: 0 0 10px;
    color: var(--text-muted);
}

.comment-card {
    background: color-mix(in srgb, var(--teal) 5%, var(--bg-card));
    border: none;
    border-radius: var(--radius-md);
    padding: 15px;
}

.comment-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.comment-author-line,
.comment-actions,
.comment-edit-actions {
    display: flex;
}

.comment-author-line {
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.comment-author-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-main);
    text-decoration: none;
}

.comment-author-profile-link:hover .comment-author,
.comment-author-profile-link:focus-visible .comment-author {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.comment-author-avatar {
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--teal);
}

.comment-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-author-avatar .material-symbols-sharp {
    font-size: 1rem;
}

.comment-author {
    color: var(--text-main);
    font-size: 0.95rem;
}

.comment-date {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.comment-actions {
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
    margin-left: auto;
}

.comment-reply-btn {
    min-height: 28px;
    padding: 0 7px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--sys);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.comment-reply-btn:hover,
.comment-reply-btn:focus-visible {
    background: var(--player-hover-bg);
    color: var(--teal);
}

.comment-replies {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding-left: 14px;
    border-left: 2px solid color-mix(in srgb, var(--teal) 22%, transparent);
}

.comment-replies:empty {
    display: none;
}

.comment-replies .comment-card {
    padding: 12px;
    background: color-mix(in srgb, var(--teal) 3%, var(--bg-card));
}

.comment-reply-form {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-search) 65%, transparent);
}

.comment-reply-context {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.comment-reply-context strong {
    color: var(--text-main);
}

.comment-reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.comment-body {
    color: var(--text-main);
    padding-top: 0;
    font-size: 0.95rem;
}

.comment-action-icon {
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
}

.comment-edit {
    display: none;
    margin-top: 10px;
}

.comment-edit-actions {
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.comment-card .icon-btn,
.comment-card .icon-btn.danger {
    color: var(--text-muted);
}

.comment-card .icon-btn:hover,
.comment-card .icon-btn.danger:hover {
    background: var(--player-hover-bg);
    color: var(--text-main);
}

@media (max-width: 600px) {
    .comment-replies {
        gap: 8px;
        padding-left: 10px;
    }

    .comment-replies .comment-card {
        padding: 12px;
    }

    .comment-header {
        gap: 6px;
    }

    .comment-actions {
        gap: 2px;
    }
}

/* =========================================================
   INCLUSION : _pages.css
   ========================================================= */

/* ==========================================================================
   PAGES SPÉCIFIQUES (Tags, Archives, Next) (_pages.css)
   ========================================================================== */

/* ─── 1. STRUCTURE COMMUNE DES PAGES ─── */
.page-view {
    animation: fadeIn 0.3s ease;
    padding-top: 0px;
}

.page-header {
    text-align: center;
    margin-bottom: 30px;
}

.page-title {
    font-family: var(--sys);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
    text-align: left;
}

/* En-tête d'une vue filtrée : la catégorie du tag (« Année », « Genre »,
   « Pays »…) est présentée dans une pastille commune, suivie de la valeur. */
#dedicatedTitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.dedicated-tag-category {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--teal);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dedicated-tag-value {
    color: var(--text-main);
}

/* Entête d'une vue filtrée : le type, le nom du tag et sa radio réunis dans un
   seul contrôle, comme la Radio du header. À gauche l'icône du type et le nom
   — c'est le titre de la page, il n'ouvre rien —, à droite le bouton qui lance
   la radio du tag, derrière un filet discret. Le contrôle reste gris au repos :
   le bleu du thème est réservé à ce qui joue. */
.dedicated-control {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    background-color: var(--bg-search);
    border-radius: var(--radius-pill);
    /* Le nom reprend la taille du titre de page (2 rem) : trop lourd dans la
       pilule, il prend celle d'un libellé de contrôle. L'icône et le ▶ suivent,
       puisque tout est en `em`. */
    font-size: 1.2rem;
}

/* Le nom peut être long : il se raccourcit plutôt que de pousser le bouton de
   la radio hors de l'écran, qui garde toute sa place à droite. */
.dedicated-control-info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 2px 14px 2px 16px;
}

.dedicated-control-info .icon-svg {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    color: var(--text-muted);
}

/* Drapeau du pays dans la pilule de titre : même taille que l'icône du type. */
.dedicated-control-info .dedicated-control-flag {
    flex: 0 0 auto;
    font-size: 1em;
    line-height: 1;
}

.dedicated-control-info .dedicated-tag-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dedicated-control-radio {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Le filet qui sépare le nom de la radio : même grisaille que les tuiles, donc
   il suit le mode sombre comme le mode clair. */
.dedicated-control-radio::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 20px;
    transform: translateY(-50%);
    background-color: color-mix(in srgb, var(--border-color) 55%, transparent);
}

.dedicated-control-radio .icon-svg {
    color: var(--text-muted);
}

.dedicated-control-radio:hover {
    background-color: var(--teal);
}

.dedicated-control-radio:hover .icon-svg {
    color: #ffffff;
}

/* Le ▶ et l'équaliseur occupent la même boîte : le contrôle garde exactement la
   même largeur en passant de l'un à l'autre. */
.dedicated-control-radio .radio-tile-icon,
.dedicated-control-radio .eq-anim {
    width: 1.15em;
    height: 1.15em;
}

.dedicated-control-radio .eq-anim {
    display: none;
}

/* Radio du tag en cours : la zone reste allumée et l'équaliseur remplace le ▶
   — un clic dessus arrête la radio. */
.dedicated-control-radio.is-active {
    background-color: var(--teal);
    color: #ffffff;
}

.dedicated-control-radio.is-active .icon-svg {
    display: none;
}

.dedicated-control-radio.is-active .eq-anim {
    display: flex;
}

/* ─── FILTRE MULTIPLE ─── */
/* Une pastille par filtre, le « + » à la suite, et le panneau d'ajout ancré
   sous la rangée. Le conteneur porte la position : le panneau s'ouvre sous les
   pastilles, pas sous le bouton. */
.dedicated-filters {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 100%;
}

.dedicated-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
}

/* La croix qui retire un filtre reprend la zone de la radio — même filet, même
   rayon — mais reste grise au repos : le bleu est réservé à ce qui joue. */
.dedicated-filter-remove {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dedicated-filter-remove::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 20px;
    transform: translateY(-50%);
    background-color: color-mix(in srgb, var(--border-color) 55%, transparent);
}

.dedicated-filter-remove .material-symbols-sharp {
    font-size: 1rem;
}

.dedicated-filter-remove:hover {
    background-color: var(--player-hover-bg);
    color: var(--text-main);
}

.dedicated-filter-add {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--bg-search);
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dedicated-filter-add:hover,
.dedicated-filter-add[aria-expanded="true"] {
    background-color: var(--player-hover-bg);
    color: var(--text-main);
}

.dedicated-filter-count {
    min-height: 1.2em;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Panneau d'ajout : même famille que la palette (fond, rayon, ombre), largeur
   fixe pour que les noms longs ne l'étirent pas. */
.dedicated-filter-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: 430px;
    max-width: calc(100vw - 32px);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.dedicated-filter-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.dedicated-filter-search .material-symbols-sharp {
    flex: 0 0 auto;
    color: var(--teal);
}

.dedicated-filter-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--sys);
    font-size: 1rem;
    color: var(--text-main);
}

.dedicated-filter-list {
    display: flex;
    flex-direction: column;
    max-height: min(50vh, 360px);
    padding: 6px 0 10px;
    overflow-y: auto;
}

.dedicated-filter-group {
    padding: 10px 18px 5px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dedicated-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border: 0;
    background: transparent;
    font-family: var(--sys);
    font-size: 0.92rem;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}

.dedicated-filter-item .material-symbols-sharp {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: var(--text-muted);
}

.dedicated-filter-item.is-active,
.dedicated-filter-item:hover {
    background-color: var(--player-hover-bg);
}

.dedicated-filter-item.is-active .material-symbols-sharp,
.dedicated-filter-item:hover .material-symbols-sharp {
    color: var(--teal);
}

.dedicated-filter-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dedicated-filter-item-count {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.dedicated-filter-empty {
    padding: 22px 18px;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.dedicated-filter-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-search);
    color: var(--text-muted);
    font-size: 0.75rem;
}

.dedicated-filter-foot span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dedicated-filter-foot kbd {
    font-family: var(--sys);
    font-size: 0.72rem;
    line-height: 1;
    color: var(--text-muted);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 4px 6px;
    border-radius: var(--radius-xs);
}


/* ─── FICHE D'ARTISTE PUBLIQUE ─── */
/* Bandeau bio + photo des pages /artiste/<nom>. Le conteneur est créé pour
   toutes les vues catalogue afin que la navigation interne puisse le remplir ;
   il reste masqué tant qu'aucune fiche n'est disponible. */
.entity-profile {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    width: 100%;
    margin: 0 0 32px;
    padding: 20px;
    background: var(--bg-search);
    border-radius: var(--radius-lg);
}

.entity-profile[hidden] {
    display: none;
}

.entity-profile--text-only {
    grid-template-columns: minmax(0, 1fr);
}

.entity-profile-aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.entity-profile-figure {
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

.entity-profile-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Le nom et la radio de l'artiste restent au-dessus du bandeau, dans
   l'entête dédiée de la page. */
.entity-profile-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.entity-profile-bio {
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.68;
}

.entity-profile-bio p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    max-height: 6.72em;
    margin: 0;
    overflow: hidden;
}

.entity-profile-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: auto;
    padding-top: 2px;
}

.entity-profile-credit {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.entity-profile-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.entity-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--teal);
    font-family: var(--sys);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.entity-profile-link:hover,
.entity-profile-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 720px) {
    .entity-profile {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
    }

    .entity-profile-aside {
        align-items: flex-start;
    }

    .entity-profile-figure {
        width: min(140px, 100%);
    }

    .entity-profile-link {
        margin-left: 0;
    }
}


/* ─── TRACKLIST RADIO ─── */
.tracklist-page {
    width: 100%;
}

.tracklist-page-header {
    text-align: left;
    margin-bottom: 24px;
}

.tracklist-page-header .page-title {
    margin-bottom: 8px;
}

.tracklist-status {
    margin: 0;
    color: var(--text-muted);
}

.tracklist-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tracklist-item-button {
    width: 100%;
    min-height: 64px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-search);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Flat design : le survol se traduit par un fond très légèrement teinté,
   dans le même esprit que les cartes du dashboard. */
.tracklist-item-button:hover,
.tracklist-item-button:focus-visible {
    background: color-mix(in srgb, var(--bg-search) 92%, var(--teal) 8%);
    color: var(--text-main);
    outline: none;
}

.tracklist-thumbnail {
    width: 48px;
    height: 48px;
    object-fit: cover;
    background: var(--border-color);
}

.tracklist-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.tracklist-copy strong,
.tracklist-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tracklist-copy strong {
    font-family: var(--sys);
}

.tracklist-copy span {
    color: var(--text-muted);
    font-size: 0.86rem;
}

.tracklist-open-icon {
    color: var(--text-muted);
}

.tracklist-item-button:hover .tracklist-copy span,
.tracklist-item-button:hover .tracklist-open-icon,
.tracklist-item-button:focus-visible .tracklist-copy span,
.tracklist-item-button:focus-visible .tracklist-open-icon {
    color: var(--text-muted);
}

/* ─── PAGE BLOG : métadonnées à gauche, contenu à droite ─── */
.static-page-blog {}

.static-page-blog-list {
    display: grid;
    width: 100%;
}

.static-page-blog-post {
    display: grid;
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
    gap: 4px 36px;
    align-items: baseline;
    padding: 20px 0;
}

.static-page-blog-post:last-child {
    padding-bottom: 0;
}

.static-page-blog-post-header {
    margin: 0;
}

.static-page-blog-post-title {
    margin: 0;
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 1.05rem;
    line-height: 1.3;
}

.static-page-blog-post-date {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.static-page-blog-post .article-body {
    padding-top: 0;
}

/* Le premier paragraphe du contenu doit s'aligner sur le titre, sans marge haute. */
.static-page-blog-post .article-body> :first-child {
    margin-top: 0;
}

.static-page-blog-post .article-body> :last-child {
    margin-bottom: 0;
}

/* ─── PAGE À PROPOS : L'ÉQUIPE ─── */
.static-page-team {
    margin-top: 56px;
    padding-top: 34px;
    border-top: 1px solid var(--border-color);
}

.static-page-team-title {
    margin: 0 0 24px;
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 1.35rem;
    line-height: 1.25;
}

.static-page-team-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(104px, 100%), 1fr));
    gap: 18px 12px;
}

.static-page-team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    text-align: center;
    text-decoration: none;
}

.static-page-team-avatar {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bg-search);
    color: var(--text-muted);
}

.static-page-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.static-page-team-avatar .material-symbols-sharp {
    font-size: 40px;
}

.static-page-team-avatar svg {
    width: 40px;
    height: 40px;
}

.static-page-team-name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.static-page-team-member:hover .static-page-team-name,
.static-page-team-member:focus-visible .static-page-team-name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── 2. PAGE TAGS & GRILLES GÉNÉRIQUES ─── */
.tag-page-container {
    width: 100%;
}

/* Barre recherche + tri des pages Artistes et Labels. Le champ de recherche
   garde sa ligne basse, le tri reste aligné à droite sur ordinateur. */
.tag-page-toolbar {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
}

.tag-page-toolbar .home-search-wrapper {
    flex: 1 1 auto;
    margin-bottom: 0;
}

#artistesView .tag-page-toolbar .home-search-wrapper,
#labelsView .tag-page-toolbar .home-search-wrapper {
    margin-bottom: 0;
}

.tag-sort {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-family: var(--sys);
    font-size: 0.85rem;
    font-weight: 600;
}

.tag-sort .form-input {
    width: auto;
    min-width: 175px;
    padding-top: 8px;
    padding-bottom: 8px;
}

@media (max-width: 600px) {
    .tag-page-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .tag-sort {
        width: 100%;
        justify-content: space-between;
    }

    .tag-sort .form-input {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.tag-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}

/* Grille sans résultat : le message prend toute la largeur. */
.tag-page-vide {
    grid-column: 1 / -1;
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

.grid-4-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.grid-5-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

/* Carte pays : la silhouette reste décorative ; seuls les points actifs sont interactifs. */
.country-map {
    margin: 0 0 34px;
    padding: 22px 24px 18px;
    background: var(--bg-search);
    border-radius: var(--radius-sm);
}

.country-map-heading {
    display: flex;
    gap: 12px 24px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.country-map h2 {
    margin: 0;
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 1rem;
    font-weight: 600;
}

.country-map p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.country-map-canvas {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
}

.country-map #world-map {
    display: block;
    width: 100%;
    height: auto;
}

.country-map #world-map path {
    /* Les pays sans morceau restent visibles : un aplat neutre légèrement
       détaché du fond, sans contour. */
    fill: color-mix(in srgb, var(--text-muted) 28%, var(--bg-site));
    stroke: none;
    transition: fill .18s ease, opacity .18s ease;
}

.country-map #world-map .is-available,
.country-map #world-map .is-available path {
    fill: var(--teal);
    cursor: pointer;
}

.country-map #world-map .is-available:hover,
.country-map #world-map .is-available:hover path,
.country-map #world-map .is-available:focus,
.country-map #world-map .is-available:focus path {
    fill: var(--text-main);
    stroke: var(--text-main);
    outline: none;
}

.country-map #world-map .is-available:focus-visible,
.country-map #world-map .is-available:focus-visible path {
    stroke: var(--teal);
    stroke-width: 2;
}

/* Le pays choisi dans l'encart reste marqué sur la carte. */
.country-map #world-map .is-selected,
.country-map #world-map .is-selected path {
    stroke: var(--text-main);
    stroke-width: 1.4;
}

.country-map-credit {
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: .64rem;
    text-align: right;
}

.country-map-credit a {
    color: inherit;
}

.country-map-tooltip {
    position: absolute;
    z-index: 1;
    max-width: min(240px, calc(100% - 24px));
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    background: var(--text-main);
    color: var(--bg-site);
    font-size: .78rem;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 12px));
    transition: opacity .12s ease;
}

.country-map-tooltip.is-visible {
    opacity: 1;
}

/* Page Pays : la carte (2/3) et son encart (1/3) forment une seule rangée.
   L'encart prend toute la hauteur de la carte, quitte à garder du blanc en bas :
   la rangée se lit comme deux colonnes de même taille. */
.pays-top {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
    margin: 0 0 34px;
}

.pays-top .country-map {
    margin: 0;
}

/* L'encart reprend le fond de la carte : la rangée se lit comme une surface. */
.pays-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 20px 22px 16px;
    background: var(--bg-search);
    border-radius: var(--radius-sm);
}

.pays-panel h2 {
    margin: 0;
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 1.15rem;
    font-weight: 600;
}

.pays-panel h3 {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.pays-panel-note {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: .82rem;
}

.pays-panel-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

.pays-panel-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: -4px -6px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.pays-panel-close:hover {
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-main);
}

.pays-panel-close .icon-svg {
    width: 18px;
    height: 18px;
}

/* « Voir tout » : une pastille sur le fond du site, comme les genres, pour se
   distinguer du texte de l'encart. */
.pays-panel-tout {
    align-self: flex-start;
    margin-top: -2px;
    padding: 5px 12px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-site);
    color: var(--text-main);
    font-family: var(--sys);
    font-size: .78rem;
    cursor: pointer;
}

.pays-panel-tout:hover {
    background: color-mix(in srgb, var(--text-main) 8%, var(--bg-site));
}

/* Chaque continent est une barre dont la longueur suit le nombre de morceaux. */
.pays-continents {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pays-continent {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 7px;
}

.pays-continent::after,
.pays-continent::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 2px;
}

.pays-continent::after {
    right: 0;
    background: color-mix(in srgb, var(--text-muted) 20%, transparent);
}

.pays-continent::before {
    width: calc(var(--part) * 1%);
    background: color-mix(in srgb, var(--text-muted) 65%, transparent);
}

.pays-continent-nom {
    color: var(--text-main);
    font-size: .86rem;
}

.pays-continent-nombre {
    color: var(--text-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

/* Derniers titres de l'encart : rangée compacte, pochette à gauche. */
.pays-titres {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pays-titre {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-main);
    font-family: var(--sys);
    text-align: left;
    cursor: pointer;
}

.pays-titre img {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-xs);
    object-fit: cover;
    background: color-mix(in srgb, var(--text-main) 8%, transparent);
}

.pays-titre-copie {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pays-titre-copie strong,
.pays-titre-copie small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pays-titre-copie strong {
    color: var(--text-main);
    font-size: .84rem;
    font-weight: 600;
}

.pays-titre-copie small {
    color: var(--text-muted);
    font-size: .74rem;
}

.pays-titre:hover strong {
    text-decoration: underline;
}

/* Genres du pays : pastilles sur le fond du site, lisibles sur l'encart. */
.pays-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0;
}

.pays-genre {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--bg-site);
    color: var(--text-main);
    font-size: .75rem;
}

.pays-genre b {
    margin-left: 5px;
    color: var(--text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Boutons de navigation (Tuiles) */
.nav-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    /* Hauteur augmentée */
    background-color: var(--bg-search);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--sys);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

/* Inversion de couleur franche au survol pour une lisibilité parfaite */
.nav-tile:hover {
    background-color: var(--teal);
    color: var(--bg-site);
    transform: scale(1.02);
}

/* Années sans publication : grisées et non cliquables. */
.nav-tile.is-empty,
.nav-tile.is-empty:hover {
    opacity: 0.45;
    cursor: default;
    transform: none;
}

.nav-tile .icon-svg {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.nav-tile-count {
    margin-left: auto;
    margin-right: 10px;
    padding: 2px 6px;
    background: var(--tag-count-bg);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.2;
    border-radius: var(--radius-pill);
    opacity: 0.8;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.nav-tile:hover .nav-tile-count {
    background: var(--bg-search);
    color: var(--text-main);
    opacity: 0.72;
}

.nav-tile:hover .icon-svg {
    opacity: 1;
    color: var(--bg-site);
}

/* ─── Tuile à deux zones : la grille des genres ──────────────────────────────
   La page Genres propose, en plus du contenu habituel (nom et nombre de
   morceaux, qui ouvre la page du genre), un bouton pour lancer la radio de ce
   genre. Un bouton ne pouvant pas en contenir un autre, la tuile devient un
   conteneur `.nav-tile` qui porte les deux zones cliquables. */
.nav-tile-split {
    display: flex;
    align-items: stretch;
    padding: 0;
    gap: 0;
    overflow: hidden;
    cursor: default;
}

.nav-tile-split .tile-part {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 16px;
    background: none;
    border: 0;
    color: inherit;
    font-family: var(--sys);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Zone des informations : nom du genre (tronqué si la colonne est étroite) et
   nombre de morceaux, aligné à droite comme sur les autres pages de tags. */
.nav-tile-split .tile-info {
    flex: 1 1 auto;
    min-width: 0;
}

.nav-tile-split .tile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-tile-split .tile-info .nav-tile-count {
    margin-left: auto;
    margin-right: 0;
}

/* Photo Wikipédia des artistes : un médaillon dans la zone d'informations.
   Toutes les tuiles Artistes resserrent leurs marges verticales, avec ou sans
   photo, pour garder la même hauteur que les tuiles des autres grilles. */
.nav-tile-split.nav-tile--media .tile-part {
    padding: 10px 12px;
}

.nav-tile-split.nav-tile--media .tile-radio {
    padding: 10px 11px;
}

.nav-tile-split .tile-avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: 50%;
    color: var(--text-muted);
}

/* Les artistes sans photo gardent le médaillon : une silhouette discrète
   préserve l'alignement sans faire croire à un visuel importé. */
.nav-tile-split .tile-avatar.is-placeholder .icon-svg {
    opacity: 0.5;
}

.nav-tile-split .tile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Drapeau emoji de la grille Pays : purement décoratif, le nom reste le
   libellé accessible du bouton. */
.nav-tile-split .tile-flag {
    flex: 0 0 auto;
    font-size: 1.12rem;
    line-height: 1;
}

/* Zone de la radio : filet de séparation, ▶ en gris (action secondaire : la
   couleur du thème reste réservée à ce qui joue), et marges resserrées pour
   laisser la place au nom dans les colonnes étroites. Le filet tire son gris
   de `--border-color`, donc il suit le mode sombre comme le mode clair. */
.nav-tile-split .tile-radio {
    flex: 0 0 auto;
    padding: 18px 11px;
    color: var(--text-muted);
    border-left: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
}

/* Le ▶ et l'équaliseur occupent la même boîte : le bouton garde exactement la
   même largeur en passant de l'un à l'autre (sinon la tuile bouge au clic). */
.nav-tile-split .tile-radio .radio-tile-icon,
.nav-tile-split .tile-radio .eq-anim {
    width: 1.2em;
    height: 1.2em;
}

.nav-tile-split .tile-radio .icon-svg {
    opacity: 1;
    color: var(--text-muted);
}

/* Chaque zone s'allume seule : on neutralise l'inversion que `.nav-tile:hover`
   applique à la tuile entière. Le ▶ de la zone radio garde son gris tant qu'on
   ne survole pas sa propre zone : seul `.tile-part:hover` le fait basculer. */
.nav-tile-split:hover {
    background-color: var(--bg-search);
    color: var(--text-main);
}

.nav-tile-split:hover .nav-tile-count {
    background: var(--tag-count-bg);
    color: var(--text-muted);
    opacity: 0.8;
}

.nav-tile-split:hover .tile-radio .icon-svg {
    opacity: 1;
    color: var(--text-muted);
}

.nav-tile-split .tile-part:hover {
    background-color: var(--teal);
    color: var(--bg-site);
}

.nav-tile-split .tile-part:hover .icon-svg {
    opacity: 1;
    color: var(--bg-site);
}

/* Le médaillon garde son fond clair au survol : la silhouette reste lisible
   en gris, sinon elle passerait en blanc sur blanc. */
.nav-tile-split .tile-part:hover .tile-avatar .icon-svg,
.nav-tile-split .tile-part:focus-visible .tile-avatar .icon-svg {
    opacity: 0.5;
    color: var(--text-muted);
}

.nav-tile-split .tile-info:hover .nav-tile-count {
    background: var(--bg-search);
    color: var(--text-main);
    opacity: 0.72;
}

/* Radio en cours pour ce genre : la zone reste allumée et l'équaliseur
   remplace le ▶ — un clic dessus arrête la radio. */
.nav-tile-split .tile-radio .eq-anim {
    display: none;
}

.nav-tile-split .tile-radio.is-active {
    background-color: var(--teal);
    color: var(--bg-site);
}

.nav-tile-split .tile-radio.is-active .icon-svg {
    display: none;
}

.nav-tile-split .tile-radio.is-active .eq-anim {
    display: flex;
}

/* ─── Page Années : un bloc par décennie ─────────────────────────────────────
   Le nom de la décennie porte, juste à sa droite, la radio de la décennie
   entière — un rond de la taille des pastilles d'action, pour ne pas écraser le
   titre. Le bouton reprend le langage des tuiles : fond des tuiles au repos,
   bleu du thème quand la décennie joue — l'équaliseur remplace alors le ▶. Une
   décennie sans morceau n'a pas de bouton du tout (voir tagViews.php). */
.annees-decennie {
    margin-bottom: 8px;
}

.decennie-entete {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 34px 0 16px;
}

.decennie-entete .archive-year-subtitle {
    margin: 0;
}

.decennie-radio {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--bg-search);
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.decennie-radio .icon-svg {
    opacity: 1;
    color: var(--text-muted);
}

.decennie-radio .radio-tile-icon,
.decennie-radio .eq-anim {
    width: 1.2em;
    height: 1.2em;
}

.decennie-radio .eq-anim {
    display: none;
}

.decennie-radio:hover {
    background-color: var(--teal);
}

.decennie-radio:hover .icon-svg {
    color: var(--bg-site);
}

.decennie-radio.is-active {
    background-color: var(--teal);
    color: var(--bg-site);
}

.decennie-radio.is-active .icon-svg {
    display: none;
}

.decennie-radio.is-active .eq-anim {
    display: flex;
}









/* ─── 3. PAGE ARCHIVES & TITRES DE SECTIONS ─── */
.archive-year-subtitle {
    font-family: var(--sys);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 40px 0 20px 0;
    padding-bottom: 0;
    border-bottom: none;
    /* Suppression de la ligne */
}

.archive-year-subtitle:first-child {
    margin-top: 0;
}

/* Grille des mois d'une année : mêmes colonnes et même gouttière que les
   grilles `grid-4-cols` ; seule la marge basse diffère (blocs années serrés). */
.archives-page-grid {
    margin-bottom: 20px;
}

/* ─── 5. PAGE NEXT (PLAYLIST) & PAGINATION ─── */
#nextView .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    text-align: left;
}

#nextView .page-title {
    margin-bottom: 0;
}

.next-page-container {
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: none;
    margin-top: 20px;
    padding: 0;
}

.queue-actions-top[hidden] {
    display: none;
}

.queue-actions-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0;
    gap: 15px;
}

.queue-actions-top .btn {
    margin: 0;
    border: none;
}

.queue-actions-top .queue-clear-btn {
    background: var(--bg-search);
    color: var(--text-main);
}

.queue-actions-top .queue-clear-btn:hover {
    background: var(--teal);
    color: var(--text-inverse);
}

/* ─── PAGINATION (catalogue & pages tags) ─── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.page-link {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-search);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.page-link:hover:not(.disabled):not(.active) {
    background: var(--teal);
    color: var(--text-inverse);
}

.page-link.active {
    background: var(--teal);
    color: var(--text-inverse);
    cursor: default;
}

.page-link.disabled {
    opacity: 0.35;
    cursor: default;
}

/* ─── 6. PROFILS UTILISATEURS ─── */
.user-profile-layout {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
    gap: clamp(34px, 6vw, 90px);
    align-items: start;
    padding: 24px 0 48px;
}

.user-profile-sidebar {
    min-width: 0;
}

.user-profile-avatar-square {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 123px);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bg-search);
    color: var(--teal);
}

.user-profile-avatar-square .material-symbols-sharp,
.user-profile-avatar-square .icon-svg {
    width: 70%;
    height: 70%;
    font-size: 5.35rem;
}

.user-profile-avatar-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-profile-sidebar #userProfileTitle {
    margin: 18px 0 22px;
    color: var(--text-main);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    line-height: 1;
}

.user-profile-facts {
    display: grid;
    gap: 8px;
    margin: 0;
}

.user-profile-facts>div {
    display: block;
}

.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.user-profile-facts dd {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.user-profile-facts strong {
    color: var(--text-main);
}

.user-profile-radio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 20px;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--bg-search);
    color: var(--text-main);
    cursor: pointer;
    font-family: var(--sys);
    font-size: 0.92rem;
    font-weight: 400;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.user-profile-radio-btn:hover:not(:disabled),
.user-profile-radio-btn.is-active {
    background: var(--teal);
    color: var(--text-inverse);
}

.user-profile-radio-btn:disabled {
    cursor: default;
    opacity: 0.45;
}

.user-profile-radio-btn .user-profile-radio-icon,
.user-profile-radio-btn .icon-svg {
    width: 16px;
    height: 16px;
    font-size: 1rem;
}

.user-profile-timeline {
    position: relative;
}

.user-profile-timeline::before {
    position: absolute;
    top: 44px;
    bottom: 10px;
    left: 18px;
    width: 1px;
    background: var(--border-color);
    content: '';
}

.user-profile-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 16px;
    padding: 0 0 29px;
}

.user-profile-timeline-marker {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--teal);
}

.user-profile-timeline-item.is-comment .user-profile-timeline-marker {
    color: var(--text-muted);
}

.user-profile-timeline-item.is-comment .user-profile-timeline-marker .icon-svg,
.user-profile-timeline-item.is-comment .user-profile-timeline-marker .material-symbols-sharp {
    width: 16px;
    height: 16px;
}

.user-profile-timeline-item.is-like .user-profile-timeline-marker {
    color: #d96276;
}

.user-profile-timeline-content {
    min-width: 0;
    padding: 5px 0 0;
}

.user-profile-timeline-month {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    padding: 0 0 0 54px;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 700;
}

.user-profile-timeline-meta,
.user-profile-timeline-comment {
    margin: 0;
}

.user-profile-timeline-meta {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.user-profile-timeline-comment> :first-child {
    margin-top: 8px;
}

.user-profile-timeline-comment> :last-child {
    margin-bottom: 0;
}

.user-profile-post-card,
.user-profile-compact-track {
    display: flex;
    align-items: flex-start;
    max-width: 100%;
    margin-top: 9px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    font-family: var(--sys);
    text-align: left;
}

.user-profile-post-card {
    align-items: stretch;
    gap: 18px;
    width: min(100%, 705px);
    padding: 16px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--teal) 10%, var(--bg-card));
}

.user-profile-compact-track {
    gap: 10px;
}

.user-profile-post-card img {
    flex: 0 0 138px;
    width: 138px;
    height: 138px;
}

.user-profile-compact-track img {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-xs);
}

.user-profile-post-card img,
.user-profile-compact-track img {
    object-fit: cover;
}

.user-profile-post-visual {
    position: relative;
    flex: 0 0 138px;
    width: 138px;
    height: 138px;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.user-profile-post-visual>img {
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.user-profile-post-play {
    border: 0;
    cursor: pointer;
}

.user-profile-post-card .play-overlay {
    opacity: 0;
    pointer-events: none;
}

.user-profile-post-visual:hover .play-overlay,
.user-profile-post-visual:focus-within .play-overlay {
    opacity: 1;
    pointer-events: auto;
}

.user-profile-post-visual:hover>img,
.user-profile-post-visual:focus-within>img {
    transform: scale(1.04);
    filter: brightness(0.75);
}

.user-profile-post-info {
    display: flex;
    flex: 1;
    align-items: stretch;
    min-width: 0;
    cursor: pointer;
}

.user-profile-post-card .user-profile-track-copy {
    gap: 5px;
}

.user-profile-post-card .user-profile-track-copy strong {
    font-size: 1.18rem;
    line-height: 1.2;
}

.user-profile-post-card .user-profile-track-copy small,
.user-profile-post-card .user-profile-track-copy em {
    margin-top: 0;
    font-size: 0.9rem;
    line-height: 1.3;
}

.user-profile-post-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.user-profile-post-links .yt-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--card-action-bg);
    color: var(--text-inverse);
    cursor: pointer;
    font-family: var(--sys);
    font-size: 0.75rem;
    text-decoration: none;
}

.user-profile-post-links .yt-btn:hover {
    background: var(--teal);
    color: var(--text-inverse);
}

.user-profile-track-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-self: stretch;
    justify-content: center;
    min-width: 0;
}

.user-profile-track-copy strong,
.user-profile-track-copy small,
.user-profile-track-copy em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-profile-track-copy strong {
    color: var(--text-main);
    font-weight: 700;
}

.user-profile-track-copy small,
.user-profile-track-copy em {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: normal;
}

.user-profile-post-card:hover .user-profile-track-copy strong,
.user-profile-post-card:focus-visible .user-profile-track-copy strong,
.user-profile-compact-track:hover .user-profile-track-copy strong,
.user-profile-compact-track:focus-visible .user-profile-track-copy strong {
    color: var(--teal);
}

.user-profile-timeline-comment {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.user-profile-message {
    padding: 14px 0 30px 54px;
    color: var(--text-muted);
    text-align: center;
}

.user-profile-loader {
    padding: 40px;
}

.user-profile-error {
    color: #E62117;
}

.user-profile-load-more {
    display: block;
    margin: 4px 0 0 54px;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--bg-search);
    color: var(--text-main);
    cursor: pointer;
    font-family: var(--sys);
    font-weight: 700;
}

.user-profile-load-more:disabled {
    cursor: wait;
    opacity: 0.7;
}
/* ==========================================================================
   PAGE INTROUVABLE (404)
   ========================================================================== */
.not-found-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 340px);
    padding: 24px 0;
}

.not-found {
    width: 100%;
    max-width: 640px;
    padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 56px);
    text-align: center;
}

.not-found-code {
    margin: 0;
    font-family: var(--sys);
    font-size: clamp(4rem, 13vw, 6.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.05em;
    color: var(--teal);
}

.not-found-title {
    margin: 12px 0 10px;
    font-family: var(--sys);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.not-found-text {
    max-width: 42ch;
    margin: 0 auto 30px;
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.6;
}

.not-found-action {
    text-decoration: none;
}

@media (max-width: 640px) {
    .not-found-wrap {
        min-height: calc(100vh - 300px);
    }

    .not-found {
        padding: 36px 22px;
    }
}

/* ─── NOTIFICATIONS ─── */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.notification-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--bg-search);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.notification-item.is-new {
    background: color-mix(in srgb, var(--teal) 11%, var(--bg-search));
}

.notification-item:hover {
    background: color-mix(in srgb, var(--teal) 7%, var(--bg-search));
}

.notification-item.is-new:hover {
    background: color-mix(in srgb, var(--teal) 15%, var(--bg-search));
}

.notification-item:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.notification-thumb-link {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.notification-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-content {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.notification-actor-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.notification-actor-link:hover .notification-actor-name,
.notification-actor-link:focus-visible .notification-actor-name {
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.notification-actor-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-avatar {
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--teal);
}

.notification-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-avatar .material-symbols-sharp {
    font-size: 1.05rem;
}

.notification-action {
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-family: var(--sys);
    font-size: 0.86rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-track-link {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-separator {
    flex: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1;
}

.notification-date-group {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.notification-track-link:hover,
.notification-track-link:focus-visible {
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.notification-date {
    flex: none;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.3;
    white-space: nowrap;
}

.notifications-empty,
.notifications-loading {
    display: block;
    padding: 24px 8px;
    color: var(--text-muted);
    font-family: var(--sys);
    font-size: 0.95rem;
    text-align: center;
}

.notifications-empty p {
    margin: 0 0 12px;
}

@media (max-width: 560px) {
    .notifications-list {
        gap: 14px;
    }

    .notification-item {
        gap: 12px;
        padding: 16px 18px;
    }

    .notification-thumb-link {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }

    .notification-content {
        display: block;
        line-height: 1.5;
        white-space: normal;
    }

    .notification-actor-link {
        display: inline-flex;
        gap: 0;
        vertical-align: middle;
        font-size: 0.86rem;
    }

    .notification-avatar {
        display: none;
    }

    .notification-action {
        display: inline;
        overflow: visible;
        font-size: 0.78rem;
        text-overflow: clip;
        white-space: normal;
    }

    .notification-track-link {
        display: inline;
        overflow: visible;
        overflow-wrap: anywhere;
        font-size: 0.8rem;
        text-overflow: clip;
        white-space: normal;
    }

    .notification-date-group {
        display: flex;
        margin-top: 2px;
        vertical-align: middle;
    }

    .notification-separator {
        display: none;
    }

    .notification-date {
        font-size: 0.8rem;
    }
}

/* =========================================================
   INCLUSION : _admin.css
   ========================================================= */

/* ==========================================================================
   ADMINISTRATION & DASHBOARD (_admin.css)
   ========================================================================== */

/* ─── 1. LAYOUT & STRUCTURE GLOBALE ─── */
.admin-view {
    overflow-x: auto;
    /* Permet aux tableaux de scroller horizontalement */
    max-width: 100%;
    /* Empêche le conteneur de déborder de l'écran */
}

/* L'accueil du dashboard ne contient pas de tableau : on laisse déborder les
   cartes pour ne pas rogner leur haut (le conteneur scrollable le faisait). */
#view-home.admin-view {
    overflow: visible;
}

.admin-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-actions-flex {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

/* ─── ÉCRAN MAINTENANCE ─── */
.maintenance-panel {
    margin-top: 30px;
}

.maintenance-panel {
    padding: 28px;
    background: var(--bg-search);
    border-radius: var(--radius-md);
}

.maintenance-actions-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.maintenance-actions-grid .maintenance-panel {
    height: 100%;
    margin-top: 0;
}

.maintenance-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.maintenance-panel-header {
    align-items: flex-start;
    margin-bottom: 14px;
}

.admin-section-kicker {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.maintenance-panel-title,
.maintenance-tool-title {
    margin: 0;
    color: var(--text-main);
    font-size: 1.25rem;
    line-height: 1.2;
}

.maintenance-panel-description,
.maintenance-tool-description {
    max-width: 760px;
    margin: 0 0 24px;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.admin-taxonomy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* Encart compact réutilisé par la gestion des genres et des labels.
   Reprend le look des tuiles des pages Genres/Labels publiques (nom à gauche,
   compteur puis flèche à droite), mais sans l'agrandissement au survol : la
   tuile garde exactement la même taille. Au survol (ou au focus clavier), la
   flèche laisse la place aux actions renommer/supprimer. */
.admin-taxonomy-card {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 18px 20px;
    background: var(--bg-search);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--sys);
    font-weight: 500;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.admin-taxonomy-card.has-thumb {
    padding: 12px 16px;
}

.admin-taxonomy-thumb {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: 50%;
    color: var(--text-muted);
}

.admin-taxonomy-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-taxonomy-thumb.is-placeholder .icon-svg {
    opacity: 0.5;
}

.admin-taxonomy-card:hover,
.admin-taxonomy-card:focus-within {
    background: var(--teal);
    color: var(--bg-site);
}

.admin-taxonomy-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

/* Sur fond teal, le nom reste lisible : pas de soulignement ni de teal sur teal. */
.admin-taxonomy-card:hover .admin-taxonomy-name,
.admin-taxonomy-card:focus-within .admin-taxonomy-name {
    color: inherit;
    text-decoration: none;
}

/* Compteur : badge identique aux tuiles publiques. */
.admin-taxonomy-card .nav-tile-count {
    margin-right: 0;
}

.admin-taxonomy-card:hover .nav-tile-count,
.admin-taxonomy-card:focus-within .nav-tile-count {
    background: var(--bg-search);
    color: var(--text-main);
    opacity: 0.72;
}

/* Flèche d'ouverture de la page du tag. Sa boîte fait la même hauteur que les
   boutons d'action (30px) afin que le survol ne modifie ni la taille de la tuile
   ni la hauteur de la ligne de grille. */
.admin-taxonomy-arrow {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 30px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.admin-taxonomy-arrow .icon-svg,
.admin-taxonomy-arrow .material-symbols-sharp {
    width: 1.2rem;
    height: 1.2rem;
}

.admin-taxonomy-card:hover .admin-taxonomy-arrow,
.admin-taxonomy-card:focus-within .admin-taxonomy-arrow {
    opacity: 1;
    color: var(--bg-site);
}

.admin-taxonomy-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.admin-taxonomy-actions .icon-btn {
    width: 30px;
    height: 30px;
    background: var(--bg-card);
}

/* Les actions ne se révèlent qu'au survol (ou au focus clavier) ; elles
   prennent alors la place de la flèche. Sur les appareils sans survol, elles
   restent affichées en permanence et la flèche est masquée. */
@media (hover: hover) {
    .admin-taxonomy-actions {
        display: none;
    }

    .admin-taxonomy-card:hover .admin-taxonomy-arrow,
    .admin-taxonomy-card:focus-within .admin-taxonomy-arrow {
        display: none;
    }

    .admin-taxonomy-card:hover .admin-taxonomy-actions,
    .admin-taxonomy-card:focus-within .admin-taxonomy-actions {
        display: flex;
    }
}

@media (hover: none) {
    .admin-taxonomy-arrow {
        display: none;
    }
}

.admin-taxonomy-empty {
    grid-column: 1 / -1;
    padding: 30px 15px;
    color: var(--text-muted);
    text-align: center;
}

/* ==========================================================================
   ARTISTES — FICHES WIKIPÉDIA
   ========================================================================== */

.admin-artists-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-artist-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--bg-search);
    border-radius: var(--radius-sm);
}

.admin-artist-thumb {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
}

.admin-artist-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-artist-thumb .material-symbols-sharp {
    font-size: 1.5rem;
}

.admin-artist-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.admin-artist-name {
    align-self: flex-start;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.admin-artist-name:hover {
    color: var(--teal);
}

.admin-artist-meta {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.admin-artist-bio {
    display: -webkit-box;
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.admin-artist-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.admin-artist-actions .icon-btn {
    width: 30px;
    height: 30px;
    background: var(--bg-card);
}

.admin-artists-filter {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-artists-filter .form-input {
    width: auto;
    min-width: 140px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.admin-artists-notice {
    margin-bottom: 18px;
    padding: 14px 18px;
    background: rgba(214, 158, 46, 0.14);
    border-left: 3px solid #d69e2e;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.88rem;
    line-height: 1.5;
}

.admin-artists-notice[hidden] {
    display: none;
}

.admin-artists-notice p {
    margin: 0;
}

.admin-artists-notice p + p {
    margin-top: 6px;
}

.admin-artists-notice.is-error {
    background: rgba(214, 46, 46, 0.12);
    border-left-color: #d62e2e;
}

/* La modale d'édition peut afficher un aperçu (photo + bio). Elle doit tenir
   dans la fenêtre : on la centre, on borne sa hauteur, on garde le titre et les
   boutons visibles et on fait défiler uniquement les champs. */
.dashboard-edit-modal-overlay {
    align-items: center;
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dashboard-edit-modal-overlay .dashboard-edit-modal {
    width: 100%;
    max-width: 450px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: hidden;
}

/* L'édition d'une fiche artiste contient un aperçu photo + bio : elle a besoin
   de plus d'air que les petites modales de taxonomie ou de blogroll. */
.dashboard-edit-modal-overlay .dashboard-edit-modal.is-wide {
    max-width: 820px;
}

.dashboard-edit-modal-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

.dashboard-edit-modal-body {
    display: grid;
    flex: 1 1 auto;
    gap: 16px;
    min-height: 0;
    padding-right: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}

/* Les champs sont regroupés dans une colonne : les modales larges peuvent
   placer l'aperçu à droite sans casser les petites modales à une colonne. */
.dashboard-edit-modal-fields {
    display: grid;
    gap: 16px;
    align-content: start;
    min-width: 0;
}

.dashboard-edit-modal.is-wide .dashboard-edit-modal-body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 24px;
}

.dashboard-edit-modal.is-wide .dashboard-edit-modal-preview {
    margin: 0;
}

.dashboard-edit-modal-textarea {
    min-height: 180px;
    line-height: 1.5;
    resize: vertical;
}

@media (max-width: 780px) {
    .dashboard-edit-modal.is-wide .dashboard-edit-modal-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

.dashboard-edit-modal-body::-webkit-scrollbar {
    width: 8px;
}

.dashboard-edit-modal-body::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
}

.dashboard-edit-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.dashboard-edit-modal-overlay .dashboard-edit-modal-actions {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid var(--bg-search);
}

@media (max-width: 600px) {
    .dashboard-edit-modal-overlay {
        padding: 12px;
    }

    .dashboard-edit-modal-overlay .dashboard-edit-modal {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 26px 20px;
    }
}

/* Aperçu de la fiche dans la modale partagée. */
.dashboard-edit-modal-preview {
    display: flex;
    gap: 14px;
    margin: 2px 0 18px;
    padding: 14px;
    background: var(--bg-search);
    border-radius: var(--radius-sm);
}

.dashboard-edit-modal-preview[hidden] {
    display: none;
}

.admin-edit-preview-image {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

.admin-edit-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-edit-preview-image .material-symbols-sharp {
    font-size: 2rem;
}

.admin-edit-preview-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.admin-edit-preview-body strong {
    font-size: 0.9rem;
}

.admin-edit-preview-bio {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.admin-edit-preview-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.admin-edit-preview-link {
    align-self: flex-start;
    color: var(--teal);
    font-size: 0.8rem;
    font-weight: 600;
}

.dashboard-edit-modal-form input.is-readonly {
    background: var(--bg-search);
    color: var(--text-muted);
    cursor: default;
}

.admin-artist-alias {
    color: var(--teal);
    font-size: 0.74rem;
    font-weight: 600;
}

/* Champ d'alias, protection et suggestions Wikipédia. */
.form-hint {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.form-hint[hidden] {
    display: none;
}

.dashboard-edit-modal-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-search);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.86rem;
    line-height: 1.4;
    cursor: pointer;
}

.dashboard-edit-modal-check[hidden] {
    display: none;
}

.dashboard-edit-modal-check input {
    flex: 0 0 auto;
    margin-top: 2px;
}

.dashboard-edit-modal-preview.is-search {
    display: block;
}

.dashboard-edit-modal-preview.is-search .admin-edit-preview-image {
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
}

.admin-artist-candidates {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.admin-artist-candidate-hint,
.admin-artist-candidate-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.admin-artist-candidate-empty.is-error {
    color: var(--red);
}

.admin-artist-candidate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--sys);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.admin-artist-candidate:hover,
.admin-artist-candidate:focus-visible {
    background: var(--player-hover-bg);
    border-color: var(--teal);
    outline: none;
}

.admin-artist-candidate.is-selected {
    border-color: var(--teal);
}

.admin-artist-candidate:disabled {
    opacity: 0.55;
    cursor: default;
}

.admin-artist-candidate strong {
    overflow: hidden;
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-artist-candidate-description {
    grid-column: 1;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.admin-artist-candidate-badge {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-artist-candidate-badge.is-high {
    background: rgba(46, 160, 120, 0.16);
    color: #2ea078;
}

.admin-artist-candidate-badge.is-medium {
    background: rgba(214, 158, 46, 0.16);
    color: #b47a12;
}

.admin-artist-candidate-badge.is-low {
    background: var(--bg-search);
    color: var(--text-muted);
}

/* Import par lot. */
.dashboard-artist-batch-overlay .admin-artist-batch-modal {
    max-width: 760px;
}

.admin-artist-batch-body {
    display: grid;
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
    max-height: 58vh;
    margin-top: 6px;
    padding-right: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}

.admin-artist-batch-list {
    display: grid;
    gap: 10px;
}

.admin-artist-batch-row {
    display: grid;
    gap: 8px;
    padding: 13px 14px;
    background: var(--bg-search);
    border-left: 3px solid transparent;
    border-radius: var(--radius-sm);
}

.admin-artist-batch-row.is-ready {
    border-left-color: #2ea078;
}

.admin-artist-batch-row.is-choice {
    border-left-color: #d69e2e;
}

.admin-artist-batch-row.is-error {
    border-left-color: var(--red);
}

.admin-artist-batch-row.is-imported {
    border-left-color: var(--teal);
}

.admin-artist-batch-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.admin-artist-batch-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-artist-batch-identity strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-artist-batch-identity span {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.admin-artist-batch-status {
    flex: 0 0 auto;
    padding: 3px 8px;
    background: var(--bg-card);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-artist-batch-status.is-ready {
    color: #2ea078;
}

.admin-artist-batch-status.is-choice {
    color: #b47a12;
}

.admin-artist-batch-status.is-error {
    color: var(--red);
}

.admin-artist-batch-status.is-imported {
    color: var(--teal);
}

.admin-artist-batch-select {
    width: 100%;
    min-width: 0;
}

.admin-artist-batch-message,
.admin-artist-batch-summary,
.admin-artist-batch-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.admin-artist-batch-summary {
    padding: 10px 12px;
    background: rgba(46, 160, 120, 0.1);
    border-radius: var(--radius-sm);
    color: var(--text-main);
}

.admin-artist-batch-message.is-success {
    color: #2ea078;
}

.admin-artist-batch-message.is-error {
    color: var(--red);
}

.admin-artist-batch-actions {
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    .admin-artists-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-artists-grid {
        grid-template-columns: 1fr;
    }

    .admin-track-toolbar {
        flex-wrap: wrap;
    }

    .admin-artists-filter {
        width: 100%;
        justify-content: space-between;
    }
}







.maintenance-status {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 18px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

.maintenance-status>.material-symbols-sharp {
    color: var(--teal);
    font-size: 2rem;
}

.maintenance-status.is-active>.material-symbols-sharp {
    color: var(--orange);
}

.maintenance-status-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.maintenance-status-copy strong {
    color: var(--text-main);
    font-size: 0.95rem;
}

.maintenance-status-copy span {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.maintenance-toggle {
    flex-shrink: 0;
    margin-left: auto;
    background: var(--text-main);
    color: var(--bg-card);
}

.maintenance-toggle:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--text-inverse);
}

.maintenance-toggle.is-active {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--text-inverse);
}

.maintenance-toggle.is-active:hover {
    background: var(--red);
    border-color: var(--red);
}

.youtube-check-panel {
    margin-bottom: 8px;
}

.maintenance-tool-description {
    margin: 8px 0 16px;
}

.youtube-check-controls .stats-data {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.youtube-check-controls {
    margin-top: 4px;
}

.youtube-check-progress {
    flex: 1;
}

.youtube-check-panel .stats-list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.youtube-check-panel .stats-list .maintenance-scan-message {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    box-sizing: border-box;
    padding: 10px 15px;
    border-radius: var(--radius-sm);
    background: var(--bg-search);
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
}

.youtube-check-panel .stats-list .maintenance-scan-message.is-ready {
    background: color-mix(in srgb, var(--teal) 10%, transparent);
    color: var(--text-main);
}

.youtube-check-panel .stats-list .maintenance-scan-message.is-success {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
}

.youtube-check-panel .stats-list .maintenance-scan-message.is-error {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
}

.youtube-check-controls .stats-percent {
    color: var(--teal);
    font-size: 1.7rem;
    font-weight: 700;
}

.youtube-check-controls .stats-count {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-left: 0;
}

.maintenance-tool-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}



/* ─── COMMENTAIRES ADMIN ─── */
.admin-comments-table .admin-comments-cell {
    padding-top: 8px;
    padding-bottom: 8px;
}

.admin-comment-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 0;
    font-size: 0.85rem;
    line-height: 1.2;
    color: var(--text-muted);
    font-weight: 400;
}

.admin-comment-meta strong,
.admin-comment-meta button {
    color: var(--text-muted);
    font-weight: 400;
    font-size: inherit;
}

.admin-comment-meta button {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--sys);
    cursor: pointer;
}

.admin-comment-reply-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--teal) 14%, transparent);
    color: var(--teal);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

.admin-comment-content {
    margin-top: 1px;
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.admin-comment-content p {
    margin: 0;
}

.admin-comment-content p+p {
    margin-top: 6px;
}

.admin-comments-table .icon-btn.icon-btn-delete {
    color: var(--text-muted);
}

.admin-comments-table .icon-btn.icon-btn-delete:hover {
    background: var(--player-hover-bg);
    color: var(--text-main);
}

.admin-members-table .icon-btn,
.admin-members-table .icon-btn.success,
.admin-members-table .icon-btn.danger,
.admin-members-table .icon-btn.icon-btn-delete {
    color: var(--text-muted);
}

.admin-members-table .icon-btn:hover,
.admin-members-table .icon-btn.success:hover,
.admin-members-table .icon-btn.danger:hover,
.admin-members-table .icon-btn.icon-btn-delete:hover {
    background: var(--player-hover-bg);
    color: var(--text-main);
}

.admin-member-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    text-decoration: none;
}

.admin-member-profile-link:hover strong,
.admin-member-profile-link:focus-visible strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.admin-member-profile-link strong {
    font-size: 1.05rem;
}

.admin-member-avatar {
    display: block;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.admin-member-avatar-fallback {
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--bg-search);
    color: var(--text-muted);
    font-size: 20px;
}

.admin-member-banned {
    margin-left: 8px;
    vertical-align: middle;
}

.admin-team-select {
    width: auto;
    min-width: 84px;
    padding: 7px 30px 7px 12px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* ─── PROFIL ─── */
.profile-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.profile-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

.profile-card {
    height: 100%;
    padding: 28px;
    background: var(--bg-search);
    border-radius: var(--radius-md);
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.profile-card-title {
    margin: 0;
    color: var(--text-main);
    font-size: 1.2rem;
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.profile-account-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.profile-avatar-field {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.profile-avatar-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    overflow: hidden;
    flex: 0 0 72px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--teal);
}

.profile-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-preview .material-symbols-sharp,
.profile-avatar-preview .icon-svg {
    width: 70%;
    height: 70%;
    font-size: 3.1rem;
}

.profile-avatar-controls {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 8px;
}

/* Le champ d'URL de l'avatar reste sur fond blanc dans les deux thèmes.
   Texte et placeholder sont assombris pour rester lisibles sur ce fond. */
#profileAvatarUrl {
    background: #ffffff;
    color: #1f2933;
}

#profileAvatarUrl::placeholder {
    color: #6b7280;
    opacity: 1;
}

.profile-account-fields .profile-field {
    min-width: 0;
    margin-bottom: 0;
}

.profile-field label,
.profile-field-label {
    display: flex;
    align-items: center;
    min-height: 18px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
}

.profile-field .form-input {
    margin: 0;
    background: var(--bg-card);
}

.profile-email {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.92rem;
}

.profile-email .material-symbols-sharp {
    color: var(--teal);
}

.profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    grid-column: 1 / -1;
    margin-top: -2px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.profile-theme-field {
    margin-bottom: 0;
}

.profile-theme-switch {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.profile-theme-option {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    cursor: pointer;
}

.profile-theme-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Les options reprennent le look des boutons (.btn) du tableau de bord :
   bordures, rayon et survol identiques. L'option active prend l'apparence du
   bouton principal. */
.profile-theme-option-body {
    width: 100%;
}

.profile-theme-option:has(input:checked) .profile-theme-option-body {
    background: var(--text-main);
    border-color: var(--text-main);
    color: var(--bg-card);
}

.profile-theme-option:has(input:focus-visible) .profile-theme-option-body {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.profile-account-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.profile-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--sys);
    font-size: 0.8rem;
    cursor: pointer;
}

.profile-delete-btn:hover {
    color: var(--red);
}

.profile-delete-btn .material-symbols-sharp {
    font-size: 1rem;
}

.admin-track-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.admin-track-toolbar .home-search-wrapper {
    flex: 1;
    margin: 0;
}

.admin-track-status-switch {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 9px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.admin-track-status-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-track-switch-control {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: var(--border-color);
    transition: background-color 0.2s ease;
}

.admin-track-switch-control::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-card);
    content: "";
    transition: transform 0.2s ease;
}

.admin-track-status-switch input:checked+.admin-track-switch-control {
    background: var(--teal);
}

.admin-track-status-switch input:checked+.admin-track-switch-control::after {
    transform: translateX(14px);
}





/* ─── 2. AUTHENTIFICATION & UTILISATEUR ─── */
.auth-box {
    background: var(--bg-card);
    padding: 40px;
    border: 1px solid var(--border-color);
}

.auth-box-center {
    text-align: center;
    max-width: 600px;
    margin: 40px auto 0;
}

.auth-box-banned {
    border-color: var(--red);
}

.auth-box-banned h2 {
    color: var(--red);
    margin-top: 0;
}

.dash-auth-logout {
    color: var(--navy);
    text-decoration: none;
}

/* ─── 3. ACCUEIL DE L'ESPACE MEMBRE ─── */
/* Hiérarchie : les fonctions personnelles d'abord, les outils ensuite. */

.dash-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #60a5fa, #38bdf8);
    color: #07111f;
    font-family: var(--sys);
    font-size: 1.5rem;
    font-weight: 800;
}

.dash-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── Cartes « Mon espace » ─── */
.dash-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.dash-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 160px;
    padding: 22px;
    overflow: hidden;
    background-color: var(--bg-search);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-main);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.dash-card:hover {
    /* Flat design : pas de bordure ni de déplacement, juste un fond très
       légèrement teinté. La teinte suit les variables du thème. */
    border-color: transparent;
    background-color: var(--bg-search);
    background-color: color-mix(in srgb, var(--bg-search) 92%, var(--teal) 8%);
}

.dash-profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-bottom: 8px;
}

.dash-profile-username {
    min-width: 0;
    padding-right: 18px;
    overflow: hidden;
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 1rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: rgba(96, 165, 250, 0.12);
    color: var(--teal);
}

.dash-card-icon .material-symbols-sharp,
.dash-card-icon .icon-svg {
    font-size: 1.25rem;
}

.dash-card-title {
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 1.15rem;
    font-weight: 700;
}

.dash-card-meta {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.dash-card-arrow {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--text-muted);
    transition: color 0.2s ease, transform 0.2s ease;
}

.dash-card-arrow .material-symbols-sharp,
.dash-card-arrow .icon-svg {
    font-size: 1rem;
}

.dash-card:hover .dash-card-arrow {
    color: var(--teal);
    transform: translateX(3px);
}

/* Cartes secondaires : tuiles horizontales, plus discrètes et plus basses. */
.dash-card--compact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 68px;
    padding: 12px 16px;
    background-color: var(--dash-compact-bg);
}

.dash-card--compact:hover {
    background-color: color-mix(in srgb, var(--dash-compact-bg) 92%, var(--teal) 8%);
}

.dash-card--compact .dash-card-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
    color: var(--text-muted);
}

.dash-card--compact .dash-card-icon .material-symbols-sharp,
.dash-card--compact .dash-card-icon .icon-svg {
    font-size: 1.05rem;
}

.dash-card--compact .dash-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-right: 18px;
    font-size: 0.98rem;
}

.dash-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--radius-pill);
    background: var(--bg-search);
    color: var(--text-muted);
    font-family: var(--sys);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.dash-card-count.is-alert {
    background: var(--red);
    color: #fff;
}

.dash-card--compact .dash-card-arrow {
    top: 14px;
    right: 14px;
}

.dash-avatar--small {
    width: 42px;
    height: 42px;
    font-size: 1rem;
}

/* ─── Action de publication ─── */
.dash-publish {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 18px;
    padding: 24px 26px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--bg-search);
}

.dash-publish h2 {
    margin: 3px 0 0;
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}

.dash-publish p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.dash-publish-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.dash-publish .btn {
    white-space: nowrap;
}

.dashboard-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    color: var(--text-muted);
    font-family: var(--sys);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s;
}

.dashboard-back:hover {
    color: var(--teal);
}

.dashboard-back .material-symbols-sharp {
    font-size: 1.05rem;
}

/* ─── 4. FORMULAIRES & CHAMPS ─── */
.admin-form-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin-top: 20px;
}

.admin-entry-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    margin-top: 26px;
}

/* Les sections ont disparu : chaque champ porte son icône dans le libellé. */
.admin-entry-form .form-row>label {
    display: flex;
    align-items: center;
    gap: 7px;
}

.admin-entry-form .form-row>label .material-symbols-sharp {
    flex: none;
    color: var(--teal);
    font-size: 1.1rem;
}

/* Libellé intégré au champ, comme un bouton non cliquable collé à l'entrée. */
.admin-field-combo {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 47px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-search);
}

.admin-field-combo:focus-within {
    box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.2);
}

.admin-field-prefix {
    display: inline-flex;
    flex: 0 0 124px;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: default;
}

.admin-field-prefix .material-symbols-sharp,
.admin-field-prefix .icon-svg {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--teal);
    font-size: 1.1rem;
}

.admin-field-combo .form-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    border-radius: 0;
    background: transparent;
    padding-left: 12px;
}

.admin-field-combo .form-input:focus {
    box-shadow: none;
}

.admin-field-combo .form-input-pills-wrapper {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 47px;
    border-radius: 0;
    background: transparent;
}

.admin-field-combo .form-input-pills-wrapper:focus-within {
    box-shadow: none;
}

.admin-field-combo-textarea .admin-field-prefix {
    align-items: flex-start;
    padding-top: 14px;
}

.admin-field-combo textarea.form-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 220px;
    border-radius: 0;
    background: transparent;
}

/* Dropdown de radio : même zone que les autres champs, chevron à droite. */
.admin-mood-select-wrap {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
}

.admin-mood-select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 38px 0 12px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.admin-mood-select:focus,
.admin-mood-select:focus-visible {
    box-shadow: none;
}

.admin-mood-chevron {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: var(--teal);
    font-size: 1.25rem;
    pointer-events: none;
}


.admin-entry-form .form-row.full {
    grid-column: 1 / -1;
}

.admin-entry-form .admin-artwork-field .admin-artwork-preview {
    margin-bottom: 10px;
}

.mood-cooldown {
    margin: 9px 0 0;
    color: var(--text-muted);
    font-family: var(--sys);
    font-size: 0.82rem;
    line-height: 1.45;
}

.mood-cooldown.is-blocked {
    color: var(--orange);
}

.admin-form-section {
    display: grid;
    grid-template-columns: minmax(150px, 0.55fr) repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
    padding: 24px 0;
}

.admin-form-section-intro {
    padding-top: 4px;
}

.admin-form-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    grid-column: 1;
    align-self: start;
}

.admin-form-section-heading h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 1.1rem;
}

.admin-form-section-heading>.material-symbols-sharp {
    color: var(--teal);
    font-size: 1.45rem;
}

.admin-form-fields {
    display: grid;
    grid-column: 2 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

.admin-form-fields .form-row {
    min-width: 0;
}

.admin-form-section-description {
    grid-template-columns: minmax(150px, 0.55fr) repeat(2, minmax(0, 1fr));
}

.admin-form-section-description .admin-form-fields {
    grid-column: 2 / -1;
    grid-template-columns: 1fr;
}

.admin-entry-form .admin-submit-row {
    grid-column: 1 / -1;
    margin-top: 4px;
}



.form-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.form-row>label {
    flex: none;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    padding-top: 0;
}

.form-row>.field-container {
    flex: 1;
    display: block;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.admin-duplicate-warning {
    margin-top: 8px;
    padding: 9px 11px;
    border-left: 3px solid var(--red);
    background: color-mix(in srgb, var(--red) 18%, var(--bg-card));
    color: var(--text-main);
    font-size: 0.85rem;
    line-height: 1.45;
}

.admin-duplicate-warning-line {
    margin: 0;
}

.admin-duplicate-warning-line + .admin-duplicate-warning-line {
    margin-top: 5px;
}

.admin-duplicate-warning a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.admin-duplicate-warning a:hover,
.admin-duplicate-warning a:focus-visible {
    color: var(--red);
}

.search-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-search);
    color: var(--text-main);
    font-family: var(--sys);
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.search-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 15%, transparent);
}

/* Tags Pilules Formulaire Admin */
.form-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.form-pills-container:not(:empty) {
    margin-bottom: 4px;
}

.filter-pill {
    background: var(--bg-search);
    color: var(--text-main);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-pill:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--text-inverse);
}

.filter-pill .material-symbols-sharp {
    font-size: 1rem;
    opacity: 0.6;
}

/* Suggestions Admin Dropdown */
.suggestions-box {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.admin-submit-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 20px;
}

/* ─── 5. TABLEAUX ADMIN ─── */
.admin-table-container {
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    border: none;
}

.admin-table th {
    padding: 16px 12px;
    background-color: var(--bg-search);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
}

.admin-table td {
    padding: 6px 12px;
    border: none;
    border-bottom: 1px solid var(--bg-search);
    background-color: transparent;
    font-size: 0.95rem;
    vertical-align: middle;
    transition: background-color 0.2s ease;
}

.td-center {
    text-align: center;
}

/* Les favoris reprennent la grille de cartes de l'accueil dans le dashboard. */
.admin-favoris-grid {
    margin-top: 24px;
}

.thumb-cell img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* ─── CELLULES, LIENS ET LIGNES DES TABLEAUX DU BACK-OFFICE ───
   Ces règles remplacent les attributs style que le JavaScript générait dans
   les tableaux admin (favoris, morceaux, propositions, membres, commentaires). */
.thumb-cell {
    width: 60px;
}

/* Boutons « lien » qui ouvrent l'article depuis une ligne de tableau. */
.dashboard-track-open,
.admin-comment-track-open {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.admin-link-title {
    text-align: left;
    font-family: var(--sys);
    font-size: 1rem;
    color: var(--text-main);
}

.admin-link-subtitle {
    font-family: var(--sys);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
}

.cell-genres {
    font-size: 0.85rem;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-muted-sm {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.cell-date {
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.cell-middle {
    vertical-align: middle;
}

.td-empty {
    padding: 20px;
}

.admin-track-mood {
    margin: 0;
    padding: 2px 8px;
    font-size: 0.85rem;
    height: 30px;
    width: 100px;
}

.admin-actions-end {
    justify-content: flex-end;
    align-items: center;
}

/* Ligne de commentaire dépliable sous une proposition. */
.row-comment {
    background: var(--bg-card);
}

.row-comment td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.comment-author {
    font-size: 0.95rem;
    color: var(--text-main);
}

.link-teal {
    color: var(--teal);
    text-decoration: underline;
    font-size: 0.9rem;
}

/* Lignes du scan des liens morts. */
.scan-row-main {
    display: flex;
    align-items: center;
}

.scan-row-title {
    font-weight: 600;
    margin-left: 10px;
}

.scan-row-artist {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-left: 10px;
}

/* Titre d'une ligne de morceau du back-office. */
.admin-title-set {
    color: var(--teal);
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.admin-title-sep {
    margin: 0 6px;
    color: var(--text-muted);
}

.admin-table tbody tr:hover td {
    background-color: var(--player-hover-bg);
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

/* --- BOUTONS D'ACTION (Petits formats type Maintenance/Scan) --- */
.admin-action-btn {
    background: var(--navy);
    color: var(--bg-card);
    border: none;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: var(--sys);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    height: auto;
    line-height: normal;
}

.admin-action-btn:hover {
    background: var(--teal);
    color: var(--text-inverse);
}

/* Variante secondaire (Transparente) */
.admin-action-btn.outline {
    background: var(--bg-search);
    color: var(--text-main);
    border: none;
}

.admin-action-btn.outline:hover {
    background: var(--teal);
    color: var(--text-inverse);
}

/* ─── 6. GESTION DE LA BLOGROLL (FORMULAIRE & TABLEAU) ─── */
.blogroll-form-card {
    background: var(--bg-search);
    padding: 24px 28px;
    margin-bottom: 35px;
    border: none;
    border-radius: var(--radius-md);
}

.blogroll-form-header {
    margin-bottom: 20px;
}

.blogroll-form-title {
    margin: 0 0 6px 0;
    color: var(--navy);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.blogroll-form-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.blogroll-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: end;
}

.blogroll-form-grid .form-row {
    margin: 0;
}

.blogroll-form-grid .form-input {
    background: var(--bg-site);
    border: none;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    color: var(--text-main);
    transition: box-shadow 0.2s ease;
}

.blogroll-form-grid .form-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--teal);
}

.blogroll-actions-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

html.theme-light .blogroll-actions-row {
    border-top-color: rgba(0, 0, 0, 0.08);
}

.blogroll-actions-row .btn {
    padding: 9px 22px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.blogroll-actions-row .btn-outline {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

.blogroll-actions-row .btn-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-main);
}

html.theme-light .blogroll-actions-row .btn-outline {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-muted);
}

html.theme-light .blogroll-actions-row .btn-outline:hover {
    background: rgba(0, 0, 0, 0.12);
    color: var(--text-main);
}

.blogroll-actions-row .btn-primary {
    background: var(--text-main);
    color: var(--bg-card);
}

.blogroll-actions-row .btn-primary:hover {
    background: var(--teal);
    color: var(--text-inverse);
}

.blogroll-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

/* Éléments de la liste Blogroll : même style de tuile que les Genres/Labels
   du dashboard (lui-même calqué sur les pages publiques). Le nom est un simple
   texte ; seul l'icône de flèche ouvre le lien externe. Les actions
   édition/suppression apparaissent au survol. */
.blogroll-link-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blogroll-link-arrow {
    color: inherit;
    text-decoration: none;
}

/* Contrairement aux Genres/Labels, la flèche Blogroll est le lien externe :
   elle doit rester visible au survol (et sur les écrans tactiles) pour rester
   cliquable. */
@media (hover: hover) {
    .blogroll-link-card:hover .blogroll-link-arrow,
    .blogroll-link-card:focus-within .blogroll-link-arrow {
        display: inline-flex;
    }
}

@media (hover: none) {
    .blogroll-link-card .blogroll-link-arrow {
        display: inline-flex;
    }
}

.blogroll-empty-card {
    grid-column: 1 / -1;
    padding: 30px 15px;
    color: var(--text-muted);
    text-align: center;
}

/* ─── ÉDITEUR DE PAGES ─── */
.admin-page-editor {
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) minmax(0, 2.25fr);
    gap: 30px;
    align-items: start;
}

/* L'attribut HTML hidden doit primer sur le display:flex de la carte :
   l'éditeur Blog prend ainsi exactement la place de l'éditeur de page. */
.admin-page-editor > [hidden] {
    display: none !important;
}

.admin-page-selector-panel,
.admin-page-editor-card {
    padding: 26px;
    background: var(--bg-search);
    border-radius: var(--radius-md);
}

.admin-page-selector-panel p {
    margin: 10px 0 26px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.admin-page-panel-title {
    margin: 0;
    color: var(--text-main);
    font-size: 1.2rem;
}

.admin-page-select-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-page-selector-panel .form-input {
    margin: 0;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

.admin-page-editor-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 20px;
}

.admin-page-editor-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.admin-page-content-input {
    width: 100%;
    min-height: 430px;
    box-sizing: border-box;
    padding: 18px;
    resize: vertical;
    background: var(--bg-card);
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: monospace;
    font-size: 0.92rem;
    line-height: 1.6;
}

.admin-page-content-input:focus {
    outline: 2px solid var(--teal);
    outline-offset: -2px;
}

.admin-page-editor-card .admin-submit-row {
    margin-top: 0;
}

.admin-blog-intro {
    margin: -4px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.admin-blog-post-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Remplace l'ancien style inline « background:white » du champ Titre. */
.admin-blog-post-form .form-input {
    background: white;
}

.admin-blog-post-content {
    min-height: 240px;
}

.admin-blog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-blog-posts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.admin-blog-posts-header h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 1rem;
}

.admin-blog-posts-list {
    display: grid;
    gap: 10px;
}

.admin-blog-post-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

.admin-blog-post-title {
    margin: 0 0 4px;
    color: var(--text-main);
    font-size: 0.95rem;
}

.admin-blog-post-date,
.admin-blog-posts-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.admin-blog-post-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

/* =========================================================
   INCLUSION : _responsive.css
   ========================================================= */

/* ==========================================================================
   RESPONSIVE & MEDIA QUERIES (_responsive.css)
   ========================================================================== */

/* ─── PALIER 1200px ─── */
@media (max-width: 1200px) {
    .music-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 25px;
    }

}

@media (max-width: 768px) {

    .site-wrapper {
        margin-top: 0;
        padding: 24px 15px 100px 15px;
    }

    /* HEADER MOBILE */
    .fh-top-bar {
        height: 55px;
        padding: 0 15px;
        justify-content: space-between;
    }

    /* Apparition du bouton Accueil, avec le nom du site à côté de l'icône. */
    .mobile-home-btn {
        display: flex;
        width: auto;
        padding: 0 12px;
        gap: 8px;
        border-radius: 999px;
        color: var(--text-main);
    }

    .mobile-home-label {
        color: inherit;
        font-family: var(--sys);
        font-size: 0.95rem;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Pas de fond clair collant au tap : le libellé reste lisible. */
    .mobile-home-btn:hover,
    .mobile-home-btn:active,
    .mobile-home-btn:focus,
    .mobile-home-btn.active {
        background-color: transparent;
        color: var(--text-main);
    }

    .mobile-dropdown-btn {
        display: flex;
        position: static;
        transform: none;
    }

    /* La radio active reste identifiable, y compris sur mobile. */
    .radio-btn-text {
        display: block;
        margin-right: 5px;
        overflow: hidden;
        font-size: 0.8rem;
        letter-spacing: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fh-nav-btn.radio-btn-main {
        width: auto;
        max-width: 132px;
        min-width: 40px;
        padding: 0 10px;
    }

    /* Navigation mobile : une surface dédiée qui reprend les tuiles du site. */
    html:has(.fh-nav-left.mobile-active),
    body:has(.fh-nav-left.mobile-active) {
        overflow: hidden;
    }

    .fh-top-fullwidth.mobile-menu-open {
        background-color: var(--header-top-bg);
    }

    .fh-top-fullwidth.mobile-menu-open .mobile-home-btn,
    .fh-top-fullwidth.mobile-menu-open #topNavActions> :not(.mobile-dropdown-btn) {
        visibility: hidden;
    }

    .fh-top-fullwidth.mobile-menu-open .mobile-dropdown-btn {
        position: relative;
        z-index: 1002;
        background-color: color-mix(in srgb, var(--text-main) 14%, var(--header-top-bg));
        color: var(--text-main);
    }

    .fh-nav-left {
        display: none;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        padding: 84px 20px 32px;
        background-color: var(--header-top-bg);
        border: 0;
        box-shadow: none;
        z-index: 1001;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        align-content: center;
        gap: 6px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .fh-nav-left.mobile-active {
        display: flex;
    }

    .fh-nav-left::before {
        content: 'Musiclogs';
        width: 100%;
        margin: 0 0 10px;
        color: var(--text-main);
        font-family: var(--sys);
        font-size: clamp(1.45rem, 6vw, 2rem);
        font-weight: 650;
        letter-spacing: -0.04em;
    }

    .fh-text-link {
        width: 100%;
        min-height: 52px;
        padding: 10px 14px;
        justify-content: flex-start;
        border: 0;
        border-radius: var(--radius-md);
        background: var(--bg-search);
        color: var(--text-main);
        font-size: 0.95rem;
        font-weight: 550;
        line-height: 1.2;
        flex: 0 0 auto;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .fh-text-link::after {
        display: none;
    }

    .fh-text-link.active {
        background-color: color-mix(in srgb, var(--teal) 14%, var(--bg-search));
        color: var(--teal);
        font-weight: 650;
    }

    .fh-text-link:hover,
    .fh-text-link:focus-visible {
        background-color: color-mix(in srgb, var(--teal) 9%, var(--bg-search));
        color: var(--teal);
        transform: translateY(-1px);
    }

    .fh-text-link:focus-visible {
        outline: 2px solid var(--teal);
        outline-offset: 2px;
    }

    /* Le premier lien devient « Accueil » dans la modale mobile. */
    .fh-nav-left .brand-link {
        width: 100%;
        justify-content: flex-start;
        font-size: 0.95rem;
    }

    .fh-nav-left .fh-icon-link {
        gap: 10px;
    }

    .explorer-label {
        display: none;
    }

    .fh-nav-btn.explorer-btn {
        width: 40px;
        padding: 0;
    }

    .fh-nav-left .brand-link span:last-child {
        font-size: 0;
    }

    .fh-nav-left .brand-link span:last-child::before {
        content: 'Accueil';
        font-size: 0.95rem;
    }

    /* LECTEUR AUDIO MOBILE SIMPLIFIÉ */
    .bottom-player-wrapper {
        position: sticky;
        top: 55px;
        bottom: auto;
        margin-bottom: 25px;
    }
    .bottom-player-inner {
        padding: 0 10px 12px 10px;
        /* Le padding de 12px en bas crée physiquement l'espace pour la jauge */
        height: 60px;
        /* Légèrement plus haut pour englober les gros boutons */
        flex-direction: row;
        /* Force tout sur une seule ligne */
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .fh-player-left {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 150px);
        /* Laisse suffisamment de place pour scroller les boutons */
        padding-right: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        height: 100%;
    }

    .fh-player-info {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        /* Aligne le titre et le temps verticalement */
        justify-content: flex-start;
        gap: 6px;
    }

    /* La jauge en bas, beaucoup plus épaisse pour le tactile (12px) et sans
       coins arrondis : elle touche les deux bords de la fenêtre. */
    .fh-player-progress {
        position: absolute;
        bottom: 0;
        top: auto;
        left: 0;
        width: 100%;
        height: 12px;
        border-radius: 0;
        margin: 0;
        flex: none;
    }

    /* Contrôles alignés à droite avec défilement tactile caché */
    .fh-player-controls {
        flex: 0 0 auto;
        width: auto;
        height: 100%;
        display: flex;
        align-items: center;
        /* Centre le bloc de boutons */
        justify-content: flex-end;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .fh-player-controls::-webkit-scrollbar {
        display: none;
    }

    #standardControls {
        align-items: center;
        /* Garantit le centrage parfait des boutons à l'intérieur */
        height: 100%;
    }

    /* Boutons agrandis pour le tactile */
    .fh-ctrl-btn {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: flex;
        align-items: center;
        /* Centre l'icône dans le bouton */
        justify-content: center;
    }
}

/* ─── PALIER 850px ─── */
@media (max-width: 850px) {
    .music-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .user-profile-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .article-header {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .article-visual-column {
        width: 100%;
        max-width: min(500px, 100%);
        margin: 0 auto;
    }

    .article-thumb-container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .article-info {
        width: 100%;
    }

    .article-title-large {
        font-size: clamp(1.9rem, 6vw, 2.5rem);
    }

    .article-title-row {
        order: 1;
        margin: 0;
    }

    /* Le titre et les flèches passent au-dessus du visuel. Les enfants de
       .article-info deviennent des items directs de .article-header, ce qui
       permet de les réordonner sans toucher au HTML. */
    .article-info {
        display: contents;
    }

    .article-visual-column {
        order: 2;
    }

    .article-meta-table {
        order: 3;
    }

    /* Les lignes de séparation des métadonnées occupent toute la largeur. */
    #articleMetaBody {
        width: 100%;
        min-width: 0;
    }

    .article-info .article-body {
        order: 4;
        margin-top: 0;
    }

    .article-byline {
        order: 5;
        margin-top: 0;
    }

    .article-likers {
        order: 6;
    }

    /* Masquer le compteur de temps ET le point de séparation sur mobile */
    .fh-player-time,
    .fh-player-separator {
        display: none;
    }

    .article-buttons-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Ajustement du bouton Quitter la Radio sur mobile */
    #radioControls .fh-ctrl-btn {
        padding: 0 12px;
        /* Réduit l'espace interne */
        margin-right: 5px;
        /* L'éloigne du bord droit de l'écran */
        white-space: nowrap;
        /* Empêche le texte de se casser sur deux lignes */
    }
}

/* ─── PALIER 600px ─── */
@media (max-width: 600px) {
    .country-map {
        padding: 18px 16px 14px;
    }

    .country-map-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .article-header {
        gap: 20px;
    }

    .article-actions-compact {
        gap: 8px;
    }

    .article-actions-compact .btn.btn-ghost {
        min-height: 44px;
        padding: 8px 10px;
        font-size: 0.84rem;
        gap: 6px;
    }

    .user-profile-post-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .user-profile-post-info {
        width: 100%;
    }

    .bouton-user-label {
        display: none;
    }

    .fh-nav-btn.bouton-user {
        width: 40px;
        max-width: none;
        padding: 0;
    }
}

/* ─── PALIER 560px ─── */
@media (max-width: 560px) {
    .music-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .user-profile-layout {
        padding-top: 10px;
    }

    .user-profile-timeline-item {
        gap: 13px;
    }

    .article-buttons-row {
        grid-template-columns: 1fr;
    }

    .article-title-row {
        gap: 10px;
    }

    #articleMetaBody > tr {
        align-items: flex-start;
        gap: 12px;
        padding: 10px 0;
    }

    #articleMetaBody .meta-label {
        width: 92px;
    }
}

/* ─── PALIER 420px ─── */
@media (max-width: 420px) {
    .fh-top-bar {
        padding: 0 8px;
    }

    .fh-nav-actions {
        gap: 0;
    }

    .fh-nav-btn.radio-btn-main {
        max-width: 118px;
        padding: 0 8px;
    }

    /* Le chevron du bouton Radio se resserre pour ne pas élargir la barre. */
    .radio-split .radio-btn-arrow {
        width: 26px;
    }

    /* Le nom du site doit rester lisible sans élargir le header. */
    .mobile-home-btn {
        padding: 0 8px;
        gap: 6px;
    }

    /* Le bouton notifications garde la même hauteur que ses voisins, avec une
       largeur juste suffisante pour ne pas repousser le menu hors du header. */
    .fh-nav-btn.notifications-btn {
        min-width: 40px;
        padding: 0;
    }

    .mobile-home-label {
        font-size: 0.88rem;
    }

    #shuffleBtn {
        display: none;
    }
}

/* ─── PALIER TRÈS ÉTROIT (< 340px) ─── */
@media (max-width: 340px) {
    /* Plus assez de place pour le libellé : on ne garde que l'icône. */
    .mobile-home-label {
        display: none;
    }
}

/* Media queries moved from component stylesheets. */

/* _header.css */
@media (min-width: 769px) {
    .fh-nav-left {
        gap: 4px;
    }

    /* NOUVEAU : Affichage du texte et adaptation du bouton sur ordinateur */
    .radio-btn-text {
        display: block;
    }

    .fh-nav-btn.radio-btn-main {
        width: auto;
        padding: 0 15px;
    }

    .fh-text-link {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 12px;
        background-color: transparent;
        font-weight: 400;
        box-sizing: border-box;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .fh-text-link:hover {
        color: #2D3748;
        background-color: var(--header-nav-active-bg);
        border-radius: 999px;
    }

    .fh-text-link:focus-visible {
        outline: 2px solid var(--teal);
        outline-offset: 2px;
    }

    /* L'onglet actif se détache juste assez du fond du header. */
    .fh-text-link.active {
        color: #2D3748;
        background-color: var(--header-nav-active-bg);
        border-radius: 999px;
    }
}

/* _player.css + _pages.css */
@media (max-width: 1100px) {
    #standardControls,
    #radioControls {
        height: calc(100% - 0px);
    }

    .grid-4-cols {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-5-cols {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* _pages.css */
@media (max-width: 900px) {
    /* Sous 900 px, la carte et son encart ne tiennent plus côte à côte : la
       grille des pays suffit, le planisphère est un plaisir de grand écran. */
    .pays-top {
        display: none;
    }
}

/* _pages.css */
@media (max-width: 850px) {
    .grid-4-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-5-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* _pages.css */
@media (max-width: 600px) {
    .grid-4-cols {
        grid-template-columns: 1fr;
    }

    .grid-5-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .tag-page-grid {
        grid-template-columns: 1fr;
    }
}

/* _admin.css */
@media (max-width: 1100px) {
    .admin-taxonomy-grid,
    .blogroll-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* _admin.css */
@media (max-width: 850px) {
    .admin-taxonomy-grid,
    .blogroll-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* _admin.css */
@media (max-width: 600px) {
    .admin-taxonomy-grid,
    .blogroll-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* _admin.css */
@media (max-width: 900px) {
    .dash-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* _admin.css */
@media (max-width: 900px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-account-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-card {
        padding: 22px 18px;
    }

    .profile-actions {
        grid-column: auto;
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .profile-actions .btn {
        width: 100%;
    }

    .profile-account-footer {
        justify-content: flex-start;
    }

}

@media (max-width: 560px) {
    .profile-account-fields {
        grid-template-columns: 1fr;
    }

    .profile-avatar-field {
        align-items: flex-start;
    }

    .profile-theme-switch {
        grid-template-columns: 1fr;
    }
}

/* _admin.css */
@media (max-width: 1180px) {
    .admin-entry-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 799px) {
    .admin-entry-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        margin-top: 20px;
    }

    .admin-entry-form .form-row.full {
        grid-column: auto;
    }

    .admin-field-prefix {
        flex-basis: 118px;
        padding: 0 9px;
        font-size: 0.8rem;
    }

    .admin-form-section {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .admin-form-fields,
    .admin-form-section-description .admin-form-fields {
        display: grid;
        grid-column: auto;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .admin-form-fields .form-row,
    .admin-form-section-description .form-row {
        grid-column: auto;
        width: 100%;
    }

    .admin-form-section-description {
        grid-template-columns: 1fr;
    }
}

/* _admin.css */
@media (max-width: 768px) {
    .blogroll-form-card {
        padding: 20px 16px;
    }

    .blogroll-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .blogroll-actions-row {
        flex-direction: column-reverse;
    }

    .blogroll-actions-row .btn {
        width: 100%;
    }

    .admin-page-editor {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .admin-blog-post-item {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Palette de commande (Cmd+K) */
    #searchModalOverlay {
        padding-top: 8vh;
        padding-left: 12px;
        padding-right: 12px;
    }

    #searchModalOverlay .cmdk {
        width: 100%;
    }
}

/* ======================================================================
   FIN DE CASCADE — plus de couche « flat design »
   L’ancienne couche qui forçait `border-radius: 0` sur les boutons, champs,
   tuiles et pastilles a été retirée : les rayons proviennent désormais de
   l’échelle `--radius-*` définie dans `_variables.css`.
   ====================================================================== */

/* The shuffle control follows the same hover treatment in every state. */
body .fh-ctrl-btn.shuffle-active:hover {
    background: var(--teal);
    color: var(--text-inverse);
}

/* Header : pastilles uniformes y compris au survol. */
body .fh-nav-actions .fh-nav-btn {
    border-radius: 999px;
}

/* ─── MOBILE : LECTEUR FIXÉ EN BAS ───
   Sur téléphone, le lecteur passe du haut (sous le header) au bas de l'écran.
   Le padding bas du site laisse la place nécessaire pour ne pas masquer la fin
   du contenu ni le pied de page. */
@media (max-width: 700px) {
    /* ─── Maintenance et bandeau admin ─── */
    .site-maintenance-banner-inner {
        padding-right: 20px;
        padding-left: 20px;
    }

    .maintenance-panel {
        padding: 22px 18px;
    }

    .maintenance-actions-grid {
        grid-template-columns: 1fr;
    }

    .maintenance-status {
        align-items: flex-start;
        flex-direction: column;
    }

    .maintenance-toggle {
        width: 100%;
        margin-left: 0;
    }

    /* ─── Sommaire du dashboard (cartes et outils) ─── */
    /* Une seule colonne : les cartes et les groupes d'outils s'empilent. */
    .dash-cards {
        grid-template-columns: 1fr;
    }

    .dash-publish {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .dash-publish-actions {
        flex-wrap: wrap;
    }

    /* ─── Tableau des morceaux ─── */
    .admin-track-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    /* ─── Blog éditorial empilé ─── */
    .static-page-blog-post {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    /* ─── LECTEUR MOBILE : BARRE COMPACTE ─── */
    .bottom-player-wrapper {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .site-wrapper {
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    }

    /* Une seule ligne : visuel, titre, puis précédent / lecture / suivant et
       le bouton qui déplie le lecteur. La barre de progression occupe une
       bande de 14 px au-dessus, pour rester facile à toucher. */
    .bottom-player-inner {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto auto;
        grid-template-areas: 'thumb title controls expand';
        align-items: center;
        column-gap: 0;
        height: auto;
        min-height: 78px;
        padding: 14px 10px 0;
    }

    .fh-player-left {
        display: contents;
    }

    .fh-player-thumb {
        grid-area: thumb;
        width: 40px;
        height: 40px;
        align-self: center;
    }

    .fh-player-info {
        grid-area: title;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
        height: auto;
        margin-left: 10px;
        gap: 0;
        text-align: left;
    }

    .fh-player-title {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        font-size: 0.92rem;
        text-align: left;
    }

    /* La barre compacte ne garde que l'essentiel : l'artiste et le temps
       appartiennent à la version plein écran. */
    .fh-player-artist,
    .fh-player-separator,
    .fh-player-time-wrapper {
        display: none;
    }

    /* Le JS conserve ce masquage pour les barres étroites ; en plein écran,
       `player-time.js` retire la classe pour laisser le temps visible. */
    .fh-player-info.is-time-hidden .fh-player-separator,
    .fh-player-info.is-time-hidden .fh-player-time-wrapper {
        display: none;
    }

    .fh-player-progress {
        position: absolute;
        top: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 14px;
        border-radius: 0;
    }

    .fh-player-controls {
        grid-area: controls;
        width: auto;
        height: 64px;
        margin-left: 10px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        overflow: visible;
        padding-top: 0;
    }

    #standardControls {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 64px;
    }

    /* Barre repliée : uniquement précédent, lecture/pause, suivant et déplier. */
    .bottom-player-wrapper:not(.is-expanded) #shuffleBtn,
    .bottom-player-wrapper:not(.is-expanded) #playlistToggleBtn,
    .bottom-player-wrapper:not(.is-expanded) #favoriteBtn,
    .bottom-player-wrapper:not(.is-expanded) #radioTracklistBtn {
        display: none;
    }

    .fh-ctrl-btn {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    #bottomPlayer:not(.is-expanded) #playPauseBtn {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    #bottomPlayer:not(.is-expanded) #playPauseBtn .icon-svg {
        width: 28px;
        height: 28px;
    }

    .bottom-player-wrapper .player-expand-btn {
        grid-area: expand;
        justify-self: end;
        display: flex;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        color: var(--player-fg-muted);
    }

    /* ─── LECTEUR MOBILE : PLEIN ÉCRAN ─── */
    #bottomPlayer.is-expanded {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        z-index: 2000;
        padding: 0;
        overflow: hidden;
        background: var(--player-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    body.player-expanded {
        overflow: hidden;
    }

    #bottomPlayer.is-expanded .bottom-player-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: calc(32px + env(safe-area-inset-top, 0px)) 12px calc(84px + env(safe-area-inset-bottom, 0px));
        gap: 0;
        overflow-y: auto;
        /* Pas de contexte d'empilement ici : la barre du bas (z-index 2) doit
           couvrir la file, et le bouton fixe (z-index 3) rester au-dessus. */
        z-index: auto;
    }

    #bottomPlayer.is-expanded .fh-player-left,
    #bottomPlayer.is-expanded .fh-player-info {
        display: contents;
    }

    #bottomPlayer.is-expanded .fh-player-thumb {
        order: 1;
        width: min(72vw, 320px);
        height: min(72vw, 320px);
        width: min(72vw, 38dvh, 320px);
        height: min(72vw, 38dvh, 320px);
        border-radius: var(--radius-lg, 18px);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
        margin-bottom: 26px;
    }

    #bottomPlayer.is-expanded .fh-player-title {
        order: 2;
        flex: 0 0 auto;
        width: 100%;
        max-width: 520px;
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
        overflow: visible;
    }

    #bottomPlayer.is-expanded .fh-player-artist {
        order: 3;
        display: block;
        width: 100%;
        max-width: 520px;
        margin-top: 4px;
        color: var(--player-fg-muted);
        font-size: 0.95rem;
        text-align: center;
        white-space: normal;
    }

    #bottomPlayer.is-expanded .fh-player-progress {
        order: 5;
        position: relative;
        width: calc(100% - 24px);
        max-width: 480px;
        height: 24px;
        margin: 16px 0 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    /* La zone tactile fait 24 px de haut ; le trait visible reste fin. */
    #bottomPlayer.is-expanded .fh-player-progress::before {
        content: '';
        position: absolute;
        top: 9px;
        right: 0;
        left: 0;
        height: 6px;
        border-radius: 999px;
        background: var(--player-track);
    }

    #bottomPlayer.is-expanded .fh-player-progress:hover {
        background: transparent;
    }

    #bottomPlayer.is-expanded .fh-progress-fill {
        top: 9px;
        height: 6px;
        border-radius: 999px;
    }

    /* Boule de lecture : elle suit l'extrémité droite du remplissage. */
    #bottomPlayer.is-expanded .fh-progress-fill::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -7px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--teal);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        transform: translateY(-50%);
        transition: transform 0.15s ease;
    }

    #bottomPlayer.is-expanded #progressContainer.is-seeking .fh-progress-fill::after {
        transform: translateY(-50%) scale(1.18);
    }

    #bottomPlayer.is-expanded .fh-player-time-wrapper {
        order: 6;
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 480px;
        margin-top: 8px;
        font-size: 0.8rem;
    }

    #bottomPlayer.is-expanded .fh-player-time {
        display: block;
    }

    #bottomPlayer.is-expanded .fh-player-separator {
        display: none;
    }

    #bottomPlayer.is-expanded .fh-player-controls {
        order: 7;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 100%;
        max-width: none;
        height: auto;
        margin-top: 22px;
        overflow: visible;
    }

    #bottomPlayer.is-expanded .fh-ctrl-btn {
        margin-left: 0;
    }

    /* Le bloc de boutons est centré sur toute la largeur de la fenêtre. */
    #bottomPlayer.is-expanded #standardControls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(4px, 1.8vw, 10px);
        width: 100%;
        height: auto;
    }

    #bottomPlayer.is-expanded #favoriteBtn {
        display: none;
    }

    #bottomPlayer.is-expanded #shuffleBtn {
        display: flex;
    }

    #bottomPlayer.is-expanded #playlistToggleBtn {
        display: none;
    }

    #bottomPlayer.is-expanded .player-like-btn {
        display: flex;
        width: clamp(44px, 13vw, 54px);
        height: clamp(44px, 13vw, 54px);
        flex: 0 0 clamp(44px, 13vw, 54px);
        color: var(--player-fg-muted);
    }

    #bottomPlayer.is-expanded .player-like-btn .icon-svg {
        width: 24px;
        height: 24px;
    }

    #bottomPlayer.is-expanded .player-expand-btn {
        position: fixed;
        top: auto;
        right: 10px;
        bottom: calc(11px + env(safe-area-inset-bottom, 0px));
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        z-index: 3;
    }

    /* La file à venir défile avec le contenu, sous les contrôles. */
    #bottomPlayer.is-expanded .player-expanded-queue {
        order: 8;
        display: block;
        width: 100%;
        max-width: none;
        margin-top: 24px;
    }

    #bottomPlayer.is-expanded .player-expanded-queue-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }

    #bottomPlayer.is-expanded .player-expanded-queue-title {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    #bottomPlayer.is-expanded .player-expanded-queue-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 18px;
        padding: 0 6px;
        border-radius: var(--radius-pill);
        background: var(--player-hover-bg);
        color: var(--player-fg-muted);
        font-family: var(--sys);
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1;
    }

    #bottomPlayer.is-expanded .player-expanded-queue-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
    }

    #bottomPlayer.is-expanded .player-expanded-queue h2 {
        margin: 0;
        color: var(--player-fg-muted);
        font-family: var(--sys);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    #bottomPlayer.is-expanded .player-expanded-queue-action {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 10px;
        border: 1px solid color-mix(in srgb, var(--player-fg-muted) 30%, transparent);
        border-radius: var(--radius-pill);
        background: transparent;
        color: var(--player-fg-muted);
        font-family: var(--sys);
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        white-space: nowrap;
    }

    #bottomPlayer.is-expanded .player-expanded-queue-action:hover,
    #bottomPlayer.is-expanded .player-expanded-queue-action:focus {
        border-color: var(--player-fg-muted);
        color: var(--player-fg);
    }

    #bottomPlayer.is-expanded .player-expanded-queue-action .icon-svg {
        width: 14px;
        height: 14px;
    }

    /* En plein écran, le titre et l'artiste s'empilent pour ne pas tronquer
       inutilement les noms dans une colonne étroite. */
    #bottomPlayer.is-expanded #expandedQueueList .queue-item-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }

    #bottomPlayer.is-expanded #expandedQueueList .queue-item-title,
    #bottomPlayer.is-expanded #expandedQueueList .queue-item-artist {
        width: 100%;
        max-width: 100%;
        flex: 0 1 auto;
    }

    #bottomPlayer.is-expanded #expandedQueueList .queue-item {
        padding: 10px 0;
    }

    #bottomPlayer.is-expanded #expandedQueueList:empty::after {
        content: 'Aucun morceau à suivre.';
        display: block;
        padding: 12px 0;
        color: var(--player-fg-muted);
        font-size: 0.85rem;
        text-align: center;
    }

    /* Zone basse fixe : elle masque le contenu qui défile dessous et garde le
       bouton plier/déplier au même endroit qu'en mode compact. */
    #bottomPlayer.is-expanded .player-expanded-bottom {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid color-mix(in srgb, var(--border-color) 32%, transparent);
        background: var(--player-bg);
        z-index: 2;
    }

    #bottomPlayer.is-expanded #shuffleBtn {
        width: clamp(44px, 13vw, 54px);
        height: clamp(44px, 13vw, 54px);
        flex: 0 0 clamp(44px, 13vw, 54px);
    }

    #bottomPlayer.is-expanded #radioTracklistBtn {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    #bottomPlayer.is-expanded #prevTrackBtn,
    #bottomPlayer.is-expanded #nextTrackBtn {
        width: clamp(48px, 15vw, 58px);
        height: clamp(48px, 15vw, 58px);
        flex: 0 0 clamp(48px, 15vw, 58px);
    }

    #bottomPlayer.is-expanded #playPauseBtn {
        width: clamp(56px, 17vw, 68px);
        height: clamp(56px, 17vw, 68px);
        flex: 0 0 clamp(56px, 17vw, 68px);
        background: var(--teal);
        color: var(--text-inverse);
    }

    #bottomPlayer.is-expanded #shuffleBtn .icon-svg {
        width: 24px;
        height: 24px;
    }

    #bottomPlayer.is-expanded #prevTrackBtn .icon-svg,
    #bottomPlayer.is-expanded #nextTrackBtn .icon-svg {
        width: 28px;
        height: 28px;
    }

    #bottomPlayer.is-expanded #playPauseBtn .icon-svg {
        width: 34px;
        height: 34px;
    }
}


/* ─── HEADER MOBILE : RADIO ICÔNE ET ALÉATOIRE DANS LA BARRE ─── */
@media (max-width: 768px) {
    .radio-btn-text {
        display: none;
    }

    .radio-split .fh-nav-btn.radio-btn-main {
        padding: 0 10px;
        justify-content: center;
    }

    .nav-random-link {
        display: none;
    }

    .mobile-random-btn {
        display: flex;
    }
}

/* Très petits écrans : le libellé de la marque laisse la place aux actions
   du header, notamment au compteur de notifications. */
@media (max-width: 380px) {
    .mobile-home-label {
        display: none;
    }

    .mobile-home-btn {
        width: 40px;
        padding: 0;
        justify-content: center;
    }
}