/* ==========================================================
   MODULES « CLIPS » : ligne défilante (clip-strip.php) et grille + « Afficher plus » (clip-grid.php)
   Emplacement : /templates/Moon_Music_2024_Dark/css/clip-modules.css
   Autonome : ne dépend pas de album-fiche.css. Couleur d'accent : --clm-accent (module) et --c (chaque clip).
   ========================================================== */

.clm {
    --clm-accent: #55FFD1;
    --clm-muted: #aeb3c2;
    --clm-card: rgba(255, 255, 255, 0.045);
    --clm-line: rgba(255, 255, 255, 0.1);
    --clm-gap: 16px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 0 8px;
    color: #eceef5;
    container-type: inline-size;
}
.clm *, .clm *::before, .clm *::after { box-sizing: border-box; }

/* Protection contre le template */
.clm a, .clm a:hover, .clm a:focus { text-decoration: none !important; border: 0 !important; }
.clm img { max-width: none; margin: 0 !important; border: 0 !important; box-shadow: none; }
.clm p, .clm ul, .clm li { margin: 0; padding: 0; list-style: none; }

/* ---------------- EN-TÊTE ---------------- */
.clm-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0 0 16px;
    padding: 0 0 12px;
}
.clm-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #e36ca5, #f1d158, #55FFD1, #00cdfb, #75a4fd);
    opacity: 0.85;
}
.clm-head__t { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.clm-head__t > span { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.clm-head__t > span::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 12px;
    border-radius: 50%;
    background: var(--clm-accent);
    box-shadow: 0 0 12px var(--clm-accent);
    vertical-align: 1px;
}
.clm-head__t > small { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clm-muted); }
.clm-head__r { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.clm .clm-all,
.clm .clm-all:hover,
.clm .clm-all:focus {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clm-accent) !important;
    transition: opacity 0.2s ease;
}
.clm .clm-all:hover { opacity: 0.75; }

/* flèches */
.clm-nav { display: inline-flex; gap: 8px; }
.clm .clm-arrow,
.clm .clm-arrow:hover,
.clm .clm-arrow:focus,
.clm .clm-arrow:active {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0 !important;
    border-radius: 50%;
    outline: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    color: var(--clm-accent) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid color-mix(in srgb, var(--clm-accent) 55%, transparent) !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.clm .clm-arrow svg { display: block; width: 20px; height: 20px; }
.clm .clm-arrow:hover:not(:disabled), .clm .clm-arrow:focus-visible { color: #0e0f16 !important; background: var(--clm-accent) !important; transform: translateY(-2px); }
.clm .clm-arrow:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }
.clm .clm-arrow:disabled { opacity: 0.3; cursor: default; }
.clm .clm-arrow { cursor: pointer !important; }

/* ---------------- BARRE DE FILTRE PAR ANNÉE AVEC NAVIGATION & GLISSER ---------------- */
.clm-years-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: -4px 0 12px;
}
/* Dégradés d'estompage sur les côtés */
.clm-years-wrap::before,
.clm-years-wrap::after {
    display: none !important;
    content: none !important;
}

.clm-years-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    padding: 3px 4px 10px;
    margin: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.clm-years-bar.is-dragging {
    cursor: grabbing !important;
    scroll-behavior: auto !important;
}
/* Barre de défilement discrète et élégante */
.clm-years-bar::-webkit-scrollbar {
    height: 4px;
    display: block;
}
.clm-years-bar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}
.clm-years-bar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    transition: background 0.2s ease;
}
.clm-years-bar::-webkit-scrollbar-thumb:hover {
    background: var(--clm-accent);
}

/* Boutons flèches pour faire défiler les années */
.clm-yr-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 4px));
    z-index: 5;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--clm-accent) 45%, transparent) !important;
    background: rgba(18, 19, 27, 0.92) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--clm-accent) !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.clm-yr-arrow svg {
    display: block;
    width: 16px;
    height: 16px;
}
.clm-yr-arrow:hover:not(:disabled) {
    background: var(--clm-accent) !important;
    color: #0e0f16 !important;
    transform: translateY(calc(-50% - 4px)) scale(1.1);
}
.clm-yr-arrow--prev { left: 0; }
.clm-yr-arrow--next { right: 0; }
.clm-yr-arrow:disabled,
.clm-yr-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-50% - 4px)) scale(0.7);
}

@media (hover: none) {
    .clm-yr-arrow { display: none; }
}

