/**

 * Navigation globale TCF Canada

 */



.tcf-text-cyan {

    color: var(--tcf-cyan);

}



.tcf-site-nav {

    position: sticky;

    top: 0;

    z-index: 900;

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

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid var(--tcf-border);

    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);

    font-family: var(--tcf-font);

}



.tcf-site-nav__inner {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0.65rem 1rem;

    display: grid;

    grid-template-columns: auto minmax(0, 1fr) auto;

    align-items: center;

    gap: 0.75rem;

}



.tcf-site-nav__logo {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    text-decoration: none;

    font-weight: 800;

    font-size: 1rem;

    color: var(--tcf-dark);

    flex-shrink: 0;

    grid-column: 1;

}



.tcf-site-nav__logo-icon {

    display: flex;

    line-height: 0;

}



.tcf-site-nav__toggle {

    display: none;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    width: 40px;

    height: 40px;

    padding: 0;

    border: none;

    background: transparent;

    cursor: pointer;

    z-index: 902;

    flex-shrink: 0;

    grid-column: 3;

    justify-self: end;

}



.tcf-site-nav__toggle span {

    display: block;

    width: 20px;

    height: 2px;

    background: var(--tcf-dark);

    border-radius: 2px;

    transition: transform 0.3s ease, opacity 0.3s ease;

}



.tcf-site-nav__toggle[aria-expanded="true"] span:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

}



.tcf-site-nav__toggle[aria-expanded="true"] span:nth-child(2) {

    opacity: 0;

}



.tcf-site-nav__toggle[aria-expanded="true"] span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

}



.tcf-site-nav__backdrop {

    display: none;

}



.tcf-site-nav__menu {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.125rem;

    min-width: 0;

    flex-wrap: nowrap;

    grid-column: 2;

}



.tcf-site-nav__link {

    display: inline-flex;

    align-items: center;

    padding: 0.4rem 0.5rem;

    font-size: 0.8125rem;

    font-weight: 500;

    color: var(--tcf-text-light);

    text-decoration: none;

    border-radius: 8px;

    transition: color 0.2s, background 0.2s;

    white-space: nowrap;

    flex-shrink: 0;

}



.tcf-site-nav__link-short {

    display: none;

}



.tcf-site-nav__link:hover,

.tcf-site-nav__link--active {

    color: var(--tcf-primary);

    background: rgba(37, 99, 235, 0.06);

}



.tcf-site-nav__link--drawer {

    display: none;

}



/* Menu « Plus » (desktop) */

.tcf-site-nav__more {

    position: relative;

    flex-shrink: 0;

}



.tcf-site-nav__more-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.25rem;

    padding: 0.4rem 0.55rem;

    font-family: inherit;

    font-size: 0.8125rem;

    font-weight: 600;

    color: var(--tcf-text-light);

    background: transparent;

    border: 1px solid transparent;

    border-radius: 8px;

    cursor: pointer;

    transition: color 0.2s, background 0.2s, border-color 0.2s;

}



.tcf-site-nav__more-btn:hover,

.tcf-site-nav__more-btn[aria-expanded="true"] {

    color: var(--tcf-primary);

    background: rgba(37, 99, 235, 0.06);

    border-color: rgba(37, 99, 235, 0.12);

}



.tcf-site-nav__more-btn svg {

    transition: transform 0.2s ease;

}



.tcf-site-nav__more-btn[aria-expanded="true"] svg {

    transform: rotate(180deg);

}



.tcf-site-nav__more-panel {

    position: absolute;

    top: calc(100% + 0.35rem);

    right: 0;

    min-width: 12rem;

    padding: 0.35rem;

    background: #fff;

    border: 1px solid var(--tcf-border);

    border-radius: 12px;

    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);

    z-index: 910;

}



.tcf-site-nav__more-panel .tcf-site-nav__link {

    display: flex;

    width: 100%;

    padding: 0.625rem 0.75rem;

}



.tcf-site-nav__more-panel .tcf-site-nav__link-full {

    display: inline;

}



.tcf-site-nav__more-panel .tcf-site-nav__link-short {

    display: none;

}



.tcf-site-nav__cta {

    flex-shrink: 0;

    padding: 0.5rem 0.875rem !important;

    font-size: 0.8125rem !important;

    white-space: nowrap;

}



.tcf-site-nav__cta-short {

    display: none;

}



