/*
 * jg-player.css
 * JG Audio Player — Styles player bar, full, miniplayer,
 * panneaux projet/pochette/à propos, contact, CTA, responsive
 * @package JG Audio Player
 */


/* ── Section lignes 200–469 de jg-player-front.php ── */
#jg-player {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 10001;
    background: #f9f7f4; border-top: 2px solid #000;
    box-shadow: 0 -8px 40px rgba(80,122,102,0.15);
    display: flex; flex-direction: column;
    transition: transform var(--jg-player-ms, 400ms) var(--jg-anim-easing, cubic-bezier(0.4,0,0.2,1)), border-top-color 0.5s ease;
}
#jg-player.jg-player-hidden { transform: translateY(100%); }

#jg-player-toggle {
    width: 100%; height: 28px;
    position: relative;
    background: #f0eeeb;
    border: none; border-bottom: 1px solid rgba(0,0,0,0.12);
    cursor: pointer; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
#jg-player-toggle:hover { background: #e8e5e0; }
#jg-toggle-track {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    width: 80px; height: 20px;
    transition: opacity 0.2s;
}
/* Label texte flanquant la flèche */
#jg-toggle-track::before,
#jg-toggle-track::after {
    content: '';
    display: block; height: 1px; width: 24px;
    background: rgba(0,0,0,0.35);
}
#jg-player-toggle svg {
    opacity: 0.6;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
#jg-player-toggle:hover svg { opacity: 1; }

#jg-player-layout { display: grid; grid-template-columns: 400px 280px 200px 1fr 52px; grid-template-rows: minmax(0, 1fr); height: 400px; overflow: hidden; }
#jg-player.minimized #jg-player-layout { height: 0; }

/* ── MINIPLAYER ── */
#jg-miniplayer {
    display: none;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    height: 60px;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}
#jg-player.minimized #jg-miniplayer { display: flex; }
#jg-player.minimized #jg-player-layout { display: none; }
#jg-player.minimized { height: 88px; }

/* Pochette : toute la hauteur de la barre */
#jg-mini-cover {
    width: 60px; height: 100%;
    object-fit: cover; flex-shrink: 0;
    background: #e0ddd8; display: block;
}
/* Info : titre + artiste, largeur contenue */
#jg-mini-info {
    flex: 0 0 160px; min-width: 0;
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 14px;
    border-right: 1px solid rgba(0,0,0,0.07);
}
#jg-mini-title {
    font-size: 12px; font-weight: 600; color: #1a1a1a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
#jg-mini-artist {
    font-size: 11px; color: #888;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
/* Barre de progression : prend tout l'espace restant, centrée verticalement */
#jg-mini-progress-bar {
    flex: 1; min-width: 0;
    height: 20px;
    background: rgba(0,0,0,0.12);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    align-self: center;
    margin: 0 24px;
}
#jg-mini-progress-fill {
    position: absolute; top: 0; left: 0;
    height: 100%; width: 0%;
    background: #000;
    border-radius: 2px;
    transition: width 0.1s linear, background 0.5s ease;
}
/* Contrôles : prev / play / next seulement */
#jg-mini-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 0 12px;
    border-left: 1px solid rgba(0,0,0,0.07);
}
#jg-mini-controls button {
    background: none; border: none; cursor: pointer; color: #000;
    padding: 4px;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s, transform 0.15s;
}
#jg-mini-controls button:hover { transform: scale(1.1); }
#jg-mini-play {
    background: #000 !important; color: #fff !important;
    border-radius: 50% !important;
    width: 36px !important; height: 36px !important;
    transition: background 0.5s ease !important;
}
/* Bouton déployer mini-player (desktop) : désactivé */
#jg-mini-expand { display: none !important; }
/* Bouton expand mobile : caché sur desktop, visible à ≤600px */
#jg-mobile-expand { display: none; background: none; border: none; cursor: pointer; color: #666; padding: 4px; width: 36px; height: 36px; align-items: center; justify-content: center; transition: color 0.2s; flex-shrink: 0; }
/* S8c : bouton volume mobile — caché par défaut, visible ≤600px via media query */
#jg-mini-vol-btn { display: none; background: none; border: none; cursor: pointer; color: #666; padding: 4px; width: 36px; height: 36px; align-items: center; justify-content: center; transition: color 0.2s; flex-shrink: 0; }
#jg-mini-vol-btn:hover { color: #000; }
#jg-mini-vol-btn.active { color: #000; }
/* Volume */
#jg-mini-volume {
    width: 80px; flex-shrink: 0;
    accent-color: #000;
    cursor: pointer; margin: 0 16px;
    -webkit-appearance: none; appearance: none;
    height: 3px; border-radius: 2px;
    background: rgba(0,0,0,0.12);
    outline: none;
    align-self: center;
}
#jg-mini-volume::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%; background: #000; cursor: pointer;
}

