/* ==========================================================================
   BOUTON « RETOUR EN HAUT » – logo MCTV animé (SVG)
   - anneau orange = progression de la lecture de la page
   - le logo (MCTV) et une flèche ↑ alternent ; au survol la flèche reste
   - bandeau « NEW SEASON » ; au clic le logo s'envole vers le haut
   ========================================================================== */
.kl-totop {
    position: fixed;
    z-index: 1030;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(26px) scale(.5);
    transition: opacity .35s ease, transform .55s cubic-bezier(.2, 1.3, .3, 1);
    -webkit-tap-highlight-color: transparent;
}
.kl-totop[hidden] { display: none; }
.kl-totop.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.kl-totop:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 50%; }

.kl-totop__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 8px 12px rgba(255, 60, 0, .38)) drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
    animation: kl-tt-float 3.4s ease-in-out infinite;
    transition: transform .35s cubic-bezier(.2, 1.3, .3, 1);
}
.kl-totop:hover .kl-totop__svg,
.kl-totop:focus-visible .kl-totop__svg { transform: scale(1.1); }
.kl-totop:active .kl-totop__svg { transform: scale(.94); }
@keyframes kl-tt-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* anneau : piste + progression + étincelle qui tourne + halo pulsé */
.kl-totop__track { fill: none; stroke: rgba(255, 60, 0, .22); stroke-width: 4; }
.kl-totop__bar {
    fill: none;
    stroke: url(#kltt-g);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 207.3;
    stroke-dashoffset: 207.3;
    transition: stroke-dashoffset .2s linear;
}
.kl-totop__orbit { transform-origin: 40px 40px; animation: kl-tt-spin 5s linear infinite; }
.kl-totop__orbit circle { fill: #fff; filter: drop-shadow(0 0 3px #ff7a3d) drop-shadow(0 0 6px #ff3c00); }
@keyframes kl-tt-spin { to { transform: rotate(360deg); } }
.kl-totop__halo {
    fill: none;
    stroke: rgba(255, 60, 0, .55);
    stroke-width: 2;
    transform-origin: 40px 40px;
    animation: kl-tt-halo 2.8s ease-out infinite;
}
@keyframes kl-tt-halo { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.32); } }

/* logo : MCTV + signature, reflet qui traverse */
.kl-totop__mctv {
    fill: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.4px;
}
.kl-totop__sub {
    fill: #ff6a2a;
    font-family: inherit;
    font-size: 3.3px;
    font-weight: 700;
}
.kl-totop__shine { animation: kl-tt-shine 7s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes kl-tt-shine { 0%, 8% { transform: translateX(0); } 26%, 100% { transform: translateX(100px); } }

/* alternance logo ↔ flèche (au survol : flèche fixe) */
.kl-totop__brand { animation: kl-tt-brand 7s ease-in-out infinite; }
.kl-totop__arrow { animation: kl-tt-arrow 7s ease-in-out infinite; opacity: 0; }
.kl-totop__arrow path { fill: none; stroke: #fff; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.kl-totop__arrow-2 { stroke: #ff6a2a !important; opacity: .9; }
@keyframes kl-tt-brand {
    0%, 60%  { opacity: 1; transform: translateY(0); }
    68%, 90% { opacity: 0; transform: translateY(-10px); }
    98%, 100%{ opacity: 1; transform: translateY(0); }
}
@keyframes kl-tt-arrow {
    0%, 60%  { opacity: 0; transform: translateY(12px); }
    68%, 90% { opacity: 1; transform: translateY(-3px); }
    98%, 100%{ opacity: 0; transform: translateY(12px); }
}
.kl-totop:hover .kl-totop__brand,
.kl-totop:focus-visible .kl-totop__brand { animation: none; opacity: 0; transform: translateY(-10px); transition: opacity .25s ease, transform .35s ease; }
.kl-totop:hover .kl-totop__arrow,
.kl-totop:focus-visible .kl-totop__arrow { animation: kl-tt-arrow-loop 1s ease-in-out infinite; opacity: 1; }
@keyframes kl-tt-arrow-loop { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-5px); } }

/* bandeau « NEW SEASON » */
.kl-totop__ribbon rect { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.kl-totop__ribbon text {
    fill: #fff;
    font-family: inherit;
    font-size: 5.2px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .25px;
    paint-order: stroke;
    stroke: rgba(120, 25, 0, .45);
    stroke-width: .5px;
}
.kl-totop__ribbon { animation: kl-tt-ribbon 3.4s ease-in-out infinite; transform-origin: 0 0; }
@keyframes kl-tt-ribbon { 0%, 100% { transform: translate(60.5px, 15.5px) rotate(40deg); } 50% { transform: translate(60.5px, 15.5px) rotate(46deg); } }

/* clic : le logo décolle */
.kl-totop.is-go .kl-totop__svg { animation: kl-tt-go .75s cubic-bezier(.5, 0, .9, .4) forwards; }
@keyframes kl-tt-go { 0% { translate: 0 0; opacity: 1; } 30% { translate: 0 6px; } 100% { translate: 0 -150px; opacity: 0; } }

@media (max-width: 575.98px) {
    .kl-totop { width: 52px; height: 52px; right: max(10px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .kl-totop, .kl-totop__svg, .kl-totop__orbit, .kl-totop__halo, .kl-totop__shine,
    .kl-totop__brand, .kl-totop__arrow, .kl-totop__ribbon, .kl-totop__bar { animation: none !important; transition: none !important; }
    .kl-totop__ribbon { transform: translate(60.5px, 15.5px) rotate(40deg); }
    .kl-totop__halo, .kl-totop__orbit, .kl-totop__shine { display: none; }
    .kl-totop:hover .kl-totop__brand { opacity: 1; transform: none; }
}