body {
    margin:0;
    background-color:rgb(23, 24, 26) ;
    color: rgb(255, 243, 169);
}

.cv { color: rgb(255, 243, 169);
text-align: justify;
line-height: 1.2em;
font-size: 1em;
}
p { color: rgb(255, 243, 169);
font-family: Palatino Linotype;
font-size: 1.5em;
font-style: italic;
line-height: 1.4em;
}
.presse { font-weight: normal;
font-family: Palatino Linotype;
font-size: 3em;
font-style: italic;
display: flex;
justify-content: center;
position:relative;
padding:1rem;
}

.signature { text-decoration: underline;
font-family: Garamond;
font-size: 1.4em;
line-height: 0em;
}

.disque { margin: 10px 1px;
line-height: 0.2em;
font-style: normal;
font-weight: normal;
font-size: 1.4em;
padding-top: 6px;
padding-bottom: 6px;
font-family: times new roman;
}

.extrait { color: rgb(196, 227, 243);
font-family: Arial;
font-size: 0.8em;
line-height: 0.6em;
margin-top: 2px;
margin-bottom: 2px;
padding-bottom: 4px;
padding-top: 6px;
}

dt { border: 2px ridge rgb(102, 102, 205);
margin: 0px 4px;
padding: 2px 7px 3px;
display: inline;
color: rgb(0, 0, 0);
font-weight: bold;
background-color: rgb(255, 255, 229);
font-family: Times New Roman;
font-size: 1.2em;
text-decoration: none;
}

.menu { color: rgb(0, 0, 67);
font-family: Times New Roman;
font-weight: inherit;
font-size: 1em;
}

.menu:hover { color: rgb(0, 0, 67);
font-family: Times New Roman;
font-weight: inherit;
font-size: 1em;
}

 a {
    color: rgb(255, 243, 169);
font-family: arial;
font-size: 1.1em;

}

a:hover { border: 3px none rgb(114, 128, 172);
color: rgb(18, 78, 195);

}

dl { padding-top: 4px;
padding-bottom: 2px;
}
.octavia { font-family: Times New Roman;
line-height: 0.2em;
font-size: 0.9em;
color: rgb(136, 152, 191);
}
.octavia:hover { line-height: 0.2em;
font-size: 0.9em;
color: rgb(136, 152, 191);
}
.song-title {
    font-size: 16px;
    text-align: center;
    /* margin-bottom: 10px; */
}

.nav{
    display: flex;
    text-align: center;
    justify-content: center;
    width: 100%;

}
 /* .nav dl dt a {
    font-size: 0.9rem;
 } */

.undisque { 
    display: flex;
    align-items: center;
    flex-direction: column;
    width:100%;
    padding-top: 10vh;
 
    
}

.lesdisques {
    display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     font-size: small;
}

.haut {
    display: flex;
    justify-content:space-around;
    align-items: center ;
    /* flex-flow: wrap; */
    width:40vw;
}

.bas {
    display: flex;
    justify-content:center;
    align-items: center ;
    width: 100%;
    flex-flow: wrap;
    padding-bottom: 1rem;
}

.haut > *{
    padding:1rem;

}
.bas > *{
    padding:1rem;

}

.descriptif{
    line-height: 1rem;
    font-size: 13px;
}

.descriptif p {
    overflow-wrap: break-word; /* Pour les navigateurs modernes */
    word-wrap: break-word; /* Pour les navigateurs plus anciens */
}

* img {
    width : 300px;
}

.milieu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 16px;
}

/*  tout ça c'est pour le mini-lecteur */

.audio-container {
    width: 5cm;
    height: 1.5cm;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px;
}

.audio-player {
    display: none;
}

.player-controls {
    display: flex;
    align-items: center;
    width: 100%;
}

.play-pause-button {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin-right: 10px;
    font-size: 20px;
    color: #3498db;
}

.play-icon {
    display: inline;
}

.pause-icon {
    display: none;
}

.progress-bar {
    flex-grow: 1;
    height: 6px;
    background-color: #ccc;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    overflow: hidden; 
}

.progress {
    height: 100%;
    width: 0;
    background-color: #3498db;
}

/* .duration {
    font-size: 14px;
} */

/*  fin du mini-lecteur */

@media (max-width: 600px ) {
    .haut {
        width:100%;
        flex-direction: column;
    }
}