#jg-col-cover { position: relative; width: 400px; height: 400px; overflow: hidden; flex-shrink: 0; }
#jg-player-cover { width: 400px; height: 400px; object-fit: cover; display: block; background: #e0ddd8; }
#jg-cover-pulse { position: absolute; inset: 0; pointer-events: none; }
#jg-player.playing #jg-cover-pulse { animation: coverPulse 3s ease-in-out infinite; }
@keyframes coverPulse {
    0%,100% { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
    50%      { box-shadow: inset 0 0 40px 0 rgba(0,0,0,0.1); }
}

#jg-col-info { display: flex; flex-direction: column; justify-content: space-between; padding: 28px 24px; border-right: 1px solid rgba(0,0,0,0.08); min-height: 0; overflow: hidden; }
#jg-info-top { display: flex; flex-direction: column; gap: 6px; }
#jg-player-album { font-size: 15px; font-weight: 800; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.2; }
#jg-player-title { font-size: 12px; color: #444; line-height: 1.4; }
#jg-player-artist { font-size: 11px; color: #888; font-style: italic; }
#jg-player-year { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #000; transition: color 0.5s ease; }
/* S11 : bouton Acheter retiré du player (déplacé dans le volet projet) */
#jg-player-shop { display: none !important; }

#jg-col-playlist { display: flex; flex-direction: column; border-right: 1px solid rgba(0,0,0,0.08); overflow: hidden; min-height: 0; }
#jg-playlist-items { list-style: none; margin: 0; padding: 0 0 48px; overflow-y: auto; flex: 1; }
#jg-playlist-items::-webkit-scrollbar { width: 4px; }
#jg-playlist-items::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
#jg-playlist-items li { padding: 9px 20px; font-size: 11px; color: #444; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.04); display: flex; align-items: center; gap: 8px; transition: background 0.15s, color 0.15s; overflow: hidden; }
#jg-playlist-items li:hover { background: rgba(0,0,0,0.04); color: #000; }
#jg-playlist-items li.active { background: rgba(0,0,0,0.06); color: #000; font-weight: 600; }
#jg-playlist-items li.active::before { content: '▶'; font-size: 8px; flex-shrink: 0; }
.jg-pl-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.jg-pl-remove { flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: rgba(0,0,0); opacity: 0; pointer-events: none; transition: color 0.15s, opacity 0.15s; line-height: 1; }
#jg-playlist-items li:hover .jg-pl-remove { opacity: 1; pointer-events: auto; }
.jg-pl-remove:hover { color: rgba(0,0,0,0.75); }

#jg-col-player { display: flex; flex-direction: column; padding: 24px 28px 20px; gap: 12px; overflow: hidden; box-sizing: border-box; min-height: 0; }
#jg-waveform-wrap { position: relative; flex: 1; min-height: 0; cursor: pointer; overflow: hidden; background: rgba(0,0,0,0.03); transition: background 0.5s ease; }
#jg-controls-row { flex-shrink: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; }
#jg-waveform-static { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.35; }
#jg-progress-overlay { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: rgba(0,0,0,0.05); pointer-events: none; border-right: 2px solid rgba(0,0,0,0.3); transition: width 0.1s linear; }

#jg-controls-center { display: flex; align-items: center; gap: 16px; }
#jg-time-current, #jg-time-total { font-size: 11px; color: #aaa; font-variant-numeric: tabular-nums; min-width: 36px; }
#jg-time-total { text-align: right; }
#jg-controls-center button { background: none; border: none; cursor: pointer; color: #000; padding: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.2s, transform 0.15s; }
#jg-controls-center button:hover { transform: scale(1.1); }
#jg-play { background: #000 !important; color: #fff !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important; transition: background 0.5s ease, transform 0.15s, box-shadow 0.5s ease !important; }
#jg-play:hover { transform: scale(1.05) !important; }
/* Volume vertical */
#jg-col-volume {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 16px 0;
    border-left: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.01);
    height: 100%;
    box-sizing: border-box;
}
#jg-col-volume svg { color: #bbb; flex-shrink: 0; }
#jg-volume {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    -webkit-appearance: slider-vertical;
    width: 6px;
    height: calc(100% - 60px);
    min-height: 80px;
    accent-color: #000; cursor: pointer;
    flex-shrink: 0;
}

/* Playlist header avec contrôles */
#jg-playlist-header { padding: 16px 20px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #000; border-bottom: 1px solid rgba(0,0,0,0.06); flex-shrink: 0; transition: color 0.5s ease; display: flex; align-items: center; justify-content: space-between; }
#jg-playlist-controls { display: flex; align-items: center; gap: 6px; }
#jg-repeat {
    background: none; border: none; cursor: pointer;
    color: rgba(0,0,0,0.25); padding: 3px; display: flex; align-items: center;
    transition: color 0.2s, background 0.2s;
}
#jg-repeat:hover { color: rgba(0,0,0,0.6); }
#jg-repeat[data-mode="all"] { color: #000; }
#jg-repeat[data-mode="one"] { color: #000; background: rgba(0,0,0,0.07); }

