:root {

    --carte-bg: #050505;

    --carte-panel: rgba(8, 8, 8, 0.92);

    --carte-line: #2c2c2c;

    --carte-cyan: #ace7ee;

    --carte-green: #17edbd;

    --carte-yellow: #d9d900;

    --carte-text: #ffffff;

    --carte-muted: #888888;

}



* {

    box-sizing: border-box;

}



html {

    width: 100%;

    min-height: 100%;

    background: var(--carte-bg);

}



body {

    width: 100%;

    min-height: 100vh;

    margin: 0;

    padding: 10px;

    color: var(--carte-text);

    background-color: var(--carte-bg);

    background-position: top center;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

    font-family: Arial, Helvetica, sans-serif;

}



 /* -------------------------------------------------------

   menu warper

------------------------------------------------------- */



.menu-wrapper {

    width: 100%;

    background: #0d0d0d;      /* fond sombre */

    border-bottom: 1px solid #222; /* ligne discrète */

    padding: 4px 0;           /* léger espace autour */

}



/* Wrapper du menu */

.menu-wrapper {

    width: 100%;

    background: #0d0d0d;

    border-bottom: 1px solid #222;

    padding: 4px 0;

}



/* NAV */

nav {

    width: 100%;

}



/* UL centré */

nav ul {

    display: flex;

    justify-content: center; /* CENTRAGE */

    flex-wrap: wrap;         /* RESPONSIVE SMARTPHONE */

    gap: 3px;

    list-style: none;

    margin: 0;

    padding: 6px 4px;

}



/* Liens façon onglets sombres */

nav ul li a {

    display: block;

    padding: 4px 5px;

    font-size: 12px;

    color: #ccc;

    text-decoration: none;

    background: #3a3939;

    border-radius: 4px;

    border: 1px solid #1a1a1a;

    transition: 0.25s ease;

}



/* Hover */

nav ul li a:hover {

    background: #222;

    border-color: #333;

    color: #fff;

}



/* Onglet actif */

nav ul li a.active {

    background: #333;

    color: #fff;

    border: 1px solid #555;

}



/* Smartphone : texte légèrement plus grand */

@media (max-width: 480px) {

    nav ul li a {

        font-size: 14px;

        padding: 6px 12px;

    }

}











.ariane-bas {

    width: 100%;

    max-width: 440px;

    margin: 30px auto 0;

    padding: 14px;

    box-sizing: border-box;



    background: #111;

    border: 1px solid #303030;

    border-radius: 12px;



    font-family: Arial, Helvetica, sans-serif;

    color: #eee;

}



.ariane-groupe {

    margin-bottom: 18px;

}



.ariane-groupe:last-child {

    margin-bottom: 0;

}



.ariane-groupe h2 {

    margin: 0 0 9px;

    padding: 0 2px 8px;



    color: #f1f1f1;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 0.4px;

    text-transform: uppercase;



    border-bottom: 1px solid #343434;

}



.ariane-groupe ul {

    display: grid;

    grid-template-columns: 1fr;

    gap: 7px;



    margin: 0;

    padding: 0;

    list-style: none;

}



.ariane-groupe li {

    margin: 0;

    padding: 0;

}



.ariane-groupe a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;



    min-height: 42px;

    padding: 9px 12px;

    box-sizing: border-box;



    color: #d8d8d8;

    background: #1b1b1b;

    border: 1px solid #333;

    border-radius: 7px;



    font-size: 14px;

    font-weight: 600;

    line-height: 1.35;

    text-decoration: none;



    transition:

        background-color 0.18s ease,

        border-color 0.18s ease,

        color 0.18s ease,

        transform 0.18s ease;

}



.ariane-groupe a::before {

    content: "›";

    flex: 0 0 auto;



    color: #8f8f8f;

    font-size: 18px;

    font-weight: 700;

    line-height: 1;

}



.ariane-groupe a:hover {

    color: #fff;

    background: #242424;

    border-color: #555;

    transform: translateX(2px);

}



