/* ==========================================================================
   MCTV – Bande « verset · émission · vidéo du jour »
   Une seule ligne compacte, placée sous les actualités.
   États : .is-armed (JS prêt, éléments cachés) → .is-in (section visible, entrée animée)
           .is-visible (section à l'écran : la rotation tourne)
   Sans JS, tout reste visible et statique.
   ========================================================================== */

.kl-daily {
    --d-accent: var(--orange, #ff3c00);
    --d-ease: cubic-bezier(.2, .8, .2, 1);
    --d-stage-h: 66px;
    margin: clamp(26px, 4vw, 54px) clamp(6px, 1vw, 14px) 0;
}

.kl-daily__track {
    position: relative;
    display: flex;                            /* le verset prend la place restante, émission et vidéo = largeur de leur contenu */
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #16233f 0%, #0c1222 100%);
    box-shadow: 0 16px 36px -22px rgba(8, 12, 24, .8), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.kl-daily__track::before {                /* filet orange qui se dessine à l'entrée */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--d-accent) 30%, #ff9a5c 70%, transparent);
    transform-origin: left; transition: transform 1.3s var(--d-ease) .15s;
}
.kl-daily.is-armed:not(.is-in) .kl-daily__track::before { transform: scaleX(0); }

/* ------------------------------------------------------------------ colonne */
.kl-daily__item {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    min-width: 0; padding: 16px 20px 18px;
    color: #fff;
    transition: opacity .8s var(--d-ease), transform .9s var(--d-ease);
    transition-delay: calc(var(--k, 0) * 130ms);
}
.kl-daily__item + .kl-daily__item::before {   /* séparateur vertical */
    content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .22), transparent);
}
.kl-daily.is-armed:not(.is-in) .kl-daily__item { opacity: 0; transform: translateY(22px); }
.kl-daily__item--verse { flex: 1 1 0; }
.kl-daily__item--prog  { flex: 0 1 auto; max-width: 360px; }
.kl-daily__item--video { flex: 0 1 auto; max-width: 440px; }

/* guillemet décoratif derrière le verset */
.kl-daily__item--verse::after {
    content: "\201C"; position: absolute; right: 64px; bottom: -34px;
    font: 700 9rem/1 Georgia, 'Times New Roman', serif; color: rgba(255, 154, 92, .07);
    pointer-events: none;
}

.kl-daily__icon {
    position: relative; z-index: 1;
    flex: none; width: 42px; height: 42px; border-radius: 13px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--d-accent), #ff7a3d);
    box-shadow: 0 8px 18px -8px rgba(255, 60, 0, .8);
    transition: transform .9s cubic-bezier(.34, 1.56, .64, 1), opacity .5s ease;
    transition-delay: calc(var(--k, 0) * 130ms + .25s);
}
.kl-daily__icon svg { width: 22px; height: 22px; }
.kl-daily.is-armed:not(.is-in) .kl-daily__icon { opacity: 0; transform: scale(.4) rotate(-25deg); }

.kl-daily__body { position: relative; z-index: 1; flex: 1; min-width: 0; }
.kl-daily__label {
    display: block; margin-bottom: 5px;
    font: 600 .66rem/1 'Poppins', sans-serif; letter-spacing: .14em; text-transform: uppercase;
    color: #ff9a5c;
    transition: letter-spacing 1.1s var(--d-ease), opacity .8s ease;
    transition-delay: calc(var(--k, 0) * 130ms + .3s);
}
.kl-daily.is-armed:not(.is-in) .kl-daily__label { letter-spacing: .5em; opacity: 0; }

/* ------------------------------------------------------------------ scène */
.kl-daily__stage { position: relative; display: grid; min-height: var(--d-stage-h); }
.kl-daily__slide {
    grid-area: 1 / 1; position: relative; min-width: 0;
    display: flex; align-items: center; gap: 12px;
    color: #fff; text-decoration: none;
    opacity: 0; visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
}
.kl-daily__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.kl-daily__slide:hover .kl-daily__title,
.kl-daily__slide:hover .kl-daily__verse strong { color: #ffb27a; }
.kl-daily__slide:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }

