:root {
    --color-text-light: #fff;
    --color-accent: #f06292;
}

/* =========================
   FLÈCHE SCROLL + CERCLE TRACE
========================= */
.banner-arrow {
    position: relative;
    margin: 2rem auto;
    width: 3rem;
    height: 3rem;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    z-index: 5;

    animation: arrow-bounce 2s ease-in-out infinite;
    transition: transform 0.6s ease;
}

/* Flèche */
.banner-arrow i {
    font-size: 1.8rem;
    color: var(--color-text-light);
    transition: transform 0.6s ease, color 0.3s ease, text-shadow 0.3s ease;
    z-index: 2;
}

/* Cercle SVG */
.banner-arrow svg.arrow-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    transform: translate(-50%, -50%) rotate(-90deg);
    z-index: 1;
}

.banner-arrow svg circle {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2.5;
    stroke-dasharray: 176; /* 2 * PI * r ~ 2 * 3.14 * 28 */
    stroke-dashoffset: 176;
    transition: stroke-dashoffset 0.7s ease;
}

/* Hover : cercle se trace et flèche tourne */
.banner-arrow:hover i {
    transform: rotate(360deg) scale(1.2);
    color: var(--color-accent);
    text-shadow: 0 0 6px var(--color-accent), 0 0 12px rgba(255,255,255,0.3);
}

/* Stop bounce animation on hover */
.banner-arrow:hover {
    animation: none; /* désactive le bounce */
}


.banner-arrow:hover svg circle {
    stroke-dashoffset: 0;
}

/* Bounce animation */
@keyframes arrow-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(0.6rem); }
    60% { transform: translateY(0.3rem); }
}

/* Click animation */
.banner-arrow.clicked i {
    animation: arrow-click 0.55s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes arrow-click {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    50%  { transform: translateY(1rem) scale(0.92); opacity: 0.9; }
    100% { transform: translateY(1.5rem) scale(0.88); opacity: 0.7; }
}

/* Responsive */
@media (max-width: 799px) {
    .banner-arrow { width: 2.5rem; height: 2.5rem; }
    .banner-arrow i { font-size: 1.5rem; }
    .banner-arrow svg { width: 3.5rem; height: 3.5rem; }
}

@media (max-width: 480px) {
    .banner-arrow { width: 2rem; height: 2rem; }
    .banner-arrow i { font-size: 1.2rem; }
    .banner-arrow svg { width: 3rem; height: 3rem; }
}