.ariane-groupe a:focus-visible {

    color: #fff;

    background: #242424;

    border-color: #aaa;

    outline: 2px solid #aaa;

    outline-offset: 2px;

}



.ariane-groupe a:active {

    transform: translateX(1px);

}



.lien-externe {

    margin-left: auto;

    color: #999;

    font-size: 13px;

    line-height: 1;

}



.ariane-groupe-youtube a {

    border-color: #493030;

}



.ariane-groupe-youtube a:hover {

    background: #281b1b;

    border-color: #754545;

}



@media (max-width: 480px) {

    .ariane-bas {

        width: calc(100% - 20px);

        margin-top: 20px;

        padding: 11px;

        border-radius: 9px;

    }



    .ariane-groupe a {

        min-height: 44px;

        padding: 10px;

        font-size: 13px;

    }

}





button {

    font: inherit;

}



.carte-player {

    width: 100%;

    min-height: calc(100vh - 20px);

    margin: 0;

    padding: 8px 10px;

    background: rgba(0, 0, 0, 0.69);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 10px;

    box-shadow:

        0 4px 8px rgba(0, 0, 0, 0.3),

        inset 0 1px 3px rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(8px);

}



.carte-header {

    display: grid;

    grid-template-columns: 72px minmax(0, 1fr);

    align-items: center;

    gap: 12px;

    margin-bottom: 10px;

}



.carte-cover {

    width: 72px;

    height: 72px;

    object-fit: cover;

    border: 1px solid #333;

    border-radius: 8px;

}



.carte-heading {

    min-width: 0;

}



.carte-kicker {

    margin: 0 0 4px;

    color: var(--carte-cyan);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}

.carte-kicker a {

    margin: 0 0 4px;

    color: var(--carte-cyan);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}

.carte-heading h1 {

    margin: 0;

    overflow: hidden;

    color: #fff;

    font-size: 20px;

    line-height: 1.25;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.album-meta {

    margin: 5px 0 0;

    color: var(--carte-muted);

    font-size: 11px;

    line-height: 1.45;

}



.mini-player {

    padding: 8px;

    background: rgba(0, 0, 0, 0.88);

    border: 1px solid #202020;

    border-radius: 9px;

}



#audio {

    position: absolute;

    width: 1px;

    height: 1px;

    overflow: hidden;

    clip-path: inset(50%);

    opacity: 0;

    pointer-events: none;

}



.mini-vu-wrapper {

    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    align-items: center;

    gap: 7px;

}



.playstate {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    padding: 0 0 2px;

    color: var(--carte-yellow);

    background: #080808;

    border: 1px solid #333;

    border-radius: 8px;

    font-size: 23px;

    cursor: pointer;

}



.playstate:hover,

.playstate:focus-visible {

    color: #ffff4e;

    border-color: #686800;

    outline: none;

}



.mini-vu {

    position: relative;

    min-width: 0;

    height: 42px;

    overflow: hidden;

    background: #171717;

    border: 1px solid #282828;

    border-radius: 6px;

}



.mini-vu-bar {

    position: absolute;

    inset: 0 auto 0 0;

    width: 0;

    background:

        linear-gradient(

            90deg,

            #00eaff 0%,

            #17edbd 58%,

            #d9d900 78%,

            #ff004c 100%

        );

    opacity: 0.62;

}



.mini-vu-content {

    position: relative;

    z-index: 2;

    height: 100%;

    display: grid;

    grid-template-columns: auto minmax(0, 1fr) auto;

    align-items: center;

    gap: 8px;

    padding: 0 10px;

    color: rgba(255, 255, 255, 0.78);

    font-family: Consolas, "Courier New", monospace;

    font-size: 10px;

}



