:root {
    --bg-black: #a5a5a5; /* backgound par defaut #a5a5a5*/
    --deck-gray: #1a1a1b;
    --vfd-blue: #40e0ff;
    --vfd-green: #008000;
    --vfd-yellow: #FFFF00;
    --vfd-brown: #9F7E69;
    --vfd-glow: rgba(64, 224, 255, 0.5);
    --vfd-blue-dim: #003a4d;
    --vfd-off: #0a0a0a;
    --vfd-red: #ff3333;
    --text-silver: #a0a0a0;
    --text-beige: #b6b69f;
    --text-gold: #7a6a0c;
    --text-brown: #9F7E69;
    --text-white: #ffffff;
    --ui-font: 'Segoe UI', Tahoma, sans-serif;
    --digital-font: 'DS-Digital', sans-serif;
    --brushed-metal: conic-gradient(
        from 0deg, #222 0deg, #444 45deg, #222 90deg, #444 135deg, #222 180deg, #444 225deg, #222 270deg, #444 315deg, #222 360deg
        );
}

body {
    background-color: var(--bg-black);
    color: var(--text-silver);
    font-family: var(--ui-font);
    display: flex; 
    justify-content: center; 
    align-items: center;
    min-height: 100vh; 
    margin: 0; 
    user-select: none;
    overflow: hidden;
}

.deck-container {
    width: 1600px; 
    background-color: var(--deck-gray);
    padding: 25px 120px 60px 120px; 
    border-top: 1px solid #cfcfcf;
    border-radius: 4px; 
    box-shadow: 0 200px 200px rgb(49, 49, 49);
    position: relative;
    z-index: 1;
}

.brand-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 25px; 
    padding-bottom: 12px; 
    border-bottom: 0px solid #222;
}

.main-logo { 
    height: 23px; 
    display: block; 
    margin-left: -70px;
}

.model-name { 
    font-size: 12px; 
    color: var(--text-silver); 
    letter-spacing: 3px; 
    font-weight: bold; 
    text-transform: uppercase; 
    margin-right: -60px; 
}

.tray-outer-slot {
    width: 100%; 
    height: 75px; 
    background: #1a1a1b;
    margin-bottom: 35px; 
    position: relative; 
    overflow: hidden; 
    border: 1px solid #1a1a1b;
}


.tray-mechanism {
    position: absolute;
    width: 64%;
    height: 100%; /* Prend toute la hauteur du slot parent */
    background: linear-gradient(180deg, #1a1a1b 0%, #151516 100%);
    top: 0;
    left: 18%;
    z-index: 10;
    transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: center;
    align-items: center;

    /* LES BORDURES COMPLETES */
    border: 2px solid #000;      /* Trace les 4 côtés */
    box-sizing: border-box;      /* IMPORTANT : garde le tiroir à 100% de hauteur bordures incluses */
    
    /* Optionnel : un petit reflet pour voir le relief en haut */
    border-top-color: #333; 
}

/* On s'assure que l'animation de descente est toujours là */
.tray-mechanism.open {
    transform: translateY(70px); /* Ajuste à 68px si tu veux voir le haut du tiroir */
}
.mash-logo-tray { height: 35px; 
    opacity: 0.5; 
    filter: grayscale(1) brightness(1,5); 
}

.power-section, .eject-section {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 10px; 
    font: center; ;
}

.power-section {
    margin-left: -10px;
}

.transport-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 15px; 
    margin-top: 55px; 
    width: 100%; 
    align-items: end; 
}

.eject-section { 
    margin-top:20px; 
}

.upper-label, .volume-label {
    font-size: 9px; 
    font-weight: bold; 
    color: var(--text-silver);
    letter-spacing: 1px; 
    text-transform: uppercase; 
    white-space: nowrap;
}

.display-panel {
    background: #000; 
    padding: 25px 35px; 
    border: 4px solid #111;
    box-shadow: inset 0 0 60px rgba(0,0,0,1), 0 0 20px var(--vfd-glow);
    min-height: 240px; 
    display: flex; 
    flex-direction: column;
    justify-content: space-between; 
    box-sizing: border-box;
}

.vfd-main-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-bottom: 10px; 
}

