/* Enhanced Navigation Styles for Light Able Theme */

/* Main Navigation Bar - Blue Gradient Theme */
.navbar-ticketplace {
    background: linear-gradient(135deg, #4680ff, #0d6efd);
    backdrop-filter: blur(10px);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(70, 128, 255, 0.15);
}

.navbar-ticketplace.scrolled {
    background: linear-gradient(135deg, #4680ff, #0d6efd);
    box-shadow: 0 6px 30px rgba(70, 128, 255, 0.25);
}

/* Brand styling - white for blue background */
.navbar-ticketplace .navbar-brand,
.navbar-ticketplace.scrolled .navbar-brand {
    color: white !important;
}

.navbar-ticketplace .navbar-brand i,
.navbar-ticketplace.scrolled .navbar-brand i {
    color: white !important;
}

/* Navigation links - white text on blue background */
.navbar-ticketplace .nav-link,
.navbar-ticketplace.scrolled .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Hover state - consistent for both normal and sticky */
.navbar-ticketplace .nav-link:hover,
.navbar-ticketplace.scrolled .nav-link:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Active state - consistent for both normal and sticky */
.navbar-ticketplace .nav-link.active,
.navbar-ticketplace.scrolled .nav-link.active {
    color: white !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Remove underline for active state */
.navbar-ticketplace .nav-link.active::after,
.navbar-ticketplace.scrolled .nav-link.active::after {
    content: none !important;
    display: none !important;
}

/* Brand Styling - already defined above, keeping for reference */

/* Navigation Links - base styles */
.navbar-nav .nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    margin: 0 0.25rem;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
}

/* Navigation Icons */
.navbar-nav .nav-link i {
    font-size: 1.1rem;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover i,
.navbar-nav .nav-link.active i {
    opacity: 1;
    transform: scale(1.1);
}

/* Mobile Navigation */
.navbar-toggler {
    border: none;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Les liens restent identiques sur desktop ; ce contour ne s'affiche que lors
   d'une navigation clavier et rend le header utilisable sans souris. */
.navbar-ticketplace .nav-link:focus-visible,
.navbar-ticketplace .btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.92);
    outline-offset: 2px;
}

/* ==========================================================================
   Menu replié (mobile / tablette)
   --------------------------------------------------------------------------
   Le panneau reprend la même grammaire que les cartes blanches du site posées
   sur le bleu : surface opaque, coins 16px, ombre teintée de la marque.
   Trois groupes, séparés par l'espace et non par des boîtes :
   naviguer → chercher → compte.
   ========================================================================== */
@media (max-width: 991.98px) {
    .navbar-ticketplace .tf-menu-toggle {
        align-items: center;
        display: inline-flex;
        flex-direction: column;
        gap: 5px;
        height: 44px;
        justify-content: center;
        padding: 0;
        width: 44px;
    }

    .navbar-ticketplace .tf-menu-toggle__line {
        background: #fff;
        border-radius: 999px;
        display: block;
        height: 2px;
        transform-origin: center;
        transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), opacity 120ms ease;
        width: 22px;
    }

    .navbar-ticketplace .tf-menu-toggle[aria-expanded="true"] .tf-menu-toggle__line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .navbar-ticketplace .tf-menu-toggle[aria-expanded="true"] .tf-menu-toggle__line:nth-child(2) {
        opacity: 0;
    }

    .navbar-ticketplace .tf-menu-toggle[aria-expanded="true"] .tf-menu-toggle__line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .navbar-ticketplace .tf-menu-toggle:focus-visible {
        box-shadow: none;
        outline: 2px solid rgba(255, 255, 255, 0.94);
        outline-offset: 2px;
    }

    .navbar-ticketplace .navbar-collapse {
        --tf-menu-ink: #1d2630;
        --tf-menu-ink-soft: #5a6472;
        --tf-menu-accent: #2a5fd6;
        --tf-menu-rule: rgba(29, 38, 48, 0.10);
        --tf-menu-wash: rgba(42, 95, 214, 0.10);

        display: flex;
        flex-direction: column;
        /* Surface pleine : le voile translucide laissait transparaître le
           héros derrière les libellés. */
        background: #fff;
        backdrop-filter: none;
        border-radius: 16px;
        margin-top: 0.75rem;
        padding: 0.5rem;
        box-shadow: 0 16px 34px -20px rgba(13, 34, 71, 0.34);
        overflow: hidden;
    }

    .navbar-collapse.collapsing {
        transition: none;
    }

    .navbar-collapse.collapse:not(.show) {
        display: none;
    }

    .navbar-ticketplace .navbar-collapse.show {
        animation: tfMenuSurfaceIn 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
        max-height: calc(100dvh - 7rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* La marque et le bouton doivent tenir sur la même ligne : la barre a une
       hauteur fixe de 80px, tout ce qui passe à la ligne en sort. */
    .navbar.navbar-ticketplace .navbar-brand {
        font-size: 1.15rem;
        max-width: calc(100% - 4rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* --- 1. Naviguer ------------------------------------------------------ */
    .navbar-ticketplace .tf-nav-main {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
    }

    .navbar-ticketplace .navbar-collapse .nav-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 46px;
        margin: 0;
        padding: 0.5rem 0.75rem !important;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: -0.01em;
        color: var(--tf-menu-ink) !important;
        text-shadow: none;
        transition: background-color 150ms ease, color 150ms ease;
    }

    /* Colonne d'icônes de largeur fixe : sinon les libellés se décalent d'une
       ligne à l'autre selon la largeur du glyphe. */
    .navbar-ticketplace .navbar-collapse .nav-link > i {
        flex: none;
        width: 1.375rem;
        margin: 0 !important;
        font-size: 1.125rem;
        text-align: center;
        color: var(--tf-menu-ink-soft);
        transition: color 150ms ease;
    }

    .navbar-ticketplace .navbar-collapse .nav-link:hover,
    .navbar-ticketplace .navbar-collapse .nav-link:focus-visible {
        background: rgba(29, 38, 48, 0.05) !important;
        color: var(--tf-menu-ink) !important;
        transform: none;
    }

    .navbar-ticketplace .navbar-collapse .nav-link:focus-visible {
        outline: 2px solid var(--tf-menu-accent);
        outline-offset: -2px;
    }

    .navbar-ticketplace .navbar-collapse .nav-link:active {
        background: rgba(29, 38, 48, 0.09) !important;
    }

    .navbar-ticketplace .navbar-collapse .nav-link.active {
        background: var(--tf-menu-wash) !important;
        color: var(--tf-menu-accent) !important;
        font-weight: 600;
        border-left: 0;
        box-shadow: none !important;
    }

    .navbar-ticketplace .navbar-collapse .nav-link.active > i {
        color: var(--tf-menu-accent);
    }

    /* --- 2. Chercher ------------------------------------------------------ */
    .navbar-ticketplace .navbar-collapse .nav-search {
        order: 0;
        width: 100%;
        margin: 0.75rem 0 0;
    }

    .navbar-ticketplace .nav-search .nav-search-input.form-control {
        height: 46px;
        border-radius: 10px;
        background: rgba(29, 38, 48, 0.05);
        border-color: transparent;
        color: var(--tf-menu-ink);
        font-size: 0.9375rem;
    }

    .navbar-ticketplace .nav-search .nav-search-input.form-control::placeholder {
        color: var(--tf-menu-ink-soft);
    }

    .navbar-ticketplace .nav-search .nav-search-input.form-control:focus {
        background: #fff;
        border-color: var(--tf-menu-accent);
        box-shadow: 0 0 0 3px rgba(42, 95, 214, 0.15);
    }

    .navbar-ticketplace .nav-search .nav-search-icon {
        color: var(--tf-menu-ink-soft);
    }

    /* --- 3. Compte et utilitaires ----------------------------------------- */
    /* Seule séparation dessinée du panneau : ici le contenu change de nature. */
    .navbar-ticketplace .tf-nav-utility {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: 0.5rem;
        margin: 0.75rem 0 0;
        padding: 0.75rem 0 0;
        border-top: 1px solid var(--tf-menu-rule);
    }

    .navbar-ticketplace .tf-nav-utility > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .navbar-ticketplace .tf-nav-util > .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        /* !important : la barre bleue impose du blanc sur ces boutons, ce qui
           les rendait invisibles sur le panneau blanc. */
        color: var(--tf-menu-ink) !important;
        border-color: var(--tf-menu-rule) !important;
        background: transparent !important;
        font-size: 1.125rem;
    }

    .navbar-ticketplace .tf-nav-util > .btn:hover,
    .navbar-ticketplace .tf-nav-util > .btn:active {
        color: var(--tf-menu-accent) !important;
        border-color: var(--tf-menu-accent) !important;
        background: var(--tf-menu-wash) !important;
    }

    .navbar-ticketplace .tf-nav-util > .btn:focus-visible,
    .navbar-ticketplace .tf-nav-account--signup > .btn:focus-visible {
        outline: 2px solid var(--tf-menu-accent);
        outline-offset: 2px;
    }

    /* Le panier garde son pastille de quantité lisible. */
    .navbar-ticketplace .tf-nav-util .cart-badge {
        top: -4px;
        right: -4px;
    }

    /* Visiteur : « Connexion » termine la rangée des utilitaires,
       « S'inscrire » prend toute la largeur en dessous. */
    .navbar-ticketplace .tf-nav-account--signin {
        margin-left: auto;
    }

    .navbar-ticketplace .tf-nav-account--signup {
        flex: 1 0 100%;
    }

    .navbar-ticketplace .tf-nav-account--signup > .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        min-height: 46px;
        margin: 0 !important;
        border-radius: 12px;
        font-weight: 600;
    }

    /* Membre connecté : tableau de bord et menu du compte en pleine largeur. */
    .navbar-ticketplace .tf-nav-account--row,
    .navbar-ticketplace .tf-nav-account--user {
        flex: 1 0 100%;
    }

    .navbar-ticketplace .tf-nav-account--user .dropdown-menu {
        position: static;
        width: 100%;
        margin: 0.25rem 0 0;
        border: 1px solid var(--tf-menu-rule);
        border-radius: 10px;
        box-shadow: none;
    }

    .navbar-ticketplace .tf-nav-account--user .dropdown-item {
        padding: 0.625rem 0.75rem;
        border-radius: 8px;
    }

    /* --- Ouverture -------------------------------------------------------- */
    /* Un seul mouvement : le panneau se pose, sans faire onduler chaque lien. */
    @keyframes tfMenuSurfaceIn {
        from {
            filter: blur(2px);
            opacity: .72;
            transform: translateY(-8px);
        }
        to {
            filter: blur(0);
            opacity: 1;
            transform: translateY(0);
        }
    }

    :root[data-pc-theme="dark"] .navbar-ticketplace .navbar-collapse,
    .dark-theme .navbar-ticketplace .navbar-collapse,
    [data-bs-theme="dark"] .navbar-ticketplace .navbar-collapse {
        --tf-menu-ink: #f2f6fb;
        --tf-menu-ink-soft: #b8c4d3;
        --tf-menu-accent: #b9d0ff;
        --tf-menu-rule: rgba(232, 240, 252, 0.16);
        --tf-menu-wash: rgba(120, 163, 255, 0.2);
        background: #202b36;
    }

    :root[data-pc-theme="dark"] .navbar-ticketplace .navbar-collapse .nav-link:hover,
    :root[data-pc-theme="dark"] .navbar-ticketplace .navbar-collapse .nav-link:focus-visible,
    .dark-theme .navbar-ticketplace .navbar-collapse .nav-link:hover,
    .dark-theme .navbar-ticketplace .navbar-collapse .nav-link:focus-visible,
    [data-bs-theme="dark"] .navbar-ticketplace .navbar-collapse .nav-link:hover,
    [data-bs-theme="dark"] .navbar-ticketplace .navbar-collapse .nav-link:focus-visible {
        background: rgba(255, 255, 255, 0.08) !important;
        color: var(--tf-menu-ink) !important;
    }

    :root[data-pc-theme="dark"] .navbar-ticketplace .nav-search .nav-search-input.form-control,
    .dark-theme .navbar-ticketplace .nav-search .nav-search-input.form-control,
    [data-bs-theme="dark"] .navbar-ticketplace .nav-search .nav-search-input.form-control {
        background: rgba(255, 255, 255, 0.08);
        color: var(--tf-menu-ink);
    }

    :root[data-pc-theme="dark"] .navbar-ticketplace .nav-search .nav-search-input.form-control:focus,
    .dark-theme .navbar-ticketplace .nav-search .nav-search-input.form-control:focus,
    [data-bs-theme="dark"] .navbar-ticketplace .nav-search .nav-search-input.form-control:focus {
        background: #263748;
    }

    @media (prefers-reduced-motion: reduce) {
        .navbar-ticketplace .tf-menu-toggle__line,
        .navbar-ticketplace .navbar-collapse.show {
            animation: none;
            transition: none;
        }
    }
}

/* User Menu Dropdown */
.dropdown-menu {
    border: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
}

.dropdown-item {
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.dropdown-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.dropdown-item i {
    margin-right: 0.75rem;
    width: 1.2rem;
    text-align: center;
}

/* Theme Switcher */
.theme-switcher .dropdown-toggle {
    background: none;
    border: none;
    color: var(--bs-dark);
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.theme-switcher .dropdown-toggle:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

/* Buttons inside navbar - white theme for blue background */
.navbar-ticketplace .btn-outline-light,
.navbar-ticketplace.scrolled .btn-outline-light {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.navbar-ticketplace .btn-outline-light:hover,
.navbar-ticketplace.scrolled .btn-outline-light:hover {
    color: white !important;
    border-color: white !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Search Integration */
.navbar-search {
    position: relative;
    max-width: 300px;
}

.navbar-search .form-control {
    border-radius: 25px;
    padding-left: 2.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

.navbar-search .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-muted);
    z-index: 5;
}

/* Responsive Adjustments */
@media (min-width: 992px) {
    .navbar-nav {
        align-items: center;
    }
    
    .navbar-nav .nav-link {
        white-space: nowrap;
    }
}

/* Explicitly disable underline - already handled above */

/* Dark mode support */
[data-bs-theme="dark"] .navbar-ticketplace {
    background: rgba(33, 37, 41, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-bs-theme="dark"] .navbar-nav .nav-link:hover {
    color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), 0.2);
}

[data-bs-theme="dark"] .navbar-collapse {
    background: rgba(33, 37, 41, 0.98);
}

/* ==========================================================================
   Recherche globale et panier de l'en-tête

   Le thème sombre du gabarit Light Able est piloté par [data-pc-theme="dark"]
   (et .dark-theme sur <html>), pas par [data-bs-theme]. De plus
   --bs-secondary-color reste presque noir en sombre : ces composants
   définissent donc leurs propres variables de surface plutôt que de s'appuyer
   sur les variables Bootstrap.
   ========================================================================== */

.nav-search-panel,
.cart-menu {
    --tf-surface: #ffffff;
    --tf-text: #212529;
    --tf-muted: #6c757d;
    --tf-border: #e9ecef;
    --tf-hover: rgba(70, 128, 255, 0.09);
}

[data-pc-theme="dark"] .nav-search-panel,
[data-pc-theme="dark"] .cart-menu,
.dark-theme .nav-search-panel,
.dark-theme .cart-menu,
[data-bs-theme="dark"] .nav-search-panel,
[data-bs-theme="dark"] .cart-menu {
    --tf-surface: #1b232d;
    --tf-text: #e9ecef;
    --tf-muted: rgba(233, 236, 239, 0.65);
    --tf-border: rgba(255, 255, 255, 0.10);
    --tf-hover: rgba(255, 255, 255, 0.07);
}

/* --------------------------------------------------------- Barre de recherche */

.nav-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* Desktop : la barre remplace les liens de navigation une fois ouverte.
   Les icônes de droite (panier, thème, compte) restent accessibles. */
@media (min-width: 992px) {
    .nav-search {
        display: none;
        align-items: center;
        flex: 1 1 auto;
        margin-right: 0.75rem;
    }

    .navbar-ticketplace.search-open .nav-search {
        display: flex;
    }

    .navbar-ticketplace.search-open .navbar-nav.me-auto,
    .navbar-ticketplace.search-open .nav-search-open-item {
        display: none !important;
    }

    .nav-search .nav-search-input.form-control {
        flex: 1 1 auto;
    }
}

.nav-search-close {
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    transition: background 0.2s ease;
}

.nav-search-close:hover {
    background: rgba(255, 255, 255, 0.18);
}

.nav-search-input.form-control {
    height: 40px;
    padding: 0.4rem 2.4rem;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.9rem;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.nav-search-input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.nav-search-input.form-control:focus {
    background: #fff;
    color: #212529;
    border-color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.nav-search-input.form-control:focus::placeholder {
    color: #6c757d;
}

/* Masque la croix native de <input type="search"> pour garder un champ propre */
.nav-search-input::-webkit-search-decoration,
.nav-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.nav-search-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    pointer-events: none;
    z-index: 4;
    transition: color 0.25s ease;
}

.nav-search:focus-within .nav-search-icon {
    color: #6c757d;
}

.nav-search-spinner {
    position: absolute;
    right: 3.4rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-primary);
    z-index: 4;
}

.nav-search-spinner.htmx-indicator {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.nav-search-spinner.htmx-request,
.htmx-request .nav-search-spinner {
    opacity: 1;
}

/* ------------------------------------------------- Panneau de suggestions */

.nav-search-panel {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    max-width: 640px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--tf-surface);
    color: var(--tf-text);
    border: 1px solid var(--tf-border);
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    padding: 0.5rem 0;
    z-index: 1080;
}

.nav-search-panel.is-open {
    display: block;
}

.nav-search-group + .nav-search-group {
    border-top: 1px solid var(--tf-border);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}

.nav-search-group-title {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tf-muted);
}

.nav-search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--tf-text);
    transition: background 0.15s ease;
}

.nav-search-item:hover,
.nav-search-item:focus {
    background: var(--tf-hover);
    color: var(--tf-text);
}

.nav-search-thumb {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(70, 128, 255, 0.15);
    color: #4680ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-search-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nav-search-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-search-sub {
    font-size: 0.76rem;
    color: var(--tf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-search-all {
    display: block;
    margin-top: 0.25rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--tf-border);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #4680ff;
}

.nav-search-all:hover {
    background: var(--tf-hover);
    color: #4680ff;
}

.nav-search-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--tf-muted);
}

