/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Thinkify — Section Navigation (composant générique)
   Partagé entre toutes les pages de type full-scroll.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── Conteneur ─────────────────────────────────── */
.tk-snav {
    position:       fixed;
    right:          2rem;
    top:            50%;
    transform:      translateY(-50%);
    z-index:        800;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    outline:        none;
}

/* ─── Item ───────────────────────────────────────── */
.tk-snav__item {
    display:         flex;
    align-items:     center;
    gap:             10px;
    justify-content: flex-end;
    cursor:          pointer;
    padding:         3px 0;
    border-radius:   4px;
    outline:         none;
}

/* ─── Label ──────────────────────────────────────── */
.tk-snav__label {
    font-family:    'DM Sans', system-ui, sans-serif;
    font-size:      0.59rem;
    font-weight:    500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space:    nowrap;

    /* Always visible — but dim for inactive */
    color:     rgba(255, 255, 255, 1);
    opacity:   0.28;
    transition:
        opacity    0.3s cubic-bezier(0.16, 1, 0.3, 1),
        color      0.3s,
        font-weight 0.3s,
        transform  0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(4px);
}

.tk-snav__item:hover .tk-snav__label {
    opacity:   0.6;
    transform: translateX(0);
}

.tk-snav__item.tk-active .tk-snav__label {
    opacity:     1;
    color:       #00B4A6;
    font-weight: 600;
    transform:   translateX(0);
}

/* ─── Dot ────────────────────────────────────────── */
.tk-snav__dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    border:        1.5px solid rgba(255, 255, 255, 0.32);
    background:    transparent;
    flex-shrink:   0;
    transition:
        background    0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color  0.35s,
        box-shadow    0.35s,
        transform     0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tk-snav__item:hover:not(.tk-active) .tk-snav__dot {
    border-color: rgba(255, 255, 255, 0.7);
    background:   rgba(255, 255, 255, 0.18);
}

.tk-snav__item.tk-active .tk-snav__dot {
    background:   #00B4A6;
    border-color: #00B4A6;
    box-shadow:
        0 0 0 3px rgba(0, 180, 166, 0.22),
        0 0 8px  rgba(0, 180, 166, 0.25);
    transform: scale(1.15);
}


/* ─── Thème clair ────────────────────────────────── */
/* Déclenché par JS via classe .tk-snav--light sur le <nav> */
.tk-snav.tk-snav--light .tk-snav__label {
    color: rgba(13, 20, 32, 1);
}

.tk-snav.tk-snav--light .tk-snav__item.tk-active .tk-snav__label {
    color: #00B4A6;
}

.tk-snav.tk-snav--light .tk-snav__dot {
    border-color: rgba(13, 20, 32, 0.28);
}

.tk-snav.tk-snav--light .tk-snav__item:hover:not(.tk-active) .tk-snav__dot {
    border-color: rgba(13, 20, 32, 0.55);
    background:   rgba(13, 20, 32, 0.1);
}

/* Dot actif : identique sur fond clair et foncé (teal reste teal) */
.tk-snav.tk-snav--light .tk-snav__item.tk-active .tk-snav__dot {
    background:   #00B4A6;
    border-color: #00B4A6;
}


/* ─── Accessibilité — focus clavier ─────────────── */
.tk-snav__item:focus-visible {
    outline:        2px solid #00B4A6;
    outline-offset: 3px;
    border-radius:  4px;
}


/* ─── Mobile — barre pleine largeur fixée en bas ─── */
@media (max-width: 900px) {

    /* Compteur CSS pour numéros de section (01, 02…) */
    .tk-snav       { counter-reset:     tk-snav-n; }
    .tk-snav__item { counter-increment: tk-snav-n; }

    /* ── Conteneur ─── */
    .tk-snav {
        /* Réinitialise le desktop */
        right:     unset;
        top:       unset;
        transform: none;

        /* Barre fixée pleine largeur */
        position: fixed;
        left:     0;
        right:    0;
        bottom:   0;
        width:    100%;

        /* Scroll horizontal */
        flex-direction:             row;
        gap:                        0;
        overflow-x:                 auto;
        overflow-y:                 hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width:            none;

        /* Apparence — toujours sombre */
        height:                  62px;
        align-items:             stretch;
        background:              rgba(9, 14, 22, 0.97);
        border-top:              1px solid rgba(0, 180, 166, 0.18);
        backdrop-filter:         blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-radius:           0;
        padding:                 0;

        /* Entrée depuis le bas */
        animation: tk-snav-slideup 0.4s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
    }

    .tk-snav::-webkit-scrollbar { display: none; }

    @keyframes tk-snav-slideup {
        from { transform: translateY(100%); }
        to   { transform: translateY(0);    }
    }

    /* ── Items ─── */
    .tk-snav__item {
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        flex-shrink:     0;
        padding:         0 22px;
        gap:             4px;
        border-radius:   0;
        border-right:    1px solid rgba(255, 255, 255, 0.05);
        transition:      background 0.25s, box-shadow 0.25s;
    }
    .tk-snav__item:last-child { border-right: none; }

    .tk-snav__item.tk-active {
        box-shadow: inset 0 2px 0 0 #00B4A6;
        background: rgba(0, 180, 166, 0.07);
    }

    /* ── Numéro via counter ─── */
    .tk-snav__item::before {
        content:        counter(tk-snav-n, decimal-leading-zero);
        display:        block;
        font-family:    'DM Sans', system-ui, sans-serif;
        font-size:      0.48rem;
        font-weight:    700;
        letter-spacing: 0.18em;
        line-height:    1;
        color:          rgba(255, 255, 255, 0.22);
        transition:     color 0.25s;
    }
    .tk-snav__item.tk-active::before { color: #00B4A6; }

    /* ── Dot : caché ─── */
    .tk-snav__dot { display: none; }

    /* ── Label ─── */
    .tk-snav__label {
        font-family:    'DM Sans', system-ui, sans-serif;
        font-size:      0.72rem;
        font-weight:    500;
        letter-spacing: 0.02em;
        text-transform: none;
        white-space:    nowrap;
        color:          rgba(255, 255, 255, 0.35);
        opacity:        1;
        transform:      none;
        transition:     color 0.25s, font-weight 0.25s;
    }

    .tk-snav__item:hover:not(.tk-active) .tk-snav__label {
        color:     rgba(255, 255, 255, 0.6);
        transform: none;
    }

    .tk-snav__item.tk-active .tk-snav__label {
        color:       rgba(255, 255, 255, 1);
        font-weight: 600;
        transform:   none;
    }

    /* ── Override thème clair : barre toujours sombre ─── */
    .tk-snav.tk-snav--light .tk-snav__item::before        { color: rgba(255, 255, 255, 0.22); }
    .tk-snav.tk-snav--light .tk-snav__item.tk-active::before { color: #00B4A6; }
    .tk-snav.tk-snav--light .tk-snav__label               { color: rgba(255, 255, 255, 0.35); }
    .tk-snav.tk-snav--light .tk-snav__item.tk-active .tk-snav__label { color: rgba(255, 255, 255, 1); }
    .tk-snav.tk-snav--light .tk-snav__dot                 { display: none; }
    .tk-snav.tk-snav--light .tk-snav__item.tk-active {
        box-shadow: inset 0 2px 0 0 #00B4A6;
        background: rgba(0, 180, 166, 0.07);
    }
}