/* ============================================================
   Bloc "Bandeau médiathèque compact (défilement continu)"

   Version condensée de mediatheque_carousel : liste verticale à une
   ligne par média (vignette réduite + date + titre), qui défile
   doucement de haut en bas façon "fil d'actu" et boucle à l'infini
   (js/script.js).
   Pas de colonnes responsives ici — toujours 1 seule colonne, seule la
   hauteur du bandeau (nombre de lignes visibles) est paramétrable.
   Réutilise les variables CSS globales du thème (--color-primary,
   --radius-lg, --shadow-card...), définies dans templates/default/
   index.php à partir de Réglages > Thème.
   ============================================================ */

.bloc-mediatheque-ticker {
    padding: 3rem 0;
}

.mediatheque-ticker__title-section {
    margin-bottom: 2rem;
}

/* ── Hauteur d'une ligne — desktop 3.75rem (~60px), réduite sur mobile
   (voir media query). Utilisée à la fois pour calculer la hauteur du
   viewport (--lignes lignes) et comme hauteur fixe de chaque item. ─── */
.mediatheque-ticker {
    --ti-row-h: 3.75rem;
    max-width: 640px;
    margin: 0 auto;
    border: 1px solid var(--color-border-light, #e9ecef);
    border-radius: var(--radius-lg, 12px);
    background: #fff;
    box-shadow: var(--shadow-card, 0 6px 18px rgba(0, 0, 0, .08));
}

@media (max-width: 767.98px) {
    .mediatheque-ticker {
        --ti-row-h: 3.25rem;
    }
}

/* ── Viewport + piste ─────────────────────────────────────────── */
.mediatheque-ticker__viewport {
    overflow: hidden;
    max-height: calc(var(--lignes, 5) * var(--ti-row-h));
}

.mediatheque-ticker__track {
    display: flex;
    flex-direction: column;
    transition: transform .5s ease;
}

/* Désactive momentanément la transition — posée par js/script.js le
   temps du saut invisible de fin de boucle. */
.mediatheque-ticker__track--jump {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .mediatheque-ticker__track {
        transition: none;
    }
}

/* ── Mode statique (pas assez de médias pour boucler proprement) ──── */
.mediatheque-ticker--static .mediatheque-ticker__viewport {
    max-height: none;
}

.mediatheque-ticker--static .mediatheque-ticker__track {
    transition: none;
}

/* ── Ligne ─────────────────────────────────────────────────────── */
.mediatheque-ticker__item {
    flex: 0 0 auto;
    height: var(--ti-row-h);
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border-light, #e9ecef);
}

.mediatheque-ticker__item:last-child {
    border-bottom: none;
}

.mediatheque-ticker__row {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: 0 .9rem;
    text-decoration: none;
    color: inherit;
    transition: background .2s ease;
}

.mediatheque-ticker__row:hover,
.mediatheque-ticker__row:focus-visible {
    background: var(--color-bg-light, #f8f9fa);
}

.mediatheque-ticker__row:focus-visible {
    outline: 2px solid var(--color-primary, #2a2d6b);
    outline-offset: -2px;
}

.mediatheque-ticker__img {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm, 8px);
    object-fit: cover;
    background: var(--color-border-light, #e9ecef);
}

.mediatheque-ticker__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.mediatheque-ticker__date {
    font-size: .7rem;
    line-height: 1;
    color: var(--color-text-secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.mediatheque-ticker__title {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text, #212529);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mediatheque-ticker__row:hover .mediatheque-ticker__title {
    color: var(--color-primary, #2a2d6b);
}

.mediatheque-ticker__chevron {
    flex: 0 0 auto;
    font-size: .85rem;
    color: var(--color-text-secondary, #adb5bd);
}

.mediatheque-ticker__voir-tout {
    margin-top: 1.75rem;
}