/* ------------------------------------------------------ Panier de l'en-tête */

/* Bouton actif (menu ouvert) : Bootstrap bascule .show sur le déclencheur et
   applique un fond clair. Sans ce correctif, l'icône blanche disparaît. */
.navbar-ticketplace .btn-outline-light.show,
.navbar-ticketplace .btn-outline-light:active,
.navbar-ticketplace .btn-outline-light:focus-visible,
.navbar-ticketplace.scrolled .btn-outline-light.show,
.navbar-ticketplace.scrolled .btn-outline-light:active {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: #fff !important;
    color: #fff !important;
}

.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ffc107;
    color: #212529;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #2f6bff;
}

.cart-menu {
    width: 340px;
    max-width: calc(100vw - 2rem);
    padding: 0;
    overflow: hidden;
    background: var(--tf-surface);
    color: var(--tf-text);
    border: 1px solid var(--tf-border);
}

.cart-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--tf-border);
    color: var(--tf-text);
}

.cart-menu-head .text-muted {
    color: var(--tf-muted) !important;
}

.cart-menu-lines {
    max-height: 320px;
    overflow-y: auto;
}

.cart-menu-line {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
}

.cart-menu-line + .cart-menu-line {
    border-top: 1px solid var(--tf-border);
}

.cart-menu-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(70, 128, 255, 0.15);
    color: #4680ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-menu-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-menu-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-menu-title {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--tf-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-menu-title:hover {
    color: #4680ff;
}

