/* Éditions
-------------------------------------------------- */
body{background:white}
main.bonus {display: -moz-flex;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-flow: column nowrap;flex-flow: column nowrap;}
main.bonus section{border-bottom:1px solid;width:100%;display: -moz-flex;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-flow: row nowrap;flex-flow: row nowrap;}

main.bonus section article{width:50%;position:relative}
main.bonus section article:nth-child(2){border-left:1px solid;padding:1em 2em}
main.bonus section article:nth-child(1){background:black;}
main.bonus section article time{width:100%;}
main.bonus section article h3{padding-bottom:.5em;width:100%;font-family:'Beastly';text-transform:uppercase;font-size:1.75em;line-height:1em;}

main.bonus section div.cover_image{width:100%;height:100%;}
main.bonus section div.cover_fichier{background: var(--color);width:100%;height:100%;display: flex;align-items: center;justify-content: center;}
main.bonus section div.cover_fichier a{width:7em;height:7em;background-image:url(../../images/bonus_4.svg);}
main.bonus section div.cover_fichier a:hover{background-image:url(../../images/bonus_1.svg);}

main.bonus section div.cover_video{background: black;width:100%;height: auto;position:relative;overflow:hidden;}
main.bonus section div.cover_video video{position: relative;
top: 0;
width: 100%;
height: auto;display: block;}
main.bonus section div.cover_video button{width:7em;height:7em;background-image:url(../../images/bonus_3.svg);position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);background-color:transparent;font-size:inherit;}
main.bonus section div.cover_video button:hover{cursor:pointer;background-image:url(../../images/bonus_2.svg);}

main.bonus section div.cover_video.play button{display:none;cursor:pointer;background-image:url(../../images/pause.svg);}
main.bonus section div.cover_video.play:hover button{display:block;cursor:pointer;background-image:url(../../images/pause2.svg);}

nav{padding:.5em;width:100%;display: flex;align-items: center;justify-content: center;}
nav ul{padding:.25em;display: -webkit-flex;display: -moz-flex;display: flex;-webkit-flex-flow: row wrap;-moz-flex-flow: row wrap;flex-flow: row wrap;}
nav ul li{list-style: none}
main nav ul > li::before {content: "";width: auto;display: none;}
main nav ul > li{padding:.25em}
main nav ul > li a{text-decoration:none;border:1px solid;width:2em;height:2em;border-radius:100%;display: flex;align-items: center;justify-content: center;}
main nav ul > li a.active, main nav ul > li a:hover{background:black;color:white;border:1px solid black}


/* MEDIA QUERIES
-------------------------------------------------- */
@media only screen and (max-width:680px){
    main.bonus section{border-bottom:1px solid;width:100%;display: -moz-flex;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-flow: column nowrap;flex-flow: column nowrap;}
    main.bonus section article {width: 100%;min-height: 50vh;}
    main.bonus section article:nth-child(2) {border-left: 0;border-top:1px solid;padding:1em;}
    main.bonus section article{width:100%}
    main.bonus section div.cover_image {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
    main.bonus section div.cover_fichier, main.bonus section div.cover_video {position: absolute;
}
}