@font-face
{
    font-family: "Alata";
    font-style: normal;
    font-weight: normal;
    src: url("../police/alata.ttf");
}
:root
{
    --couleur-alt-1:rgba(255, 255, 255, 0.05);
    --couleur-alt-2:rgba(255, 255, 255, 0.1);
    --couleur-alt-3:rgba(14, 22, 37, 0.8);
    --couleur-alt-4:rgba(0, 255, 204, 0.1);
    --couleur-alt-5:rgba(0, 255, 204, 0.5);
    --couleur-blanche:#eeeeee;
    --couleur-jaune:#ffdd00;
    --couleur-nuit:#0e1625;
    --couleur-turquoise:#00ffcc;
    color-scheme: dark;
}

*
{
    box-sizing: border-box;
}
html
{
    font-size: 100%;
}
html,
body
{
    min-height: 100%;
    overscroll-behavior-y: none;
}
body
{
    background: var(--couleur-nuit);
    color: var(--couleur-blanche);
    font-family: "Alata", sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    margin: 0;
    min-width: 360px;
}
button,
input,
select
{
    font-family: inherit;
    font-size: 1rem;
}

/* jukebox */
.jukebox
{
    background-image: radial-gradient(at 90% 90%, #0fc 0px, transparent 50%), radial-gradient(at 30% 70%, #0bf 0px, transparent 50%), radial-gradient(at 90% 40%, #0cf 0px, transparent 50%), radial-gradient(at 20% 0%, #0ff 0px, transparent 50%);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    width: 100%;
}

/* vinyle */
.vinyle
{
    align-items: center;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.vinyle .decouverte-vinyle
{
    align-items: center;
    display: flex;
    height: clamp(20rem, 91vw, 30rem);
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: clamp(20rem, 91vw, 30rem);
}
.vinyle .pochette-vinyle
{
    background: var(--couleur-alt-3);
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
    z-index: 30;
}
.vinyle .pochette-vinyle img
{
    display: block;
    opacity: 0;
    transition: opacity 1s ease-in;
    width: 100%;
}
.vinyle .pochette-vinyle img.devoiler
{
    opacity: 1;
}
.vinyle .disque-vinyle
{
    border-radius: 50%;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.4);
    height: 80%;
    position: relative;
    width: 80%;
}
.vinyle .disque-vinyle .platine-vinyle
{
    background: var(--couleur-turquoise);
    border-radius: 50%;
    inset: 5%;
    position: absolute;
    z-index: 10;
}
.vinyle .disque-vinyle svg
{
    fill: var(--couleur-nuit);
    position: relative;
    z-index: 20;
}
.vinyle .disque-vinyle.animation svg
{
    animation: lancer-vinyle 5s ease-in;
}
@keyframes lancer-vinyle
{
    from
    {
        transform: rotate(0deg);
    }
    to
    {
        transform: rotate(3600deg);
    }
}
.vinyle .legende-vinyle
{
    backdrop-filter: blur(16px);
    background: var(--couleur-alt-3);
    opacity: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    transition: opacity 0.5s ease;
    z-index: 40;
}
.vinyle .legende-vinyle.devoiler
{
    opacity: 1;
}
.vinyle .legende-vinyle p
{
    color: var(--couleur-turquoise);
    margin: 1.5rem;
}
.vinyle .action
{
    align-items: center;
    background: var(--couleur-alt-3);
    border-top: 2px solid var(--couleur-turquoise);
    display: flex;
    width: 100%;
}
.vinyle .action button
{
    border: none;
    cursor: pointer;
    height: 3.5rem;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.vinyle .action button::before
{
    background: linear-gradient(90deg, transparent, var(--couleur-alt-4), transparent);
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    transition: left 0.5s ease;
}
.vinyle .action button:hover::before
{
    left: 100%;
}
.vinyle .action .action-decouvrir
{
    background: var(--couleur-turquoise);
    color: var(--couleur-nuit);
}
.vinyle .action .action-decouvrir:hover,
.vinyle .action .action-decouvrir:disabled
{
    background: var(--couleur-nuit);
    color: var(--couleur-turquoise);
}
.vinyle .action button:disabled::before
{
    left: 100%;
}
.vinyle .action .action-garder,
.vinyle .action .action-laisser
{
    align-items: center;
    background: none;
    display: flex;
    gap: .2rem;
    justify-content: center;
}
.vinyle .action .action-garder
{
    color: var(--couleur-turquoise);
}
.vinyle .action .action-laisser
{
    color: var(--couleur-blanche);
}
.vinyle .action .action-garder .ico-disque
{
    fill: var(--couleur-turquoise);
    height: 1.3rem;
    margin-right: .1rem;
    overflow: visible;
    width: 1.3rem;
}
.vinyle .action .action-laisser svg
{
    fill: var(--couleur-blanche);
    height: 1.3rem;
    width: 1.3rem;
}
.vinyle .action .action-garder:hover,
.vinyle .action .action-laisser:hover,
.vinyle .action .action-garder:disabled,
.vinyle .action .action-laisser:disabled
{
    background: var(--couleur-nuit);
}
.vinyle .action .rtr-action
{
    align-items: center;
    background: none;
    color: var(--couleur-turquoise);
    display: flex;
    gap: .2rem;
    justify-content: center;
}
.vinyle .action .rtr-action svg
{
    fill: var(--couleur-turquoise);
    height: 1.4rem;
    width: 1.4rem;
}

/* header */
.bonjour
{
    align-items: center;
    background: var(--couleur-nuit);
    border-bottom: 1px solid var(--couleur-alt-2);
    display: flex;
    padding: .8rem;
}
.musique
{
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: .8rem;
    height: 4rem;
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    width: 100%;
}
.musique .disque-musique
{
    background: var(--couleur-blanche);
    border: .1rem solid transparent;
    border-radius: 50%;
    cursor: pointer;
    min-width: 3.2rem;
    overflow: hidden;
}
.musique .disque-musique.echo
{
    background: var(--couleur-turquoise);
}
.musique .disque-musique svg
{
    fill: rgba(14, 22, 37, 0.9);
    height: 3rem;
    overflow: visible;
    vertical-align: middle;
    width: 3rem;
}
.musique .disque-musique.lecture svg
{
    animation: tourner-disque 5s linear infinite;
}
.musique .disque-musique.lecture.disque-pause svg
{
    animation-play-state: paused;
}
@keyframes tourner-disque
{
    from
    {
        transform: rotate(0deg);
    }
    to
    {
        transform: rotate(360deg);
    }
}
.musique .dtl-titre
{
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1.2;
    margin: 0;
}
.musique .dtl-titre .badge-radio
{
    background: var(--couleur-alt-3);
    border: .1rem solid var(--couleur-turquoise);
    color: var(--couleur-turquoise);
    display: inline-block;
    font-size: .65rem;
    letter-spacing: 1px;
    line-height: 1;
    margin-left: .5rem;
    padding: .2rem;
    text-transform: uppercase;
    vertical-align: top;
    white-space: nowrap;
}
.musique .dtl-artiste
{
    margin: 0;
}
.musique .dtl-artiste a
{
    color: var(--couleur-turquoise);
    text-decoration: none;
}

/* main */
.jukebox main
{
    background: rgba(14, 22, 37, 0.6);
    flex-grow: 1;
    margin: auto;
    overflow-y: auto;
    overscroll-behavior-y: none;
    padding: 0;
    width: 100%;
}

/* visuel */
.visuel
{
    height: 2.5rem;
    position: relative;
    width: 2.5rem;
}
.visuel .lecture-musique
{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.visuel .lecture-musique.volume
{
    background: var(--couleur-alt-3);
    border: 1px solid var(--couleur-alt-2);
    cursor: pointer;
    display: inline-block;
    height: 100%;
    width: 100%;
}
.visuel .lecture-musique .note
{
    background: var(--couleur-blanche);
    bottom: .4em;
    display: inline-block;
    font-size: .8em;
    height: .2em;
    position: absolute;
    width: .6em;
}
.visuel .lecture-musique .note:nth-child(1)
{
    left: .4em;
}
.visuel .lecture-musique .note:nth-child(2)
{
    left: 1.2em;
}
.visuel .lecture-musique .note:nth-child(3)
{
    left: 2em;
}
.visuel.lecture .volume .br-1
{
    animation: animer-barre-1 2s ease-in-out 0.2s infinite;
}
.visuel.lecture .volume .br-2
{
    animation: animer-barre-2 2s ease-in-out infinite;
}
.visuel.lecture .volume .br-3
{
    animation: animer-barre-3 2s ease-in-out 0.4s infinite;
}
@keyframes animer-barre-1
{
    from
    {
        height: .2em;
    }
    25%
    {
        height: 1.3em;
    }
    50%
    {
        height: .5em;
    }
    75%
    {
        height: 1.9em;
    }
    to
    {
        height: .2em;
    }
}
@keyframes animer-barre-2
{
    from
    {
        height: .2em;
    }
    25%
    {
        height: 1.3em;
    }
    50%
    {
        height: .3em;
    }
    75%
    {
        height: 1.9em;
    }
    to
    {
        height: .2em;
    }
}
@keyframes animer-barre-3
{
    from
    {
        height: .2em;
    }
    25%
    {
        height: 1.9em;
    }
    50%
    {
        height: .5em;
    }
    75%
    {
        height: 1.5em;
    }
    to
    {
        height: .2em;
    }
}

/* scene */
.scene
{
    align-items: center;
    animation: fondu 0.3s ease-in-out forwards;
    display: none;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
}
@keyframes fondu
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}
.scene.acme
{
    display: flex;
}
.scene .lecture-piste
{
    background: var(--couleur-alt-3);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.4);
}
.scene .piste
{
    height: clamp(20rem, 91vw, 30rem);
    position: relative;
    width: clamp(20rem, 91vw, 30rem);
}
.scene .piste img
{
    display: block;
    height: 100%;
    width: 100%;
}
.scene .badge-piste
{
    backdrop-filter: blur(16px);
    background: var(--couleur-alt-3);
    border: 1px solid;
    color: var(--couleur-turquoise);
    font-size: .7rem;
    opacity: 0.9;
    padding: .15rem .3rem;
    position: absolute;
    right: .8rem;
    bottom: .8rem;
    text-transform: uppercase;
    user-select: none;
}
.scene .page-artiste
{
    background: var(--couleur-alt-3);
    display: grid;
    gap: 2rem;
    grid-template-rows: repeat(3, max-content);
    min-height: 100%;
    overflow: hidden;
    padding-bottom: 2rem;
    width: 100%;
}
.scene .page-artiste h2
{
    border-bottom: 8px solid var(--couleur-alt-4);
    color: var(--couleur-turquoise);
    display: inline-block;
    font-size: 1.4rem;
    padding-bottom: .1rem;
}
.scene .profil-artiste
{
    position: relative;
    overflow: hidden;
    width: 100%;
}
.scene .profil-artiste .fond
{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(32px) brightness(0.7);
    inset: -48px;
    opacity: 0.5;
    position: absolute;
    transform: scale(1.1);
}
.scene .profil-artiste .presentation
{
    align-items: center;
    display: flex;
    gap: 2rem;
    height: 100%;
    margin: auto;
    max-width: 50rem;
    padding: 2rem 1rem;
    position: relative;
    width: 91vw;
}
.scene .iartiste
{
    position: relative;
}
.scene .iartiste .avatar-iartiste
{
    align-items: center;
    display: flex;
    height: 15rem;
    justify-content: center;
    position: relative;
    width: 15rem;
}
.scene .iartiste .avatar-iartiste .img-artiste
{
    height: 100%;
    width: 100%;
}
.scene .iartiste .avatar-iartiste .img-artiste img
{
    border: .5rem solid var(--couleur-alt-2);
    border-radius: 50%;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.4);
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.scene .iartiste .lecture-iartiste
{
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 100%;
    justify-content: center;
    opacity: 0.8;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.scene .iartiste svg
{
    fill: var(--couleur-blanche);
    height: 4rem;
    width: 4rem;
}
.scene .iartiste.lecture .lecture-iartiste,
.scene .iartiste .lecture-iartiste:hover
{
    background: var(--couleur-alt-3);
}
.scene .iartiste .lecture-musique
{
    align-items: center;
    display: none;
    height: 2.6rem;
    justify-content: center;
    position: relative;
    width: 2.6rem;
}
.scene .iartiste .lecture-musique .note
{
    background: var(--couleur-blanche);
    bottom: 1em;
    display: inline-block;
    font-size: .8em;
    height: .2em;
    position: absolute;
    width: .6em;
}
.scene .iartiste .lecture-musique .note:nth-child(1)
{
    left: .4em;
}
.scene .iartiste .lecture-musique .note:nth-child(2)
{
    left: 1.2em;
}
.scene .iartiste .lecture-musique .note:nth-child(3)
{
    left: 2em;
}
.scene .iartiste.lecture.volume .br-1
{
    animation: animer-barre-1 2s ease-in-out 0.2s infinite;
}
.scene .iartiste.lecture.volume .br-2
{
    animation: animer-barre-2 2s ease-in-out infinite;
}
.scene .iartiste.lecture.volume .br-3
{
    animation: animer-barre-3 2s ease-in-out 0.4s infinite;
}
.scene .iartiste.lecture .lecture-musique
{
    display: flex;
}
.scene .iartiste.lecture svg
{
    display: none;
}
.scene .profil-artiste .dtl-nom
{
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0;
    text-shadow: 0px 5px 20px rgba(0, 0, 0, 0.4);
}
.scene .profil-artiste .lien-profil
{
    margin: 1rem;
    position: absolute;
    top: 0;
    right: 0;
}
.scene .profil-artiste .lien-profil .btn-partager
{
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    height: 2.4rem;
    place-items: center;
    width: 2.4rem;
}
.scene .profil-artiste .lien-profil .btn-partager:hover
{
    background: var(--couleur-alt-1);
}
.scene .profil-artiste .lien-profil .btn-partager svg
{
    fill: var(--couleur-blanche);
    height: 1.4rem;
    width: 1.4rem;
}
.scene .composition-artiste
{
    height: 100%;
    margin: auto;
    max-width: 50rem;
    position: relative;
    width: 91vw;
}
.scene .carrousel-artiste
{
    padding: 1rem;
}
.scene .carrousel
{
    align-items: center;
    display: flex;
    height: 10rem;
    justify-content: center;
    perspective: 50rem;
    position: relative;
}
.scene .carrousel .pochette-carrousel
{
    box-shadow: 0px 5px 20px var(--couleur-alt-4);
    filter: brightness(0.5);
    height: 10rem;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 10rem;
    z-index: 1;
}
.scene .carrousel .pochette-carrousel.transition
{
    transition: all 0.4s ease;
}
.scene .carrousel .pochette-carrousel.disque-gc
{
    transform: translateX(-10rem) scale(0.8) rotateY(30deg);
    pointer-events: none;
}
.scene .carrousel .pochette-carrousel.disque-ctr
{
    filter: brightness(1);
    opacity: 1;
    transform: translateX(0) scale(1) rotateY(0deg);
    z-index: 110;
}
.scene .carrousel .pochette-carrousel.disque-dr
{
    filter: brightness(0.7);
    opacity: 0.7;
    transform: translateX(10rem) scale(0.8) rotateY(-30deg);
    z-index: 100;
}
.scene .carrousel .pochette-carrousel.disque-sdr
{
    transform: translateX(16rem) scale(0.6) rotateY(-40deg);
    pointer-events: none;
}
.scene .carrousel .visuel
{
    height: 100%;
    position: relative;
    width: 100%;
}
.scene .carrousel .visuel img
{
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.scene .carrousel .visuel .carrousel-lecture
{
    border: .2rem solid var(--couleur-alt-5);
}
.scene .carrousel .pochette-carrousel.disque-ctr .carrousel-lecture
{
    border: .2rem solid var(--couleur-turquoise);
}
.scene .carrousel .pochette-carrousel.disque-ctr .carrousel-lecture:hover,
.scene .carrousel .pochette-carrousel.disque-dr .carrousel-lecture:hover
{
    cursor: pointer;
}
.carrousel .visuel .carrousel-lecture
{
    align-items: center;
    display: flex;
    justify-content: center;
    opacity: 0.8;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.carrousel .pochette-carrousel .visuel.lecture .carrousel-lecture
{
    background: var(--couleur-alt-3);
}
.carrousel .visuel .carrousel-lecture svg
{
    fill: var(--couleur-blanche);
    height: 3rem;
    width: 3rem;
}
.carrousel .visuel.lecture .carrousel-lecture .lecture-musique
{
    align-items: center;
    display: flex;
    height: 2.6rem;
    justify-content: center;
    position: relative;
    width: 2.6rem;
}
.carrousel .visuel.lecture .carrousel-lecture svg
{
    display: none;
}
.scene .piste-carrousel
{
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr auto;
}
.scene .piste-carrousel .fleche-carrousel
{
    position: relative;
    z-index: 120;
}
.scene .piste-carrousel .fleche-carrousel button
{
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    height: 2.4rem;
    overflow: hidden;
    place-items: center;
    width: 2.4rem;
}
.scene .piste-carrousel .fleche-carrousel button:hover
{
    background: var(--couleur-alt-1);
}
.scene .piste-carrousel .fleche-carrousel button svg
{
    fill: var(--couleur-blanche);
    height: 1.8rem;
    width: 1.8rem;
}
.scene .composition-artiste .information
{
    margin: 1rem;
    text-align: center;
}
.scene .composition-artiste .information h3
{
    margin: 0;
}
.scene .composition-artiste .information p
{
    margin: 0;
}
.scene .profil-studio
{
    margin: auto;
    max-width: 50rem;
    width: 91vw;
}
.scene .carte-studio
{
    align-items: center;
    display: flex;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
}
.scene .carte-studio p
{
    margin: 0;
}
.scene .carte-studio .img-studio
{
    height: 5rem;
    min-width: 5rem;
    width: 5rem;
}
.scene .carte-studio .img-studio img
{
    border: .25rem solid var(--couleur-alt-2);
    border-radius: 50%;
    display: block;
    height: 100%;
    width: 100%;
}
.scene .carte-studio .legende-studio
{
    font-size: 1.1rem;
}
.scene .carte-studio .lien-studio
{
    display: inline-flex;
    margin-left: auto;
}
.scene .carte-studio .lien-studio a
{
    color: var(--couleur-blanche);
    padding: .5rem;
    text-decoration: none;
}
.scene .carte-studio .lien-studio svg
{
    fill: var(--couleur-blanche);
    height: 1.3rem;
    vertical-align: bottom;
}
.scene .carte-studio .lien-studio .label-reseau
{
    margin-left: .4rem;
    text-transform: capitalize;
}
.lecture-piste .action
{
    align-items: center;
    border-top: 2px solid var(--couleur-turquoise);
    display: grid;
    grid-template-columns: auto 3.5rem;
    height: 3.5rem;
}
.action .debloquer
{
    height: 100%;
    width: 100%;
}
.action .action-debloquer
{
    align-items: center;
    background: none;
    border: none;
    color: var(--couleur-turquoise);
    cursor: pointer;
    display: flex;
    gap: .2rem;
    height: 100%;
    overflow: hidden;
    padding: 0rem 1rem;
    position: relative;
    text-align: left;
    width: 100%;
}
.action .action-debloquer:hover
{
    background: var(--couleur-nuit);
}
.action .action-debloquer::before
{
    background: linear-gradient(90deg, transparent, var(--couleur-alt-4), transparent);
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    transition: left 0.5s ease;
}
.action .action-debloquer:hover::before
{
    left: 100%;
}
.action .action-debloquer.dbl
{
    background: var(--couleur-turquoise);
    color: var(--couleur-nuit);
}
.action .action-debloquer.dbl:hover
{
    background: var(--couleur-turquoise);
}
.action .debloquer button svg
{
    fill: var(--couleur-turquoise);
    height: 1.4rem;
    width: 1.4rem;
}
.action .debloquer button .ico-disque
{
    height: 1.3rem;
    margin-right: .1rem;
    overflow: visible;
    width: 1.3rem;
}
.action .action-debloquer.dbl:disabled
{
    cursor: progress;
    opacity: 0.7;
}
.action .action-debloquer.dbl svg
{
    fill: var(--couleur-nuit);
}
.action .partager
{
    height: 100%;
    width: 3.5rem;
}
.action .btn-partager
{
    background: none;
    border: none;
    cursor: pointer;
    display: grid;
    font-family: inherit;
    height: 100%;
    overflow: hidden;
    position: relative;
    place-items: center;
    width: 100%;
}
.action .btn-partager:hover
{
    background: var(--couleur-alt-1);
}
.action .btn-partager svg
{
    fill: var(--couleur-blanche);
    height: 1.4rem;
    width: 1.4rem;
}

/* liste */
.liste
{
    background: var(--couleur-nuit);
    padding: 0rem .5rem;
}
.liste-lecture
{
    background: var(--couleur-nuit);
    flex-grow: 1;
    min-height: 100%;
    padding: .5rem;
    width: 100%;
}
.liste-lecture h2
{
    font-size: 1rem;
    letter-spacing: 1px;
    padding: 0rem .5rem;
    text-transform: uppercase;
}
.liste-lecture .liste-titre
{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    margin: 0;
    overflow: auto;
    padding: 0rem .5rem 2rem;
}
.liste-lecture .morceau
{
    align-items: center;
    background: var(--couleur-alt-1);
    cursor: pointer;
    display: flex;
    gap: .5rem;
    padding: .8rem;
    position: relative;
}
.liste-lecture .morceau:hover
{
    background: var(--couleur-alt-2);
}
.liste-lecture .morceau.selection
{
    background: var(--couleur-alt-2);
    border: 1px solid var(--couleur-turquoise);
}
.liste-lecture .morceau img
{
    border: 1px solid var(--couleur-alt-2);
    height: 2.5rem;
    width: 2.5rem;
}
.liste-lecture .morceau .information
{
    min-width: 0;
    padding-right: 2.5rem;
}
.liste-lecture .morceau .i-titre
{
    font-size: 1rem;
}
.liste-lecture .morceau .i-artiste
{
    font-size: .8rem;
}
.liste-lecture .morceau .i-titre,
.liste-lecture .morceau .i-artiste
{
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.liste-lecture .morceau .retirer
{
    background: var(--couleur-alt-3);
    border: 1px solid var(--couleur-alt-2);
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    height: 1.7rem;
    place-items: center;
    position: absolute;
    right: .8rem;
    width: 1.7rem;
}
.liste-lecture .morceau .retirer svg
{
    fill: var(--couleur-blanche);
}

/* collection */
.collection
{
    background: var(--couleur-alt-3);
    flex-grow: 1;
    min-height: 100%;
    padding: .5rem;
}
.collection h2
{
    font-size: 1rem;
    letter-spacing: 1px;
    padding: 0rem .5rem;
    text-transform: uppercase;
}
.message-collection
{
    margin: 1rem 0rem;
}
.message-collection .notification
{
    align-items: center;
    background: var(--couleur-alt-4);
    border: 1px solid var(--couleur-alt-5);
    box-shadow: 0px 5px 20px var(--couleur-alt-1);
    display: flex;
    gap: .5rem;
    justify-content: center;
    padding: .5rem;
}
.message-collection .notification .ico-notification
{
    display: flex;
}
.message-collection .notification .ico-notification svg
{
    fill: var(--couleur-turquoise);
    width: 2.2rem;
}
.message-collection .notification a
{
    color: var(--couleur-turquoise);
    text-decoration: none;
}
.liste-collection
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .5rem;
    list-style: none;
    padding: 0;
    width: 100%;
}
.liste-collection .titre
{
    background: var(--couleur-alt-3);
    border: 1px solid var(--couleur-alt-2);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    position: relative;
}
.liste-collection .titre:hover,
.liste-collection .titre.selection
{
    border: 1px solid var(--couleur-alt-5);
    opacity: 0.7;
}
.liste-collection .visuel
{
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
}
.liste-collection .visuel img
{
    display: block;
    width: 100%;
}
.liste-collection .label
{
    border-top: .1rem solid var(--couleur-turquoise);
    padding: .5rem;
    text-align: center;
    width: 100%;
}
.liste-collection .label .i-artiste,
.liste-collection .label .i-titre
{
    font-size: .9rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.liste-collection .information
{
    align-items: center;
    background: var(--couleur-alt-1);
    border: 1px solid var(--couleur-alt-2);
    display: grid;
    grid-column: 1 / -1;
    cursor: pointer;
    padding: .5rem;
    position: relative;
    text-align: center;
}

/* lecteur */
.manette
{
    align-items: center;
    background: var(--couleur-alt-3);
    display: flex;
    flex-wrap: wrap;
    padding: .8rem;
    position: relative;
}
.manette button
{
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    font-family: inherit;
    height: 2.6rem;
    overflow: hidden;
    place-items: center;
    position: relative;
    width: 2.6rem;
}
.manette button:hover
{
    background: var(--couleur-alt-2);
}
.manette button svg
{
    fill: var(--couleur-blanche);
    height: 2rem;
    width: 2rem;
}
.manette button.activer svg
{
    fill: var(--couleur-turquoise);
}
.manette .manette-haut
{
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    width: 100%;
}
.manette .controle
{
    align-items: center;
    display: flex;
    gap: .8rem;
    grid-column: 2;
    justify-self: center;
}
.manette .controle button#btn-lecture
{
    background: var(--couleur-alt-3);
    border: 2px solid var(--couleur-turquoise);
    height: 3.2rem;
    width: 3.2rem;
}
.manette .controle button:hover,
.manette .controle button#btn-lecture:hover
{
    background: var(--couleur-alt-2);
}
.manette .controle .ctrl svg
{
    fill: var(--couleur-blanche);
    width: 100%;
}
.manette .controle .ctrl#btn-lecture svg
{
    fill: var(--couleur-turquoise);
}
.manette .file-lecture
{
    grid-column: 3;
    justify-self: end;
}
.manette .file-lecture .file svg
{
    height: 1.6rem;
    width: 1.6rem;
}
.manette .manette-bas
{
    align-items: center;
    display: grid;
    grid-template-columns: 2.6rem auto 2.6rem;
    gap: 1rem;
    width: 100%;
}
.manette .minuteur
{
    align-items: center;
    display: flex;
    justify-self: start;
}
.manette .minuteur .veille svg
{
    height: 1.8rem;
    width: 1.8rem;
}
.manette .minuteur .veille .badge
{
    color: var(--couleur-turquoise);
    display: none;
    font-size: 1.1rem;
    font-weight: bold;
}
.manette .minuteur .veille.activer,
.manette .file.activer
{
    border: 2px solid var(--couleur-turquoise);
}
.manette .minuteur .veille.activer svg
{
    display: none;
}
.manette .minuteur .veille.activer .badge
{
    display: grid;
}
.manette .aleatoire .shuffle svg
{
    height: 1.4rem;
    width: 1.4rem;
}
.manette .repetition
{
    align-items: center;
    display: flex;
}
.manette .repetition .repeter svg
{
    height: 1.6rem;
    width: 1.6rem;
}
.manette .repetition .repeter .badge
{
    color: var(--couleur-blanche);
    font-size: .5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.manette .repetition .repeter.activer svg
{
    fill: var(--couleur-turquoise);
}
.manette .repetition .repeter.activer .badge
{
    color: var(--couleur-turquoise);
}
.manette .progression
{
    align-items: center;
    display: grid;
    grid-template-columns: auto 1fr auto;
    margin-bottom: .2rem;
    position: relative;
    width: 100%;
}
.manette .progression .temps
{
    font-size: .8rem;
    letter-spacing: 1px;
    user-select: none;
}
.manette .progression .temps#duree
{
    justify-self: end;
}
.manette .progression .barre
{
    background: var(--couleur-alt-3);
    cursor: pointer;
    grid-column: 1 / -1;
    height: .5rem;
    margin: .1rem 0rem;
    overflow: hidden;
    position: relative;
}
.manette .progression .defilement
{
    background: var(--couleur-turquoise);
    inset: 0 auto 0 0;
    position: absolute;
    transition: width 0.2s linear;
    width: 0%;
}
.manette.mini .manette-bas
{
    display: none;
}
.manette.radio button:disabled
{
    cursor: not-allowed;
    opacity: 0.1;
}
.manette.radio button:disabled:hover
{
    background: none;
}
.manette.radio .progression .barre
{
    cursor: not-allowed;
}

/* univers */
.univers
{
    background: var(--couleur-alt-3);
    flex-grow: 1;
    padding: 0rem .8rem;
    width: 100%;
}
.univers .contenu-univers
{
    margin: 0rem auto 1rem;
    user-select: none;
    width: 91vw;
}
.univers .titre-univers
{
    border-bottom: 8px solid var(--couleur-alt-4);
    color: var(--couleur-turquoise);
    display: inline-block;
    font-size: 1.4rem;
    padding-bottom: .1rem;
}
.univers .grille-univers
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .8rem;
    padding: 1rem 0rem;
    width: 100%;
}
.univers .carte-univers
{
    align-items: center;
    aspect-ratio: 1 / 1;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    display: flex;
    justify-content: center;
    letter-spacing: 1px;
    overflow: hidden;
    position: relative;
}
.univers .carte-radio
{
    align-items: center;
    background: var(--couleur-alt-3);
    border: .2rem solid var(--couleur-turquoise);
    box-shadow: 0px 0px 20px var(--couleur-alt-4);
    color: var(--couleur-turquoise);
    cursor: pointer;
    display: flex;
    gap: .4rem;
    grid-column: span 2;
    justify-content: center;
    letter-spacing: 1px;
    overflow: hidden;
    position: relative;
    text-shadow: 0px 0px 20px var(--couleur-alt-4);
}
.univers .jkm-echo
{
    background: linear-gradient(135deg, #00ffcc 0%, #003333 100%);
}
.univers .jkm-fizz
{
    background: linear-gradient(135deg, #fff500 0%, #ff0080 100%);
}
.univers .jkm-pulse
{
    background: linear-gradient(135deg, #ff006e 0%, #8b00ff 100%);
}
.univers .jkm-ritmo
{
    background: linear-gradient(135deg, #ff0000 0%, #670000 100%);
}
.univers .jkm-verse
{
    background: linear-gradient(135deg, #0094dc 0%, #440095 100%);
}
.univers .jkm-wide
{
    background: linear-gradient(135deg, #ffd700 0%, #5a2900 100%);
}
.univers .carte-titre
{
    font-size: 2rem;
    text-transform: uppercase;
}
.univers .carte-piste
{
    align-items: center;
    color: var(--couleur-alt-2);
    display: flex;
    font-size: 6.5rem;
    justify-content: center;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.univers .carte-lecture
{
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    opacity: 0.8;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2.5rem;
}
.univers .carte-lecture svg
{
    fill: var(--couleur-blanche);
    height: 2rem;
    width: 2rem;
}
.univers .carte-radio .carte-titre
{
    margin-right: 2.7rem;
}
.univers .carte-radio .carte-lecture
{
    position: relative;
}
.univers .carte-radio svg
{
    fill: var(--couleur-turquoise);
    height: 100%;
    width: 100%;
}
.univers .carte-univers:hover,
.univers .carte-radio:hover
{
    opacity: 0.7;
}
.univers .carte-univers:hover .carte-lecture,
.univers .carte-radio:hover .carte-lecture
{
    opacity: 1;
}
.univers .carte-iartiste
{
    cursor: pointer;
    text-align: center;
}
.univers .carte-iartiste .avatar-iartiste
{
    align-items: center;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}
.univers .carte-iartiste img
{
    border: .4rem solid var(--couleur-alt-2);
    border-radius: 50%;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.4);
    height: 100%;
    width: 100%;
}
.univers .carte-iartiste:hover .avatar-iartiste
{
    opacity: 0.7;
}
.univers .carte-iartiste .nom-iartiste
{
    font-size: 1.2rem;
    margin: 0.5rem 0rem;
}
.univers .carte-iartiste .nom-iartiste a
{
    color: var(--couleur-blanche);
    text-decoration: none;
}
.univers .lecture-musique
{
    align-items: center;
    display: none;
    height: 2.5rem;
    justify-content: center;
    position: absolute;
    width: 2.5rem;
}
.univers .lecture-musique .note
{
    background: var(--couleur-blanche);
    bottom: 1em;
    display: inline-block;
    font-size: .6em;
    height: .2em;
    position: absolute;
    width: .6em;
}
.univers .carte-radio .lecture-musique .note
{
    background: var(--couleur-turquoise);
}
.univers .lecture-musique .note:nth-child(1)
{
    left: 1em;
}
.univers .lecture-musique .note:nth-child(2)
{
    left: 1.8em;
}
.univers .lecture-musique .note:nth-child(3)
{
    left: 2.6em;
}
.univers .carte-univers.lecture.volume .br-1,
.univers .carte-radio.lecture.volume .br-1
{
    animation: animer-barre-1 2s ease-in-out 0.2s infinite;
}
.univers .carte-univers.lecture.volume .br-2,
.univers .carte-radio.lecture.volume .br-2
{
    animation: animer-barre-2 2s ease-in-out infinite;
}
.univers .carte-univers.lecture.volume .br-3,
.univers .carte-radio.lecture.volume .br-3
{
    animation: animer-barre-3 2s ease-in-out 0.4s infinite;
}
.univers .carte-univers.lecture .lecture-musique,
.univers .carte-radio.lecture .lecture-musique
{
    display: flex;
}
.univers .carte-univers.lecture svg,
.univers .carte-radio.lecture svg
{
    display: none;
}

/* compte */
.page-compte
{
    align-items: center;
    background: var(--couleur-alt-3);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1rem;
    width: 100%;
}
.page-compte .message-compte .notification
{
    align-items: center;
    background: var(--couleur-alt-4);
    border: 1px solid var(--couleur-alt-5);
    box-shadow: 0px 5px 20px var(--couleur-alt-1);
    color: var(--couleur-turquoise);
    cursor: pointer;
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin: 1rem 0rem;
    padding: .5rem;
    width: clamp(20rem, 91vw, 30rem);
}
.page-compte .message-compte .notification .ico-boucle
{
    display: flex;
}
.page-compte .message-compte .notification .ico-boucle svg
{
    fill: var(--couleur-turquoise);
    width: 1.1rem;
}
.page-compte .presentation-compte
{
    width: clamp(20rem, 91vw, 30rem);
}
.page-compte .carte-compte
{
    align-items: center;
    border-bottom: 2px solid var(--couleur-turquoise);
    display: flex;
    gap: .5rem;
    padding: .2rem;
}
.page-compte .carte-compte .avatar-compte
{
    aspect-ratio: 1 / 1;
    min-width: 5rem;
    width: 5rem;
}
.page-compte .carte-compte .avatar-compte img
{
    display: block;
    height: 100%;
    width: 100%;
}
.page-compte .carte-compte .detail-compte h2
{
    color: var(--couleur-turquoise);
    font-size: 1.4rem;
    margin: 0;
}
.page-compte .carte-compte .detail-compte h2 a
{
    color: var(--couleur-blanche);
    text-decoration: none;
}
.page-compte .carte-compte .detail-compte h2 a:hover
{
    color: var(--couleur-turquoise);
}
.page-compte .carte-compte .detail-compte p
{
    font-size: 1.1rem;
    margin: 0;
}
.page-compte .flash-compte
{
    margin: 2rem 0rem;
}
.page-compte .flash-compte h3
{
    align-items: center;
    color: var(--couleur-turquoise);
    display: inline-flex;
    font-size: 1.4rem;
    gap: .1rem;
    margin: .5rem;
}
.page-compte .flash-compte svg
{
    fill: var(--couleur-turquoise);
    height: 1.4rem;
    width: 1.4rem;
}
.page-compte .flash-compte .flash
{
    align-items: center;
    border: .2rem solid;
    border-radius: 50%;
    color: var(--couleur-turquoise);
    display: flex;
    font-size: 2rem;
    gap: .2rem;
    height: 6rem;
    justify-content: center;
    margin: 2rem auto;
    overflow: hidden;
    width: 6rem;
}
.page-compte .flash-compte .legende-flash p
{
    font-size: .9rem;
    margin: 0;
    text-align: center;
}
.page-compte .action-compte
{
    margin-top: auto;
    width: clamp(20rem, 91vw, 30rem);
}
.page-compte .action-compte ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}
.page-compte .action-compte ul li
{
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: .4rem 0rem;
}
.page-compte .action-compte ul .plan-compte
{
    padding: 1rem;
}
.page-compte .action-compte ul .lien-compte a
{
    background: var(--couleur-alt-4);
    border: .15rem solid var(--couleur-turquoise);
    box-shadow: 0px 5px 20px var(--couleur-alt-1);
    color: var(--couleur-turquoise);
    height: 100%;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
}
.page-compte .action-compte ul .lien-compte a:hover
{
    background: var(--couleur-turquoise);
    color: var(--couleur-nuit);
}

/* session */
.session
{
    margin: 1rem auto;
    max-width: 44rem;
    padding: 1rem;
    width: 100%;
}
.session.connexion
{
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    justify-content: center;
    margin: auto;
    max-width: 24rem;
    min-height: 35em;
}
.session header
{
    align-items: center;
    display: flex;
    gap: .4rem;
    width: 100%;
}
.session header .lien-retour
{
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    height: 2.4rem;
    overflow: hidden;
    place-items: center;
    width: 2.4rem;
}
.session header .lien-retour:hover
{
    background: var(--couleur-alt-1);
}
.session header .lien-retour svg
{
    fill: var(--couleur-blanche);
    height: 1.8rem;
    width: 1.8rem;
}
.session header h1
{
    color: var(--couleur-turquoise);
    font-size: 1.8rem;
    margin: 0;
    text-transform: uppercase;
}
.session nav
{
    border-bottom: 1px solid var(--couleur-alt-2);
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin: 1rem 0rem 2rem;
    width: 100%;
}
.session nav .btn-tab
{
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--couleur-alt-2);
    padding: 1rem;
}
.session nav .btn-tab.active
{
    border-bottom: 2px solid var(--couleur-turquoise);
    color: var(--couleur-turquoise);
}
.session nav .btn-tab.retour:hover
{
    color: var(--couleur-blanche);
    cursor: pointer;
}
.session main
{
    margin: 0;
    padding: 0;
    width: 100%;
}
.session main .form-etape,
.session main .plan-etape
{
    display: none;
}
.session main .form-etape.active,
.session main .plan-etape.active
{
    display: block;
}
.session main .groupe
{
    display: grid;
    margin-bottom: 2rem;
}
.session main label
{
    display: block;
    margin-bottom: .5rem;
}
.session main input
{
    background: var(--couleur-alt-1);
    border: 1px solid var(--couleur-alt-2);
    color: var(--couleur-blanche);
    padding: .8rem;
    width: 100%;
}
.session main input#cxn-code
{
    letter-spacing: 1px;
    text-align: center;
}
.session main input:focus
{
    color: var(--couleur-turquoise);
    outline: 1px solid var(--couleur-turquoise);
}
.session main .btn-etape
{
    align-items: center;
    background: var(--couleur-turquoise);
    border: 0.15rem solid var(--couleur-turquoise);
    color: var(--couleur-nuit);
    cursor: pointer;
    display: flex;
    gap: .4rem;
    justify-content: center;
    padding: .8rem;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.session main .btn-etape:hover
{
    opacity: .8;
}
.session main .btn-etape:disabled
{
    cursor: not-allowed;
    opacity: .4;
}
.session main .message
{
    color: var(--couleur-jaune);
}
.session main .notification p
{
    background: var(--couleur-alt-4);
    border: 1px solid var(--couleur-alt-5);
    box-shadow: 0px 5px 20px var(--couleur-alt-1);
    color: var(--couleur-turquoise);
    margin: 0;
    padding: .8rem;
}
.session main .message svg,
.session main .notification svg
{
    height: 1.3rem;
    margin-right: .3rem;
    vertical-align: bottom;
    width: 1.3rem;
}
.session main .message svg
{
    fill: var(--couleur-jaune);
}
.session main .notification svg
{
    fill: var(--couleur-turquoise);
}
.session footer .lien-inscription p
{
    margin: 0;
}
.session footer .lien-inscription a
{
    color: var(--couleur-blanche);
    padding: .5rem;
}
.session footer .lien-inscription a:hover
{
    color: var(--couleur-turquoise);
}
.session.inscription nav
{
    grid-template-columns: 1fr 1fr 2fr;
}
.session.inscription main .plan-etape h2
{
    font-size: 1.6rem;
    text-align: center;
}
.session.inscription main .niveau
{
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}
.session.inscription main .plan
{
    border: 1px solid var(--couleur-alt-2);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
.session.inscription main .plan.selection,
.session.inscription main .plan:hover
{
    background: var(--couleur-alt-4);
    border-color: var(--couleur-turquoise);
    box-shadow: 0px 5px 20px var(--couleur-alt-1);
}
.session.inscription main .plan h3
{
    color: var(--couleur-turquoise);
    font-size: 1.4rem;
    margin: 0;
    text-transform: uppercase;
}
.session.inscription main .plan p
{
    font-size: 1.1rem;
    margin: 0;
}
.session.inscription main .plan ul
{
    border-top: 1px solid var(--couleur-turquoise);
    list-style: none;
    margin: 1.5rem 0rem;
    padding: 1rem 0rem;
}
.session.inscription main .plan ul li
{
    align-items: center;
    display: flex;
    gap: .4rem;
    padding: .4rem;
}
.session.inscription main .plan ul li svg
{
    fill: var(--couleur-blanche);
    height: .8rem;
    overflow: visible;
    width: .8rem;
}
.session.inscription main .plan button
{
    background: none;
    border: 1px solid var(--couleur-turquoise);
    color: var(--couleur-turquoise);
    cursor: pointer;
    margin-top: auto;
    padding: .8rem;
    transition: all 0.2s ease;
    width: 100%;
}
.session.inscription main .plan:hover button
{
    background: var(--couleur-turquoise);
    color: var(--couleur-nuit);
}
.session.inscription main .form-etape
{
    margin: auto;
    max-width: 22rem;
    width: 100%;
}

/* navigation */
.menu-navigation
{
    background: var(--couleur-nuit);
    border-top: 1px solid var(--couleur-alt-2);
}
.menu-navigation .navigation
{
    display: flex;
    justify-content: space-around;
}
.menu-navigation button
{
    align-items: center;
    background: transparent;
    border: transparent;
    border-top: .2rem solid transparent;
    color: var(--couleur-blanche);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    font-family: inherit;
    padding: .5rem 0rem .8rem;
    transition: border-top 0.3s;
}
.menu-navigation button:hover
{
    background: var(--couleur-alt-1);
}
.menu-navigation .acme
{
    border-top: .2rem solid var(--couleur-turquoise);
    color: var(--couleur-turquoise);
}
.menu-navigation .nv-ico
{
    display: inline-block;
    line-height: 1.2;
}
.menu-navigation svg
{
    fill: var(--couleur-blanche);
    height: 1.7rem;
    overflow: visible;
    width: 1.7rem;
}
.menu-navigation .acme svg
{
    fill: var(--couleur-turquoise);
}
.menu-navigation .nv-txt
{
    display: inline-block;
    font-size: .8rem;
    line-height: 1;
}

/* dialogue */
#dialogue
{
    backdrop-filter: blur(16px);
    background: var(--couleur-alt-3);
    border: 2px solid var(--couleur-turquoise);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.4);
    color: var(--couleur-turquoise);
    outline: none;
    padding: 1rem 1.5rem;
    top: calc(50% - 4.5rem);
    transform: translateY(-50%);
    user-select: none;
}
#dialogue #notification-dialogue
{
    font-size: .9rem;
    text-align: center;
    max-width: 18rem;
}

/* publication */
.publication
{
    margin: 1rem auto;
    max-width: 40rem;
    padding: 2rem;
    width: 100%;
}
.publication header h1
{
    color: var(--couleur-turquoise);
    margin: 0;
    text-transform: uppercase;
}
.publication header p
{
    margin: 0;
    text-transform: uppercase;
}
.publication nav
{
    border-bottom: 1px solid var(--couleur-alt-2);
    display: flex;
    margin: 1rem 0rem 2rem;
    width: 100%;
}
.publication nav .btn-tab
{
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--couleur-blanche);
    cursor: pointer;
    padding: 1rem;
}
.publication nav .btn-tab.active
{
    border-bottom: 2px solid var(--couleur-turquoise);
    color: var(--couleur-turquoise);
}
.publication nav .btn-veille
{
    align-items: center;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    display: flex;
    cursor: pointer;
    margin-left: auto;
    padding: 1rem;
}
.publication nav .btn-veille svg
{
    fill: var(--couleur-blanche);
    height: 1rem;
    width: 1rem;
}
.publication nav .btn-veille:hover
{
    border-bottom: 2px solid var(--couleur-turquoise);
}
.publication nav .btn-veille:hover svg
{
    fill: var(--couleur-turquoise);
}
.publication main
{
    padding: 0;
}
.publication main .form-tab
{
    display: none;
}
.publication main .form-tab.active
{
    display: block;
}
.publication main .groupe
{
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 2rem;
}
.publication main .groupe label
{
    display: block;
    margin-bottom: .5rem;
}
.publication main .groupe input
{
    background: var(--couleur-alt-1);
    border: 1px solid var(--couleur-alt-2);
    color: var(--couleur-blanche);
    padding: .5rem;
    width: 100%;
}
.publication main .groupe input:focus
{
    color: var(--couleur-turquoise);
    outline: 1px solid var(--couleur-turquoise);
}
.publication main .groupe select
{
    background-color: #1a2130;
    border: 1px solid var(--couleur-alt-2);
    color-scheme: dark;
    padding: .5rem;
    width: 100%;
}
.publication main .groupe select:focus
{
    outline: 1px solid var(--couleur-turquoise);
}
.publication main .groupe .date-selection
{
    display: flex;
    gap: .3rem;
}
.publication main .groupe .date-selection select
{
    flex: 1;
}
.publication main .groupe.large
{
    gap: 0;
    grid-template-columns: auto;
}
.publication main .groupe .chargement-fichier
{
    background: var(--couleur-alt-1);
    border: 1px solid var(--couleur-alt-2);
    cursor: pointer;
    overflow: hidden;
    padding: 2rem;
    position: relative;
    text-align: center;
    user-select: none;
    width: 100%;
}
.publication main .groupe .chargement-fichier::before
{
    background: linear-gradient(90deg, transparent, var(--couleur-alt-4), transparent);
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    transition: left 0.5s ease;
}
.publication main .groupe .chargement-fichier:hover::before
{
    left: 100%;
}
.publication main .groupe .chargement-fichier:hover,
.publication main .groupe .chargement-fichier.glisse
{
    background: var(--couleur-alt-4);
    border: 1px solid var(--couleur-turquoise);
}
.publication main .groupe .chargement-fichier input[type="file"]
{
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.publication main .groupe .apercu
{
    display: flex;
    justify-content: center;
    margin: 0rem auto .5rem;
    overflow: hidden;
}
.publication main .groupe .apercu.audio
{
    height: 5rem;
}
.publication main .groupe .apercu.audio audio
{
    margin: auto;
    z-index: 100;
}
.publication main .groupe .apercu.image
{
    height: 5rem;
    width: 5rem;
}
.publication main .groupe .apercu svg
{
    fill: var(--couleur-blanche);
    width: 3.5rem;
}
.publication main .groupe .apercu img
{
    border: 1px solid var(--couleur-alt-2);
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.publication main .groupe .chargement-fichier .legende button
{
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    height: 2rem;
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem;
    z-index: 110;
}
.publication main .groupe .chargement-fichier .legende button svg
{
    fill: var(--couleur-blanche);
    width: 100%;
}
.publication main .groupe .selection
{
    align-items: center;
    display: inline-flex;
    gap: .4rem;
    position: relative;
    width: 100%;
}
.publication main .groupe .selection .badge-style
{
    align-items: center;
    background: var(--couleur-alt-4);
    border: 1px solid var(--couleur-turquoise);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    line-height: 1.2;
    padding: .4rem;
}
.publication main .groupe .selection .badge-style svg
{
    fill: var(--couleur-blanche);
    height: 1rem;
    margin-top: .1rem;
    margin-left: .1rem;
    min-width: 1rem;
    width: 1rem;
}
.publication main .groupe .selection input#style
{
    flex: 1;
}
.publication main .groupe .selection input#style:disabled
{
    cursor: not-allowed;
}
.publication main .groupe .suggestion
{
    position: relative;
}
.publication main .groupe .suggestion .liste-suggestion
{
    background: var(--couleur-nuit);
    border: 1px solid var(--couleur-turquoise);
    list-style: none;
    margin: .5rem 0rem;
    max-height: 12rem;
    overflow: hidden;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 120;
}
.publication main .groupe .suggestion .liste-suggestion li
{
    cursor: pointer;
    padding: .5rem;
}
.publication main .groupe .suggestion .liste-suggestion li:hover
{
    background: var(--couleur-alt-2);
}
.publication main .groupe .btn-form
{
    align-items: center;
    background: var(--couleur-alt-4);
    border: 0.15rem solid var(--couleur-turquoise);
    box-shadow: 0px 5px 20px var(--couleur-alt-1);
    color: var(--couleur-turquoise);
    cursor: pointer;
    display: flex;
    gap: .4rem;
    justify-content: center;
    padding: .8rem;
    position: relative;
}
.publication main .groupe .btn-form:hover,
.publication main .groupe .btn-form.tft
{
    background: var(--couleur-alt-1);
    border: 0.15rem solid var(--couleur-blanche);
    color: var(--couleur-blanche);
}
.publication main .groupe .btn-form:disabled
{
    cursor: progress;
}
.publication main .groupe .btn-form::after
{
    background: var(--couleur-alt-5);
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.5s;
    width: 0%;
}
.publication main .groupe .btn-form.act::after
{
    width: 100%;
}
.publication main .groupe .btn-form.tft::after
{
    animation: animer-btn-transfert 30s linear forwards;
    background: linear-gradient(to right, var(--couleur-turquoise) 100%, transparent), linear-gradient(to bottom, var(--couleur-turquoise) 100%, transparent), linear-gradient(to right, var(--couleur-turquoise) 100%, transparent), linear-gradient(to bottom, var(--couleur-turquoise) 100%, transparent);
    background-position: 0em 0em, 100% 0em, 100% 100%, 0em 100%;
    background-repeat: no-repeat;
    background-size: 100% 0.15em, 0.15em 100%, 100% 0.15em, 0.15em 100%;
    content: '';
    height: calc(100% + 0.3em);
    position: absolute;
    top: -0.15em;
    right: -0.15em;
    bottom: -0.15em;
    left: -0.15em;
    width: calc(100% + 0.3em);
}
.publication main .groupe .btn-form.tft.tft-6::after
{
    animation-duration: 6s;
}
.publication main .groupe .btn-form.tft.tft-12::after
{
    animation-duration: 12s;
}
.publication main .groupe .btn-form.tft.tft-18::after
{
    animation-duration: 18s;
}
.publication main .groupe .btn-form.tft.tft-24::after
{
    animation-duration: 24s;
}
@keyframes animer-btn-transfert
{
    from
    {
        background-size: 0em 0.15em, 0.15em 0em, 0em 0.15em, 0.15em 0em;
    }
    40%
    {
        background-size: 100% 0.15em, 0.15em 0em, 0em 0.15em, 0.15em 0em;
    }
    50%
    {
        background-size: 100% 0.15em, 0.15em 100%, 0em 0.15em, 0.15em 0em;
    }
    90%
    {
        background-size: 100% 0.15em, 0.15em 100%, 100% 0.15em, 0.15em 0em;
    }
    to
    {
        background-size: 100% 0.15em, 0.15em 100%, 100% 0.15em, 0.15em 100%;
    }
}
.publication main .groupe .btn-form.tft .ico-boucle
{
    display: flex;
    height: 1rem;
    width: 1rem;
}
.publication main .groupe .btn-form.tft .ico-boucle svg
{
    animation: animer-ico-boucle 1500ms linear infinite;
    fill: var(--couleur-blanche);
    width: 100%;
}
@keyframes animer-ico-boucle
{
    from
    {
        transform: rotate(0deg);
    }
    to
    {
        transform: rotate(360deg);
    }
}
.publication main .groupe .btn-form.sc
{
    color: var(--couleur-turquoise);
    cursor: default;
}
.publication main .groupe .btn-form.sc .ico-coche
{
    display: flex;
    height: 1.2rem;
    width: 1.2rem;
}
.publication main .groupe .btn-form.sc .ico-coche svg
{
    fill: var(--couleur-turquoise);
    width: 100%;
}
.publication main .groupe .message
{
    color: var(--couleur-jaune);
}
.publication main .groupe .message .ico-notification svg
{
    fill: var(--couleur-jaune);
    height: 1.3rem;
    margin-right: .4rem;
    vertical-align: bottom;
    width: 1.3rem;
}
.publication main .groupe .message.annonce
{
    color: var(--couleur-turquoise);
    text-align: center;
}
.publication main .groupe .message.annonce a
{
    color: var(--couleur-turquoise);
}
.publication.connexion
{
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    justify-content: center;
    margin: auto;
    max-width: 25rem;
    min-height: 35em;
}
.publication.connexion header
{
    width: 100%;
}
.publication.connexion nav
{
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.publication.connexion nav button
{
    color: var(--couleur-alt-2);
    cursor: default;
}
.publication.connexion nav button:first-child
{
    cursor: pointer;
}
.publication.connexion nav button:first-child:not(.active):hover
{
    color: var(--couleur-blanche);
}
.publication.connexion main
{
    margin: 0;
    padding: 0;
    width: 100%;
}
.publication.connexion main .form-etape
{
    display: none;
}
.publication.connexion main .form-etape.active
{
    display: block;
}
.publication.connexion main input
{
    padding: .8rem;
}
.publication.connexion main input#cxn-code
{
    letter-spacing: 1px;
    text-align: center;
}
.publication.connexion .btn-etape
{
    align-items: center;
    background: var(--couleur-turquoise);
    border: 0.15rem solid var(--couleur-turquoise);
    color: var(--couleur-nuit);
    cursor: pointer;
    display: flex;
    gap: .4rem;
    justify-content: center;
    padding: .8rem;
    position: relative;
    overflow: hidden;
}
.publication.connexion .btn-etape:hover
{
    opacity: .8;
}
.publication.connexion .btn-etape:disabled
{
    cursor: not-allowed;
    opacity: .4;
}
.publication.connexion main .notification p
{
    background: var(--couleur-alt-4);
    border: 1px solid var(--couleur-alt-5);
    box-shadow: 0px 5px 20px var(--couleur-alt-1);
    color: var(--couleur-turquoise);
    margin: 0;
    padding: .8rem;
}
.publication.connexion main .notification .ico-coche svg
{
    fill: var(--couleur-turquoise);
    height: 1.3rem;
    margin-right: .3rem;
    vertical-align: bottom;
    width: 1.3rem;
}

/* erreur */
.erreur
{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    height: 100svh;
    min-height: 20em;
}
.erreur h1
{
    align-items: center;
    color: var(--couleur-turquoise);
    display: flex;
    font-size: 5rem;
    gap: .5rem;
    justify-content: center;
    margin: 1.5rem;
}
.erreur h1 svg
{
    animation: erreur-disque 3s linear infinite;
    fill: var(--couleur-turquoise);
    height: 4rem;
    overflow: visible;
    width: 4rem;
}
.erreur .oups
{
    color: var(--couleur-turquoise);
    font-family: monospace;
    margin: .5rem;
    width: 20rem;
}
.erreur .oups .walkman
{
    border: 2px solid var(--couleur-turquoise);
    cursor: default;
}
.erreur .oups .walkman .hors-ligne
{
    background: var(--couleur-turquoise);
    padding: 1rem;
}
.erreur .oups .walkman .disque-musique
{
    background: var(--couleur-turquoise);
    cursor: default;
}
.erreur .oups .walkman .disque-musique.hl svg
{
    animation: erreur-disque 3s linear infinite;
}
.erreur .oups .walkman h1
{
    color: var(--couleur-nuit);
    font-size: 1.1rem;
    margin: 0;
    text-transform: uppercase;
}
.erreur .oups .walkman .ecran
{
    background: var(--couleur-alt-4);
    padding: 1rem;
    position: relative;
}
.erreur .oups .walkman .piste
{
    font-size: .8rem;
    position: absolute;
    top: .2rem;
    right: 1rem;
}
.erreur .oups .walkman h2
{
    cursor: default;
    font-size: 1.2rem;
}
.erreur .oups .walkman p
{
    font-size: 1rem;
}
.erreur .oups .walkman .manette
{
    background: none;
    justify-content: center;
    padding: 0;
}
.erreur .oups .walkman .manette .progression
{
    gap: .5rem;
    margin: .8rem 0rem;
}
.erreur .oups .walkman .manette .barre
{
    border: 1px solid var(--couleur-turquoise);
    grid-column: auto;
}
.erreur .oups .walkman .controle .ctrl svg
{
    fill: var(--couleur-turquoise);
}
.erreur .oups .walkman .controle button:hover
{
    background: none;
}
.erreur .oups .walkman .controle button#btn-lecture:hover
{
    background: var(--couleur-alt-3);
}
.erreur .oups .relancer
{
    margin-top: 1.5rem;
}
.erreur .oups .relancer button
{
    background: var(--couleur-nuit);
    border: 2px solid var(--couleur-turquoise);
    color: var(--couleur-turquoise);
    cursor: pointer;
    font-size: 1.2rem;
    padding: .8rem;
    width: 100%;
}
@keyframes erreur-disque
{
    from
    {
        transform: rotate(0deg);
    }
    30%
    {
        transform: rotate(115deg);
    }
    31%
    {
        transform: rotate(110deg);
    }
    32%
    {
        transform: rotate(120deg);
    }
    33%
    {
        transform: rotate(105deg);
    }
    45%
    {
        transform: rotate(180deg);
    }
    to
    {
        transform: rotate(360deg);
    }
}

/* media */
@media screen and (max-width:50rem)
{
    html
    {
        font-size: 90%;
    }
    .scene .profil-artiste .presentation
    {
        flex-direction: column;
        justify-content: center;
    }
    .scene .carrousel-artiste,
    .scene .carte-studio
    {
        padding: 1rem 0rem;
    }
    .scene .carte-studio .lien-studio .label-reseau
    {
        display: none;
    }
    .univers .contenu-univers
    {
        width: 100%;
    }
    .session
    {
        padding: .5rem;
    }
    .session.inscription main .niveau
    {
        grid-template-columns: 1fr;
    }
    .publication
    {
        padding: .5rem;
    }
    .publication main .groupe
    {
        grid-template-columns: auto;
    }
    .publication main .groupe .selection
    {
        align-items: stretch;
        flex-direction: column;
    }
}