Les Enfoirés – Rêvons
Actualités Les Enfoirés
/* =========================
🚫 SUPPRIME ESPACE HEADER
========================= */
body{
margin:0;
}
.app-header{
margin:0 !important;
padding:0 !important;
}
/* souvent ça crée l’espace */
.container{
padding-top:0 !important;
}
/* évite espace après sticky */
.glass-header{
position:sticky;
top:0;
z-index:9999;
backdrop-filter: blur(14px);
background: rgba(0,0,0,0.6);
}
/* =========================
FLEX HEADER
========================= */
.header-flex{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
height:70px; /* 🔥 fixe hauteur = pas de saut */
}
/* =========================
SEARCH
========================= */
.header-search input{
width:100%;
max-width:400px;
background:rgba(255,255,255,0.08);
border:none;
padding:10px 15px;
border-radius:30px;
color:#fff;
transition:0.3s;
}
.header-search input:focus{
max-width:550px;
background:rgba(255,255,255,0.15);
outline:none;
}
/* =========================
ACTIONS
========================= */
.header-actions{
display:flex;
align-items:center;
gap:15px;
}
/* =========================
EQUALIZER
========================= */
.equalizer{
display:flex;
gap:3px;
}
.equalizer span{
width:3px;
height:10px;
background:linear-gradient(to top,#ff1e2d,#ff6a6a);
animation:equalizer 1s infinite ease-in-out;
}
@keyframes equalizer{
0%{height:5px;}
50%{height:14px;}
100%{height:5px;}
}
/* =========================
PREMIUM BUTTON
========================= */
.btn-premium{
background:#d60017;
color:#fff;
padding:10px 18px;
border-radius:30px;
text-decoration:none;
transition:0.3s;
}
.btn-premium:hover{
box-shadow:0 0 20px rgba(214,0,23,0.8);
}
/* =========================
MOBILE
========================= */
.mobile-header{
display:none;
}
.mobile-bar{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px;
background:#000;
}
/* =========================
RESPONSIVE
========================= */
@media(max-width:768px){
.glass-header{
display:none;
}
.mobile-header{
display:block;
}
}