/*  CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* Older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block; }
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/*  LIVE NATION TYPOS */

@font-face {
    font-family: 'EgyptianBold';
    src: url('../fonts/GuardianEgyp-Bold.woff2') format('woff2'),
         url('../fonts/GuardianEgyp-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'EgyptianSemiBold';
    src: url('../fonts/GuardianEgyp-Semibold.woff2') format('woff2'),
         url('../fonts/GuardianEgyp-Semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'EgyptianMedium';
    src: url('../fonts/GuardianEgyp-Medium.woff2') format('woff2'),
         url('../fonts/GuardianEgyp-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'EgyptianRegular';
    src: url('../fonts/GuardianEgyp-Regular.woff2') format('woff2'),
         url('../fonts/GuardianEgyp-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BentonMedium';
    src: url('../fonts/BentonSans-Medium.woff2') format('woff2'),
         url('../fonts/BentonSans-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

p{line-height: 1.2em; padding: 8px;}

a{color: #FFFFFF; text-decoration: none;}
a:hover{color: #c3b574;}

sup{font-size: 60%;}

/*  LIVE NATION CSS */
*{box-sizing: border-box;}

body{font-family: 'EgyptianMedium'; letter-spacing: 1px; background: url("../images/bg-patern.jpg") repeat center center #000000; height: 100vh; z-index: 1; color: #FFFFFF; font-size: 17px;}
body:after{content:""; background: url("../images/shadow.png") no-repeat center center transparent; background-size: 100% 100%; width: 100vw; height: 100vh; position: absolute; top: 0; left: 0;}

#cadre{position: absolute; width: 100%; height: 100%; padding: 1.2vh 2vh 2vh; z-index: 2;}
#logo{width: 28vw; max-width: 560px; height: auto; margin: 0 auto;}
#logo img{width: 100%; display: block;}

#top-left-corner{background: url("../images/corner-top-left.png") no-repeat top left transparent; background-size: cover; width: calc(50% - 18vw); height: calc(50% - 2.9%); position: absolute; top: 3%; left: 30px; z-index: 3; display: block;}
#top-right-corner{background: url("../images/corner-top-right.png") no-repeat top right transparent; background-size: cover; width: calc(50% - 18vw); height: calc(50% - 2.9%); position: absolute; top: 3%; right: 30px; z-index: 3; display: block;}
#bottom-left-corner{background: url("../images/corner-bottom-left.png") no-repeat bottom left transparent; background-size: cover; width: calc(50% - 18vw); height: calc(50% - 2.9%); position: absolute; bottom: 3%; left: 30px; z-index: 3; display: block;}
#bottom-right-corner{background: url("../images/corner-bottom-right.png") no-repeat bottom right transparent; background-size: cover; width: calc(50% - 18vw); height: calc(50% - 2.9%); position: absolute; bottom: 3%; right: 30px; z-index: 3; display: block;}

#contenu{position: absolute; z-index: 3; width: 88%; max-width: 1110px; transform: translatex(-50%); height: 100%; top: 0; left: 50%; padding: 6.5% 0 3%; display: flex; flex-direction: column; justify-content:center; align-items:center; align-content:center; overflow: hidden;}
#contenu h1{display:block; position: relative; width: 100%; text-align: center; color: #c3b574; margin-bottom: 22px; text-transform: uppercase; letter-spacing: 2px; font-size: 50px; font-family: 'EgyptianMedium';}
#contenu h1 span{display: inline-block; position: relative; padding: 0 20px;}
#contenu h1 span:before{content: ""; display: block; width: 100%; border-bottom: 3px solid #c3b574; left: -100%; position: absolute; top: 45%;}
#contenu h1 span:after{content: ""; display: block; width: 100%; border-bottom: 3px solid #c3b574; right: -100%; position: absolute; top: 45%;}

h2{display:block; position: relative; width: 100%; text-align: center; color: #c3b574; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1.5px; font-size: 30px;}
h3{display:block; position: relative; width: 100%; text-align: center; color: #ffffff; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px;}

hr{border-top: 2px dotted #c3b574; border-bottom: 0 none; margin: 40px 0 50px;}

.txtcenter{text-align: center;}

#contenu p{text-align: center; line-height: 1.5; font-size: 105%;}

#contenu .backbutton{display: block; width: 100%; margin: 0 auto 40px; text-align: center;}
#contenu .backbutton span {display: block; width: 320px; text-transform: uppercase; letter-spacing: 0.5px; background: url("../images/titre1.png") no-repeat center center transparent; background-size: auto; background-size: 100% auto; padding: 10px 40px 8px; margin: 0 auto; letter-spacing: 1px; line-height: 1.2em; }

#contenu .publicbutton{display: block; width: 100%; margin: 30px auto; text-align: center;}
#contenu .publicbutton span {display: block; width: 320px; text-transform: uppercase; letter-spacing: 0.5px; background: url("../images/titre1.png") no-repeat center center transparent; background-size: auto; background-size: 100% auto; padding: 12px 40px 8px; margin: 0 auto; letter-spacing: 1px; line-height: 1.2em; }

#contenu .testbutton{display: block; width: 100%; margin: 40px auto 0; text-align: center;}
#contenu .testbutton span {display: block; width: 320px; text-transform: uppercase; letter-spacing: 0.5px; background: url("../images/titre2.png") no-repeat center center transparent; background-size: auto; background-size: 100% auto; padding: 10px 40px 8px; margin: 0 auto; letter-spacing: 1px; line-height: 1.2em; }

#contenu.page-accueil{max-width: 800px;}
#contenu.page-accueil h1{color: #FFFFFF; margin-bottom: 3px;}
#contenu.page-accueil h1 span{font-family: 'EgyptianMedium';}
#contenu.page-accueil h1 span:before,
#contenu.page-accueil h1 span:after{border-bottom: 3px solid #FFFFFF;}
#contenu .sur-titre{text-transform: uppercase; font-size: 115%; padding: 0; margin-bottom: 8px;}
#contenu .sous-titre{text-transform: uppercase; font-size: 115%; padding: 0;}

#contenu .bloc-code{display: flex; flex-direction: row; justify-content:center; align-items:center; align-content:center; width: 100%; margin-top: 40px;}
#contenu .bloc-code .affiche{width: 40%;}
#contenu .bloc-code .affiche img{width: 100%;}
#contenu .bloc-code .intro{width: 55%; margin-left: 5%; padding-bottom: 50px;}
#contenu .bloc-code .intro p{text-align: justify; margin-bottom: 50px;}

.separator {border: 1px dotted #FFF; padding: 17px; margin-top: 20px; background-color: rgba(0,0,0,0.25); border-radius: 5px;}

#contenu .bloc-code .intro .acces{background: url("../images/gold-middle.png") repeat-y center center transparent; background-size: 100% auto; padding: 3px 8%; position: relative; display: block;}
#contenu .bloc-code .intro .acces:before{content:""; display:block; background: url("../images/gold-top.png") no-repeat bottom center transparent; background-size: 99.9% auto; width: 100%; height: 40px; position: absolute; top: 1px; left: 0; transform: translatey(-100%);}
#contenu .bloc-code .intro .acces:after{content:""; display:block; background: url("../images/gold-bottom.png") no-repeat top center transparent; background-size: 99.9% auto; width: 100%; height: 40px; position: absolute; bottom: 0; left: 0; transform: translatey(100%);}
#contenu .bloc-code .intro .acces h2{text-align: center; font-family: 'EgyptianMedium'; text-transform: uppercase; font-size: 110%; letter-spacing: 0.5px; margin-bottom: 10px; }
#contenu .bloc-code .intro .acces p{margin: 0; padding:0; line-height: 1.2; font-size: 90%; font-family: 'BentonMedium', Helvetica, Arial, sans-serif; letter-spacing: 0;}

#contenu .bloc-code .intro .acces .amex{display: flex; margin: 12px auto 2px;}
#contenu .bloc-code .intro .acces .amex input{display: block; width: 70%; border-radius: 5px; border: 0 none; padding: 2px 8px; font-size: 100%; text-align: center;}
#contenu .bloc-code .intro .acces .amex input::placeholder {font-size: 70%; letter-spacing: 1px; text-transform: uppercase;}
#contenu .bloc-code .intro .acces .amex button{background-color: #000; width: 30%; border-radius: 5px; cursor: pointer; color: #FFF; border: 0 none; text-transform: uppercase; margin-left: 7px; transition: all 0.2s ease 0s; font-family: 'BentonMedium'; letter-spacing: 1px;}
#contenu .bloc-code .intro .acces .amex button:hover{background-color: #222; color: #c3b574;}

#contenu .plan{max-width: 800px; margin-top: 15px; position: relative;}
#contenu .plan img.plan-img{display: block; position: relative; width: 100%;}
#contenu .plan a{position: absolute; opacity: 0.5; transform: translate(-50%, -50%); background-color: transparent; display: block; width: 90px; height: 35px; z-index: 5; border-radius: 6px;}
#contenu .plan a:hover{background-color: rgba(31, 105, 118,0.2);}
#contenu .plan a.plan-scene{top: 34.5%; left: 25%;}
#contenu .plan a.plan-hall{top: 35%; left: 73%;}
#contenu .plan a.plan-bar{top: 60%; left: 72%;}
#contenu .plan a.plan-loges{top: 91%; left: 8%;}

#contenu .plan .plan-info{position: absolute; bottom: 10%; left: 20%; color: #FFF; z-index: 10; font-size: 14px !important; background-color: rgba(30, 97, 108, 0.7); display: inline-block; text-align: center; width: 60%; border-radius: 3px;}
#contenu .plan a span{display: none;}

/*TEMPORAIRE*/
#contenu .plan a{display: ;}
/*TEMPORAIRE*/

.iframe,
iframe{display: block; margin: 0 auto;}

.page-test p{max-width: 1000px; margin: 0 auto 25px; line-height: 1.4em;}

img.qrcode,
img.img-qrcode{max-width: 220px; margin: 10px auto; display: block;}

footer{font-family: 'EgyptianRegular'; position: absolute; bottom: 2.75%; z-index: 4; width: 100%; text-align: center;}
footer ul{text-transform: uppercase; font-size: 1.2vw; line-height: 1; letter-spacing: 0.5px; height: 1.22vw; display: flex; flex-direction: row; justify-content:center; align-items:center; align-content:center;}
footer ul li{line-height: 1; letter-spacing: 1px;}
footer ul li:after{content: "|"; padding-left:5px; margin-right:5px; display: inline-block;}
footer ul li:last-child:after{content: none;}

.popup{position: absolute; top:0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 10; display: flex; flex-direction: row; justify-content:center; align-items:center; align-content:center;}
.popup .box-text{background: url("../images/bg-patern.jpg") repeat center center #000000; padding: 50px; margin: 30px; position: relative; width: 100%; max-width: 650px; min-height: 150px; box-shadow: 0 0 15px rgba(0,0,0,0.5);}
.popup .box-text:after{content:""; background: url("../images/shadow.png") no-repeat center center transparent; background-size: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.4;}

.popup .box-text .content{position: relative; z-index: 15;}
.popup .box-text .close{background: url("../images/cross.png") repeat center center transparent; background-size: cover; width: 38px; height: 38px; border-radius: 100%; z-index: 16; position: absolute; top: -20px; right: -20px; cursor: pointer; box-shadow: 0 0 15px rgba(0,0,0,0.5); opacity: 0.8;}}

.popup-open{display: flex;}
.popup-close{display: none;}

.popup .box-text .pop-top-left-corner{background: url("../images/popup-top-left.png") no-repeat top left transparent; background-size: cover; width: 50%; height: 50%; position: absolute; top: 20px; left: 20px;}
.popup .box-text .pop-top-right-corner{background: url("../images/popup-top-right.png") no-repeat top right transparent; background-size: cover; width: 50%; height: 50%; position: absolute; top: 20px; right: 20px;}
.popup .box-text .pop-bottom-left-corner{background: url("../images/popup-bottom-left.png") no-repeat bottom left transparent; background-size: cover; width: 50%; height: 50%; position: absolute; bottom: 20px; left: 20px;}
.popup .box-text .pop-bottom-right-corner{background: url("../images/popup-bottom-right.png") no-repeat bottom right transparent; background-size: cover; width: 50%; height: 50%; position: absolute; bottom: 20px; right: 20px;}

.popup.navigation p{text-align: center;}

/*  FLIPDOWN CSS */

#contenu .rebours{margin-bottom: 40px;}
#contenu .rebours .sur-titre {font-size: 100%; margin-bottom: 10px; letter-spacing: 1px;}
#contenu .rebours .flipdown {height: 110px; position: relative; margin: 0 auto;}

#contenu .rebours .flipdown.flipdown__theme-dark .rotor-group-heading{position: absolute; bottom: -30px; width: 100%; padding-right: 30px; font-size: 14px; letter-spacing: 1px;}
#contenu .rebours .flipdown.flipdown__theme-dark .rotor-group:last-child .rotor-group-heading{padding-right: 0;}
#contenu .rebours .flipdown.flipdown__theme-dark .rotor-group-heading::before {color: #FFFFFF; font-family: 'EgyptianRegular'; text-transform: uppercase; line-height: 35px;}

#contenu .rebours .flipdown.flipdown__theme-dark .rotor-group::before,
#contenu .rebours .flipdown.flipdown__theme-dark .rotor-group::after {display: none;}

#contenu .rebours .flipdown.flipdown__theme-dark .rotor,
#contenu .rebours .flipdown.flipdown__theme-dark .rotor-top,
#contenu .rebours .flipdown.flipdown__theme-dark .rotor-leaf-front,
#contenu .rebours .flipdown.flipdown__theme-dark .rotor-bottom,
#contenu .rebours .flipdown.flipdown__theme-dark .rotor-leaf-rear{font-family: 'EgyptianMedium'; background: url("../images/gold-middle.png") no-repeat center center transparent; background-size: auto 100%;}

/*  PAGES TEXTE */

body.pagetexte{height: auto;}
body.pagetexte::after{position: fixed;}
body.pagetexte #cadre {position: relative;}
body.pagetexte #cadre #top-left-corner,
body.pagetexte #cadre #top-right-corner,
body.pagetexte #cadre #bottom-left-corner,
body.pagetexte #cadre #bottom-right-corner{display: none}

body.pagetexte #contenu {position: relative; max-width: 1000px; display: block; padding: 0 10px 30px;}
body.pagetexte #contenu h1{font-size: 36px; text-align: center;}
body.pagetexte #contenu h2{font-size: 26px; text-align: center; margin: 25px auto 18px; }
body.pagetexte #contenu h3{font-size: 18px; text-align: left; margin-top: 18px; margin-bottom: 8px; color: #c3b574;}
body.pagetexte #contenu p{text-align: justify; line-height: 1.3em; font-size: 15px; padding: 4px 0; font-family: 'EgyptianRegular';}
body.pagetexte #contenu ul {padding-left: 25px; list-style: circle; margin-bottom: 8px; font-family: 'EgyptianRegular';}
body.pagetexte #contenu ul li{text-align: justify; line-height: 1.3em; font-size: 15px; padding: 6px 0 6px 0;}
body.pagetexte #contenu ul li a,
body.pagetexte #contenu p a{color: #c3b574;}
body.pagetexte #contenu span{color: #c3b574; font-family: 'EgyptianSemiBold';}

body.pagetexte #contenu ul.livestream,
body.pagetexte #contenu ul.navigateur{padding: 0; list-style: none;}

body.pagetexte #contenu ul.livestream li{padding-top: 10px; padding-bottom: 10px; display: flex;}
body.pagetexte #contenu ul.livestream li img{ width: auto; height: 45px; display: block; margin-right: 25px;}

ul.livestream{max-width: 1000px; width: 100%; font-family: 'EgyptianRegular'; font-size: 15px;}
ul.livestream li{padding-top: 5px; padding-bottom: 5px; display: flex; align-items:center; text-align: left;}
ul.livestream li img{ width: auto; height: 30px; display: block; margin-right: 15px;}
ul.livestream li p{padding: 5px 0; margin: 0; text-align: left !important;}
ul.livestream li p span{color: #c3b574; font-family: 'EgyptianSemiBold';}

.page-test ul.livestream li {width: 25%; float: left; flex-direction: column;}

body.pagetexte #contenu ul.navigateur{display: block; margin: 20px 0;}
body.pagetexte #contenu ul.navigateur:after{content: ""; display: block; clear: both;}
body.pagetexte #contenu ul.navigateur li{width: 33.333%; float: left; text-align: center; display: block;}
body.pagetexte #contenu ul.navigateur li img{display: block; margin: 0 auto 15px; height: 60px;}

body.pagetexte footer {position: relative; padding: 10px 0 30px;}
body.pagetexte footer ul {font-size: 18px;}

/*  RESPONSIVE HAUTEUR */

@media screen and (max-height : 1200px) {
    #contenu.page-accueil {max-width: 700px;}
    #contenu .bloc-code .affiche {width: 35%;}
    #contenu .bloc-code .intro {width: 60%; margin-left: 5%;}
    #contenu p {line-height: 1.2;font-size: 100%;}
    #contenu .testbutton {margin: 20px auto 0;}
}

@media screen and (max-height : 1100px) {
    #contenu .rebours {margin-bottom: 15px;}
    #contenu .bloc-code {margin-top: 10px;}
    #contenu .bloc-code .intro p {margin-bottom: 35px;}
    #contenu .bloc-code .intro {padding-bottom: 40px;}
    #contenu .testbutton {margin: 10px auto 0;}
}

@media screen and (max-height : 1000px) {
    body {font-size: 16px;}
    #contenu{max-width: 850px;}
    #contenu.page-accueil,
    #contenu.page-principal {max-width: 600px;}
    #contenu .testbutton span {width: 300px;}
    #contenu h1 {margin-bottom: 20px; font-size: 40px;}
    #contenu h1 span::before,
    #contenu h1 span::after{display: none;}
    #contenu .bloc-code .intro .acces p {line-height: 1;}
}

@media screen and (max-height : 900px) {
    #contenu.page-principal {max-width: 500px;}
    #contenu .rebours .flipdown {height: 90px;}
    #contenu .bloc-code .affiche {width: 30%;}
    .page-principal .iframe,
    .page-principal iframe{max-height: 200px; width: 100%;}
    #contenu .publicbutton {margin: 20px auto 10px;}
    #contenu .testbutton {margin: 5px auto 0;}
}

@media screen and (max-height : 800px) {
    #contenu.page-accueil{max-width: 550px;}
    #contenu .bloc-code .affiche {display: none;}
    #contenu .bloc-code .intro,
    #contenu .bloc-code .intro .acces{margin: 0; width: 100%;}
    #contenu h1,
    #contenu .sur-titre {margin-bottom: 10px;}
}

@media screen and (max-height : 740px) {
    #top-left-corner,
    #top-right-corner,
    #bottom-left-corner,
    #bottom-right-corner{display: none;}

    body{height: 100%;}
    body::after {position: fixed;}

    #contenu .plan a {display: block; position: relative; width: 100% !important; top: auto !important; left: 0 !important; transform: none; text-align: center; opacity: 1; background-color: rgba(255,255,255,0.1); margin: 0 auto 10px; padding: 12px 10px 10px; height: auto;}
    #contenu .plan img.plan-img{display: none;}
    #contenu .plan a span{display: block;}
    #contenu .plan .plan-info {position: relative; bottom: auto; left: auto; width: 100%; border-radius: 3px;}

    #cadre {position: relative; width: 100%; height: auto; padding: 10px; z-index: 2;}
    #contenu{width: 100%; padding: 10px 20px 0; position: relative; display: block; height: auto; overflow: visible;}
    footer {bottom: auto; width: 100%; padding: 50px 0 15px; position: relative; height: auto; }
}

/*  RESPONSIVE LARGEUR */


@media screen and (max-width : 900px) {
    #contenu.page-accueil {max-width: 600px;}
}

@media screen and (max-width : 750px) {

    body{height: 100%;}
    body::after {position: fixed;}

    #top-left-corner,
    #top-right-corner,
    #bottom-left-corner,
    #bottom-right-corner{display: none;}
    #logo {width: 100%; max-width: 320px;}
    #contenu{width: 100%; padding: 10px 20px 0; position: relative; display: block; height: auto; overflow: visible;}
    #contenu h1 span::before,
    #contenu h1 span::after{display: none;}

    #cadre {position: relative; width: 100%; height: auto; padding: 10px; z-index: 2;}

    body.pagetexte #contenu h1 {font-size: 26px;}
    
    #contenu.page-accueil h1 span::before,
    #contenu.page-accueil h1 span::after {display: none;}

    #contenu .bloc-code {display: block;}
    #contenu .bloc-code .affiche {width: 100%; margin-bottom: 25px;}
    #contenu .bloc-code .affiche img{width: 60%; margin: 0 auto; display: block;}
    #contenu .bloc-code .intro {width: 100%; margin-left: 0;}

    #contenu .bloc-code .intro p {margin-bottom: 50px; padding-bottom: 40px;}

    #contenu .sous-titre {font-size: 105%;}
    #contenu p {line-height: 1.3; font-size: 18px !important;}
    #contenu .bloc-code .intro .acces h3,
    #contenu .bloc-code .intro .acces p {font-size: 18px !important;}
    #contenu .bloc-code .intro .acces .amex {flex-direction: column;}
    #contenu .bloc-code .intro .acces .amex input {width: 100%; padding: 4px 8px; text-align: center; font-size: 18px; margin-bottom: 10px;}
    #contenu .bloc-code .intro .acces .amex button {width: 100%; padding: 6px; margin: 0;}

    #tidio-chat{display: none;}

    #contenu .plan a {display: block; position: relative; width: 100% !important; top: auto !important; left: 0 !important; transform: none; text-align: center; opacity: 1; background-color: rgba(255,255,255,0.1); margin: 0 auto 10px; padding: 12px 10px 10px; height: auto;}
    #contenu .plan img.plan-img{display: none;}
    #contenu .plan a span{display: block;}
    #contenu .plan .plan-info {position: relative; bottom: auto; left: auto; width: 100%; border-radius: 3px;}

    hr{margin: 25px 0 30px;}

    .iframe,
    iframe{width: 100%; max-width: 100%;}

    footer {bottom: auto; width: 100%; padding: 50px 0 15px; position: relative; height: auto; }
    footer ul {font-size: 17px; height: auto; display: block;}
    footer ul li {line-height: 1.5;}
    footer ul li::after {content: none;}

    .popup {align-items: flex-start;}

    body.pagetexte #contenu p{text-align: left; line-height: 1.2em; font-size: 16px !important;}

    body.pagetexte #contenu ul.navigateur li{width: 100%; float: none; text-align: center; display: block; margin-bottom: 20px;}

}

@media screen and (max-width : 550px) {

    body{font-size: 15px;}

    h2 {font-size: 20px;}

    #contenu .rebours{overflow: hidden;}
    #contenu .rebours .flipdown {height: 75px;}
    #contenu .rebours {margin-bottom: 40px;}
    #contenu .flipdown .rotor-group-heading::before {font-size: 0.5rem;}
    #contenu .rebours .flipdown.flipdown__theme-dark .rotor-group-heading {bottom: -20px;}
    #contenu .sous-titre,
    #contenu .sur-titre {font-size: 18px;}
    #contenu .testbutton {margin: 20px auto;}

    ul.livestream li {flex-direction: column;}
    .popup .box-text {padding: 30px; margin: 15px;}
    .popup .box-text .pop-top-left-corner{top: 10px; left: 10px;}
    .popup .box-text .pop-top-right-corner{top: 10px; right: 10px;}
    .popup .box-text .pop-bottom-left-corner {bottom: 10px; left: 10px;}
    .popup .box-text .pop-bottom-right-corner {bottom: 10px; right: 10px;}
    .popup .box-text .close {width: 28px; height: 28px; top: -10px; right: -10px;}

}