/* Drag & drop playlist */
#jg-playlist-items li { cursor: grab; }
#jg-playlist-items li.dragging { opacity: 0.4; cursor: grabbing; }
#jg-playlist-items li.drag-over { border-top: 2px solid #000; }

/* Espace pour le player fixe — padding sur le body entier, footer inclus */
body { padding-bottom: 402px !important; }
body:has(#jg-player.minimized) { padding-bottom: 90px !important; }
body:has(#jg-player.jg-player-hidden) { padding-bottom: 0 !important; }
.wp-site-blocks { padding-bottom: 0 !important; }

/* Bouton toggle masqué avant le premier lancement */
#jg-player.jg-player-hidden #jg-player-toggle { display: none; }

/* Footer reste dans le flux normal, en dessous du contenu, au-dessus du padding player */
footer.wp-block-template-part { position: relative; z-index: 0; margin-bottom: 0; }

/* ── HEADER VISUALIZER ── */
#jg-header-visualizer {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    /* Clipping via CSS sans forcer overflow:hidden sur le parent */
    clip-path: inset(0);
}
#jg-header-visualizer.active { opacity: 1; }
/* Header sticky passe au-dessus du volet À propos */
/* .uagb-position__sticky = Spectra (legacy) | .jg-header = natif A2 */
.uagb-position__sticky,
.jg-header {
    z-index: 10000 !important;
}
/* Contenu du header passe au dessus du canvas */

.jg-header > *,
.jg-header .wp-block-site-title,
.jg-header .wp-block-navigation,
.jg-header nav,
.jg-header a,
.jg-header button { position: relative; z-index: 1; }

/* ── Section lignes 548–576 de jg-player-front.php ── */
/* ── PANNEAU PROJET ── */
/* ── Volet pochette (slide depuis la gauche) ── */
#jg-cover-panel {
    position: fixed;
    left: 0;
    /* S11 : décale vers le haut de la moitié de la hauteur du player pour garder
       un espace entre le bas de la pochette et le haut du player.
       --jg-player-height est injecté en temps réel par jg-player-ui.js. */
    top: calc(50% - var(--jg-player-height, 0px) / 2);
    transform: translateY(-50%) translateX(-100%);
    height: 50vh;
    width: 50vh; /* carré = hauteur × 1 */
    z-index: 10000;
    transition: transform var(--jg-panel-ms, 450ms) var(--jg-anim-easing, cubic-bezier(0.4,0,0.2,1));
    overflow: hidden;
    pointer-events: none;
    box-shadow: 8px 0 40px rgba(0,0,0,0.25);
}
#jg-cover-panel.open {
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}
#jg-cover-panel-img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    background: #111;
}

/* Curseur pointer sur la pochette du player quand un projet est lié */
#jg-player-cover.has-project { cursor: pointer; }
#jg-player-cover.has-project:hover { opacity: 0.88; transition: opacity 0.2s; }


/* ── Section lignes 577–731 de jg-player-front.php ── */

#jg-project-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(680px, 100vw);
    background: #f9f7f4;
    z-index: 10000;
    transform: translateX(100%);
    transition: transform var(--jg-panel-ms, 450ms) var(--jg-anim-easing, cubic-bezier(0.4,0,0.2,1));
    overflow-y: auto;
    box-shadow: -8px 0 40px rgba(0,0,0,0.18);
    display: flex; flex-direction: column;
}
#jg-project-panel.open { transform: translateX(0); }
#jg-project-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    z-index: 9999;
    pointer-events: none;
    transition: background 0.45s ease;
}
#jg-project-overlay.open {
    background: rgba(0,0,0,0.45);
    pointer-events: all;
}
#jg-project-close {
    position: sticky; top: 0;
    display: flex; justify-content: flex-end;
    padding: 16px 20px 0;
    background: #f9f7f4;
    z-index: 2;
    flex-shrink: 0;
}
#jg-project-close button {
    background: none; border: none;
    cursor: pointer; font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    color: #aaa; padding: 0; transition: color 0.2s;
}
#jg-project-close button:hover { color: #000; }
#jg-project-hero {
    width: 100%; aspect-ratio: 16/7; object-fit: cover;
    display: block; flex-shrink: 0;
}
#jg-project-body { padding: 32px 36px 48px; flex: 1; }

/* En-tête volet projet */
#jg-project-title {
    font-size: 2rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 4px;
}
#jg-project-subtitle {
    font-size: 0.85rem; font-weight: 500; color: #888;
    text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 16px;
}
#jg-project-actions {
    display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 28px;
}

