/* =====================================================================
   style.scrolltaxi.css — bouton « retour en haut » en forme de taxi (vue de dessus)
   Variables à ajuster : --tu-bottom / --tu-right (si un autre bouton flottant occupe le coin)
   ===================================================================== */
.kl-tu {
    --tu-bottom: 22px; --tu-right: 20px; --tu-size: 52px;
    --tu-teal: #31af91; --tu-ink: #0f2230; --tu-ease: cubic-bezier(.2, .9, .3, 1.25);
    position: fixed; z-index: 1040;
    right: calc(var(--tu-right) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--tu-bottom) + env(safe-area-inset-bottom, 0px));
    width: var(--tu-size); height: var(--tu-size);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(30px) scale(.7);
    transition: opacity .35s ease, transform .5s var(--tu-ease), visibility 0s linear .5s;
}
.kl-tu.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
body.modal-open .kl-tu { display: none; }

.kl-tu-btn {
    position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; cursor: pointer; outline: none;
    background: radial-gradient(circle at 30% 25%, #3b566f, #14293a 70%);
    box-shadow: 0 14px 30px rgba(15, 34, 48, .42), inset 0 0 0 2px rgba(255, 255, 255, .08);
    -webkit-tap-highlight-color: transparent; transition: transform .35s var(--tu-ease), box-shadow .35s;
}
.kl-tu-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 20px 38px rgba(15, 34, 48, .5), 0 0 0 5px rgba(49, 175, 145, .22), inset 0 0 0 2px rgba(255, 255, 255, .1); }
.kl-tu-btn:active { transform: scale(.94); }
.kl-tu-btn:focus-visible { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--tu-teal); }

/* Anneau de progression */
.kl-tu-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.kl-tu-ring circle { fill: none; stroke-width: 3; }
.kl-tu-ring-bg { stroke: rgba(255, 255, 255, .12); }
.kl-tu-ring-bar { stroke: #3dffd0; stroke-linecap: round; transition: stroke-dashoffset .15s linear; filter: drop-shadow(0 0 4px rgba(61, 255, 208, .7)); }

/* Route : disque + lignes de voie */
.kl-tu-road { position: absolute; inset: 7px; border-radius: 50%; overflow: hidden; background: #1d2f40; pointer-events: none; }
.kl-tu-road::before, .kl-tu-road::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .13); }
.kl-tu-road::before { left: 14%; } .kl-tu-road::after { right: 14%; }
.kl-tu-road i { position: absolute; left: 50%; width: 3px; height: 9px; margin-left: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, .5); }
.kl-tu-road i:nth-child(1) { top: 8%; } .kl-tu-road i:nth-child(2) { top: 42%; } .kl-tu-road i:nth-child(3) { top: 76%; }