/* pastille flèche : occupe l'extrémité droite et signale le lien */
.kl-daily__go {
    flex: none; margin-left: auto; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; color: #ffb27a;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2);
    transition: background .3s ease, color .3s ease, transform .4s var(--d-ease), box-shadow .3s ease;
}
.kl-daily__go svg { width: 14px; height: 14px; }
.kl-daily__slide:hover .kl-daily__go,
.kl-daily__slide:focus-visible .kl-daily__go { background: var(--d-accent); color: #fff; transform: translateX(3px); box-shadow: none; }

/* ------------------------------------------------------------------ textes animés (mot par mot) */
.kl-dw {
    display: inline-block;
    opacity: 0; transform: translateY(.75em) rotateX(-55deg); filter: blur(6px);
    transform-origin: 50% 100%;
    transition: opacity .6s var(--d-ease), transform .75s var(--d-ease), filter .6s var(--d-ease);
}
.kl-daily__slide.is-active .kl-dw {
    opacity: 1; transform: none; filter: none;
    transition-delay: calc(var(--k, 0) * 130ms + var(--w, 0) * 38ms + .2s);
}
/* à l'entrée de la section : on attend d'être visible avant de jouer l'animation */
.kl-daily.is-armed:not(.is-in) .kl-daily__slide.is-active .kl-dw {
    opacity: 0; transform: translateY(.75em) rotateX(-55deg); filter: blur(6px);
}

/* verset */
.kl-daily__verse {
    flex: 1; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font: 400 .92rem/1.45 'Poppins', sans-serif; color: rgba(255, 255, 255, .92);
}
.kl-daily__verse strong { font-weight: 700; color: #ff9a5c; transition: color .25s; }
.kl-daily__sep { margin: 0 4px; opacity: .55; }

/* émission */
.kl-daily__logo {
    flex: none; width: 58px; height: 58px; border-radius: 12px; object-fit: contain; padding: 3px; background: #fff;
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .15);
}
.kl-daily__title {
    flex: 1; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font: 600 .95rem/1.3 'Poppins', sans-serif; color: #fff; transition: color .25s;
}

/* vidéo */
.kl-daily__thumb {
    position: relative; flex: none; width: 102px; height: 57px; border-radius: 10px; overflow: hidden; background: #000;
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .15);
}
.kl-daily__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--d-ease); }
.kl-daily__slide:hover .kl-daily__thumb img { transform: scale(1.1); }
.kl-daily__thumb i {
    position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; border-radius: 50%;
    transform: translate(-50%, -50%); background: rgba(255, 60, 0, .92);
}
.kl-daily__thumb i::before {
    content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
    border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff;
}
.kl-daily__info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.kl-daily__info .kl-daily__title { font-size: .9rem; }
.kl-daily__date { font: 500 .72rem/1 'Poppins', sans-serif; color: rgba(255, 255, 255, .65); }
.kl-daily__live {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: 999px;
    font: 700 .62rem/1 'Poppins', sans-serif; letter-spacing: .1em; text-transform: uppercase;
    background: var(--d-accent); color: #fff;
}
.kl-daily__live::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
    animation: kl-daily-blink 1.1s ease-in-out infinite;
}
@keyframes kl-daily-blink { 50% { opacity: .25; } }

/* ------------------------------------------------------------------ points + minuteur (ajoutés par le JS) */
.kl-daily__dots { position: absolute; top: -7px; right: -6px; display: flex; }
.kl-daily__dot {
    position: relative; width: 16px; height: 16px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.kl-daily__dot::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 999px;
    transform: translate(-50%, -50%); background: rgba(255, 255, 255, .35);
    transition: width .4s var(--d-ease), background .3s;
}
.kl-daily__dot.is-active::before { width: 16px; background: var(--d-accent); }
.kl-daily__dot:hover::before { background: #fff; }
.kl-daily__dot:focus-visible { outline: 2px solid #fff; border-radius: 6px; }

.kl-daily__timer {
    position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, #ff9a5c, var(--d-accent));
    transform: scaleX(0); transform-origin: left; opacity: .85; pointer-events: none;
    animation-play-state: paused;
}
.kl-daily__timer.is-run { animation: kl-daily-timer var(--dur, 5.5s) linear forwards; animation-play-state: paused; }
.kl-daily.is-visible .kl-daily__timer.is-run { animation-play-state: running; }
.kl-daily__item.is-held .kl-daily__timer.is-run { animation-play-state: paused; }
@keyframes kl-daily-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------------ tablette / mobile : lignes empilées, textes complets */
@media (max-width: 991.98px) {
    .kl-daily__track { flex-direction: column; }
    .kl-daily__item,
    .kl-daily__item--verse, .kl-daily__item--prog, .kl-daily__item--video { flex: none; max-width: none; padding: 14px 16px 16px; }
    .kl-daily__item + .kl-daily__item::before {   /* séparateur horizontal */
        left: 6%; right: 6%; top: 0; bottom: auto; width: auto; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    }
    .kl-daily__stage { min-height: 0; }
    .kl-daily__verse, .kl-daily__title { display: block; -webkit-line-clamp: unset; overflow: visible; }
    .kl-daily__timer { left: 16px; right: 16px; }
}

@media (max-width: 575.98px) {
    .kl-daily { margin-top: 22px; }
    .kl-daily__item { gap: 12px; }
    .kl-daily__icon { width: 38px; height: 38px; border-radius: 11px; }
    .kl-daily__verse { font-size: .88rem; }
    .kl-daily__logo { width: 52px; height: 52px; }
    .kl-daily__thumb { width: 92px; height: 52px; }
    .kl-daily__item--verse::after { right: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .kl-daily *, .kl-daily *::before, .kl-daily *::after { transition-duration: .01ms !important; animation: none !important; }
}