/* Contenu éditeur */
#jg-project-content { font-size: 0.95rem; line-height: 1.75; color: #333; margin-bottom: 36px; }
#jg-project-content p,
#jg-project-content ul,
#jg-project-content ol { margin: 0 0 1em; }
#jg-project-content ul { padding-left: 1.25em; list-style: disc; }
#jg-project-content ol { padding-left: 1.25em; list-style: decimal; }
#jg-project-content li { margin-bottom: 0.3em; }
#jg-project-content h2 { font-size: 1.15rem; font-weight: 700; line-height: 1.25; margin: 1.6em 0 0.5em; color: #111; }
#jg-project-content h3 { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 1.4em 0 0.4em; color: #444; }
#jg-project-content strong { font-weight: 700; }
#jg-project-content em { font-style: italic; }
#jg-project-content a { color: #000; text-decoration: underline; }
#jg-project-content a:hover { opacity: 0.6; }
#jg-project-content p:last-child,
#jg-project-content ul:last-child,
#jg-project-content ol:last-child { margin-bottom: 0; }

/* Vidéos et embeds responsive dans le volet projet */
#jg-project-content .wp-block-embed__wrapper {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    margin: 0 0 1em;
}
#jg-project-content .wp-block-embed__wrapper iframe,
#jg-project-content .wp-block-embed__wrapper video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}
#jg-project-content iframe,
#jg-project-content video {
    max-width: 100%;
}

/* Galerie */
#jg-project-gallery {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    margin-bottom: 36px;
}
#jg-project-gallery img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    cursor: pointer; transition: opacity 0.2s;
}
#jg-project-gallery img:hover { opacity: 0.85; }

/* Liste albums */
#jg-project-albums {
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 24px;
}
#jg-project-albums h3 {
    font-size: 20px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.12em; color: #000; margin: 0 0 16px;
    padding-bottom: 0; border-bottom: none;
}
.jg-proj-album {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
}
.jg-proj-album img {
    width: 80px; height: 80px; object-fit: cover; flex-shrink: 0;
    background: #e0ddd8; cursor: pointer; transition: opacity 0.2s;
    border-width: 1px;border-style: solid;border-color: #d8d0d0;
}
}
.jg-proj-album img:hover { opacity: 0.8; }
.jg-proj-album-current { background: transparent; border-radius: 0px; }
.jg-proj-album-current .jg-proj-album-title { font-weight: 800; }
.jg-proj-album-info { flex: 1; min-width: 0; }
.jg-proj-album-title { font-size: 12px; font-weight: 700; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg-proj-album-year  { font-size: 11px; color: #888; margin-top: 2px; }
.jg-proj-album-actions { display: flex; gap: 8px; flex-shrink: 0; }
.jg-proj-btn-play {
    display: flex; align-items: center; gap: 5px;
    background: #000; color: #fff; border: none; cursor: pointer;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; padding: 6px 12px;
    transition: background 0.2s;
}
.jg-proj-btn-play:hover { background: #333; }
.jg-proj-btn-shop {
    display: flex; align-items: center;
    border: 1.5px solid #000; color: #000; background: none; cursor: pointer;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; padding: 6px 12px;
    text-decoration: none; transition: background 0.2s, color 0.2s;
}
.jg-proj-btn-shop:hover { background: #000; color: #fff; }

/* Loading spinner */
#jg-project-loading {
    display: none; flex-direction: column; align-items: center;
    justify-content: center; flex: 1; padding: 60px 0; gap: 16px;
    color: #aaa; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
}
#jg-project-loading.visible { display: flex; }
#jg-project-spinner {
    width: 28px; height: 28px; border: 2px solid rgba(0,0,0,0.1);
    border-top-color: #000; border-radius: 50%;
    animation: jgSpin 0.8s linear infinite;
}
@keyframes jgSpin { to { transform: rotate(360deg); } }

/* Bouton "Voir le projet" sur flip card back */
.jg-btn-project {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; color: rgba(255,255,255,0.75);
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; padding: 6px 14px;
    border: 1.5px solid rgba(255,255,255,0.35); cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s; flex-shrink: 0;
}
.jg-btn-project:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.7); }
.jg-flip-card-back .jg-card-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; align-self: end; padding-top: 6px; padding-bottom: 2px; }