.cart-menu-sub {
    font-size: 0.75rem;
    color: var(--tf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-menu-price {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4680ff;
    margin-top: 0.15rem;
}

.cart-menu-warning {
    font-size: 0.72rem;
    color: #f5576c;
    margin-top: 0.15rem;
}

.cart-menu-remove {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--tf-muted);
    padding: 0.15rem;
    line-height: 1;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.cart-menu-remove:hover {
    background: rgba(245, 87, 108, 0.15);
    color: #f5576c;
}

.cart-menu-foot {
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--tf-border);
    background: var(--tf-hover);
    color: var(--tf-text);
}

.cart-menu-foot .text-muted {
    color: var(--tf-muted) !important;
}

/* Panier vide : raccourcis vers chaque univers de la marketplace. */
.cart-menu-empty {
    padding: 1.5rem 1rem 1.25rem;
    text-align: center;
    color: var(--tf-text);
}

.cart-menu-empty > i {
    font-size: 2rem;
    color: var(--tf-muted);
    display: block;
    margin-bottom: 0.5rem;
}

.cart-menu-empty .text-muted {
    color: var(--tf-muted) !important;
}

.cart-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 1rem;
}

.cart-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.7rem 0.35rem;
    border: 1px solid var(--tf-border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--tf-text);
    font-size: 0.76rem;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cart-shortcut i {
    font-size: 1.15rem;
    color: #4680ff;
}