.mini-vu-content strong {

    overflow: hidden;

    text-align: center;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.progress-container {

    width: 100%;

    height: 9px;

    margin-top: 8px;

    overflow: hidden;

    background: #242424;

    border-radius: 4px;

    cursor: pointer;

}



.progress-container:focus-visible {

    outline: 2px solid var(--carte-cyan);

    outline-offset: 2px;

}



.progress-bar {

    width: 0;

    height: 100%;

    background: linear-gradient(90deg, #858500, #d9d900);

    transition: width 0.08s linear;

}



.current-details {

    min-height: 18px;

    margin-top: 7px;

    color: #8f8f8f;

    font-size: 10px;

    line-height: 1.45;

    text-align: center;

}



.current-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 6px;

}



.current-actions a {

    color: var(--carte-cyan);

    font-size: 10px;

    font-weight: 700;

    text-decoration: none;

}



.current-actions a:last-child {

    color: var(--carte-green);

}



.current-actions a:hover,

.current-actions a:focus-visible {

    color: #fff;

    text-decoration: underline;

    outline: none;

}



.playlist-section {

    margin-top: 10px;

}



.playlist-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    margin-bottom: 7px;

}



.playlist-heading h2 {

    margin: 0;

    color: #fff;

    font-size: 15px;

}



.playlist-heading span {

    color: var(--carte-muted);

    font-size: 10px;

}



.playlist {

    max-height: none;

    margin: 0;

    padding: 0 4px 0 0;

    overflow-y: auto;

    list-style: none;

    scrollbar-width: thin;

    scrollbar-color: var(--carte-cyan) #090909;

}



.playlist::-webkit-scrollbar {

    width: 5px;

}



.playlist::-webkit-scrollbar-track {

    background: #090909;

}



.playlist::-webkit-scrollbar-thumb {

    background: var(--carte-cyan);

    border-radius: 5px;

}



.playlist li {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    gap: 3px 10px;

    margin-bottom: 5px;

    padding: 8px 9px;

    color: #fff;

    background: rgba(17, 17, 17, 0.78);

    border: 1px solid transparent;

    border-radius: 6px;

    cursor: pointer;

}



.playlist li:hover,

.playlist li:focus-visible {

    background: rgba(28, 28, 28, 0.9);

    border-color: #333;

    outline: none;

}



.playlist li.active {

    position: relative;

    padding-left: 20px;

    color: var(--carte-green);

    background: rgba(39, 39, 39, 0.86);

    border-color: #2e5940;

}



.playlist li.active::before {

    content: "▶";

    position: absolute;

    left: 7px;

    top: 10px;

    color: var(--carte-yellow);

    font-size: 9px;

}



.playlist-title {

    min-width: 0;

    overflow: hidden;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.35;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.playlist-meta {

    grid-column: 1;

    color: #858585;

    font-size: 10px;

    line-height: 1.35;

}



.playlist-links {

    grid-column: 2;

    grid-row: 1 / 3;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;

}



.playlist-links a {

    color: var(--carte-cyan);

    font-size: 10px;

    font-weight: 700;

    text-decoration: none;

}



.playlist-links a:last-child {

    color: var(--carte-green);

}



.playlist-links a:hover,

.playlist-links a:focus-visible {

    color: #fff;

    text-decoration: underline;

    outline: none;

}



@media (max-width: 600px) {

    body {

        padding: 6px;

        background-attachment: scroll;

    }



    .carte-player {

        padding: 9px;

    }



    .carte-header {

        grid-template-columns: 58px minmax(0, 1fr);

    }



    .carte-cover {

        width: 58px;

        height: 58px;

    }



    .carte-heading h1 {

        font-size: 17px;

    }



    .mini-vu-content {

        grid-template-columns: 1fr;

        gap: 0;

        padding: 4px 8px;

        font-size: 9px;

        text-align: center;

    }



    .mini-vu-content > span {

        display: none;

    }



    .playlist li {

        grid-template-columns: 1fr;

    }



    .playlist-links {

        grid-column: 1;

        grid-row: auto;

        justify-content: flex-start;

    }

}