/**
 * SCAP Workout Sync - liens de compte dans la navigation.
 *
 * Un seul bouton dans la barre (Connexion ou Ma montre) : la page
 * « Adhesion » reste accessible depuis le menu principal, ce qui evite
 * tout doublon et tout chevauchement sur petit ecran.
 *
 * Les liens Connexion / Inscription sont aussi repris dans le tiroir mobile.
 */

/* ------------------------------------------------------------------ */
/* Liens de compte dans le menu (tiroir mobile)                        */
/* ------------------------------------------------------------------ */
.scap-nav-account {
    list-style: none;
    margin: 0;
    padding: 0;
}

.scap-nav-account > li > a {
    display: block;
    padding: 12px 14px;
    font-family: var(--outfit, 'Outfit', sans-serif);
    font-weight: 600;
    font-size: 15px;
    color: rgba(248, 244, 236, .92);
    border-radius: 8px;
}

.scap-nav-account > li > a:hover {
    color: #fff;
    background: rgba(248, 244, 236, .08);
}

/* Sur grand ecran, ces liens sont deplaces dans la barre d actions. */
@media (min-width: 1024px) {
    .scap-nav-account {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Bouton unique dans la barre de navigation                           */
/* ------------------------------------------------------------------ */
.scap-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-right: 4px;
}

.scap-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;

    /* Gabarit compact : on evite d occupies toute la largeur disponible. */
    padding: 11px 22px;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    font-family: var(--outfit, 'Outfit', sans-serif);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .03em;
    line-height: 1.2;
    color: #fff;
    background: #E00838;
    box-shadow: 0 10px 22px -12px rgba(224, 8, 56, .85);
    transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
    cursor: pointer;
}

.scap-nav-btn:hover {
    background: #B30A2F;
    color: #fff;
    transform: translateY(-1px);
}

.scap-nav-btn:focus-visible {
    outline: 3px solid rgba(224, 8, 56, .55);
    outline-offset: 2px;
}

.scap-nav-btn-account { }
.scap-nav-btn-watch {
    background: #16161A;
    color: #F8F4EC;
    box-shadow: 0 10px 22px -14px rgba(20, 20, 25, .9);
}

.scap-nav-btn-watch:hover {
    background: #E00838;
}

.scap-nav-btn-watch svg {
    flex: none;
}

/* ------------------------------------------------------------------ */
/* Adaptation aux petits ecrans                                        */
/* ------------------------------------------------------------------ */

/* Sous 1024 px le theme bascule en tiroir : on libere la barre. */
@media (max-width: 1023px) {
    .scap-nav-actions {
        margin-right: 0;
    }

    .scap-nav-account {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(248, 244, 236, .16);
    }
}

/* Sous 560 px, le bouton reste lisible mais plus compact. */
@media (max-width: 560px) {
    .scap-nav-btn {
        padding: 10px 16px;
        font-size: 13px;
        min-height: 42px;
    }

    .scap-nav-btn-watch span {
        display: none;
    }

    .scap-nav-btn-account { }
.scap-nav-btn-watch {
        padding: 10px 14px;
    }
}

/* Sous 400 px, on retire completement le bouton : le tiroir suffit. */
@media (max-width: 400px) {
    .scap-nav-actions {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scap-nav-btn {
        transition: none;
    }

    .scap-nav-btn:hover {
        transform: none;
    }
}
/* Bouton « Mon espace » : avatar avec initiales + libelle. */
.scap-nav-btn-account {
    padding: 8px 18px 8px 8px;
    gap: 10px;
}

.scap-nav-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-family: var(--outfit, "Outfit", sans-serif);
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: .02em;
    line-height: 1;
}

.scap-nav-btn-text {
    font-weight: 700;
}

/* Sous 560 px, on garde l avatar seul pour liberer de la place. */
@media (max-width: 560px) {
    .scap-nav-btn-account {
        padding: 6px;
        gap: 0;
    }

    .scap-nav-btn-text {
        display: none;
    }

    .scap-nav-avatar {
        width: 40px;
        height: 40px;
    }
}