/* Bouton pause / lecture de la video d'accueil (js/lecteurfond.js).
   Petit et colle au coin bas droit, comme sur koto.com. Marges fixes et non
   --espacecote : cette variable passe a 17.5% au-dessus de 2000px et
   decollerait le bouton du coin sur grand ecran. */
.lecteurfond {
    --taille: 32px;
    --marge: 24px;
    position: absolute;
    right: var(--marge);
    bottom: var(--marge);
    width: var(--taille);
    height: var(--taille);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
}

.lecteurfond__anneau {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* le trait de progression part de midi, pas de 3 h */
    rotate: -90deg;
    fill: none;
    /* en unites du viewBox (44) : ~1.5px a l'ecran une fois reduit a 32px */
    stroke-width: 2;
}

.lecteurfond__piste {
    stroke: rgba(255, 255, 255, 0.2);
}

.lecteurfond__progres {
    stroke: currentColor;
    stroke-linecap: round;
}

.lecteurfond__icone {
    width: 9px;
    height: 9px;
    fill: currentColor;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.lecteurfond:hover .lecteurfond__icone {
    transform: scale(1.15);
}

.lecteurfond__lecture,
.lecteurfond.est-en-pause .lecteurfond__pause {
    display: none;
}

.lecteurfond.est-en-pause .lecteurfond__lecture {
    display: inline;
}

.lecteurfond:focus-visible {
    outline: 2px solid var(--vertmarque);
    outline-offset: 3px;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .lecteurfond {
        --taille: 28px;
        --marge: 16px;
    }
}