/* lecteur audio - - - */
.grid-audio audio {
    width:100%;
}

.lecteur_audio .lecteur_son_container {
    display:grid;
    grid-template-areas: 
        "playpause playtime"
        "playpause timeline";
    grid-template-columns: 44px 1fr;
    grid-template-rows: 1fr 10px;
    border-radius: 4px;
    background-color: #eee;
    overflow: hidden;
}

.playpause {
    grid-area: playpause;
}

.playpause button {
    background-position:center;
    background-repeat:no-repeat;
    border:0;
    height:44px;
    width:100%;
    background-size: 40px;
    
}
.playpause button:hover {
    color:var(--color-link-hover);
}

.playpause button:hover .bi.bi-play-fill {
    fill:var(--color-link-hover) !important;
}

.play {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000000' class='bi bi-play-fill' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/%3E%3C/svg%3E");
}

.pause {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f000000' class='bi bi-pause-fill' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3C/svg%3E");
}

.bi-pause-fill, .bi-play-fill {
    fill:red;
}

.playinfo {
    display:grid;
    grid-template-rows: 3fr 1fr;
    gap:2px;
}

.playtime {
    grid-area: playtime;
    place-self: center stretch;
    padding-left: 1em;
}

.timeline {
    background-color: #ddd;
    cursor:col-resize;
    box-sizing: border-box;
    grid-area: timeline;
}

.bar-played {
    background-color:var(--color-light);
    height:100%;
    width:0%;
}

.timeline:hover .bar-played {
    background-color:#ccc;
}


/* lecteur video - - - */
.lecteur_video {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "video"
        "controlarea";  
}
.lecteur_video .lecteur_video_container {
    background-color: #eee;
    grid-area: controlarea;
    display:grid;
    grid-template-areas: 
        "timeline timeline timeline"
        "playpause playtime fullscreen"; 
    grid-template-columns: 3em 1fr 3em; 

}
.lecteur_video video {
    width:100%;
    height:auto;
    cursor:pointer;
    object-fit: cover;
    display: block;
    grid-area: video;
    aspect-ratio: 4/3;
}

.lecteur_video .playpause button {
    height:24px;
    width:34px;
    background-size: 20px;
    border-radius:0;
}

.lecteur_video .playtime {   }

.lecteur_video .timeline {
    cursor:col-resize;
    box-sizing: border-box;
    height:10px;
}
.fullscreen {
    grid-area: fullscreen;
}
.f-enter, .f-exit {
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 34px;
    height: 100%;
}
.f-enter {
    background-image: url(../images/arrows-fullscreen.svg);
}
.f-exit {
    background-image: url(../images/arrows-windowed.svg);
}
.lecteur_video .f-enter, .lecteur_video .f-exit { 
    text-align:center; cursor: pointer; 
}
:fullscreen.lecteur_video video {
    height: calc(100vh - 4em);
}

:fullscreen.lecteur_video {
    position:fixed;
    bottom:0;
    left:0;
    width: 100%;
    height:100%:
}
:fullscreen.lecteur_video .f-enter, .lecteur_video .f-exit {
    display:none;
}
:fullscreen.lecteur_video .f-exit {
    display:block;
}