.tcf-site-nav__actions {

    display: flex;

    align-items: center;

    gap: 0.4rem;

    flex-shrink: 0;

    grid-column: 3;

}



.tcf-site-nav__actions--mobile {

    display: none;

    flex-direction: column;

    width: 100%;

    margin-top: 1rem;

    padding-top: 1rem;

    border-top: 1px solid var(--tcf-border);

}



.tcf-site-nav__logout {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.45rem 0.75rem;

    font-size: 0.8125rem;

    font-weight: 600;

    color: var(--tcf-text-light);

    text-decoration: none;

    border: 1px solid var(--tcf-border);

    border-radius: 999px;

    background: #fff;

    transition: color 0.2s, border-color 0.2s, background 0.2s;

    white-space: nowrap;

}



.tcf-site-nav__logout:hover {

    color: var(--tcf-primary);

    border-color: rgba(37, 99, 235, 0.35);

    background: rgba(37, 99, 235, 0.04);

}



.tcf-layout-with-nav {

    min-height: 50vh;

    background: var(--tcf-bg-page, #f1f5f9);

    width: 100%;

    max-width: 100%;

}



.tcf-layout-with-nav__content {

    padding-bottom: 2rem;

    min-width: 0;

    width: 100%;

    max-width: 100%;

}



.tcf-breadcrumb {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0.75rem 1rem 0;

    font-family: var(--tcf-font);

    font-size: 0.8125rem;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.tcf-breadcrumb a {

    color: var(--tcf-primary);

    text-decoration: none;

}



.tcf-breadcrumb a:hover {

    text-decoration: underline;

}



.tcf-breadcrumb span {

    color: var(--tcf-text-light);

}



/* Libellés courts sur écrans moyens */

@media (min-width: 961px) and (max-width: 1180px) {

    .tcf-site-nav__link-full {

        display: none;

    }



    .tcf-site-nav__link-short {

        display: inline;

    }



    .tcf-site-nav__cta-full {

        display: none;

    }



    .tcf-site-nav__cta-short {

        display: inline;

    }

}



/* Mobile : drawer + overlay */

@media (max-width: 960px) {

    .tcf-site-nav__inner {

        grid-template-columns: auto 1fr auto;

    }



    .tcf-site-nav__toggle {

        display: flex;

    }



    .tcf-site-nav__actions--desktop {

        display: none;

    }



    .tcf-site-nav__backdrop {

        display: block;

        position: fixed;

        inset: 0;

        background: rgba(15, 23, 42, 0.45);

        z-index: 898;

        opacity: 0;

        pointer-events: none;

        transition: opacity 0.3s ease;

    }



    .tcf-site-nav__backdrop.is-visible {

        opacity: 1;

        pointer-events: auto;

    }



    .tcf-site-nav__menu {

        position: fixed;

        top: 0;

        right: 0;

        bottom: 0;

        width: min(300px, 88vw);

        flex: none;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 0;

        padding: 4.5rem 1.25rem 1.5rem;

        background: #fff;

        box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);

        transform: translateX(100%);

        transition: transform 0.35s var(--tcf-transition, ease);

        z-index: 901;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        grid-column: auto;

    }



    .tcf-site-nav__menu.is-open {

        transform: translateX(0);

    }



    .tcf-site-nav__link {

        padding: 0.875rem 0;

        border-bottom: 1px solid var(--tcf-border);

        border-radius: 0;

        white-space: normal;

        font-size: 0.9375rem;

    }



    .tcf-site-nav__link-full {

        display: inline;

    }



    .tcf-site-nav__link-short {

        display: none;

    }



    .tcf-site-nav__more {

        display: none;

    }



    .tcf-site-nav__link--drawer {

        display: flex;

    }



    .tcf-site-nav__actions--mobile {

        display: flex;

    }



    .tcf-site-nav__actions--mobile .tcf-site-nav__cta {

        width: 100%;

        justify-content: center;

    }



    .tcf-site-nav__actions--mobile .tcf-site-nav__logout {

        width: 100%;

    }



    .tcf-breadcrumb {

        font-size: 0.75rem;

        padding: 0.625rem 1rem 0;

    }

}



@media (min-width: 961px) {

    .tcf-site-nav__actions--mobile {

        display: none !important;

    }

}



body.tcf-nav-open {

    overflow: hidden;

}