.vfd-col-track { 
    flex: 0 0 120px; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
}

.vfd-col-time { 
    flex: 0 0 240px; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
}

.vfd-col-indicators { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 4px; 
    border-left: 1px solid #111; 
    border-right: 1px solid #111;
    margin: 0 25px; 
    padding: 5px 0;
}

.digital-counter {
    display: flex; 
    align-items: baseline; 
    font-family: var(--digital-font); 
    font-size: 60px; 
    font-weight: bold; 
    color: var(--vfd-blue);
    text-shadow: 0 0 15px var(--vfd-blue-dim); 
    line-height: 1; 
    height: 60px;
}

.digit { 
    width: 38px; 
    text-align: center; 
}

.time-separator { 
    width: 15px; 
    text-align: center; 
    font-size: 40px; 
    margin: 0 2px; 
}

.label-vfd { 
    font-size: 11px; 
    color: var(--vfd-blue); /* couleur texte par défaut de l'afficheur */
    font-family: var(--ui-font); 
    font-weight: bold; 
    text-transform: uppercase; 
    margin-bottom: 4px; 
    letter-spacing: 2px;
}

.label-vfd.clickable { 
    color: var(--vfd-blue); 
    transition: color 0.2s; 
}

.vu-meters { 
    margin-top: 15px; 
    padding-top: 10px; 
    border-top: 1px solid #0a0a0a; 
}

.vu-row { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 8px; 
}

.vu-label { 
    font-family: var(--ui-font); 
    font-size: 14px; 
    font-weight: 900; 
    width: 15px; 
    color: #08181a; 
    transition: all 0.3s; 
    line-height: 1; 
    text-align: center;
}

.vu-label.on { 
    color: var(--vfd-blue); 
    text-shadow: 0 0 10px var(--vfd-glow); 
}

.meter-container { 
    flex: 1; 
    height: 12px; 
    background: #080808; 
    display: flex; 
    gap: 2px; 
    padding: 1px; 
    align-items: stretch; 
}

.meter-segment { 
    flex: 1; 
    background: var(--vfd-off); 
    transition: background 0.05s; 
}

.meter-segment.on-blue { 
    background: var(--vfd-blue); 
    box-shadow: 0 0 5px var(--vfd-blue); 
}

.meter-segment.on-red { 
    background: var(--vfd-red); 
    box-shadow: 0 0 5px var(--vfd-red); 
}

.main-interface { 
    display: grid; 
    grid-template-columns: 120px 1fr 340px; 
    gap: 60px; 
    align-items: start; 
    margin-left: -40px; 
    margin-right: 0px; 
}

.btn { 
    background: linear-gradient(185deg, #2a2a2b, #151516); /* dégradé bouton */
    border: 1px solid #111; 
    color: var(--text-silver); 
    cursor: pointer; 
    font-size: 11px; 
    font-weight: bold; 
    box-shadow: 3px 3px 6px #000; 
    text-transform: uppercase; 
    height: 50px; 
    width: 100%;
    padding: 0 5px; 
    text-align: center;
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.btn:active { 
    background: linear-gradient(145deg, #151516, #2a2a2b); 
    box-shadow: inset 2px 2px 5px #000; 
    color: var(--text-white); 
}

#power-reset-btn { 
    height: 50px; 
    width: 90px; 
}

#stop-btn, #eject-btn { 
    font-size: 22px; 
    color: var(--text-silver); 
}

.numeric-grid { 
    display: grid; 
    grid-template-columns: repeat(10, 1fr); 
    gap: 35px; 
    margin-top: 25px; 
    width: 100%;
}

/* Taille du logo HR */
.hr-logo-bottom { 
    position: absolute; 
    left: 50px; 
    bottom: 65px; 
    height: 40px; 
    opacity: 0.7; 
    pointer-events: none; 
}

/* Modals */
#art-modal, #playlist-modal {
    display: none; 
    position: fixed; 
    z-index: 10000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.95); 
    justify-content: center; 
    align-items: center; 
    backdrop-filter: blur(15px);
}

.modal-content {
    background: #111; 
    border: 2px solid #333; 
    padding: 30px;
    box-shadow: 0 0 100px rgba(0,0,0,1); 
    text-align: center; 
    border-radius: 8px;
}
.list-content { 
    max-width: 600px; 
    width: 90%; 
    max-height: 80vh; 
    overflow-y: auto; 
}