.clm-year-btn {
    appearance: none;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    cursor: pointer;
    color: var(--clm-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--clm-line);
    transition: all 0.2s ease;
}
.clm-year-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}
.clm-year-btn.is-active {
    color: #0e0f16 !important;
    background: var(--clm-accent) !important;
    border-color: var(--clm-accent) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--clm-accent) 35%, transparent);
}
.clm-year-btn small {
    font-size: 0.72rem;
    opacity: 0.75;
}
.clm-card[hidden] {
    display: none !important;
}

/* ---------------- CARTE D'UN CLIP ---------------- */
.clm .clm-card,
.clm .clm-card:hover,
.clm .clm-card:focus {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    color: #fff !important;
    background: var(--clm-card);
    border: 1px solid var(--clm-line) !important;
    transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.clm a.clm-card:hover, .clm a.clm-card:focus-visible {
    border-color: var(--c, var(--clm-accent)) !important;
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--c, var(--clm-accent)) 40%, transparent);
}
.clm a.clm-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.clm a.clm-card.is-current { border-color: var(--c, var(--clm-accent)) !important; background: color-mix(in srgb, var(--c, var(--clm-accent)) 16%, transparent); }

.clm-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--clm-accent)) 45%, #0e0f16), #0e0f16);
}
.clm .clm-card__thumb img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 0.5s cubic-bezier(.2, .8, .2, 1), filter 0.3s ease; }
.clm .clm-card__thumb img.clm-fb { filter: saturate(1.1) brightness(0.8); }
.clm a.clm-card:hover .clm-card__thumb img, .clm a.clm-card:focus-visible .clm-card__thumb img { transform: scale(1.07); filter: brightness(1.1); }
.clm-card__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 34%), linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.6));
}

.clm-card__year {
    position: absolute;
    z-index: 2;
    top: 9px;
    left: 9px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: #0e0f16;
    background: var(--c, var(--clm-accent));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* le bouton lecture est un repère visuel : le clic mène à la fiche */
.clm-card__play {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    color: #0e0f16;
    background: var(--c, var(--clm-accent));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.2, .8, .2, 1);
}
.clm-card__play svg { display: block; width: 22px; height: 22px; margin-left: 2px; }
.clm a.clm-card:hover .clm-card__play, .clm a.clm-card:focus-visible .clm-card__play { opacity: 1; transform: scale(1); }
@media (hover: none) { .clm-card__play { opacity: 0.92; transform: scale(0.8); } }

.clm-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 11px 13px 13px; }
.clm-card__body strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.95rem;
    line-height: 1.25;
    font-weight: 800;
    color: #fff;
    overflow-wrap: anywhere;
}
.clm-card__body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; color: var(--c, var(--clm-accent)); }

/* ---------------- LIGNE DÉFILANTE ---------------- */
.clm-strip { --clm-cols: 6; }
.clm-strip.clm-c5 { --clm-cols: 5; }
.clm-strip__wrap { position: relative; }
/* fondus aux extrémités quand il reste des clips à voir */
.clm-strip__wrap::before,
.clm-strip__wrap::after {
    display: none !important;
    content: none !important;
}