/* ── Section lignes 733–813 de jg-player-front.php ── */
@media (max-width: 1200px) {
    #jg-player-layout { grid-template-columns: 240px 260px 160px 1fr 52px; grid-template-rows: minmax(0, 1fr); height: 240px; }
    #jg-col-cover, #jg-player-cover { width: 240px; height: 240px; }
    #jg-player-album { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body { padding-bottom: 242px !important; } .wp-site-blocks { padding-bottom: 0 !important; }
}
@media (max-width: 900px) {
    #jg-col-playlist { display: none; }
    #jg-player-layout { grid-template-columns: 160px 220px 1fr 52px; grid-template-rows: minmax(0, 1fr); height: 160px; }
    #jg-col-cover, #jg-player-cover { width: 160px; height: 160px; }
    #jg-col-player { padding: 12px 16px 10px; gap: 8px; }
    #jg-controls-row { height: 52px; }
    #jg-player-album { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body { padding-bottom: 162px !important; } .wp-site-blocks { padding-bottom: 0 !important; }
}
@media (max-width: 600px) {
    #jg-col-info, #jg-col-playlist, #jg-col-volume { display: none; }
    #jg-player-layout { grid-template-columns: 80px 1fr; height: 80px; }
    #jg-col-cover, #jg-player-cover { width: 80px; height: 80px; }
    #jg-waveform-wrap { display: none; }
    #jg-player-toggle { display: none; }
    body { padding-bottom: 82px !important; } .wp-site-blocks { padding-bottom: 0 !important; }

    /* ── M3 : Player mobile plein écran ──────────────────────────────────────
       Le player passe en full-screen (100svh) avec un layout colonne :
       [toggle/fermer 28px] [cover adaptive] [info] [playlist flex-1] [controls]
    ────────────────────────────────────────────────────────────────────────── */
    #jg-player.mobile-expanded {
        height: 100vh; height: 100svh; /* plein écran, svh évite la barre d'adresse */
    }
    /* Réaffiche le toggle comme bouton "fermer / réduire" en haut */
    #jg-player.mobile-expanded #jg-player-toggle {
        display: flex;
        background: #e8e5e0; /* légèrement plus marqué pour indiquer la zone de fermeture */
    }
    /* Layout colonne : remplit exactement la hauteur restante sous le toggle */
    #jg-player.mobile-expanded #jg-player-layout {
        display: flex; flex-direction: column;
        height: calc(100% - 28px); /* 100% player - toggle bar */
        overflow: hidden; /* pas de scroll global, chaque zone gère le sien */
    }
    /* Cover : hauteur adaptive — grande sans écraser les contrôles */
    #jg-player.mobile-expanded #jg-col-cover { width: 100%; height: min(260px, 40svh); flex-shrink: 0; }
    #jg-player.mobile-expanded #jg-player-cover { width: 100%; height: 100%; object-fit: cover; }
    /* Info : compact, non scrollable */
    #jg-player.mobile-expanded #jg-col-info {
        display: flex; flex-shrink: 0;
        border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08);
        padding: 12px 20px 10px;
    }
    /* Playlist : prend tout l'espace restant, scroll interne */
    #jg-player.mobile-expanded #jg-col-playlist {
        display: flex; flex: 1 1 auto; min-height: 60px;
        border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08);
        overflow: hidden;
    }
    /* Contrôles : compacts, non scrollables */
    #jg-player.mobile-expanded #jg-col-player { padding: 10px 20px 14px; flex-shrink: 0; }
    #jg-player.mobile-expanded #jg-waveform-wrap { display: block; height: 40px; }
    #jg-player.mobile-expanded #jg-col-volume { display: none; }
    /* Scroll page bloqué + padding-bottom supprimé */
    body:has(#jg-player.mobile-expanded) { overflow: hidden; }
    body:has(#jg-player.mobile-expanded) .wp-site-blocks { padding-bottom: 0 !important; }

    #jg-player.mobile-expanded #jg-mini-expand svg { transform: rotate(180deg); }

    /* Bouton expand mobile */
    #jg-mobile-expand { display: flex; }
    #jg-mobile-expand:hover { color: #000; }
    #jg-player.mobile-expanded #jg-mobile-expand svg { transform: rotate(180deg); }

    /* C4 — mini-player : layout propre sur mobile */
    #jg-miniplayer { gap: 6px; padding: 0 10px; }
    #jg-mini-cover { width: 36px; height: 36px; flex-shrink: 0; }
    #jg-mini-info { flex: 1 1 0; min-width: 0; gap: 2px; height: auto; }
    #jg-mini-title { font-size: 11px; }
    #jg-mini-volume { display: none; }
    #jg-mini-controls { gap: 2px; padding: 0 6px; }
    #jg-mini-controls button { padding: 2px; }
    #jg-mini-play { width: 30px !important; height: 30px !important; }
}

/* ── Section lignes 815–875 de jg-player-front.php ── */
/* ── VOLET À PROPOS ── */
/* ── VOLET À PROPOS — slide depuis la droite (même modèle que panneau projet) ── */
#jg-about-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(680px, 100vw);
    background: #f9f7f4;
    z-index: 10001;
    transform: translateX(100%);
    transition: transform var(--jg-panel-ms, 450ms) var(--jg-anim-easing, cubic-bezier(0.4,0,0.2,1));
    overflow-y: auto;
    display: flex; flex-direction: column;
    box-shadow: -8px 0 40px rgba(0,0,0,0.18);
}
#jg-about-panel.open { transform: translateX(0); }
#jg-about-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    z-index: 10000;
    pointer-events: none;
    transition: background 0.45s ease;
}
#jg-about-overlay.open {
    background: rgba(0,0,0,0.45);
    pointer-events: all;
}
#jg-about-close {
    position: sticky; top: 0; z-index: 2;
    display: flex; justify-content: flex-end;
    padding: 16px 20px 0;
    background: #f9f7f4;
}
#jg-about-close button {
    background: none; border: none;
    cursor: pointer; font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    color: #aaa; padding: 0; transition: color 0.2s;
}
#jg-about-close button:hover { color: #000; }
#jg-about-loading {
    display: flex; align-items: center; gap: 12px;
    padding: 40px; color: #999; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.1em;
}
#jg-about-spinner {
    width: 28px; height: 28px; border: 2px solid rgba(0,0,0,0.1);
    border-top-color: #000; border-radius: 50%;
    animation: jgSpin 0.8s linear infinite;
}
#jg-about-body {
    padding: 32px 36px 80px;
    font-size: 15px; line-height: 1.75; color: #1a1a1a;
    flex: 1;
}
#jg-about-body h1 { font-size: 2rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 24px; }
#jg-about-body h2 { font-size: 1.2rem; font-weight: 700; margin: 32px 0 12px; }
#jg-about-body p { margin: 0 0 18px; }
#jg-about-body img { max-width: 100%; height: auto; margin: 24px 0; }
@media (max-width: 600px) {
    #jg-about-body { padding: 20px 20px 60px; }
}