#track-list-container { 
    text-align: left; 
    margin-top: 15px; 
    border-top: 1px solid #222; 
}

.track-item { 
    padding: 12px; 
    border-bottom: 1px solid #222; 
    cursor: pointer; 
    color: var(--text-silver);
    font-size: 14px; 
    transition: all 0.2s; 
    font-family: var(--ui-font);
}

.track-item:hover { 
    background: #1a1a1b; 
    color: var(--vfd-blue); 
}

.track-item.active { 
    color: var(--vfd-red); 
    font-weight: bold; 
    background: #080808; 
}

#art-image { 
    max-width: 600px; 
    max-height: 600px; 
    width: 100%; 
    border-radius: 4px; 
}

#art-info { 
    color: var(--vfd-blue); 
    margin-top: 25px; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-size: 16px; 
}

/* Grille et Indicateurs */
.track-grid { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 10px; 
    margin: 20px 0; 
    padding: 12px 0; 
    border-top: 1px solid #0a0a0a; 
    border-bottom: 1px solid #0a0a0a; 
}

.grid-num { 
    font-size: 14px; 
    font-weight: bold; 
    color: #0d0d0d; 
    min-width: 18px; 
    text-align: center; 
}

.grid-num.loaded { 
    color: var(--vfd-blue); /* Remplace #40e0ff par la variable */
    transition: color 0.3s ease; /* Optionnel : pour une transition douce lors du clic */
}

.grid-num.active-track { 
    color: #ff3333 !important; 
    text-shadow: 0 0 12px #ff3333; 
}

.arrow-indicator { 
    font-size: 14px; 
    color: #0d0d0d; 
    visibility: hidden; 
}

.arrow-indicator.active { 
    visibility: visible; c
    olor: #ff3333; 
    text-shadow: 0 0 10px #ff3333; 
}

.vfd-indicator { 
    font-family: var(--ui-font); 
    font-size: 10px; 
    font-weight: bold; 
    color: #08181a; 
    text-transform: uppercase; 
}

#vfd-ab-lock.active { 
    font-family: var(--ui-font); 
    font-size: 10px; 
    font-weight: bold; 
    color: var(--vfd-red); 
    text-transform: uppercase; 
}

.vfd-indicator.active { 
    color: var(--vfd-blue); 
    text-shadow: 0 0 8px var(--vfd-blue); 
}

/* Animations */
@keyframes vfd-input-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.vfd-input-blink { animation: vfd-input-blink 1s infinite; }
.vfd-blink-pause { animation: vfd-input-blink 1s infinite; }

.invisible-link {
    text-decoration: none; /* Supprime le soulignement */
    cursor: default;       /* Empêche la flèche de devenir une main */
    outline: none;         /* Supprime le cadre bleu au clic */
    display: inline-block;
}

.invisible-link img {
    border: none;
}

.file-format {
    font-family: var(--ui-font);
    font-size: 10px;
    color: var(--vfd-blue);
    opacity: 1;
    text-transform: uppercase;
    margin-left: 10px;
    align-self: flex-end;
    padding-bottom: 8px;
    letter-spacing: 1px;
}

/* On crée une règle spécifique pour les boutons de la grille numérique */
.numeric-grid .btn {
    height: 50px;      /* On réduit la hauteur ici */
    font-size: 13px;   /* Taille du texte */
    margin-bottom: 5px; 
}


/* Ciblage spécifique de la rangée de transport (Play, Stop, Next, etc.) */
.transport-grid .btn {
    height: 60px;       /* Réduit la hauteur (était 50px) */
    width: 190px;
    font-size: 10px;    /* Réduit la taille des icônes/texte pour que ça rentre */
    padding: 0;         /* Enlève les marges internes pour gagner de la place */
}

/* Optionnel : Ajuster l'espace entre le label (ex: PLAY/PAUSE) et le bouton */
.transport-grid .eject-section {
    gap: 5px;           /* Espace entre le texte au-dessus et le bouton */
}

