/* ==========================================
   DESKTOP HOVER
========================================== */

@media (hover: hover) and (pointer: fine) {

    .hamburger:hover {
        background: var(--hover);
        transform: scale(1.05);
    }

    .back-to-top:hover {

        background: var(--accent);

        border-color: var(--accent);

        color: var(--button-text);

        transform: translateY(-3px);

    }

    .button-primary:not(:disabled):hover {
        background: var(--button-hover);
        color: var(--button-hover-text);
    }

    .button-secondary:hover {

        background: var(--hover);

    }

    .button-secondary-border:hover {

        background: var(--hover);

    }

    .button-secondary-white:hover {

        background: rgba(255, 255, 255, 0.1);

    }

    .button-secondary-theme:hover {

        background: color-mix(
            in srgb,
            var(--text-reverse) 10%,
            transparent
        );

    }

    .button-secondary-fill:hover {

        background: var(--button-secondary-fill-hover);

    }

    .button-secondary-fill-black:hover {

        background: rgba(0, 0, 0, 0.9);

    }

    .button2-secondary-fill-black:hover {

        background: rgba(0, 0, 0, 0.90);

    }

    .button4-redirect:hover {

        background: var(--button-secondary-fill-hover);

    }

    .button2-player:hover {

        background: var(--hover);

    }

    .button2-b2home:hover {

        background: var(--hover);

    }

    .button2-login:hover {

        background: var(--hover);

    }

    .button2-signup:hover {

        background: var(--button-hover);
        color: var(--button-hover-text);

    }

    .button3-signup:hover {

        background: var(--button-hover);
        color: var(--button-hover-text);

    }

    .store-button:hover {

        opacity: .5;

    }

    .footer-link:hover {

        color: var(--accent);

    }

    .social-link:hover {

        color: var(--accent);

    }

    .language-selector:hover{
        background:var(--component-2);
    }

    .language-menu button:hover{

        background: var(--component-2);

    }

    .header-tab:hover {
        color: var(--button-text);
    }

    .header-tab:hover::after {
        transform: scaleX(1);
    }

    .faq-question:hover {

        background: var(--component-2);
    }

    .login-legal a:hover {

        text-decoration: underline;

    }

    .forgot-password:hover {

        color: var(--text);

    }

    
    .form-input:-webkit-autofill,
    .form-input:-webkit-autofill:hover,
    .form-input:-webkit-autofill:focus {
        -webkit-box-shadow:
            inset 0 0 0 1px var(--separator),
            inset 0 0 0 1000px var(--component-1) !important;

        -webkit-text-fill-color: var(--text) !important;

        caret-color: var(--accent);
    }

    .form-input:hover {

        background: var(--component-2);

    }

    .password-toggle:hover {

        background: var(--hover);

    }

    .signup-step-indicator:hover {
        color: var(--text);
    }

    .form-select:hover {

        background: var(--component-2);

    }

    .signup-legal a:hover {

        text-decoration: underline;

    }

    .experience-card-wrapper:hover
    .experience-card-button {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);
    }

    .offer-card:hover {

        transform:
            translateY(-6px)
            scale(1.03);

    }

    /* Quand la souris entre dans le container */

    .experience-cards:hover .experience-card {

        filter: brightness(.55);

    }

    /* Card active */

    .experience-cards
    .experience-card-wrapper:hover
    .experience-card {

        filter: brightness(1);

        transform:
            translateY(-4px);

    }

    /* ==========================================
     TRAIT
    ========================================== */

    .section-offers-card-more::after {
        content: "";

        position: absolute;

        left: 0;
        bottom: -3px;

        width: 100%;
        height: 1px;

        background: black;

        clip-path: inset(0 100% 0 0);

        transition:
            clip-path .25s ease;
    }


    /* Entrée */

    .section-offers-card-more:hover::after {
        clip-path: inset(0 0 0 0);
    }

    .section-offers-billing-option:not(.is-active):hover {
        color: white;
    }

    .header-tab.active:hover {
        color: var(--accent);
    }

    /* ==========================================
     CARDS HOVER
    ========================================== */

    .section-premium-benefits-card {
        cursor: pointer;
        user-select: none;
        transition: transform .2s ease;
    }


    .section-premium-benefits-card:hover {
        transform: scale(1.02);
    }

    .section-hq-explanation-card {
        cursor: pointer;
        user-select: none;
        transition: transform .2s ease;
    }


    .section-hq-explanation.is-visible .section-hq-explanation-card:hover {
        transform: scale(1.02);
    }

    .section-download-features-card:hover {
        transform: scale(1.02);
    }

    .section-offers-promo-description a:hover::after {
        user-select: none;
        transform: scaleX(1);
    }

    .section-offers-comparison-selector:hover {
        background: color-mix(
            in srgb,
            var(--comparison-offer-background) 90%,
            black
        );
    }

    .faq-answer a:hover::after {
        transform: scaleX(1);
    }

    .section-download-mobile-note a:hover::after {
        transform: scaleX(1);
    }

}