/* Taxi */
.kl-tu-car { position: absolute; left: 50%; top: 50%; width: 22px; height: 40px; margin: -19px 0 0 -11.5px; z-index: 3; pointer-events: none; will-change: transform; }
.kl-tu-svg { position: relative; z-index: 2; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5)); }
.kl-tu-head { transition: filter .3s; }
.kl-tu-tail { fill: #7d1a24; transition: fill .2s, filter .2s; }
.kl-tu-btn:hover .kl-tu-head, .kl-tu.is-driving .kl-tu-head { filter: drop-shadow(0 0 3px #fffbe0); }
.kl-tu.is-braking .kl-tu-tail { fill: #ff2d3f; filter: drop-shadow(0 0 4px #ff2d3f); }

/* Faisceaux des phares (hover + trajet) */
.kl-tu-beam { position: absolute; z-index: 1; top: -14px; width: 9px; height: 16px; opacity: 0; transition: opacity .3s;
    background: linear-gradient(to top, rgba(255, 251, 224, .6), transparent); clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0); }
.kl-tu-beam.l { left: 2px; } .kl-tu-beam.r { right: 2px; }
.kl-tu-btn:hover .kl-tu-beam, .kl-tu.is-driving .kl-tu-beam { opacity: 1; }

/* Effets de vitesse (pendant le trajet seulement) */
.kl-tu-lines i { position: absolute; width: 2px; height: 16px; border-radius: 2px; background: rgba(255, 255, 255, .75); opacity: 0; }
.kl-tu-lines i:nth-child(1) { left: -12px; top: 4px; } .kl-tu-lines i:nth-child(2) { left: -7px; top: 22px; }
.kl-tu-lines i:nth-child(3) { right: -12px; top: 10px; } .kl-tu-lines i:nth-child(4) { right: -7px; top: 28px; }
.kl-tu-puffs i { position: absolute; left: 50%; bottom: -6px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: rgba(255, 255, 255, .8); opacity: 0; }
.kl-tu-puffs i:nth-child(2) { margin-left: -8px; } .kl-tu-puffs i:nth-child(3) { margin-left: 1px; }

.kl-tu.is-driving .kl-tu-lines i { animation: kl-tu-lines .38s linear infinite; }
.kl-tu.is-driving .kl-tu-lines i:nth-child(2n) { animation-duration: .3s; animation-delay: -.12s; }
.kl-tu.is-driving .kl-tu-puffs i { animation: kl-tu-puff .5s ease-out infinite; }
.kl-tu.is-driving .kl-tu-puffs i:nth-child(2) { animation-delay: .17s; } .kl-tu.is-driving .kl-tu-puffs i:nth-child(3) { animation-delay: .33s; }
.kl-tu.is-driving .kl-tu-road i { animation: kl-tu-lane .45s linear infinite; }
.kl-tu.is-driving .kl-tu-tread { animation: kl-tu-tread .16s linear infinite; }
.kl-tu.is-driving .kl-tu-svg { animation: kl-tu-shake .12s linear infinite; }
.kl-tu.is-driving .kl-tu-btn { box-shadow: 0 18px 36px rgba(15, 34, 48, .5), 0 0 0 6px rgba(61, 255, 208, .22), inset 0 0 0 2px rgba(255, 255, 255, .1); }
.kl-tu.is-driving .kl-tu-btn:hover { transform: none; }

/* Au repos : le moteur « tourne » à peine, puis petit coup de gaz au survol */
.kl-tu.is-visible:not(.is-driving) .kl-tu-svg { animation: kl-tu-idle 3.2s ease-in-out infinite; }
.kl-tu-btn:hover .kl-tu-svg { animation: kl-tu-rev .18s linear infinite !important; }

/* Le taxi interrompu revient à sa place en douceur */
.kl-tu.is-returning .kl-tu-car { transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); }

/* Info-bulle (écrans avec souris) */
.kl-tu-tip {
    position: absolute; right: calc(100% + 12px); top: 50%; padding: .45rem .9rem; border-radius: 50px; white-space: nowrap; pointer-events: none;
    font: 700 .82rem/1 "Montserrat", Arial, sans-serif; color: #fff; background: #0f2230; box-shadow: 0 10px 24px rgba(15, 34, 48, .35);
    opacity: 0; transform: translate(10px, -50%); transition: opacity .25s, transform .3s var(--tu-ease); display: none;
}
.kl-tu-tip::after { content: ""; position: absolute; left: 100%; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left-color: #0f2230; }
@media (hover: hover) and (min-width: 992px) {
    .kl-tu-tip { display: block; }
    .kl-tu:hover .kl-tu-tip, .kl-tu:focus-within .kl-tu-tip { opacity: 1; transform: translate(0, -50%); }
    .kl-tu.is-driving .kl-tu-tip { opacity: 0 !important; }
}

@keyframes kl-tu-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes kl-tu-rev { 0%, 100% { transform: translate(0, -2px); } 50% { transform: translate(.6px, -2.6px); } }
@keyframes kl-tu-shake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(.6px); } }
@keyframes kl-tu-tread { to { stroke-dashoffset: -4.8; } }
@keyframes kl-tu-lane { from { transform: translateY(-14px); } to { transform: translateY(18px); } }
@keyframes kl-tu-lines { 0% { transform: translateY(-8px); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(34px); opacity: 0; } }
@keyframes kl-tu-puff { 0% { transform: translateY(0) scale(.5); opacity: .85; } 100% { transform: translateY(20px) scale(2.1); opacity: 0; } }

@media (max-width: 575.98px) { .kl-tu { --tu-size: 60px; --tu-right: 14px; --tu-bottom: 16px; } }
@media print { .kl-tu { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
    .kl-tu, .kl-tu * { animation: none !important; transition-duration: .01s !important; }
}

/* Anciennes flèches « haut de page » (index, cms) : remplacées par le taxi */
.kl-content-scroll-top, .kl-pg-top { display: none !important; }