.hide{ display:none; }
.ilb{ display: inline-block; }
.blk{ display: block; }
.fleft{float:left}
.fright{float:right}


/* ----------------------------------------- */
/*         animation de clignotement         */
@keyframes clignote {
    0%, 100% { color: #ff00A1; }
    50% { color: #FFFFFF; }
}
.clignotant {
    animation: clignote 2s infinite; 
}

/* ----------------------------------------- */
/*           spinner de chargement           */

#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ----------------------------------------- */
/*              popup événement              */

#popup-event {
    display: none; /* caché par défaut */
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    padding: 20px;
    background: linear-gradient(to bottom, rgb(250, 190, 100, 0.9), rgb(255, 225, 80, 0.9));
    border: 2px solid #9d9d9d;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    z-index: 1000;
}

#popup-event > div{
    background: rgba(255, 255, 255, 0.5);
    padding: 12px;
    border-radius: 12px;
}
#popup-event .close {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    
}
#popup-event .close svg line,
#popup-event .close svg circle {
    transition: all 0.3s ease-in-out;
}
#popup-event .close svg:hover line,
#popup-event .close svg:hover circle {
    stroke: #FFF;
    fill:#000;
}