: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;
}


/* ==========================================
   AGENDA COMITE DES FETES
========================================== */

.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%
);
}

/* ==========================================
   BLOC PRINCIPAL
========================================== */

.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 HAUT
========================================== */

.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);
}

/* ==========================================
   TITRE
========================================== */

.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;
}

/* ==========================================
   INFOS EVENEMENT
========================================== */

.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;
}

/* ==========================================
   COLONNE DROITE
========================================== */

.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 CARTES
========================================== */

.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;
}

/* ==========================================
   RESPONSIVE
========================================== */

@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;
    }
		
}