.cart-shortcut:hover {
    background: var(--tf-hover);
    border-color: rgba(70, 128, 255, 0.45);
    color: var(--tf-text);
    transform: translateY(-1px);
}

/* ==========================================================================
   Adaptations responsive
   ========================================================================== */

@media (max-width: 991.98px) {
    /* Dans le menu replié : champ pleine largeur sur fond clair, toujours visible */
    .nav-search {
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        margin: 0.5rem 0 0.75rem;
        order: -1;
    }

    .nav-search-input.form-control {
        background: #fff;
        color: #212529;
        border-color: #dee2e6;
        padding-right: 1rem;
    }

    .nav-search-input.form-control::placeholder {
        color: #6c757d;
    }

    .nav-search-icon {
        color: #6c757d;
    }

    .nav-search-spinner {
        right: 0.9rem;
    }

    .nav-search-panel {
        max-width: none;
    }

    .cart-menu {
        width: 100%;
    }
}

/* ==========================================================================
   Navigation sans rechargement visible
   --------------------------------------------------------------------------
   Chaque clic dans le menu reste une navigation Django classique, mais le
   navigateur enchaîne les deux pages au lieu de repeindre un écran blanc.
   Le header et le pied de page portent un nom de transition : comme ils sont
   identiques d'une page à l'autre, ils restent immobiles pendant que seul le
   contenu se remplace.
   Sans support (Firefox aujourd'hui), la navigation reste celle d'avant.
   ========================================================================== */
@view-transition {
    navigation: auto;
}

.navbar-ticketplace {
    view-transition-name: tf-header;
}

.tf-footer-market {
    view-transition-name: tf-footer;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 160ms;
}

/* Le header ne doit pas être animé du tout : il ne bouge pas. */
::view-transition-group(tf-header),
::view-transition-group(tf-footer) {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}