/* ── Conteneur général ─────────────────────────────────── */
.ic-chants-list {
    max-width: 560px;
    margin: 0 auto;
    font-family: inherit;
}

/* ── Carte chant ───────────────────────────────────────── */
.ic-chant-item {
    background: #1d1d1d;
    color: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 24px;
    overflow: hidden;
}

/* ── En-tête ───────────────────────────────────────────── */
.ic-chant-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #2e2e2e;
}

.ic-note-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #1da0c3;
}

.ic-chant-title {
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
}

/* ── Player ────────────────────────────────────────────── */
.ic-player {
    padding: 12px 16px 0;
}

.ic-player-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

/* Bouton play/pause */
.ic-play-pause {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1da0c3;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
}

.ic-play-pause:hover {
    background: #17889e;
}

.ic-play-pause svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

/* Zone droite du player */
.ic-player-right {
    flex: 1;
    min-width: 0;
}

.ic-now-playing {
    display: block;
    font-size: 0.78em;
    color: #1da0c3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ic-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ic-progress-bar {
    flex: 1;
    height: 3px;
    background: #3a3a3a;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.ic-progress-fill {
    height: 100%;
    width: 0;
    background: #1da0c3;
    border-radius: 2px;
    transition: width 0.1s linear;
}

.ic-time {
    font-size: 0.72em;
    color: #888;
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}

/* ── Tracklist ─────────────────────────────────────────── */
.ic-tracklist {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #2e2e2e;
}

.ic-track {
    display: flex;
    align-items: center;
    padding: 9px 16px;
    cursor: pointer;
    border-bottom: 1px solid #262626;
    transition: background 0.1s;
    gap: 10px;
    font-size: 0.88em;
}

.ic-track:last-child {
    border-bottom: none;
}

.ic-track:hover {
    background: #282828;
}

.ic-track--active {
    color: #1da0c3;
}

.ic-track-num {
    width: 16px;
    text-align: center;
    color: #666;
    font-size: 0.8em;
    flex-shrink: 0;
}

.ic-track--active .ic-track-num {
    color: #1da0c3;
}

.ic-track-playing {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: #1da0c3;
}

.ic-track-name {
    flex: 1;
}

.ic-track-duration {
    color: #666;
    font-size: 0.85em;
    flex-shrink: 0;
}

/* ── Boutons téléchargement ────────────────────────────── */
.ic-chant-downloads {
    display: flex;
    gap: 0;
    border-top: 1px solid #2e2e2e;
}

.ic-dl-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    font-size: 0.8em;
    text-decoration: none;
    color: #aaa;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.03em;
}

.ic-dl-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

.ic-dl-btn:hover {
    background: #282828;
    color: #fff;
    text-decoration: none;
}

.ic-dl-pdf  { border-right: 1px solid #2e2e2e; }

/* ── États vides ───────────────────────────────────────── */
.ic-restricted,
.ic-empty {
    color: #888;
    font-style: italic;
}