.clm-strip__track {
    position: relative;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    display: grid;
    grid-auto-flow: column;
    --clm-n: var(--clm-cols);
    grid-auto-columns: calc((100% - (var(--clm-n) - 1) * var(--clm-gap)) / var(--clm-n));
    gap: var(--clm-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 6px 0 14px;
    margin: -6px 0 -14px;
}
.clm-strip__track::-webkit-scrollbar { display: none; }
.clm-strip__track.is-dragging { cursor: grabbing !important; scroll-behavior: auto !important; scroll-snap-type: none !important; }
.clm-strip__track > .clm-card { scroll-snap-align: start; }

@container (max-width: 1100px) { .clm-strip__track { --clm-n: 4; } }
@container (max-width: 760px)  { .clm-strip__track { --clm-n: 3; --clm-gap: 12px; } }
@container (max-width: 520px) {
    .clm { margin: 0 0 12px; }
    .clm-head { margin: 0 0 8px; padding: 0 0 6px; }
    .clm-head__t > span { font-size: 0.95rem; letter-spacing: 0.08em; }
    .clm-head__t > span::before { width: 8px; height: 8px; margin-right: 8px; }
    .clm-head__t > small { font-size: 0.72rem; }
    .clm-years-wrap { margin: -2px 0 6px; }
    .clm-years-bar { padding: 2px 2px 8px; margin: 0; gap: 6px; }
    .clm-year-btn { padding: 4px 11px; font-size: 0.76rem; }
    .clm-strip__track { --clm-n: 2.2; --clm-gap: 10px; padding: 4px 0 10px; margin: -4px 0 -10px; }
    .clm-nav { display: none; }
    .clm-strip__wrap::before,
.clm-strip__wrap::after {
    display: none !important;
}
    .clm-strip .clm-card__body { padding: 8px 10px 10px; gap: 1px; }
    .clm-strip .clm-card__body strong { font-size: 0.86rem; line-height: 1.2; -webkit-line-clamp: 2; }
    .clm-strip .clm-card__body small { font-size: 0.7rem; }
    .clm-strip .clm-card__year { top: 6px; left: 6px; font-size: 0.62rem; padding: 2px 7px; }
    .clm-strip .clm-card__play { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
    .clm-strip .clm-card__play svg { width: 16px; height: 16px; }
}
@container (max-width: 360px) {
    .clm-strip__track { --clm-n: 1.8; }
}
@media (hover: none) { .clm-nav { display: none; } }

/* ---------------- GRILLE + « AFFICHER PLUS » ---------------- */
.clm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.clm-grid.clm-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clm-grid.clm-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.clm-item { min-width: 0; display: flex; }
.clm-item > .clm-card { flex: 1 1 auto; }
.clm-item[hidden] { display: none !important; }
.clm-grid .clm-card__body { padding: 13px 16px 16px; }
.clm-grid .clm-card__body strong { font-size: 1.05rem; }
.clm-grid .clm-card__body small { font-size: 0.8rem; }
.clm-grid .clm-card__play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.clm-grid .clm-card__play svg { width: 26px; height: 26px; }
.clm-grid .clm-card__year { top: 12px; left: 12px; font-size: 0.74rem; padding: 4px 11px; }

.clm-item.is-new { animation: clm-in 0.5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes clm-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.clm-more { display: flex; justify-content: center; margin: 26px 0 0; }
.clm-more[hidden] { display: none !important; }
.clm .clm-btn,
.clm .clm-btn:hover,
.clm .clm-btn:focus,
.clm .clm-btn:active {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 13px 26px !important;
    border-radius: 999px;
    outline: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.1 !important;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--clm-accent) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--clm-accent) !important;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.clm .clm-btn b { padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; color: inherit; background: rgba(255, 255, 255, 0.1); }
.clm .clm-btn svg { display: block; width: 18px; height: 18px; transition: transform 0.25s ease; }
.clm .clm-btn:hover, .clm .clm-btn:focus-visible { color: #0e0f16 !important; background: var(--clm-accent) !important; transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--clm-accent) 30%, transparent) !important; }
.clm .clm-btn:hover b, .clm .clm-btn:focus-visible b { background: rgba(14, 15, 22, 0.16); }
.clm .clm-btn:hover svg { transform: translateY(2px); }
.clm .clm-btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px; }

/* ---------------- COLONNE ÉTROITE (selon la largeur du bloc, pas de l'écran) ---------------- */
@container (max-width: 700px) {
    .clm-grid, .clm-grid.clm-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .clm-grid .clm-card__body { padding: 11px 12px 13px; }
    .clm-grid .clm-card__body strong { font-size: 0.98rem; }
}
@container (max-width: 420px) {
    .clm-grid { gap: 10px; }
    .clm-grid .clm-card__body strong { font-size: 0.92rem; }
    .clm-grid .clm-card__play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
    .clm-grid .clm-card__play svg { width: 20px; height: 20px; }
    .clm-head__t > span { font-size: 1rem; letter-spacing: 0.1em; }
}
@container (max-width: 250px) {
    .clm-grid, .clm-grid.clm-g2, .clm-grid.clm-g4 { grid-template-columns: minmax(0, 1fr); }
}
.clm-head__t > span { min-width: 0; overflow-wrap: anywhere; }
/* navigateurs sans « container queries » : repli sur la largeur de l'écran */
@supports not (container-type: inline-size) {
    @media (max-width: 1100px) { .clm-strip__track { --clm-n: 4; } }
    @media (max-width: 760px)  { .clm-strip__track { --clm-n: 3; } .clm-grid, .clm-grid.clm-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 520px)  { .clm-strip__track { --clm-n: 2.3; } .clm-nav { display: none; } }
}
@media (prefers-reduced-motion: reduce) {
    .clm *, .clm *::before, .clm *::after { transition: none !important; animation: none !important; }
    .clm-strip__track { scroll-behavior: auto; }
}