:root{
--cdf-bg-1:#170b10;
--cdf-bg-2:#491328;
--cdf-bg-3:#73233f;
--cdf-badge:#8f2041;
--cdf-accent:#e7c15c;
--cdf-card-bg:rgba(255,255,255,.08);
--cdf-text:#ffffff;
--cdf-mini-card:#ffffff;
} .cdf-evenements{
align-items:center;
display:flex;
justify-content:center;
position:relative;
overflow:hidden;
padding:20px 5%;
background:linear-gradient(
135deg,
var(--cdf-bg-1) 0%,
var(--cdf-bg-2) 50%,
var(--cdf-bg-3) 100%
);
} .event-main-card{
width:75%;
padding:30px 30px;
background:var(--cdf-card-bg);
backdrop-filter:blur(25px);
border:1px solid rgba(255,255,255,.15);
border-radius:30px;
box-shadow:0 20px 60px rgba(0,0,0,.35);
transition:.3s ease;
z-index:5;
}
.event-main-card:hover{
transform:translateY(-4px);
box-shadow:0 25px 70px rgba(0,0,0,.45);
}
.event-content{
width:100%;
} .badges-row{
display:flex;
align-items:center;
gap:50px;
margin-bottom:30px;
}
.badge{
display:inline-block;
background:var(--cdf-badge);
color:#fff;
padding:10px 22px;
border-radius:50px;
font-size:.85rem;
font-weight:700;
letter-spacing:0.8px;
text-transform:uppercase;
}
.countdown{
display:inline-block;
padding:10px 22px;
border-radius:50px;
border:1px solid rgba(255,255,255,.15);
color:var(--cdf-accent);
font-size:1rem;
font-weight:700;
backdrop-filter:blur(10px);
} .event-content h2{
color:#fff;
font-size:3rem;
font-weight:300;
line-height:1;
margin:0 0 20px;
}
.event-period{
color:#FFD54A;
font-size:1.35rem;
font-weight:700;
margin-bottom:30px;
} .event-infos{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:16px;
margin-top:20px;
}
.event-info{
display:flex;
align-items:center;
width:fit-content;
max-width:100%;
padding:12px 18px;
border-radius:50px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:white;
transition:.3s;
}
.event-info:hover{
background:rgba(255,255,255,.12);
}
.event-info:hover{
background:rgba(255,255,255,.12);
}
.event-description{
flex-basis:100%;
}
.event-info strong{
color:#FFD54A;
} .event-side{
width:320px;
display:flex;
flex-direction:column;
gap:15px;
margin-left:-80px;
height:420px;
overflow-y:auto;
overflow-x:hidden;
padding-right:12px;
z-index:10;
}
.event-side::-webkit-scrollbar{
width:8px;
}
.event-side::-webkit-scrollbar-track{
background:rgba(255,255,255,.1);
border-radius:20px;
}
.event-side::-webkit-scrollbar-thumb{
background:#FFD54A;
border-radius:20px;
} .mini-card{
background:var(--cdf-mini-card);
border-left:3px solid var(--cdf-badge);
border-radius:20px;
padding:8px 12px;
box-shadow:0 8px 30px rgba(0,0,0,.15);
transition:.3s ease;
}
.mini-card:hover{
transform:translateX(-8px);
box-shadow:0 15px 45px rgba(0,0,0,.30);
}
.mini-date{
color:var(--cdf-badge);;
font-size:.85rem;
font-weight:700;
}
.mini-card h4{
margin:6px 0;
font-size:1.15rem;
margin-bottom:0px;
color:#1d2845;
}
.mini-hour,
.mini-location{
margin-top:0px;
color:var(--cdf-badge);
font-size:.85rem;
} @media (max-width:980px){
.badge{
font-size:.70rem;
padding:8px 16px;
letter-spacing:.3px;
}
.countdown{
font-size:.85rem;
padding:8px 16px;
}
.event-content h2{
font-size:1.9rem;
line-height:1.1;
}
.event-period{
font-size:1.1rem;
margin-bottom:20px;
}
.event-info{
font-size:.90rem;
width:100%;
justify-content:center;
text-align:center;
}
.mini-card h4{
font-size:1rem;
}
.mini-date{
font-size:.75rem;
}
}
@media (max-width:980px){
.event-main-card{
padding:20px 20px;
}
.badges-row{
gap:8px;
margin-bottom:12px;
}
.event-content h2{
font-size:1.9rem;
line-height:1;
margin:0 0 10px;
}
.event-period{
font-size:1.1rem;
margin-bottom:12px;
}
.event-infos{
gap:10px;
margin-top:10px;
}
.cdf-evenements{
flex-direction:column;
padding:5px;
}
.event-main-card{
width:100%;
padding:25px;
}
.event-content{
text-align:center;
}
.event-content h2{
font-size:2.2rem;
}
.badges-row{
flex-direction:column;
gap:12px;
}
.event-infos{
justify-content:center;
}
.event-info{
max-width:100%;
width:100%;
border-radius:20px;
justify-content:center;
text-align:center;
white-space:normal;
line-height:1.5;
}
@media (max-width:980px){
.event-side{
width:calc(100% + 10px) !important;
margin:15px -5px 0 -5px !important;
height:220px;
overflow-y:auto;
overflow-x:hidden;
padding-right:6px;
box-sizing:border-box;
}
.mini-card{
width:100% !important;
box-sizing:border-box;
}
.events-mobile{
display:none;
}
@media (max-width:980px){
table{
display:none;
}
.events-mobile{
display:block !important;
}
.event-mobile-card{
background:#fff;
padding:15px;
margin-bottom:15px;
border-radius:15px;
box-shadow:0 4px 15px rgba(0,0,0,.08);
}
.cdf-admin-wrap{
padding:5px !important;
margin:0 !important;
max-width:100% !important;
}
.cdf-admin-card{
margin:0 !important;
padding:15px !important;
border-radius:15px !important;
} .badge{
font-size:.68rem;
padding:7px 14px;
} .countdown{
font-size:.80rem;
padding:7px 14px;
} .event-content h2{
font-size:1.4rem;
line-height:1.00;
} .event-period{
font-size:0.9rem;
} .event-info{
font-size:.75rem;
line-height:1.2;
margin-bottom:0px;
margin-top:0px;
padding:7px;
border-radius:10px;
} .mini-date{
font-size:.70rem;
} .mini-card h4{
font-size:.75rem;
} .mini-hour,
.mini-location{
font-size:.70rem;
} .event-mobile-card{
font-size:.70rem;
}
.event-mobile-card strong{
font-size:1rem;
}
.badges-row{
margin-bottom:10px;
margin-top:-10px;
}
.event-content h2{
margin:0 0 1px;
}
.event-period{
margin-bottom:-5px;
}
.event-infos{
margin-bottom:-10px;
}
.mini-card{
margin-bottom:0px;
margin-top:0px;
padding:4px;
border-radius:10px;
line-height:1.4;
}
.event-side{
height:300px;
}
}