/**
 * Sidebar "Flux Général" — Carrousel vertical infini d'événements
 * Design : fond navy institutionnel + accent vert, zoom sur l'élément central.
 * Dépend du JS acsj-event-slider.js (ROW_HEIGHT = 90px, doit rester synchronisé).
 */

/* --- Conteneur principal de la sidebar --- */
.highlight-sidebar {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.bg-sidebar-navy {
    background-color: #071c42;
    border-left: 4px solid var(--color-green);
    color: var(--color-white);
}

/* --- Header du bloc (titre "Flux Général" + flèches) --- */
.sidebar-event-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 12px;
}

.slider-nav-arrows {
    display: flex;
    gap: 6px;
}

.arrow-ctrl {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 3px;
    transition: background 0.2s ease, transform 0.15s ease;
    user-select: none;
}

.arrow-ctrl:hover {
    background: var(--color-green);
    color: #000;
    transform: scale(1.05);
}

/* --- Viewport : hauteur fixe = 3 lignes de 90px, aucune dérive possible --- */
.media-vertical-slider {
    overflow: hidden;
    position: relative;
    height: 270px; /* 3 x 90px — garder synchronisé avec ROW_HEIGHT en JS */
    padding-left: 15px;

    /* Fondu haut/bas pour adoucir l'entrée/sortie des lignes latérales */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 14%,
        black 86%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 14%,
        black 86%,
        transparent 100%
    );
}

/* --- Piste : contient toutes les lignes (originales + clones), translatée via transform --- */
.media-slider-track {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

/* --- Chaque ligne : hauteur fixe garantissant l'alignement du calcul JS --- */
.media-slider-row {
    height: 90px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 2px;
    opacity: 0.55;
    transform: scale(0.9);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, background 0.3s ease;
    transform-origin: center center;
    border-radius: 6px;
    border-left: 3px solid transparent;
}

.media-slider-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* --- Le lien interne occupe toute la ligne --- */
.media-slider-row a.d-flex.flex-column {
    width: 100%;
    gap: 4px;
    text-decoration: none;
    color: inherit;
}

/* --- Élément central (2e des 3 visibles) : zoomé et mis en avant --- */
.media-slider-row.acsj-is-center {
    opacity: 1;
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.07);
    border-left: 3px solid var(--color-green);
}

/* --- Titre de l'événement --- */
.event-title {
    font-size: 0.95rem;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-weight 0.3s ease;
}

/* --- Ligne centrale : titre en gras, autorisé à passer sur 2 lignes --- */
.media-slider-row.acsj-is-center .event-title {
    font-weight: 700;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Date de l'événement --- */
.event-date {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-green);
    font-weight: 600;
    opacity: 0.9;
}