/* ── Section lignes 877–890 de jg-player-front.php ── */
/* ── NAV : liens groupés, même position que Contact seul ── */
.wp-block-navigation__container,
.wp-block-navigation > ul {
    gap: 20px !important;
    margin-left: 0 !important;
}
.wp-block-navigation {
    justify-content: flex-start !important;
}
.wp-block-navigation__container .wp-block-navigation-item,
.wp-block-navigation > ul > li {
    margin: 0 !important;
    padding: 0 !important;
}

/* ── NAV HAMBURGER TABLETTE (601px → 768px) ──────────────────────────────
   WP core cache le hamburger au-dessus de 600px (@media min-width:600px).
   On surcharge pour forcer le mode accordéon jusqu'à 768px inclus.
   Le bouton hamburger est déjà dans le HTML (overlayMenu: "mobile" par défaut).
────────────────────────────────────────────────────────────────────────── */
/* ── S10 : Hamburger étendu à 900px (820×1180 cassé avec inline nav) ── */
@media (min-width: 600px) and (max-width: 900px) {
    /* Cache les liens inline → le container passe en overlay */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
        visibility: hidden !important;
    }
    /* Affiche le bouton hamburger (caché par WP au-dessus de 600px) */
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }
}

/* ── Section lignes 892–950 de jg-player-front.php ── */
#jg-contact-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 20000; opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
#jg-contact-overlay.open { opacity: 1; pointer-events: all; }
#jg-contact-modal {
    position: fixed; top: 50%; left: 50%; z-index: 20001;
    transform: translate(-50%, -50%);
    width: min(520px, 94vw);
    background: #f9f7f4; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}
#jg-contact-modal.open {
    opacity: 1; pointer-events: all;
}
#jg-contact-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid rgba(0,0,0,0.08);
}
#jg-contact-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
#jg-contact-close {
    background: none; border: none; cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    color: #666; padding: 0; transition: color 0.2s;
    flex-shrink: 0;
}
#jg-contact-close:hover { color: #000; }
#jg-contact-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.jg-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#jg-contact-body input, #jg-contact-body textarea {
    width: 100%; box-sizing: border-box;
    border: 1.5px solid rgba(0,0,0,0.15); background: #fff;
    padding: 10px 12px; font-size: 13px; font-family: inherit;
    outline: none; transition: border-color 0.2s;
}
#jg-contact-body input:focus, #jg-contact-body textarea:focus { border-color: #000; }
#jg-contact-body textarea { resize: vertical; min-height: 100px; }
#jg-contact-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
#jg-contact-error { font-size: 12px; color: #c00; flex: 1; }
#jg-contact-submit {
    background: #000; color: #fff; border: none; cursor: pointer;
    padding: 10px 28px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    border-radius: 0; transition: background 0.2s; flex-shrink: 0;
}
#jg-contact-submit:hover { background: #333; }
#jg-contact-submit:disabled { opacity: 0.5; cursor: not-allowed; }
#jg-contact-success {
    text-align: center; padding: 20px 0; display: flex;
    flex-direction: column; align-items: center; gap: 12px;
    color: #2a7a4b;
}
#jg-contact-success svg { stroke: #2a7a4b; }
@media (max-width: 480px) {
    .jg-contact-row { grid-template-columns: 1fr; }
}

/* ── Section lignes 952–1006 de jg-player-front.php ── */
/* ── CTA PRÉ-FOOTER ─────────────────────────────────────────────────────── */
#jg-cta-prefooter {
    background: #0d0d0d;
    color: #fff;
    text-align: center;
    padding: 90px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}