#vol-down-btn, #vol-up-btn {
    width: 100px !important;  /* Force la largeur */
    min-width: 0 !important; /* Supprime toute sécurité qui empêcherait de rétrécir */
    flex: none !important;   /* Empêche le bouton de s'étirer tout seul */
    height: 70px;
}

#mute-btn {
    width: 60px !important;
    min-width: 0 !important;
    flex: none !important;
    height: 70px;
}

/* On cible le conteneur des boutons de volume */
.controls-right-stack div[style*="display: flex"],
.volume-controls-container {
    margin-top: 50px; /* Augmente ce chiffre pour descendre plus bas */
}


/* Remplace .volume-label par la classe que tu utilises pour le texte "VOLUME" */
.volume-label {
    display: block; /* S'assure que l'élément peut être déplacé */
    transform: translateY(50px); /* Descend le mot de 15px vers le bas */
}

.label-tiny {
    position: absolute;
    top: -15px;
    font-size: 9px;
    color: #555;
}

.vu-sense-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 20px; /* Espace sous le bloc volume */
}

.vu-controls-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* On force la taille identique au volume */
#vu-down-btn, #vu-up-btn {
    width: 90px !important;
    height: 40px !important;
    min-width: 0 !important;
    flex: none !important;
    margin-bottom: 20px;
}

/* Style optionnel pour le label (comme tu as demandé précédemment) */
.vu-sense-group .upper-label {
    font-size: 10px;
    letter-spacing: 1px;
    /* background-color: #222; (Si tu veux un fond de couleur) */
}

#over-arrow {
    color: #220000; /* Couleur éteinte (rouge très sombre) */
    transition: all 0.3s;
}

#over-arrow.active {
    color: #ff0000 !important; /* Rouge vif */
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.8); /* Effet néon/VFD */
}


/* --- REFLET VERTICAL HAUT EN BAS --- */

.display-panel {
    position: relative !important;
    overflow: hidden !important;
}

.display-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Dégradé de 180deg pour aller de haut en bas */
    /* On crée une bande claire en haut qui s'estompe rapidement */
    background: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 0.15) 0%,   /* Éclat maximal au bord supérieur */
        rgba(255, 255, 255, 0.05) 15%,  /* Dégradé rapide */
        transparent 50%,                /* Zone sombre au milieu pour la lisibilité */
        rgba(255, 255, 255, 0.02) 80%,  /* Très léger reflet de surface en bas */
        rgba(255, 255, 255, 0.07) 100%  /* Petit liseré de lumière sur le bord bas */
    );
    
    z-index: 999; 
    pointer-events: none;
   
    /* Ajout d'une légère brillance sur toute la surface pour l'effet "vitre" */
    background-color: rgba(255, 255, 255, 0.01);
}



.vu-hatch-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
}

/* On ajuste aussi le cadre pour que l'intégration soit propre */
.vu-hatch-frame {
    width: 270px; 
    height: 55px;
    background: #070707; /* Fond noir profond derrière le cache */
    border: 2px solid #000; /* Bordure extérieure du cadre */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    margin-top: 9px;
}

#vu-hatch-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1a1a1b 0%, #151516 100%); /* Même dégradé que le tiroir */
    
    /* COPIE EXACTE DES BORDURES DU TIROIR CD */
    border: 2px solid #000;      /* Trace les 4 côtés */
    border-top-color: #333;      /* Petit reflet de relief en haut */
    box-sizing: border-box;      /* Garde les bordures incluses dans la taille */
    
    z-index: 20;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hatch-logo {
    font-size: 10px;
    color: #444;
    letter-spacing: 2px;
    font-weight: bold;
}

/* État ouvert : le cache descend de 100% de sa hauteur */
#vu-hatch-block.hatch-open {
    transform: translateY(95%);
}

#vu-hatch-block.hatch-closed {
    transform: translateY(0);
}

