/* ================= BODY ================= */
/* Conteneur global, layout desktop : sidebar à gauche, contenu à droite */
body {
    display: flex;
    flex-direction: row; /* desktop layout horizontal */
    min-height: 100vh;   /* prend toute la hauteur de la fenêtre */
    overflow-x: hidden;  /* empêche le scroll horizontal */
    font-family: system-ui;
    background: #0a0a0a; /* fond sombre */
    color: white;
}

/* ================= SIDEBAR ================= */
/* Conteneur de la liste de stations */
.sidebar {
    width: 260px;             /* largeur fixe de la sidebar */
    background: #111;         /* fond gris foncé */
    padding: 10px;
    overflow-y: auto;         /* scroll si beaucoup de boutons */
    flex-shrink: 0;           /* ne pas rétrécir */
    display: flex;
    flex-direction: column;
    border-radius: 5px;       /* coins arrondis */
}

/* Titre de la sidebar */
.sidebar-title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
    color: #fff;
}

/* Boutons de stations */
.sidebar button {
    width: 100%;
    padding: 8px;
    margin: 4px 0;
    background: #222;         /* fond gris des boutons */
    border: none;
    border-radius: 3px;       /* coins arrondis */
    color: white;
    cursor: pointer;
    text-align: left;
}

/* Hover et état actif */
.sidebar button:hover,
.sidebar button.active {
    background: #444;         /* fond plus clair au survol ou actif */
}

/* ================= MAIN ================= */
/* Conteneur du contenu principal (à droite de la sidebar) */
.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;         /* occupe toute la hauteur */
    width: calc(100% - 260px); /* espace restant pour contenu */
    padding: 20px;
    box-sizing: border-box;
}

/* ================= MAIN-CONTENT ================= */
/* Bloc titre + player + VU-mètre + débit */
.main-content {
    display: flex;
    flex-direction: column;    /* empilement vertical */
    align-items: center;       /* centre horizontalement tous les éléments */
    gap: 20px;                 /* espace vertical entre chaque élément */
    margin-top: 10vh;          /* remonte le bloc par rapport au top de la page */
}

/* ---------------- PLAYER AUDIO ---------------- */
/* HTML5 player responsive */
audio {
    width: 70%;                /* largeur relative au parent */
    max-width: 500px;          /* limite sur grands écrans */
    margin: 0 auto;            /* centre horizontalement */
}

/* ---------------- BITRATE / VU BAR ---------------- */
/* Affichage du débit en kbps */
#bitrate {
    color: #aaa;
    text-align: center;
}

/* Conteneur barre verte du débit */
#vu-container {
    width: 50%;                /* moins large que le player */
    max-width: 400px;          /* limite maximale */
    height: 6px;               /* hauteur de la barre */
    background: #222;          /* fond gris foncé */
    border-radius: 3px;        /* coins arrondis */
    overflow: hidden;
    margin: 5px auto;          /* centre horizontalement */
}

/* Barre verte dynamique indiquant le débit réel */
#vu-bar {
    height: 100%;              /* prend toute la hauteur du conteneur */
    width: 0%;                 /* largeur initiale, modifiée par JS */
    background: #0f0;          /* vert */
    transition: width 0.2s ease; /* animation fluide */
}

/* ---------------- VU-METRE “VINTAGE” ---------------- */
/* Canvas de l’effet vintage */
#vu-vintage-container {
    width: 200px;              /* largeur fixe */
    margin: 0 auto;            /* centré horizontalement */
    text-align: center;
}

/* ---------------- LEGEND ---------------- */
/* Bloc d’informations sur les codecs */
#format-info {
    margin-top: auto;          /* toujours collé en bas */
    padding: 15px;
    text-align: center;
    color: #aaa;
    font-size: 12px;
    line-height: 1.4;
}

/* ---------------- MENU TOGGLE ---------------- */
/* Bouton pour afficher la sidebar sur mobile */
#menu-toggle {
    display: none;             /* caché sur desktop */
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2000;
    background: #222;
    color: #fff;
    border: none;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
}

/* ================= MOBILE ================= */
@media (max-width:768px){

    /* Layout mobile : empilement vertical */
    body {
        flex-direction: column;
    }

    #menu-toggle {
        display: block;         /* bouton visible sur mobile */
    }

    .main {
        width: 100%;
        gap: 15px;
        padding: 10px;
    }

    .main-content {
        margin-top: 10vh;       /* descente légère */
        gap: 15px;
        align-items: center;    /* centré horizontalement */
    }

    #format-info {
        font-size: 11px;
    }

    /* Sidebar mobile : cachée par défaut */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1500;
    }

    /* Affichage de la sidebar quand toggle activé */
    .sidebar.show {
        transform: translateX(0);
    }

    /* VU et barre verte responsive mobile */
    #vu-container, #vu-vintage-container {
        width: 70%;           /* adaptatif sur mobile */
        max-width: none;
    }
}

/* iOS Safari spécifique */
@supports (-webkit-overflow-scrolling: touch) {
    /* Rapprocher player et nom de la station */
    #player {
        margin-bottom: 2px;   /* réduit l’espace */
        min-width: 0;          /* évite overflow sur iOS */
    }

    /* Rapprocher barre verte et label débit */
    #vu-container {
        margin-bottom: 2px;    /* rapproche du label */
    }

    /* Canvas VU-mètre : éviter tronquage */
    #vu-vintage-container {
        width: 180px;          /* légèrement réduit si nécessaire */
    }

    /* Flexbox gap correct pour iOS */
    .main-content {
        gap: 20px;             /* force un espacement correct */
    }
}