/* ===========================
   Daily Events — Shimmer CSS
   (layout: time | separator | content)
   =========================== */

:root {
    --dailyevent-skeleton-base: #e9ebf3;
    --dailyevent-skeleton-spot: #f4f6fb;
    --dailyevent-skeleton-shadow: rgba(0,0,0,.06);
}

/* Liste conteneur */
.dailyevent-shimmer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Élément (86px) */
.dailyevent-shimmer-item {
    position: relative;
    display: grid;
    grid-template-columns: 96px 2px 1fr; /* time | sep | content */
    align-items: center;
    gap: 14px;
    height: 86px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 6px var(--dailyevent-skeleton-shadow);
    border-radius: 12px;
    margin: 10px 12px;
}

    /* Effet shimmer balayant l'élément */
    .dailyevent-shimmer-item::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0.75) 55%, transparent 100% );
        animation: dailyevent-shimmer-move 1.2s ease-in-out infinite;
    }

@keyframes dailyevent-shimmer-move {
    100% {
        transform: translateX(100%);
    }
}

/* Colonne heure — hauteur exacte 29px (hors padding) */
.dailyevent-shimmer-time {
    justify-self: center;
    width: 78%;
    height: 29px; /* demandé */
    border-radius: 8px;
    background: linear-gradient(0deg, var(--dailyevent-skeleton-base), var(--dailyevent-skeleton-spot));
}

/* Séparateur vertical */
.dailyevent-shimmer-sep {
    width: 2px;
    height: 64%;
    background: rgba(0,0,0,0.08);
    border-radius: 2px;
    justify-self: center;
}

/* Contenu (2 lignes) : Titre + Corps */
.dailyevent-shimmer-content {
    display: grid;
    grid-template-rows: 20px 14px; /* titre | contenu */
    align-content: center;
    gap: 10px;
    width: 96%;
}

.dailyevent-shimmer-title,
.dailyevent-shimmer-body {
    border-radius: 6px;
    background: linear-gradient(0deg, var(--dailyevent-skeleton-base), var(--dailyevent-skeleton-spot));
}

/* Largeurs par défaut */
.dailyevent-shimmer-title {
    width: 58%;
}
/* imite la longueur du libellé */
.dailyevent-shimmer-body {
    width: 82%;
}

/* Légères variations pour casser la répétition */
.dailyevent-shimmer-item:nth-child(3n) .dailyevent-shimmer-title {
    width: 66%;
}

.dailyevent-shimmer-item:nth-child(4n) .dailyevent-shimmer-body {
    width: 70%;
}

.dailyevent-shimmer-item:nth-child(5n) .dailyevent-shimmer-title {
    width: 50%;
}