/* On s'assure que les boutons sont bien centrés derrière */
.vu-controls-container {
    display: flex;
    gap: 10px;
    padding: 10px;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.hatch-texture {
    width: 100%;
    height: 100%;
    /* Un dégradé très fin pour simuler l'aluminium brossé */
    background: linear-gradient(180deg, 
        rgba(255,255,255,0.03) 0%, 
        transparent 50%, 
        rgba(0,0,0,0.1) 100%);
}

.upper-label {
    display: block;        /* Permet d'appliquer des marges correctement */
    margin-top: 5px;      /* Ajuste cette valeur pour descendre le mot plus ou moins bas */
    margin-bottom: 3px;    /* Espace entre le mot et la trappe */
    transition: all 0.3s;  /* Optionnel : pour un mouvement fluide si tu le modifies */
    text-align: center;
}

.vu-sense-group {
    display: block;        /* Permet d'appliquer des marges correctement */
    margin-top: 30px;      /* Ajuste cette valeur pour descendre le mot plus ou moins bas */
    margin-bottom: -10px;    /* Espace entre le mot et la trappe */
    transition: all 0.3s;  /* Optionnel : pour un mouvement fluide si tu le modifies */
}

.tone-controls-section {
    width: 100%;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;

    /* CONTRÔLE INDÉPENDANT DES MARGES */
    margin-top: 10px;    /* Ajuste l'espace avec ce qui est AU-DESSUS */
    margin-bottom: -60px; /* Ajuste l'espace avec la rangée EJECT en DESSOUS */
    
    /* Optionnel : si tu veux voir la zone pendant que tu règles */
    /* border: 1px dashed rgba(255,255,255,0.1); */
}

/* Aligne les deux groupes Bass et Treble sur une ligne */
.tone-controls-row {
    display: flex;
    gap: 60px; /* Espace généreux entre Bass et Treble pour la clarté */
}

/* Centre le texte au-dessus des boutons */
.tone-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px; /* Espace entre le mot et les boutons */
}

.tone-group-wrapper .upper-label {
    display: block !important; /* Force l'élément à se comporter comme un bloc */
    position: relative !important; /* Permet d'utiliser top/bottom */
    top: 5px !important; /* Ajuste cette valeur : 20px pour descendre, -20px pour monter */
    text-align: center;
    width: 100%;
}

/* Style des boutons de tonalité */
.btn-tone {
    width: 90px !important;
    height: 45px !important;
    font-size: 11px !important;
    min-width: 0 !important;
    flex: none !important;
}

.btn-group {
    display: flex;
    gap: 10px;
}


.tone-group-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tone-hatch-frame {
    width: 580px; /* Un peu plus large pour contenir les 4 boutons */
    height: 65px;
    background: #0a0a0a;
    border: 2px solid #000;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.9);
    margin-top: 10px;
}

#tone-hatch-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1a1a1b 0%, #151516 100%);
    border: 2px solid #000;
    border-top-color: #333; /* Reflet identique au tiroir CD */
    box-sizing: border-box;
    z-index: 20;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#tone-hatch-block.hatch-open {
    transform: translateY(62px); /* Glisse vers le bas */
}

/* On ajuste l'alignement des boutons derrière la trappe */
.tone-controls-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    padding: 0 10px;
	gap: 8px;
}

.label-tiny {
    font-size: 9px;
    color: #555;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hatch-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: bold;
    
    color: #9aa0a5;
    text-shadow:
        0 1px 0 #000,
        0 0 4px rgba(120, 160, 180, 0.25);

    pointer-events: none;
    user-select: none;
    opacity: 0.9;
}

/* Quand la trappe est ouverte, on masque le texte */
.hatch-open .hatch-label {
    transition: all 0.6s ease-in-out;
}

.default-tone-btn {
    min-width: 50px;
    font-size: 8px;
    color: var(--text-silver);
}

/* Effet au survol ou quand le bouton est actif */
.default-tone-btn:hover {
    color: var(--text-white); 
    text-shadow: 0 0 5px var(--vfd-glow);
}



.btn i {
    font-size: 14px; /* Taille des symboles */
    color: var(--text-silver); /* Utilise ta couleur argentée */
    pointer-events: none; /* Évite que l'icône bloque le clic du bouton */
}

/* Effet au survol ou quand le bouton est actif */
.btn:hover i {
    color: var(--text-white); 
    text-shadow: 0 0 5px var(--vfd-glow);
}

/* Effet au survol ou quand le bouton est actif */
.btn:hover {
    color: var(--text-white); 
    text-shadow: 0 0 5px var(--vfd-glow);
}