*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{

background:#111;

color:white;

font-family:Poppins,Arial,sans-serif;

min-height:100vh;

display:flex;

flex-direction:column;

}


/* live header */
#nf-live-header{

height:90px;

background:#000;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 30px;

position:relative;

}/* live header */





#nf-live-brand{

display:flex;

align-items:center;

gap:20px;

}





#nf-live-brand img{

height:50px;

}




/* live titre */
#nf-live-title{

position:absolute;

left:50%;

transform:translateX(-50%);

color:#ff3640;

letter-spacing:5px;

font-size:32px;

font-weight:800;

}/* live titre */





/* le status du live, en ligne en attente etc */
#nf-live-status{

display:flex;

align-items:center;

gap:10px;

font-weight:bold;

}





#live-dot{

width:12px;

height:12px;

border-radius:50%;

background:#f4c95d;

animation:pulse 1.5s infinite;

}





.live-now #live-dot{

background:red;

box-shadow:0 0 15px red;

}





.live-now #live-label{

color:red;

}





@keyframes pulse{


0%{

transform:scale(1);

}


50%{ transform:scale(1.4); -webkit-transform:scale(1.4); -moz-transform:scale(1.4); -ms-transform:scale(1.4); -o-transform:scale(1.4);
}


100%{

transform:scale(1);

}


}


#nf-live-event{

text-align:center;

padding:30px 10px;

}





.event-content h1{

font-size:clamp(22px,3vw,38px);

margin-bottom:15px;

font-weight:800;

}





.event-content p{

color:#aaa;

margin:8px;

}




/* compte a rebours. au cas où j'oubli, clamp permet d'adapter automatiquement à l'écran. */

#nf-live-timer{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:clamp(5px,1.5vw,18px);

margin-top:20px;

}





.time-box{


background:#111;

border-radius:15px;

width:clamp(55px,8vw,110px);

padding:clamp(8px,2vw,20px);

text-align:center;

}





.time-box span{


display:block;

font-size:clamp(22px,4vw,52px);

font-weight:bold;

line-height:1;

color:#ff3640;


}





.time-box small{

display:block;

margin-top:8px;

color:#999;

font-size:clamp(9px,1.3vw,15px);

text-transform:uppercase;

letter-spacing:1px;

}





.mobile-label{

display:none;

} /* compte a rebours. au cas où j'oubli, clamp permet d'adapter automatiquement à l'écran. */





/* Cloudflare pour les lives et le replay*/
#nf-live-player{


width:100%;

aspect-ratio:16/9;

background:#000;

position:relative;

overflow:hidden;

border-radius:18px;

box-shadow:

0 15px 50px rgba(0,0,0,.45);


}





#nf-live-player iframe{


position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:none;


}/* Cloudflare pour les lives et le replay*/





/* couverture avant le live l'image de l'évènement.*/
#nf-live-overlay{


position:absolute;

inset:0;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;


}





.live-cover{


position:absolute;

width:100%;

height:100%;

object-fit:cover;

filter:brightness(.45);

animation:zoomCover 20s infinite alternate;


}





@keyframes zoomCover{


from{

transform:scale(1);

}


to{

transform:scale(1.08);

}


}





.overlay-content{


position:relative;

z-index:2;

text-align:center;

padding:15px;


}





.overlay-content h2{


font-size:clamp(20px,3vw,35px);

letter-spacing:2px;

line-height:1.1;

margin-bottom:15px;


}





.overlay-content p{


font-size:clamp(14px,2vw,20px);

color:#ddd;

margin-bottom:10px;


}/* Cloudflare pour les lives et le replay*/




/*chat discussion live firebase*/
#nf-live-chat{


background:#1f1f1f;

border:1px solid #333;

border-radius:18px;

padding:25px;

height:100%;


}





#nf-live-chat h2{


font-size:22px;

margin-bottom:20px;

text-align:center;


}/*chat discussion live firebase*/






#nf-live-messages{


height:clamp(300px,55vh,590px);

background:#2b2b2b;

border-radius:12px;

padding:20px;

overflow-y:auto;


}





/* Scrollbar Chrome */

#nf-live-messages::-webkit-scrollbar{


width:8px;


}



#nf-live-messages::-webkit-scrollbar-thumb{


background:#ff3640;

border-radius:20px;


}




.chat-message{


display:flex;

align-items:flex-start;

gap:8px;

background:#353333;

padding:10px 15px;

border-radius:10px;

margin-bottom:10px;

word-break:break-word;

overflow-wrap:anywhere;


}






.chat-name{


color:#ff3640;

font-weight:bold;

flex-shrink:0;


}





.chat-text{


color:white;

line-height:1.5;


}





.nf-live-input{


display:flex;

gap:10px;

margin-top:20px;

flex-wrap:wrap;


}





.nf-live-input input{


flex:1;

min-width:120px;

background:#111;

border:1px solid #555;

color:white;

padding:14px;

border-radius:8px;


}





.nf-live-input input::placeholder{


color:#777;


}





.nf-live-input input:focus{


outline:none;

border-color:#ff3640;


}





.nf-live-input button{


background:#ff3640;

color:white;

border:none;

padding:14px 25px;

border-radius:8px;

font-weight:bold;

cursor:pointer;

transition:.3s;


}





.nf-live-input button:hover{


transform:translateY(-2px);

background:#e52f38;


}







/* partage du live*/


#nf-live-share{


text-align:center;

margin:25px 0;


}





.share-buttons{


display:flex;

justify-content:center;

align-items:center;

gap:15px;

flex-wrap:wrap;


}





.share-buttons a,
.share-buttons button{


padding:12px 30px;

border-radius:30px;

border:none;

background:#222;

color:white;

text-decoration:none;

cursor:pointer;

transition:.3s;


}





.share-buttons a:hover,
.share-buttons button:hover{


background:#ff3640;


}





#copy-message{


color:#f4c95d;

margin-top:10px;


}





.hidden{


display:none;


}/* partage du live*/







/* Footer */


#nf-live-footer{


background:#000;

color:#777;

text-align:center;

padding:30px;

margin-top:auto;


}







@media(max-width:900px){


#nf-live-title{


position:static;

transform:none;

font-size:26px;


}




#nf-live-header{


height:auto;

padding:20px;

gap:15px;


}




#nf-live-chat{


height:auto;


}




}





@media(max-width:600px){



#nf-live-header{


flex-direction:column;

justify-content:center;

text-align:center;


}




#nf-live-brand{


flex-direction:column;

gap:10px;


}




#nf-live-brand img{


height:40px;


}




#nf-live-title{


font-size:24px;

letter-spacing:3px;


}




#nf-live-status{


font-size:14px;


}




.overlay-content{


padding:10px;


}




.time-box{


border-radius:10px;


}





.desktop-label{


display:none;


}





.mobile-label{


display:block;


}





.nf-live-input{


flex-direction:column;


}





.nf-live-input button{


width:100%;


}




#nf-live-chat{


padding:15px;


}




#nf-live-messages{


height:350px;


}



}