#jg-cta-prefooter .jg-cta-label {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}
#jg-cta-prefooter .jg-cta-title {
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    max-width: 720px;
    margin: 0;
}
#jg-cta-prefooter .jg-cta-sub {
    color: rgba(255,255,255,0.55);
    font-size: 0.92rem;
    max-width: 500px;
    line-height: 1.65;
    margin: 0;
}
#jg-cta-prefooter .jg-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 14px 36px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin-top: 8px;
}
#jg-cta-prefooter .jg-cta-btn:hover {
    background: rgba(255,255,255,0.85);
}
@media (max-width: 600px) {
    #jg-cta-prefooter { padding: 60px 24px; gap: 20px; }
}

/* ── S10 : Cover panel — masqué sur tablette portrait et mobile (≤900px) ── */
/* À ces tailles le volet projet prend 100vw, le cover panel n'a pas de place */
@media (max-width: 900px) {
    #jg-cover-panel { display: none !important; }
}

/* ── Section lignes 1082–1088 de jg-player-front.php ── */
/* ── M4 : Cover panel pochette ───────────────────────────────────────────── */
@media (max-width: 600px) {
    #jg-cover-panel {
        width: min(80vw, 80vh);
        height: min(80vw, 80vh);
    }

    /* ── S10 : Player mobile — correction hauteur + mini-cover ──────────────
       Le toggle (28px) est display:none sur mobile mais le container restait
       à 88px → 28px de vide. On ramène le player à 60px (miniplayer seul).
       La mini-cover reprend sa pleine hauteur (plus de sur-ride 36×36).
    ─────────────────────────────────────────────────────────────────────── */
    #jg-player.minimized             { height: 60px; }
    body                             { padding-bottom: 62px !important; }
    body:has(#jg-player.minimized)   { padding-bottom: 62px !important; }
    /* Mini-cover pleine hauteur (60px) — supprime le sur-ride 36×36 hérité */
    #jg-mini-cover { width: 60px; height: 100%; }
}

/* ── Section lignes 1090–1105 de jg-player-front.php ── */
/* ── M5 : Volet projet body ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    #jg-project-body     { padding: 20px 20px 40px; }
    /* S10 : sur mobile, JS injecte la pochette (carrée) plutôt que le bandeau —
       aspect-ratio 1 + object-fit contain pour ne pas recadrer le carré */
    #jg-project-hero     { aspect-ratio: 1; object-fit: contain; background: #111; }
    #jg-project-gallery  { grid-template-columns: repeat(2, 1fr); }
    /* M1 — 320px : titre projet trop grand en fixe */
    #jg-project-title    { font-size: clamp(1.2rem, 6.5vw, 2rem); }
    /* M1 — controls row : masque les chronomètres sur très petits écrans */
    #jg-time-current, #jg-time-total { display: none; }
}
@media (max-width: 360px) {
    /* Ultrapetits écrans (Galaxy Fold, etc.) */
    #jg-col-player { padding: 8px 10px 8px; }
    .jg-flip-card-back { padding: 14px 8px 10px; }
    .jg-btn-listen, .jg-btn-queue, .jg-btn-project { font-size: 8px; padding: 3px 6px; gap: 3px; }
}
����
/* ── Bloc jg/action-button ───────────────────────────────────────────────── */
/* Bouton standalone utilisable dans n'importe quel contexte (slide hero, page, etc.) */
.jg-action-btn-wrap {
    margin-top: 16px;
}
.jg-action-btn {
    display:             inline-block;
    padding:             12px 32px;
    background:          transparent;
    border:              2px solid rgba(255, 255, 255, 0.75);
    border-radius:       0;
    color:               #fff;
    font-size:           15px;
    font-weight:         300;
    letter-spacing:      0.06em;
    text-transform:      uppercase;
    cursor:              pointer;
    text-decoration:     none;
    transition:          border-color 0.25s, background 0.25s, transform 0.2s;
    backdrop-filter:     blur(4px);
    -webkit-backdrop-filter: blur(4px);
    min-width:           44px;
    min-height:          44px;
    line-height:         1.4;
}
.jg-action-btn:hover,
.jg-action-btn:focus {
    border-color: #fff;
    background:   rgba(255, 255, 255, 0.08);
    outline:      none;
}
@media (max-width: 768px) {
    .jg-action-btn { font-size: 14px; padding: 10px 24px; }
}

/* ── S3 — RESPONSIVE PANELS ────────────────────────────────────────────────
   5 paliers : XL(≥1440) L(1024–1439) M(768–1023) S(601–767) XS(≤600)
   Réf : S3-ARCHITECTURE.md — avril 2026
─────────────────────────────────────────────────────────────────────────── */

/* Espace pour le player en bas des volets — variable --jg-player-height injectée par JS */
#jg-project-panel.open,
#jg-about-panel.open {
    padding-bottom: var(--jg-player-height, 0px);
}

