/**
 * Skeleton loader pour le scroll infini
 * Remplace le tout petit spinner du theme parent par un squelette d'article
 * (image + titre + lignes de texte) avec effet shimmer.
 * Objectif : perception de vitesse — le visiteur voit immédiatement qu'un
 * article arrive, au lieu d'un vide de ~1s.
 */

/* Masquer le spinner du theme parent pendant le load de notre skeleton */
#infinite-article.thb-loading > .thb-preloader {
    display: none !important;
}

.thb-skeleton {
    display: block;
    width: 100%;
    max-width: 1100px;
    margin: 40px auto 60px;
    padding: 0 20px;
    box-sizing: border-box;
    min-height: 900px;
}

.thb-skeleton .sk-block {
    background: #eee;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.thb-skeleton .sk-block::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%);
    animation: thb-sk-shimmer 1.4s linear infinite;
}

@keyframes thb-sk-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.thb-skeleton .sk-title {
    height: 42px;
    width: 80%;
    margin: 0 auto 18px;
}

.thb-skeleton .sk-title-sub {
    height: 28px;
    width: 55%;
    margin: 0 auto 30px;
}

.thb-skeleton .sk-image {
    height: 460px;
    width: 100%;
    margin-bottom: 36px;
}

.thb-skeleton .sk-line {
    height: 14px;
    margin-bottom: 14px;
}
.thb-skeleton .sk-line.w100 { width: 100%; }
.thb-skeleton .sk-line.w95  { width: 95%; }
.thb-skeleton .sk-line.w90  { width: 90%; }
.thb-skeleton .sk-line.w70  { width: 70%; }
.thb-skeleton .sk-line.w60  { width: 60%; }

/* Mobile */
@media (max-width: 768px) {
    .thb-skeleton { min-height: 700px; margin: 24px auto 36px; }
    .thb-skeleton .sk-title { height: 32px; width: 90%; margin-bottom: 12px; }
    .thb-skeleton .sk-title-sub { height: 22px; width: 70%; margin-bottom: 22px; }
    .thb-skeleton .sk-image { height: 260px; margin-bottom: 24px; }
}

/* Dark mode */
body.thb-dark-mode .thb-skeleton .sk-block {
    background: #2a2a2a;
}
body.thb-dark-mode .thb-skeleton .sk-block::after {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}