/* L (1024–1439px) : volets 55vw max 680px, player se minimise (JS) */
/* S10 : cover panel séparé — masqué seulement sous 1100px (aligné sur seuil JS >= 1100) */
@media (max-width: 1439px) {
    #jg-project-panel,
    #jg-about-panel { width: min(680px, 55vw); }
}
@media (max-width: 1099px) {
    /* En dessous de 1100px : plus assez de place pour cover panel + volet côte à côte */
    #jg-cover-panel { display: none !important; }
}

/* M (768–1023px) : volets 80vw max 680px */
@media (max-width: 1023px) {
    #jg-project-panel,
    #jg-about-panel { width: min(680px, 80vw); }
}

/* S/XS (≤767px) : volets plein écran, overlay transparent */
@media (max-width: 767px) {
    #jg-project-panel,
    #jg-about-panel {
        width: 100vw;
        box-shadow: none;
    }
    #jg-project-overlay.open,
    #jg-about-overlay.open {
        background: transparent;
        pointer-events: none;
    }
}

/* XS (≤600px) : boutons d'action du volet empilés pleine largeur */
@media (max-width: 600px) {
    #jg-project-actions {
        flex-direction: column;
    }
    #jg-project-actions button {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* ── S15 : VISUALISEUR HEADER ─────────────────────────────────────────────
 * Canvas injecté par JS (initHeaderVisualizer) dans le bloc sticky du header.
 * position:absolute sur toute la surface du conteneur, derrière le contenu nav.
 * opacity 0→1 animée via la classe .active (ajoutée par drawHeaderVisualizer).
 * pointer-events:none pour laisser passer les clics vers le nav.
 * ─────────────────────────────────────────────────────────────────────── */
#jg-header-visualizer {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
#jg-header-visualizer.active {
    opacity: 1;
}

/* ── S8c : VOLUME POPOVER MOBILE ──────────────────────────────────────────
 * Popover au-dessus du player, déclenché par #jg-mini-vol-btn (≤600px).
 * Slider horizontal compact + label pourcentage.
 * ─────────────────────────────────────────────────────────────────────── */
#jg-volume-popover {
    display: none; /* géré en flex par JS quand ouvert */
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 200px;
    background: #f9f7f4;
    border: 1px solid rgba(0,0,0,0.12);
    border-bottom: none;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
    padding: 10px 14px;
    box-sizing: border-box;
    z-index: 10002;
}
#jg-volume-popover.open { display: flex; }
#jg-vp-row {
    display: flex; align-items: center; gap: 8px; width: 100%;
}
#jg-vp-row svg { flex-shrink: 0; color: #666; }
#jg-vp-slider {
    flex: 1; min-width: 0;
    -webkit-appearance: none; appearance: none;
    height: 3px; border-radius: 2px;
    background: rgba(0,0,0,0.12);
    accent-color: #000; cursor: pointer; outline: none;
}
#jg-vp-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%; background: #000; cursor: pointer;
}
#jg-vp-label {
    flex-shrink: 0; width: 32px; text-align: right;
    font-size: 11px; font-weight: 600; color: #444;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    #jg-mini-vol-btn { display: flex; }
}

/* ── S7 : BLOC JG/DISCOGRAPHY-NAV (Menu discographie du header) ─────────
 * Menu déroulant Albums + Mixtapes, intégré au bloc Navigation FSE.
 * Toggle avec Discographie ▼, dropdown avec sections Albums et Mixtapes.
 * ──────────────────────────────────────────────────────────────────── */
.jg-discography-nav {
    display: inline-block;
    position: relative;
}

.jg-dnav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: inherit;
    cursor: pointer;
    transition: color 0.2s ease;
}
.jg-dnav-toggle:hover {
    color: #666;
}
.jg-dnav-toggle[aria-expanded="true"] .jg-dnav-icon {
    transform: rotate(180deg);
}
.jg-dnav-icon {
    display: inline-block;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.jg-dnav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 220px;
    list-style: none;
    padding: 0;
    z-index: 1000;
}
.jg-dnav-menu:not([hidden]) {
    display: block;
}

.jg-dnav-section {
    padding: 4px 0;
}
.jg-dnav-section:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.jg-dnav-section-title {
    display: block;
    padding: 8px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
}

.jg-dnav-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jg-dnav-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.jg-dnav-item:hover {
    background-color: #f5f5f5;
    color: #000;
}
.jg-dnav-item:active {
    background-color: #eee;
}

/* Responsive : menu hamburger du bloc Navigation FSE */
@media (max-width: 768px) {
    .jg-dnav-toggle {
        padding: 6px 10px;
        font-size: 15px;
    }
    .jg-dnav-menu {
        min-width: 200px;
        margin-top: 4px;
    }
    .jg-dnav-item {
        padding: 8px 14px;
        font-size: 13px;
    }
}