/* ═══════════════════════════════════════════════════════════
   COMMERCIFY HEADER - ULTRA MINIMAL
   Zéro CPU, zéro GPU, zéro RAM - Pure essence
   ═══════════════════════════════════════════════════════════ */

/* Police Science-Fiction Moderne - Polices locales */
@font-face {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/Orbitron-V35.woff2') format('woff2');
}
@font-face {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/Rajdhani-300.woff2') format('woff2');
}
@font-face {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Rajdhani-400.woff2') format('woff2');
}
@font-face {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Rajdhani-500.woff2') format('woff2');
}
@font-face {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Rajdhani-600.woff2') format('woff2');
}
@font-face {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Rajdhani-700.woff2') format('woff2');
}

:root {
    --btn-primary: #DAA520;
    --btn-hover: #B8860B;
    --header-bg: #000000;
    /* Espacement uniforme entre tous les éléments du Header Top (logo, loupe, menu jump, mappemonde, drapeau, dashboard, login) */
    --header-top-gap: 0.5rem;
    
    /* Variables manquantes définies */
    --btn-height-sm: 24px;
    --btn-height-md: 32px;
    --btn-height-lg: 36px;
    --btn-height-xl: 44px;
    --font-size-xs: 0.6rem;
    --font-size-sm: 0.7rem;
    --font-size-md: 0.8rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.2rem;
    
    /* Gradients optimisés - AMÉLIORÉS */
    --gradient-base: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(0, 0, 0, 0.95) 100%);
    --gradient-ads: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(0, 0, 0, 0.95) 100%);
    --gradient-ads-hover: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(0, 0, 0, 0.95) 100%);
    --gradient-top: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(0, 0, 0, 0.95) 100%);
    --gradient-top-hover: linear-gradient(135deg, rgba(251, 191, 36, 0.25) 0%, rgba(0, 0, 0, 0.95) 100%);
    --gradient-sponsors: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(0, 0, 0, 0.95) 100%);
    --gradient-sponsors-hover: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(0, 0, 0, 0.95) 100%);
    --gradient-advertisements: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(0, 0, 0, 0.95) 100%);
    --gradient-advertisements-hover: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(0, 0, 0, 0.95) 100%);
    
    /* Couleurs améliorées */
    --gold-primary: #FFD700;
    --gold-bright: #FFA500;
    --cyan-primary: #09c2de;
    --cyan-bright: #0dd9ff;
    --green-primary: #22c55e;
    --green-bright: #4ade80;
    --yellow-primary: #fbbf24;
    --yellow-bright: #fcd34d;
    --purple-primary: #a855f7;
    --purple-bright: #c084fc;
    --red-primary: #ef4444;
    --red-bright: #f87171;
}

/* ═══════════════════════════════════════════════════════════
   OVERRIDES DASHLITE - OPTIMISÉS
   ═══════════════════════════════════════════════════════════ */

/* ==========================================================================
   BASE
   ========================================================================== */
.nk-header {
    padding: 0;
}

/* Contenu aligné sur toute la largeur comme le header : aucune marge latérale */
.nk-content {
    padding-left: 0;
    padding-right: 0;
}

.nk-content-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Smartphones - Le JavaScript gère maintenant le padding-top de .glassystem-main-container */
/* On supprime le padding vertical de Dashlite, le JS calcule headerHeight + 10px pour .glassystem-main-container */
@media (max-width: 768px) {
    .nk-content {
        padding-top: 0 !important; /* Le JS gère le positionnement via .glassystem-main-container */
        padding-bottom: 0 !important;
    }
    
    .nk-content-fluid {
        padding-top: 0 !important; /* Le JS gère le positionnement via .glassystem-main-container */
        padding-bottom: 0 !important;
    }
}

/* ==========================================================================
   MODE TABLETTE (portrait/paysage) : SIDEBAR FLOTTANT (overlay), CONTENU 100% LARGEUR
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Sidebar overlay par-dessus le contenu, non docké */
    .nk-sidebar {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        transform: translateX(-100%) !important;
        z-index: 1021;
    }
    .nk-sidebar.nk-sidebar-active {
        transform: translateX(0) !important;
    }

    /* Contenu pleine largeur, sans décalage */
    .nk-sidebar + .nk-wrap {
        padding-left: 0 !important;
    }

    /* Zone sticky filters : bord à bord (menu → bord fenêtre), non impactée par nkContentHorizontalPadding */
    .nk-sidebar + .nk-wrap .cfy-sticky-outer-wrapper {
        margin-inline-start: calc(0px - var(--nk-content-padding, 0px)) !important;
        margin-inline-end: calc(0px - var(--nk-content-padding, 0px)) !important;
        width: calc(100% + 2 * var(--nk-content-padding, 0px)) !important;
        box-sizing: border-box !important;
    }
    .nk-sidebar + .nk-wrap .cfy-sticky-outer-wrapper .cfy-sticky-outer {
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Header pleine largeur */
    .nk-sidebar + .nk-wrap > .nk-header-fixed {
        left: 0 !important;
        right: 0 !important;
    }
    .catalog-header {
        left: 0 !important;
        right: 0 !important;
    }
}

/* ==========================================================================
   RTL - Ajustements overlay tablette
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
    html[dir="rtl"] .nk-sidebar {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
    }
    html[dir="rtl"] .nk-sidebar.nk-sidebar-active {
        transform: translateX(0) !important;
    }
    html[dir="rtl"] .nk-sidebar + .nk-wrap {
        padding-right: 0 !important;
    }
    html[dir="rtl"] .nk-sidebar + .nk-wrap > .nk-header-fixed {
        left: 0 !important;
        right: 0 !important;
    }
    html[dir="rtl"] .catalog-header {
        left: 0 !important;
        right: 0 !important;
    }
}

/* ==========================================================================
   SCROLL MENU DASHLITE - TABLETTE & SMARTPHONE (overlay)
   Assure la scrollabilité verticale du contenu du menu sur petits écrans
   ========================================================================== */
@media (max-width: 1199px) {
    .nk-sidebar {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .nk-sidebar-body,
    .nk-sidebar-content {
        height: calc(100vh - 65px) !important; /* 65px ~ header du sidebar */
        max-height: calc(100vh - 65px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .nk-sidebar-content .simplebar-content {
        min-height: 100%;
    }
    /* Correction iPhone : désactiver simplebar et forcer scroll natif directement sur nk-sidebar-content */
    .nk-sidebar-content .nk-sidebar-menu[data-simplebar] {
        height: 100% !important;
        max-height: 100% !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Forcer le scroll directement sur le conteneur parent si simplebar bloque */
    .nk-sidebar-content {
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        will-change: scroll-position !important;
        overflow-x: hidden !important;
    }
    
    /* S'assurer que le contenu du menu peut scroller verticalement uniquement */
    .nk-sidebar-content .nk-menu {
        min-height: 100% !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Empêcher le scroll horizontal sur tous les éléments du menu */
    .nk-sidebar-content * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   MODE SMARTPHONE (portrait/paysage) : SIDEBAR FLOTTANT (overlay), CONTENU 100% LARGEUR
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Sidebar overlay par-dessus le contenu, non docké */
    .nk-sidebar {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
        transform: translateX(-100%) !important;
        z-index: 1021;
    }
    .nk-sidebar.nk-sidebar-active {
        transform: translateX(0) !important;
    }

    /* Contenu pleine largeur */
    .nk-sidebar + .nk-wrap {
        padding-left: 0 !important;
    }

    /* Zone sticky filters : bord à bord (menu → bord fenêtre), non impactée par nkContentHorizontalPadding */
    .nk-sidebar + .nk-wrap .cfy-sticky-outer-wrapper {
        margin-inline-start: calc(0px - var(--nk-content-padding, 0px)) !important;
        margin-inline-end: calc(0px - var(--nk-content-padding, 0px)) !important;
        width: calc(100% + 2 * var(--nk-content-padding, 0px)) !important;
        box-sizing: border-box !important;
    }
    .nk-sidebar + .nk-wrap .cfy-sticky-outer-wrapper .cfy-sticky-outer {
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Header pleine largeur */
    .nk-sidebar + .nk-wrap > .nk-header-fixed {
        left: 0 !important;
        right: 0 !important;
    }
    .catalog-header {
        left: 0 !important;
        right: 0 !important;
    }
}

/* ==========================================================================
   RTL - Ajustements overlay smartphone
   ========================================================================== */
@media (max-width: 767.98px) {
    html[dir="rtl"] .nk-sidebar {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
    }
    html[dir="rtl"] .nk-sidebar.nk-sidebar-active {
        transform: translateX(0) !important;
    }
    html[dir="rtl"] .nk-sidebar + .nk-wrap {
        padding-right: 0 !important;
    }
    html[dir="rtl"] .nk-sidebar + .nk-wrap > .nk-header-fixed {
        left: 0 !important;
        right: 0 !important;
    }
    html[dir="rtl"] .catalog-header {
        left: 0 !important;
        right: 0 !important;
    }
}

.pb-4.overflow-hidden,
.overflow-hidden {
    padding: 0;
    border: none;
}

#anchortop {
    max-width: 70%;
    height: auto;
    border: none !important;
    outline: none !important;
}

.logo-container > a > div {
    padding: 15px;
    background-color: var(--black);
}

/* NE PAS ÉCRASER le margin-top sur desktop où le layout Dashlite doit fonctionner */
@media (max-width: 1199px) {
    .nk-header-fixed + .nk-content {
        margin-top: 0;
    }
}

/* Smartphones et Tablettes - Le JavaScript gère maintenant le padding-top de .glassystem-main-container */
/* On supprime tous les espacements CSS, le JS calcule headerHeight + 10px pour .glassystem-main-container */
@media (max-width: 1024px) {
    .nk-header-fixed + .nk-content,
    .catalog-header + .nk-content,
    .nk-header + .nk-content {
        margin-top: 0 !important;
        padding-top: 0 !important; /* Le JS gère le positionnement via .glassystem-main-container */
    }
    
    /* Supprimer aussi les espacements du nk-wrap */
    .nk-wrap {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

.catalog-header + * {
    position: relative;
    z-index: 1;
    clear: both;
}

/* ═══════════════════════════════════════════════════════════
   BOUTONS PAYSAGE - ULTRA MINIMAL
   ═══════════════════════════════════════════════════════════ */

.line-buttons-landscape {
    width: 100%;
    padding: 0;
    margin: 0;
}

.line-buttons-landscape .row {
    gap: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.btn-landscape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 5px;
    background: #000000;
    border: 1px solid rgba(218, 165, 32, 0.5);
    border-radius: 0;
    color: #DAA520;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    height: 36px;
    text-transform: uppercase;
    /* OPTIMISATION CLS: Fixer les dimensions pour éviter les shifts */
    min-height: 36px;
    min-width: 88px;
    box-sizing: border-box;
    contain: layout style;
}

.btn-landscape:hover {
    border-color: #FFD700;
    color: #FFD700;
}

.btn-landscape.active {
    border-color: #FFD700;
    color: #FFD700;
}

.btn-landscape-text {
    font-size: 1rem;
    font-weight: 400;
}

.btn-landscape-icon {
    font-size: 1.2rem;
    font-weight: 700;
    color: #FFD700;
}

.btn-landscape-avatar {
    width: 24px;
    height: 24px;
    border-radius: 0;
    object-fit: cover;
}

.btn-landscape-svg {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   👤 BOUTON VISITEUR - ULTRA MINIMAL
   ═══════════════════════════════════════════════════════════ */

.btn-visitor-landscape {
    min-width: 120px;
    height: 44px;
    padding: 5px 5px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    border: 2px solid transparent;
    border-radius: 0;
    color: #FFD700;
    font-weight: 600;
    font-size: 0.6rem;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(218, 165, 32, 0.2);
    /* OPTIMISATION CLS: Fixer les dimensions pour éviter les shifts */
    box-sizing: border-box;
    contain: layout style;
}

/* Effet de brillance animée */
.btn-visitor-landscape::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.btn-visitor-landscape:hover::before {
    left: 100%;
}

/* Éléments internes - optimisés */
.btn-visitor-landscape .btn-landscape-avatar {
    width: 24px;
    height: 24px;
    border-radius: 0;
    object-fit: cover;
    border: 2px solid rgba(255, 215, 0, 0.6);
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform: translateZ(0);
}

.btn-visitor-landscape .btn-landscape-icon {
    font-size: 1rem;
    font-weight: 700;
    color: #FFD700;
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform: translateZ(0);
}

.btn-visitor-landscape .btn-landscape-text {
    font-size: 0.55rem;
    font-weight: 600;
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform: translateZ(0);
}

/* États spectaculaires */
.btn-visitor-landscape:hover {
    border-color: #FFD700;
    color: #FFD700;
    transform: translateY(-1px) scale(1.01);
    box-shadow: 
        0 8px 20px rgba(255, 215, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 2px rgba(255, 215, 0, 0.4);
}

.btn-visitor-landscape:hover .btn-landscape-avatar {
    border-color: #FFD700;
    transform: scale(1.02);
}

.btn-visitor-landscape:hover .btn-landscape-icon {
    transform: scale(1.02);
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
}

.btn-visitor-landscape.active {
    border-color: #FFD700;
    color: #FFD700;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(255, 215, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════
   🚀 BOUTON HYPER PROFIL - DESIGN MODERNE RÉIMAGINÉ
   ═══════════════════════════════════════════════════════════ */

.btn-hyperprofil-landscape {
    min-width: 120px;
    height: 48px;
    padding: 0 16px;
    background: #b8e6f0;
    border: 1px solid rgba(9, 194, 222, 0.3);
    border-radius: 0;
    color: #000000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    /* OPTIMISATION CLS: Fixer les dimensions pour éviter les shifts */
    box-sizing: border-box;
    contain: layout style;
}

/* Icône moderne intégrée */
.btn-hyperprofil-landscape::before {
    content: '⚡';
    font-size: 1rem;
    margin-right: 4px;
    filter: drop-shadow(0 0 4px rgba(9, 194, 222, 0.6));
    transition: all 0.3s ease;
}

.btn-hyperprofil-landscape::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: transparent;
    transition: left 0.8s ease;
    z-index: 1;
}

.btn-hyperprofil-landscape:hover::after {
    left: 100%;
}

/* États interactifs élégants */
.btn-hyperprofil-landscape:hover {
    background: #c8f0f7;
    border-color: rgba(9, 194, 222, 0.5);
    color: #000000;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 8px 25px rgba(9, 194, 222, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-hyperprofil-landscape:hover::before {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 8px rgba(9, 194, 222, 0.8));
}

.btn-hyperprofil-landscape:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-hyperprofil-landscape.active {
    background: #b8e6f0;
    border-color: #09c2de;
    color: #000000;
    box-shadow: 
        0 4px 15px rgba(9, 194, 222, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(9, 194, 222, 0.5);
}

/* Animation de pulsation pour l'état actif */
.btn-hyperprofil-landscape.active::before {
    animation: pulse-glow 6s infinite; /* 2s → 6s (3x plus lent) */
}

@keyframes pulse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(9, 194, 222, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(9, 194, 222, 0.9));
    }
}

/* Style spécifique pour le texte du bouton Hyper Profil - SCIENCE-FICTION MODERNE */
.btn-hyperprofil-landscape .btn-landscape-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   🔍 BOUTON LOUPE - ULTRA MINIMAL
   ═══════════════════════════════════════════════════════════ */

.btn-search-landscape {
    width: 44px;
    height: 44px;
    padding: 8px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(218, 165, 32, 0.3);
    /* OPTIMISATION CLS: Fixer les dimensions pour éviter les shifts */
    box-sizing: border-box;
    contain: layout style;
}

/* Effet de brillance dorée */
.btn-search-landscape::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    border-radius: 0;
}

.btn-search-landscape:hover::before {
    left: 100%;
}

.btn-search-landscape .btn-landscape-svg {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform: translateZ(0);
}

/* États spectaculaires */
.btn-search-landscape:hover {
    border-color: #FFD700;
    transform: translateY(-1px) scale(1.01);
    box-shadow: 
        0 8px 20px rgba(255, 215, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 2px rgba(255, 215, 0, 0.4);
}

.btn-search-landscape:hover .btn-landscape-svg {
    transform: scale(1.02);
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
}

/* État actif - Background orange Commercify pour recherche */
.btn-search-landscape.active {
    background: linear-gradient(135deg, #FF8C00 0%, #FFA500 50%, #FFB347 100%) !important;
    border: 2px solid #FFD700 !important;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 
        0 4px 15px rgba(255, 140, 0, 0.4), 
        0 0 20px rgba(255, 215, 0, 0.3),
        0 0 0 2px rgba(255, 215, 0, 0.6);
}

.btn-search-landscape.active .btn-landscape-svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.btn-search-landscape.active .btn-landscape-svg circle,
.btn-search-landscape.active .btn-landscape-svg path {
    stroke: #000000 !important;
    stroke-width: 2.5;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS - ALIGNÉS DASHLITE
   ✅ Optimisation UI/UX mobile-first avec sticky collapse
   ═══════════════════════════════════════════════════════════
   
   Breakpoints DashLite :
   📱 xs (SMARTPHONES PORTRAIT) : 0-575px - STICKY COLLAPSE FORCÉ
   📱 sm (SMARTPHONES PAYSAGE)  : 576-767px - STICKY COLLAPSE FORCÉ
   📟 md (TABLETTES PORTRAIT)   : 768-991px - STICKY COLLAPSE AU SCROLL
   💻 lg (TABLETTES PAYSAGE)    : 992-1199px - STICKY PERMANENT
   🖥️  xl (FHD)                 : 1200-1539px - STICKY PERMANENT
   🖥️  xxl (2K)                 : 1540-2559px - STICKY PERMANENT
   🖥️  4k (4K/8K)               : 2560px+ - STICKY PERMANENT
   
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   🖥️  xl (FHD) 1200px-1539px - OPTIMISÉ
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) and (max-width: 1539px) {
    .btn-landscape {
        height: var(--btn-height-lg);
        padding: 5px 5px;
        font-size: var(--font-size-lg);
        gap: 6px;
        border-radius: 0;
    }
    
    .btn-landscape-text {
        font-size: var(--font-size-lg);
    }
    
    .btn-landscape-icon {
        font-size: var(--font-size-xl);
    }
    
    .btn-landscape-avatar {
        width: 24px;
        height: 24px;
    }
    
    .btn-visitor-landscape {
        min-width: 120px;
        padding: 5px 10px;
    }
    
    .btn-visitor-landscape .btn-landscape-text {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    
    .line-quicklinks {
        margin-top: 14px !important;
    }
    
    /* Logo FHD - hauteur 100% et largeur auto */
    .catalog-logo,
    #anchortop.catalog-logo,
    #anchortop {
        height: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        max-width: none !important;
        display: block !important;
        border: 0 !important;
        box-sizing: border-box !important;
        object-fit: contain;
    }
    
    /* Alignement du bord gauche du logo avec le bord gauche du bouton drapeau */
    .line-logo {
        justify-content: flex-start !important;
        overflow: visible !important;
        margin-bottom: -5px !important;
    }
    
    .line-logo-left {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    .dashboard-text-link {
        font-size: 1.2rem !important;
        line-height: 52px !important;
        height: 52px !important;
        letter-spacing: 0.8px !important;
        font-weight: 700 !important;
        padding: 0 0.7rem !important;
    }
    
    .dashboard-text-link:hover {
        font-weight: 400 !important;
    }
    
    
    .btn-search-landscape {
        width: var(--btn-height-xl);
        height: var(--btn-height-xl);
        padding: 8px;
    }
    
    .btn-landscape-svg {
        width: 20px;
        height: 20px;
    }
    
    .line-buttons-landscape .row {
        gap: 6px;
    }
    
    /* BOUTONS CATALOGUES - AGRANDIS POUR FHD */
    .catalog-btn {
        min-width: 90px !important;
        height: 50px !important;
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
    
    .catalog-btn i {
        font-size: 1.2rem !important;
    }
    
    .catalog-label {
        font-size: 0.6rem !important;
        letter-spacing: 0.5px !important;
    }
    
    /* LIGNE CATALOGUES - AGRANDIE POUR FHD */
    .line-catalogs {
        padding: 6px 0 !important;
        gap: 6px !important;
    }
    
    .line-catalogs .row {
        gap: 8px !important;
    }
    
    .catalog-text {
        font-size: 0.75rem !important;
        letter-spacing: 0.4px !important;
    }
    
    /* BOUTON HYPERPROFIL - TAILLE RÉDUITE POUR FHD */
    .btn-hyperprofil-landscape .btn-landscape-text {
        font-size: 0.85rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   🖥️  xxl (2K) 1540px-2559px - LARGE DESKTOP
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1540px) and (max-width: 2559px) {
    .btn-landscape {
        height: var(--btn-height-xl);
        padding: 8px 16px;
        font-size: var(--font-size-xl);
        gap: 8px;
        border-radius: 0;
    }
    
    .btn-landscape-text {
        font-size: var(--font-size-xl);
    }
    
    .btn-landscape-icon {
        font-size: 1.4rem;
    }
    
    .btn-landscape-avatar {
        width: 28px;
        height: 28px;
    }
    
    .btn-visitor-landscape {
        min-width: 130px;
        padding: 6px 12px;
    }
    
    .btn-visitor-landscape .btn-landscape-text {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
    }
    
    .line-quicklinks {
        margin-top: 16px !important;
    }
    
    /* Logo 2K - hauteur 100% et largeur auto */
    .catalog-logo,
    #anchortop.catalog-logo,
    #anchortop {
        height: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        max-width: none !important;
        display: block !important;
        border: 0 !important;
        box-sizing: border-box !important;
        object-fit: contain;
    }
    
    /* Alignement du bord gauche du logo avec le bord gauche du bouton drapeau */
    .line-logo {
        justify-content: flex-start !important;
        overflow: visible !important;
        margin-bottom: -5px !important;
    }
    
    .line-logo-left {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    .dashboard-text-link {
        font-size: 1.3rem !important;
        line-height: 56px !important;
        height: 56px !important;
        letter-spacing: 0.9px !important;
        font-weight: 700 !important;
        padding: 0 0.8rem !important;
    }
    
    .dashboard-text-link:hover {
        font-weight: 400 !important;
    }
    
    
    .btn-search-landscape {
        width: var(--btn-height-xl);
        height: var(--btn-height-xl);
        padding: 10px;
    }
    
    .btn-landscape-svg {
        width: 22px;
        height: 22px;
    }
    
    .line-buttons-landscape .row {
        gap: 8px;
    }
    
    /* BOUTONS CATALOGUES - AGRANDIS POUR 2K */
    .catalog-btn {
        min-width: 110px !important;
        height: 60px !important;
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
    }
    
    .catalog-btn i {
        font-size: 1.5rem !important;
    }
    
    .catalog-label {
        font-size: 0.75rem !important;
        letter-spacing: 0.6px !important;
    }
    
    /* LIGNE CATALOGUES - AGRANDIE POUR 2K */
    .line-catalogs {
        padding: 8px 0 !important;
        gap: 8px !important;
    }
    
    .line-catalogs .row {
        gap: 10px !important;
    }
    
    .catalog-text {
        font-size: 0.9rem !important;
        letter-spacing: 0.5px !important;
    }
    
    /* BOUTON HYPERPROFIL - TAILLE RÉDUITE POUR HD 2K */
    .btn-hyperprofil-landscape .btn-landscape-text {
        font-size: 0.90rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   🖥️  4k (4K/8K) 2560px+ - ULTRA LARGE
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 2560px) {
    .btn-landscape {
        height: 48px;
        padding: 10px 20px;
        font-size: 1.1rem;
        gap: 10px;
        border-radius: 0;
    }
    
    .btn-landscape-text {
        font-size: 1.1rem;
    }
    
    .btn-landscape-icon {
        font-size: 1.5rem;
    }
    
    .btn-landscape-avatar {
        width: 32px;
        height: 32px;
    }
    
    .btn-visitor-landscape {
        min-width: 140px;
        padding: 7px 14px;
    }
    
    .btn-visitor-landscape .btn-landscape-text {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
    }
    
    .line-quicklinks {
        margin-top: 18px !important;
    }
    
    /* Logo 4K - hauteur 100% et largeur auto */
    .catalog-logo,
    #anchortop.catalog-logo,
    #anchortop {
        height: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        max-width: none !important;
        display: block !important;
        border: 0 !important;
        box-sizing: border-box !important;
        object-fit: contain;
    }
    
    /* Alignement du bord gauche du logo avec le bord gauche du bouton drapeau */
    .line-logo {
        justify-content: flex-start !important;
        overflow: visible !important;
        margin-bottom: -5px !important;
    }
    
    .line-logo-left {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    .dashboard-text-link {
        font-size: 1.5rem !important;
        line-height: 60px !important;
        height: 60px !important;
        letter-spacing: 1px !important;
        font-weight: 700 !important;
        padding: 0 0.9rem !important;
    }
    
    .dashboard-text-link:hover {
        font-weight: 400 !important;
    }
    
    .btn-search-landscape {
        width: 48px;
        height: 48px;
        padding: 12px;
    }
    
    .btn-landscape-svg {
        width: 24px;
        height: 24px;
    }
    
    .line-buttons-landscape .row {
        gap: 10px;
    }
    
    /* BOUTONS CATALOGUES - AGRANDIS POUR 4K */
    .catalog-btn {
        min-width: 130px !important;
        height: 70px !important;
        padding: 10px 20px !important;
        font-size: 1.05rem !important;
    }
    
    .catalog-btn i {
        font-size: 1.8rem !important;
    }
    
    .catalog-label {
        font-size: 0.9rem !important;
        letter-spacing: 0.7px !important;
    }
    
    /* LIGNE CATALOGUES - AGRANDIE POUR 4K */
    .line-catalogs {
        padding: 10px 0 !important;
        gap: 10px !important;
    }
    
    .line-catalogs .row {
        gap: 12px !important;
    }
    
    .catalog-text {
        font-size: 1.05rem !important;
        letter-spacing: 0.6px !important;
    }
    
    /* Logo élargi pour HD - remplace la réduction de 30% */
    .catalog-logo {
        max-height: 60px !important;
        width: auto !important;
        display: block !important;
    }
    
    /* Alignement du bord gauche du logo avec le bord gauche du bouton drapeau */
    .line-logo {
        justify-content: flex-start !important;
        overflow: visible !important;
    }
    
    .line-logo-left {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   💻 lg (HD) 992px-1199px - RÉDUIT
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1199px) {
    /* Logo pour HD - 80% width (réduit de 20%) avec bordure 5px */
    .catalog-logo,
    #anchortop.catalog-logo,
    #anchortop {
        max-height: 60px !important;
        height: auto !important;
        width: 80% !important;
        max-width: none !important;
        display: block !important;
        border: 5px solid #000000 !important;
        box-sizing: border-box !important;
    }
    
    /* Alignement du logo avec les quick-links */
    .line-logo-left {
        margin-left: 0;
        padding-left: 0;
    }
    
    /* Réduire l'espace pour remonter les quicklinks */
    .line-logo {
        margin-bottom: -5px !important;
    }
    
    
    /* 3 boutons quick-links réduits */
    .quick-link-flag-mini {
        width: calc(40px - 0.3rem);
        height: calc(40px - 0.3rem);
        padding: calc(3px - 0.3rem);
    }
    
    .flag-mini-img {
        width: calc(32px - 0.3rem);
        height: calc(24px - 0.3rem);
    }
    
    .dashboard-svg,
    .moon-svg {
        width: calc(28px - 0.3rem);
        height: calc(28px - 0.3rem);
    }
    
    .dashboard-svg-wrapper,
    .moon-svg-wrapper {
        width: calc(40px - 0.3rem);
        height: calc(40px - 0.3rem);
    }
    
    .quick-link-separator {
        margin: 0 calc(4px - 0.3rem);
        font-size: calc(1.2rem - 0.3rem);
    }
    
    /* Typewriter texte réduit de 0.5 */
    .publish-text-link {
        font-size: calc(0.75rem - 0.5rem);
        padding: calc(0.5rem - 0.3rem) calc(0.8rem - 0.3rem);
    }
    
    /* Bouton moderne responsive */
    .publish-modern-btn {
        padding: calc(0.5rem - 0.3rem) calc(0.8rem - 0.3rem) !important;
        gap: 0.5rem !important;
    }
    
    .publish-icon-wrapper {
        width: 28px !important;
        height: 28px !important;
    }
    
    .publish-icon {
        width: 16px !important;
        height: 16px !important;
    }
    
    .publish-text-main {
        font-size: calc(0.75rem - 0.3rem) !important;
    }
    
    /* Typewriter désactivé pour performance CPU */
    .typewriter-text {
        font-size: calc(0.75rem - 0.5rem);
        /* Animation désactivée */
        animation: none !important;
    }
    
    /* Marquee taille de police réduite */
    .catalog-marquee-text {
        font-size: calc(0.75rem - 0.3rem);
    }
    
    .line-marquee {
        font-size: calc(0.75rem - 0.3rem);
    }
    
    /* Boutons landscape réduits de 0.2 en largeur et texte réduit */
    .btn-landscape {
        height: calc(var(--btn-height-md) - 0.3rem);
        padding: calc(5px - 0.3rem) calc(10px - 0.2rem);
        font-size: calc(var(--font-size-md) - 0.3rem);
        gap: calc(5px - 0.3rem);
        border-radius: 0;
        min-width: calc(88px - 0.2rem);
    }
    
    .btn-landscape-text {
        font-size: calc(var(--font-size-md) - 0.3rem);
    }
    
    .btn-landscape-icon {
        font-size: calc(var(--font-size-lg) - 0.3rem);
    }
    
    .btn-landscape-avatar {
        width: calc(20px - 0.3rem);
        height: calc(20px - 0.3rem);
    }
    
    .btn-visitor-landscape {
        min-width: calc(100px - 0.2rem);
        font-size: calc(0.65rem - 0.3rem);
    }
    
    .btn-visitor-landscape .btn-landscape-text {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
    
    .line-quicklinks {
        margin-top: 12px !important;
    }
    
    /* Logo simplifié pour HD */
    .catalog-logo {
        max-height: 60px !important;
        width: auto !important;
        display: block !important;
    }
    
    /* Alignement du bord gauche du logo avec le bord gauche du bouton drapeau */
    .line-logo {
        justify-content: flex-start !important;
        overflow: visible !important;
    }
    
    .line-logo-left {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    .dashboard-text-link {
        font-size: 1.1rem !important;
        line-height: 48px !important;
        height: 48px !important;
        letter-spacing: 0.7px !important;
        font-weight: 700 !important;
        padding: 0 0.6rem !important;
    }
    
    .dashboard-text-link:hover {
        font-weight: 400 !important;
    }
    
    
    .btn-hyperprofil-landscape {
        min-width: calc(120px - 0.2rem);
        font-size: calc(0.65rem - 0.3rem);
    }
    
    /* BOUTON HYPERPROFIL - TAILLE RÉDUITE POUR HD */
    .btn-hyperprofil-landscape .btn-landscape-text {
        font-size: 0.75rem !important;
    }
    
    .btn-search-landscape {
        width: calc(var(--btn-height-md) - 0.3rem);
        height: calc(var(--btn-height-md) - 0.3rem);
        padding: calc(5px - 0.3rem);
    }
    
    .btn-landscape-svg {
        width: calc(18px - 0.3rem);
        height: calc(18px - 0.3rem);
    }
    
    .line-buttons-landscape .row {
        gap: calc(5px - 0.3rem);
    }
    
    .catalog-header {
        padding: 15px !important;
        /* background géré par PHP */
    }
}

/* ═══════════════════════════════════════════════════════════
   📟 md (TABLETTES) 768px-1024px - ADAPTÉ (incluant iPad Mini)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
    .catalog-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        min-height: 70px !important;
        max-height: 150px !important;
        height: auto !important;
        overflow: hidden !important;
        /* background géré par PHP */
    }
    
    html[dir="rtl"] .header-actions {
        margin-inline-end: 0 !important;
    }
    
    .header-zone-topleft,
    .header-zone-topright {
        width: 50% !important;
        max-width: 50% !important;
    }
    
    .header-zone-topleft {
        padding-right: 8px;
    }
    
    .header-zone-topright {
        padding-left: 8px;
    }
    
    
    /* LOGO - PROPORTIONS TABLETTES */
    .catalog-logo,
    #anchortop.catalog-logo,
    #anchortop {
        max-height: 45px !important;
        height: auto !important;
        width: 80% !important;
        max-width: none !important;
        display: block !important;
        border: 5px solid #000000 !important;
        box-sizing: border-box !important;
    }
    
    /* BOUTONS QUICK-LINKS */
    .quick-link-flag-mini {
        width: 35px !important;
        height: 35px !important;
        padding: 15px !important;
    }
    
    /* FORCER l'ordre d'affichage uniforme sur tablette */
    .header-logo-section {
        order: 1 !important;
    }
    
    .header-actions {
        order: 2 !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }
    
    .header-wrap-codepen {
        overflow: visible !important;
    }
    
    .logo-wrapper {
        order: 1 !important;
    }
    
    .btn-search-header-tablet {
        order: 2 !important;
    }
    
    .catalog-selector-trigger {
        order: 3 !important;
    }
    
    .header-flag-btn-after-logo {
        order: 1 !important;
    }
    
    .catalog-nav-item-dashboard-tablet {
        order: 2 !important;
    }
    
    .btn-visitor-header {
        order: 3 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        max-height: none !important;
        min-width: 9.5em !important;
        white-space: nowrap !important;
    }
    
    /* FORCER l'affichage du label court sur tablette */
    .btn-visitor-header .visitor-name-header,
    .btn-visitor-header .visitor-avatar-img-header,
    .btn-visitor-header .visitor-btn-label-default,
    .btn-visitor-header .visitor-btn-label-hover {
        display: none !important;
    }
    
    .btn-visitor-header::before {
        content: attr(data-mobile-label) !important;
        font-weight: 700 !important;
        font-size: 0.75rem !important;
        color: inherit !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* Sur tablette : afficher "login" au lieu de "V" pour le bouton visiteur (badge non connecté) */
    .btn-visitor-header[data-tablet-label]::before {
        content: attr(data-tablet-label) !important;
    }
    
    /* Centrer le SVG V dans le bouton visiteur */
    .visitor-v-svg,
    .visitor-v-svg-simple {
        display: block !important;
        margin: 0 auto !important;
    }
    
    .flag-mini-img {
        width: 28px !important;
        height: 20px !important;
    }
    
    .dashboard-svg-wrapper,
    .moon-svg-wrapper {
        width: 40px !important;
        height: 40px !important;
    }
    
    .dashboard-svg,
    .moon-svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    
    /* LIGNE MARQUEE - MASQUÉE */
    .line-marquee {
        display: none !important;
    }
    
    /* BOUTONS CATALOGUES */
    .catalog-btn {
        min-width: 70px !important;
        height: 42px !important;
        padding: 5px 10px !important;
        font-size: 0.45rem !important;
        gap: 2px !important;
    }
    
    .catalog-btn i {
        font-size: 0.9rem !important;
    }
    
    .catalog-label {
        display: none;
        font-size: 0.4rem !important;
        letter-spacing: 0.5px !important;
    }
    
    .catalog-text {
        font-size: 0.45rem !important;
        letter-spacing: 0.3px !important;
    }
    
    .line-catalogs {
        padding: 5px 0 !important;
        gap: 5px !important;
    }
    
    .line-catalogs .row {
        gap: 5px !important;
    }
    
    /* BOUTONS LANDSCAPE */
    .btn-landscape {
        height: var(--btn-height-sm);
        padding: 4px 8px;
        font-size: var(--font-size-sm);
        gap: 4px;
        border-radius: 0;
    }
    
    .btn-landscape-text {
        font-size: var(--font-size-sm);
    }
    
    .btn-landscape-icon {
        font-size: var(--font-size-lg);
    }
    
    .btn-landscape-avatar {
        width: 18px;
        height: 18px;
    }
    
    .btn-visitor-landscape {
        min-width: 80px;
    }
    
    .btn-search-landscape {
        width: var(--btn-height-sm);
        height: var(--btn-height-sm);
        padding: 4px;
    }
    
    .btn-landscape-svg {
        width: 16px;
        height: 16px;
    }
    
    .line-buttons-landscape .row {
        gap: 4px;
    }
    
    /* BOUTON HYPERPROFIL - TAILLE RÉDUITE POUR TABLETTE */
    .btn-hyperprofil-landscape .btn-landscape-text {
        font-size: 0.65rem !important;
        letter-spacing: 1px !important;
    }
    
    /* STICKY COLLAPSE DÉSACTIVÉ POUR TABLETTES - PAS DE RÉDUCTION AU SCROLL */
    .catalog-header.scrolled {
        padding: inherit !important; /* Garde la taille normale */
    }
    
    .catalog-header.scrolled .catalog-logo {
        max-height: inherit !important; /* Garde la taille normale */
    }
    
    .catalog-header.scrolled .quick-link-flag-mini {
        width: inherit !important;
        height: inherit !important;
        padding: inherit !important;
    }
    
    .catalog-header.scrolled .flag-mini-img {
        width: inherit !important;
        height: inherit !important;
    }
    
    .catalog-header.scrolled .dashboard-svg-wrapper,
    .catalog-header.scrolled .moon-svg-wrapper {
        width: inherit !important;
        height: inherit !important;
    }
    
    .catalog-header.scrolled .dashboard-svg,
    .catalog-header.scrolled .moon-svg {
        width: inherit !important;
        height: inherit !important;
    }
    
    .catalog-header.scrolled .catalog-btn {
        min-width: inherit !important;
        height: inherit !important;
        padding: inherit !important;
        font-size: inherit !important;
    }
    
    .catalog-header.scrolled .catalog-btn i {
        font-size: inherit !important; /* Garde la taille normale */
    }
}

/* ═══════════════════════════════════════════════════════════
   📱 sm (SMARTPHONES PAYSAGE) 576px-767px - MODÈLE SMARTPHONE
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 576px) and (max-width: 767px) {
    .catalog-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        min-height: 60px !important;
        max-height: 80px !important;
        height: auto !important;
        overflow: hidden !important;
        /* background géré par PHP */
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    
    html[dir="rtl"] .header-actions {
        margin-inline-end: 0 !important;
    }
    
    /* Empêcher le scroll interne du header et fixer toutes les positions */
    .catalog-header * {
        max-height: 100% !important;
        overflow: hidden !important;
        transform: none !important;
        transition: none !important;
        position: relative !important;
    }
    
    /* Exception pour le bouton Dashboard - permettre au texte de bien tenir */
    .catalog-header .catalog-nav-item-dashboard-tablet {
        max-height: none !important;
        overflow: visible !important;
        min-width: 80px !important;
        white-space: nowrap !important;
    }
    
    .header-zone-topleft,
    .header-zone-topright {
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        transform: none !important;
        transition: none !important;
        position: relative !important;
    }
    
    .header-zone-topleft,
    .header-zone-topright {
        width: 50% !important;
        max-width: 50% !important;
        overflow: hidden !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .header-zone-topleft {
        padding-right: 4px;
        justify-content: flex-start !important;
    }
    
    .header-zone-topright {
        padding-left: 4px;
        justify-content: flex-end !important;
    }
    
    
    /* LOGO - TAILLE FIXE POUR SMARTPHONES PAYSAGE - PAS DE REDIMENSIONNEMENT */
    .catalog-logo,
    #anchortop.catalog-logo,
    #anchortop {
        height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
        display: block !important;
        border: 0px solid #000000 !important;
        box-sizing: border-box !important;
        transform: none !important;
        transition: none !important;
        object-fit: contain !important;
    }
    
    /* Empêcher tout redimensionnement du logo lors du scroll */
    .catalog-header.scrolled .catalog-logo,
    .catalog-header.scrolled #anchortop.catalog-logo,
    .catalog-header.scrolled #anchortop {
        height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
        transform: none !important;
    }
    
    /* Espacement uniforme entre logo, loupe, menu jump (aligné sur le reste du header) */
    .line-logo-left {
        gap: var(--header-top-gap) !important;
    }
    
    /* BOUTONS QUICK-LINKS - TAILLES FIXES - PAS DE REDIMENSIONNEMENT */
    .quick-link-flag-mini {
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        padding: 2px !important;
        transform: none !important;
        transition: none !important;
        position: relative !important;
    }
    
    .flag-mini-img {
        width: 24px !important;
        height: 18px !important;
        max-width: 24px !important;
        max-height: 18px !important;
        transform: none !important;
        transition: none !important;
    }
    
    .dashboard-svg-wrapper,
    .moon-svg-wrapper {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        transform: none !important;
        transition: none !important;
        position: relative !important;
    }
    
    .dashboard-svg,
    .moon-svg {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Empêcher tout déplacement des boutons lors du scroll */
    .catalog-header.scrolled .quick-link-flag-mini,
    .catalog-header.scrolled .dashboard-svg-wrapper,
    .catalog-header.scrolled .moon-svg-wrapper,
    .catalog-header.scrolled .flag-mini-img,
    .catalog-header.scrolled .dashboard-svg,
    .catalog-header.scrolled .moon-svg {
        transform: none !important;
        transition: none !important;
        position: relative !important;
    }
    
    /* Empêcher tout déplacement et zoom des éléments de recherche (loupe, etc.) */
    .search-icon-header,
    .search-icon-header-tablet,
    .btn-search-landscape,
    .btn-search-header-tablet,
    .catalog-nav-item-search,
    .catalog-nav-item-search-tablet,
    .header-actions * {
        transform: none !important;
        transition: none !important;
        position: relative !important;
        max-width: 30px !important;
        max-height: 30px !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Fixer la taille du bouton loupe lui-même */
    .btn-search-landscape,
    .btn-search-header-tablet,
    .catalog-nav-item-search,
    .catalog-nav-item-search-tablet {
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        padding: 5px !important;
        flex-shrink: 0 !important;
    }
    
    /* Fixer la taille de l'icône SVG de recherche */
    .search-icon-header,
    .search-icon-header-tablet,
    .btn-search-landscape svg,
    .btn-search-header-tablet svg,
    .catalog-nav-item-search svg,
    .catalog-nav-item-search-tablet svg {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
    
    /* Empêcher tout zoom même dans les états hover et active */
    .btn-search-landscape:hover,
    .btn-search-header-tablet:hover,
    .catalog-nav-item-search:hover,
    .catalog-nav-item-search-tablet:hover,
    .btn-search-landscape.active,
    .btn-search-header-tablet.active,
    .catalog-nav-item-search.active,
    .catalog-nav-item-search-tablet.active {
        transform: none !important;
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
    }
    
    .btn-search-landscape:hover svg,
    .btn-search-header-tablet:hover svg,
    .catalog-nav-item-search:hover svg,
    .catalog-nav-item-search-tablet:hover svg,
    .btn-search-landscape.active svg,
    .btn-search-header-tablet.active svg,
    .catalog-nav-item-search.active svg,
    .catalog-nav-item-search-tablet.active svg,
    .btn-search-landscape:hover .search-icon-header,
    .btn-search-header-tablet:hover .search-icon-header-tablet,
    .catalog-nav-item-search:hover .search-icon-header,
    .catalog-nav-item-search-tablet:hover .search-icon-header-tablet {
        transform: none !important;
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
    
    .quick-link-separator {
        margin: 0 3px !important;
        font-size: 1rem !important;
    }
    
    .line-quicklinks {
        font-size: var(--font-size-xs);
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    
    /* LIGNE MARQUEE - MASQUÉE */
    .line-marquee {
        display: none !important;
    }
    
    /* BOUTONS CATALOGUES - PROPORTIONS RÉDUITES */
    .catalog-btn {
        min-width: 60px !important;
        height: 36px !important;
        padding: 4px 8px !important;
        font-size: 0.4rem !important;
        gap: 2px !important;
        border-width: 1px !important;
    }
    
    .catalog-btn i {
        font-size: 0.8rem !important;
    }
    
    .catalog-label {
        font-size: 0.35rem !important;
        letter-spacing: 0.4px !important;
    }
    
    .catalog-text {
        font-size: 0.4rem !important;
        letter-spacing: 0.3px !important;
    }
    
    .line-catalogs {
        padding: 4px 0 !important;
        gap: 4px !important;
    }
    
    .line-catalogs .row {
        gap: 4px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* BOUTONS LANDSCAPE - PROPORTIONS SMARTPHONE */
    .btn-landscape {
        height: 28px;
        padding: 4px 8px;
        font-size: var(--font-size-sm);
        gap: 4px;
        border-radius: 0;
    }
    
    .btn-landscape-text {
        font-size: var(--font-size-sm);
    }
    
    .btn-landscape-icon {
        font-size: var(--font-size-lg);
    }
    
    .btn-landscape-avatar {
        width: 18px;
        height: 18px;
    }
    
    .btn-visitor-landscape {
        min-width: 80px;
    }
    
    .btn-search-landscape {
        width: 28px;
        height: 28px;
        padding: 4px;
    }
    
    .btn-landscape-svg {
        width: 16px;
        height: 16px;
    }
    
    .line-buttons-landscape .row {
        gap: 4px;
    }
    
    /* BOUTON HYPERPROFIL - TAILLE RÉDUITE POUR SMARTPHONE PAYSAGE */
    .btn-hyperprofil-landscape .btn-landscape-text {
        font-size: 0.55rem !important;
        letter-spacing: 0.5px !important;
    }
    
    .catalog-label {
        display: none;
    }
    
    /* STICKY COLLAPSE DÉSACTIVÉ POUR SMARTPHONES PAYSAGE - PAS DE RÉDUCTION AU SCROLL */
    .catalog-header.scrolled {
        padding: inherit !important; /* Garde la taille normale */
    }
    
    .catalog-header.scrolled .header-zone-topleft,
    .catalog-header.scrolled .header-zone-topright {
        transform: none !important; /* Pas de scale */
    }
    
    .catalog-header.scrolled .catalog-logo {
        max-height: inherit !important; /* Garde la taille normale */
    }
    
    .catalog-header.scrolled .quick-link-flag-mini {
        width: inherit !important;
        height: inherit !important;
    }
    
    .catalog-header.scrolled .dashboard-svg-wrapper,
    .catalog-header.scrolled .moon-svg-wrapper {
        width: inherit !important;
        height: inherit !important;
    }
    
    .catalog-header.scrolled .catalog-btn {
        min-width: inherit !important;
        height: inherit !important;
        padding: inherit !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   📟 iPad Mini et écrans 1024x768 - TABLETTE SPÉCIFIQUE
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1024px) {
    .catalog-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        min-height: 70px !important;
        max-height: 150px !important;
        height: auto !important;
        overflow: hidden !important;
        /* background géré par PHP */
    }
    
    /* FORCER l'ordre d'affichage uniforme sur iPad Mini */
    .header-logo-section {
        order: 1 !important;
    }
    
    .header-actions {
        order: 2 !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }
    
    html[dir="rtl"] .header-actions {
        margin-inline-end: 0 !important;
    }
    
    .header-wrap-codepen {
        overflow: visible !important;
    }
    
    .logo-wrapper {
        order: 1 !important;
    }
    
    .btn-search-header-tablet {
        order: 2 !important;
    }
    
    .catalog-selector-trigger {
        order: 3 !important;
    }
    
    .header-flag-btn-after-logo {
        order: 1 !important;
    }
    
    .catalog-nav-item-dashboard-tablet {
        order: 2 !important;
    }
    
    .btn-visitor-header {
        order: 3 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        max-height: none !important;
        min-width: 9.5em !important;
        white-space: nowrap !important;
    }
    
    /* FORCER l'affichage du label court sur iPad Mini */
    .btn-visitor-header[data-mobile-label] .visitor-name-header,
    .btn-visitor-header[data-mobile-label] .visitor-avatar-img-header,
    .btn-visitor-header[data-mobile-label] .visitor-btn-label-default,
    .btn-visitor-header[data-mobile-label] .visitor-btn-label-hover {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    .btn-visitor-header[data-mobile-label]::before {
        content: attr(data-mobile-label) !important;
        font-weight: 700 !important;
        color: inherit !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        height: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 0.8rem !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        /* DEBUG: Bordure verte pour vérifier que la règle s'applique */
        border: 2px solid green !important;
        background: green !important;
        padding: 2px !important;
    }
    
    /* Sur tablette : afficher "login" au lieu de "V" pour le bouton visiteur (badge non connecté) */
    .btn-visitor-header[data-tablet-label]::before {
        content: attr(data-tablet-label) !important;
    }
    
    /* Centrer le SVG V dans le bouton visiteur */
    .visitor-v-svg,
    .visitor-v-svg-simple {
        display: block !important;
        margin: 0 auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   📱 xs (SMARTPHONES PORTRAIT) 0-575px - ULTRA-COMPACT
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    .catalog-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        min-height: 60px !important;
        max-height: 80px !important;
        height: auto !important;
        overflow: hidden !important;
        /* background géré par PHP */
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        transition: none !important;
    }
    
    html[dir="rtl"] .header-actions {
        margin-inline-end: 0 !important;
    }
    
    /* Empêcher le scroll interne du header et toutes les transformations */
    .catalog-header * {
        max-height: 100% !important;
        overflow: hidden !important;
        transform: none !important;
        transition: none !important;
        position: relative !important;
    }
    
    /* Exception pour le bouton Dashboard - permettre au texte de bien tenir */
    .catalog-header .catalog-nav-item-dashboard-tablet {
        max-height: none !important;
        overflow: visible !important;
        min-width: 80px !important;
        white-space: nowrap !important;
    }
    
    .header-zone-topleft,
    .header-zone-topright {
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        transform: none !important;
        transition: none !important;
        position: relative !important;
    }
    
    /* LOGO - TAILLE FIXE POUR SMARTPHONES PORTRAIT */
    .catalog-logo,
    #anchortop.catalog-logo,
    #anchortop {
        height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Empêcher tout redimensionnement du logo lors du scroll */
    .catalog-header.scrolled .catalog-logo,
    .catalog-header.scrolled #anchortop.catalog-logo,
    .catalog-header.scrolled #anchortop {
        height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
        transform: none !important;
    }
    
    .header-zone-topleft,
    .header-zone-topright {
        width: 50% !important;
        max-width: 50% !important;
        overflow: hidden !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        margin-top: 0 !important;
    }
    
    .header-zone-topleft {
        padding-right: 4px;
        justify-content: flex-start !important;
    }
    
    .header-zone-topright {
        padding-left: 4px;
    }
    
    /* Alignement du logo à gauche en LTR sur smartphones */
    .header-logo-section {
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    .line-logo-left {
        justify-content: flex-start !important;
    }
    
    /* Masquer Menu Jump sur smartphone et tablette */
    .catalog-selector-trigger {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Masquer Carte du monde sur smartphone et tablette */
    .mappemonde-link {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* LOGO - PROPORTIONS OPTIMISÉES POUR SMARTPHONES PORTRAIT */
    .catalog-logo,
    #anchortop.catalog-logo,
    #anchortop {
        /* max-height: 30px !important; */ /* Désactivé pour permettre agrandissement */
        height: auto !important;
        width: 60% !important; /* Augmenté de 50% à 60% */
        max-width: none !important;
        display: block !important;
        border: 0px solid #000000 !important;
        box-sizing: border-box !important;
    }
    
    /* Espacement uniforme entre logo, loupe, menu jump (aligné sur le reste du header) */
    .line-logo-left {
        gap: var(--header-top-gap) !important;
    }
    
    /* BOUTONS QUICK-LINKS - PROPORTIONS RÉDUITES */
    .quick-link-flag-mini {
        width: 26px !important;
        height: 26px !important;
        padding: 1px !important;
    }
    
    .flag-mini-img {
        width: 20px !important;
        height: 14px !important;
    }
    
    .dashboard-svg-wrapper,
    .moon-svg-wrapper {
        width: 40px !important;
        height: 40px !important;
    }
    
    .dashboard-svg,
    .moon-svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    .quick-link-separator {
        margin: 0 2px !important;
        font-size: 0.9rem !important;
    }
    
    .line-quicklinks {
        font-size: var(--font-size-xs);
        gap: 3px !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    
    /* LIGNE MARQUEE - MASQUÉE */
    .line-marquee {
        display: none !important;
    }
    
    /* BOUTONS CATALOGUES - PROPORTIONS RÉDUITES */
    .catalog-btn {
        min-width: 50px !important;
        height: 32px !important;
        padding: 3px 6px !important;
        font-size: 0.35rem !important;
        gap: 2px !important;
        border-width: 1px !important;
    }
    
    .catalog-btn i {
        font-size: 0.7rem !important;
    }
    
    .catalog-label {
        font-size: 0.3rem !important;
        letter-spacing: 0.3px !important;
    }
    
    .catalog-text {
        font-size: 0.35rem !important;
        letter-spacing: 0.2px !important;
    }
    
    .line-catalogs {
        padding: 4px 0 !important;
        gap: 4px !important;
    }
    
    .line-catalogs .row {
        gap: 4px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* BOUTONS LANDSCAPE - PROPORTIONS SMARTPHONE */
    .btn-landscape {
        height: 28px;
        padding: 4px 8px;
        font-size: var(--font-size-sm);
        gap: 4px;
        border-radius: 0;
    }
    
    .btn-landscape-text {
        font-size: var(--font-size-sm);
    }
    
    .btn-landscape-icon {
        font-size: var(--font-size-lg);
    }
    
    .btn-landscape-avatar {
        width: 18px;
        height: 18px;
    }
    
    .btn-visitor-landscape {
        min-width: 60px !important;
        padding: 2px 4px !important;
    }
    
    .btn-hyperprofil-landscape {
        min-width: 60px !important;
        height: 28px !important;
        padding: 2px 4px !important;
        border-radius: 0;
    }
    
    .btn-hyperprofil-landscape::before {
        display: none !important;
    }
    
    /* BOUTON HYPERPROFIL - TAILLE RÉDUITE POUR SMARTPHONE PORTRAIT */
    .btn-hyperprofil-landscape .btn-landscape-text {
        font-size: 0.45rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.2px !important;
        text-transform: none !important;
    }
    
    .btn-search-landscape {
        width: 28px;
        height: 28px;
        padding: 4px;
    }
    
    .btn-landscape-svg {
        width: 16px;
        height: 16px;
    }
    
    .line-buttons-landscape .row {
        gap: 4px;
    }
    
    .catalog-label {
        display: none;
    }
    
    .logo-beta-tag-right {
        display: none;
    }
    
    /* STICKY COLLAPSE DÉSACTIVÉ POUR SMARTPHONES PORTRAIT - PAS DE RÉDUCTION AU SCROLL */
    .catalog-header.scrolled {
        padding: inherit !important; /* Garde la taille normale */
    }
    
    .catalog-header.scrolled .header-zone-topleft,
    .catalog-header.scrolled .header-zone-topright {
        transform: none !important; /* Pas de scale */
    }
    
    .catalog-header.scrolled .catalog-logo {
        max-height: inherit !important; /* Garde la taille normale */
    }
    
    .catalog-header.scrolled .quick-link-flag-mini {
        width: inherit !important;
        height: inherit !important;
    }
    
    .catalog-header.scrolled .dashboard-svg-wrapper,
    .catalog-header.scrolled .moon-svg-wrapper {
        width: inherit !important;
        height: inherit !important;
    }
    
    .catalog-header.scrolled .catalog-btn {
        min-width: inherit !important;
        height: inherit !important;
        padding: inherit !important;
    }
    
    .catalog-header.scrolled .catalog-btn i {
        font-size: inherit !important; /* Garde la taille normale */
    }
    
    /* FORCER le masquage Menu Jump et Carte du monde sur smartphone paysage */
    .catalog-selector-trigger,
    a.catalog-selector-trigger {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    .mappemonde-link,
    a.mappemonde-link,
    #mappemonde-link {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* FORCER l'ordre d'affichage uniforme sur smartphone paysage */
    .header-logo-section {
        order: 1 !important;
    }
    
    .header-actions {
        order: 2 !important;
    }
    
    .logo-wrapper {
        order: 1 !important;
    }
    
    .btn-search-header-tablet {
        order: 2 !important;
    }
    
    .catalog-selector-trigger {
        order: 3 !important;
    }
    
    .header-flag-btn-after-logo {
        order: 1 !important;
    }
    
    .catalog-nav-item-dashboard-tablet {
        order: 2 !important;
    }
    
    .btn-visitor-header {
        order: 3 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* FORCER l'affichage du label court sur smartphone paysage */
    .btn-visitor-header.mobile-label-enabled .visitor-name-header,
    .btn-visitor-header.mobile-label-enabled .visitor-avatar-img-header,
    .btn-visitor-header.mobile-label-enabled .visitor-btn-label-default,
    .btn-visitor-header.mobile-label-enabled .visitor-btn-label-hover,
    .btn-visitor-header[data-mobile-label] .visitor-name-header,
    .btn-visitor-header[data-mobile-label] .visitor-avatar-img-header,
    .btn-visitor-header[data-mobile-label] .visitor-btn-label-default,
    .btn-visitor-header[data-mobile-label] .visitor-btn-label-hover {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Masquer le texte par défaut sur smartphone paysage */
    .btn-visitor-header.mobile-label-enabled {
        font-size: 0 !important;
        text-indent: -9999px !important;
    }
    
    .btn-visitor-header.mobile-label-enabled::before,
    .btn-visitor-header[data-mobile-label]::before {
        content: attr(data-mobile-label) !important;
        font-weight: 900 !important;
        font-size: 1.2rem !important;
        color: #000000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        height: 100% !important;
        text-indent: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        background: transparent !important;
        border: none !important;
        line-height: 1 !important;
    }
    
    /* Sur tablette : afficher "login" au lieu de "V" pour le bouton visiteur (badge non connecté) */
    .btn-visitor-header[data-tablet-label]::before {
        content: attr(data-tablet-label) !important;
    }
    
    /* Centrer le SVG V dans le bouton visiteur */
    .visitor-v-svg,
    .visitor-v-svg-simple {
        display: block !important;
        margin: 0 auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   HEADER PRINCIPAL - OPTIMISÉ POUR TOUS LES VIEWPORTS
   ═══════════════════════════════════════════════════════════ */

.catalog-header {
    /* Les couleurs sont gérées dynamiquement par les thèmes dans tpl_top.php */
    /* background, border-bottom-color et box-shadow définis via variables CSS */
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    position: sticky;
    top: 0;
    z-index: 9999;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    height: auto;
    backdrop-filter: blur(10px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    overflow: hidden;
    box-sizing: border-box;
    /* background géré par PHP */
}

html[dir="rtl"] .header-actions {
    margin-inline-end: 0 !important;
}

/* Les couleurs pour body.dark-mode .catalog-header sont gérées dynamiquement par les thèmes dans tpl_top.php */

/* Sticky collapse intelligent selon le viewport */
@media (max-width: 1024px) {
    .catalog-header {
        flex-wrap: nowrap !important;
        min-height: 60px !important;
        max-height: 80px !important;
        height: auto !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        /* background géré par PHP */
    }
    
    /* Empêcher le scroll interne du header sur tous les mobiles/tablettes */
    .catalog-header * {
        max-height: 100% !important;
        overflow: hidden !important;
        transform: none !important;
        transition: none !important;
        position: relative !important;
    }
    
    /* Exception pour le bouton Dashboard - permettre au texte de bien tenir */
    .catalog-header .catalog-nav-item-dashboard-tablet {
        max-height: none !important;
        overflow: visible !important;
        min-width: 80px !important;
        white-space: nowrap !important;
    }
    
    /* Exception pour le bouton Visiteur (Connexion) - même logique que Dashboard */
    .catalog-header .btn-visitor-header {
        max-height: none !important;
        overflow: visible !important;
        min-width: 9.5em !important;
        white-space: nowrap !important;
    }
    
    /* Exception pour la zone d'actions - ne pas couper les boutons */
    .catalog-header .header-actions {
        overflow: visible !important;
        flex-shrink: 0 !important;
    }
    
    /* Exception pour le header-wrap - ne pas couper les actions */
    .catalog-header .header-wrap-codepen {
        overflow: visible !important;
    }
    
    .header-zone-topleft,
    .header-zone-topright {
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        transform: none !important;
        transition: none !important;
        position: relative !important;
    }
    
    /* Alignement du logo à gauche en LTR sur tablettes */
    .header-logo-section {
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    .line-logo-left {
        justify-content: flex-start !important;
    }
    
    /* LOGO - TAILLE FIXE POUR TOUS LES MOBILES/TABLETTES */
    .catalog-logo,
    #anchortop.catalog-logo,
    #anchortop {
        height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Empêcher tout redimensionnement du logo lors du scroll */
    .catalog-header.scrolled .catalog-logo,
    .catalog-header.scrolled #anchortop.catalog-logo,
    .catalog-header.scrolled #anchortop {
        height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
        transform: none !important;
    }
    
    /* Empêcher tout déplacement des éléments lors du scroll */
    .catalog-header.scrolled * {
        transform: none !important;
        transition: none !important;
    }
    
    /* Éviter tout débordement horizontal */
    .header-zone-topleft,
    .header-zone-topright {
        max-width: 100%;
        overflow: hidden;
    }
}

/* Effet de réduction au scroll DÉSACTIVÉ pour smartphones et tablettes */
@media (max-width: 1024px) {
    /* Désactivation complète : le header garde sa taille normale même lors du scroll */
    .catalog-header.scrolled {
        /* Pas de changement de padding, garde la taille normale */
        padding: inherit !important;
        box-shadow: inherit !important;
        border-bottom-width: inherit !important;
    }
    
    .catalog-header.scrolled .header-zone-topleft,
    .catalog-header.scrolled .header-zone-topright {
        transform: none !important; /* Pas de scale */
    }
    
    .catalog-header.scrolled .line-marquee {
        display: inherit !important; /* Garde l'affichage normal */
    }
    
    .catalog-header.scrolled .catalog-logo {
        max-height: inherit !important; /* Garde la taille normale */
    }
    
    /* PAS DE RÉDUCTION DES BOUTONS QUAND SCROLLED */
    .catalog-header.scrolled .quick-link-flag-mini {
        width: inherit !important;
        height: inherit !important;
        padding: inherit !important;
    }
    
    .catalog-header.scrolled .flag-mini-img {
        width: inherit !important;
        height: inherit !important;
    }
    
    .catalog-header.scrolled .dashboard-svg-wrapper,
    .catalog-header.scrolled .moon-svg-wrapper {
        width: inherit !important;
        height: inherit !important;
    }
    
    .catalog-header.scrolled .dashboard-svg,
    .catalog-header.scrolled .moon-svg {
        width: inherit !important;
        height: inherit !important;
    }
    
    .catalog-header.scrolled .catalog-btn {
        min-width: inherit !important;
        height: inherit !important;
        padding: inherit !important;
        font-size: inherit !important;
    }
    
    .catalog-header.scrolled .catalog-btn i {
        font-size: 0.6rem !important;
    }
}

/* Script pour détecter le scroll et ajouter la classe scrolled */

/* ═══════════════════════════════════════════════════════════
   STICKY CONTENT - DÉSACTIVÉ
   ═══════════════════════════════════════════════════════════ */

.sticky-content,
.sticky-toggle-btn,
.sticky-logo-wrapper,
.sticky-logo-2025 {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   STRUCTURE 4 ZONES - OPTIMISÉE
   ═══════════════════════════════════════════════════════════ */

.header-zone-topleft {
    width: 40%; /* Augmenté de 35% à 40% pour plus d'espace */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    margin-top: 0.5em;
    box-sizing: border-box;
    overflow: visible; /* Permettre le débordement contrôlé */
}

.header-zone-topright {
    width: 60%; /* Réduit de 65% à 60% pour compenser l'augmentation de topleft */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    /* OPTIMISATION CLS: Réserver l'espace pour éviter les shifts */
    min-height: 100px;
    contain: layout style;
}

.header-zone-bottomleft {
    width: 50%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.header-zone-bottomright {
    width: 50%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   LIGNES D'ÉLÉMENTS - OPTIMISÉES
   ═══════════════════════════════════════════════════════════ */


.line-logo {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    z-index: 1;
}

.line-quicklinks {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.line-marquee {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.line-finalbuttons {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}

.line-jumpbuttons {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.line-catalogs {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}


.line-logo {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    z-index: 1;
}

.line-quicklinks {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   SOUS-DIVS DES LIGNES - OPTIMISÉES
   ═══════════════════════════════════════════════════════════ */

.line-logo-left {
    flex: 0 0 auto;
    box-sizing: border-box;
    overflow: visible;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 0;
    max-width: none;
    gap: var(--header-top-gap);
}

/* Alignement du logo sur le bord gauche pour tous les viewports desktop */
@media (min-width: 992px) {
    .line-logo {
        overflow: visible !important;
    }
    
    .line-logo-left {
        margin-left: 0 !important;
    }
}

.line-logo-right {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    box-sizing: border-box;
    overflow: visible;
    padding: 0;
    margin: 0;
    z-index: 10;
}

.line-quicklinks-content {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   BOUTON MÉGAPHONE POUR TOGGLE MENU DE GAUCHE (STRUCTURE ORIGINALE)
   ═══════════════════════════════════════════════════════════ */
.nk-menu-trigger {
    /* Performance */
    contain: layout style;
    will-change: transform;
    
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nk-menu-trigger .nk-nav-toggle {
    /* Performance */
    contain: layout style;
    will-change: transform;
    
    /* Layout - Même dimensions que les autres boutons */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 3px;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    position: relative;
    text-decoration: none;
    
    /* Effet hover */
    &:hover {
        background: transparent;
        border: none;
        transform: translateY(-1px);
        opacity: 0.8;
    }
    
    &:active {
        transform: translateY(0);
        background: transparent;
    }
}

.menu-toggle-logo {
    width: 32px;
    height: 24px;
    transition: all 0.3s ease;
    object-fit: contain;
    filter: brightness(1) contrast(1);
    border-radius: 0;
}

.nk-menu-trigger .nk-nav-toggle:hover .menu-toggle-logo {
    filter: brightness(1.1) contrast(1.1);
    transform: scale(1.05);
}

/* Responsive - Tailles adaptées pour smartphones */
@media (max-width: 575.98px) {
    /* Smartphones - Très petits écrans */
    .nk-menu-trigger .nk-nav-toggle {
        width: calc(40px - 0.3rem) !important;
        height: calc(40px - 0.3rem) !important;
        padding: calc(3px - 0.3rem) !important;
        background: transparent !important;
        border: none !important;
    }
    
    .menu-toggle-logo {
        width: 20px !important;
        height: 14px !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    /* Smartphones paysage */
    .nk-menu-trigger .nk-nav-toggle {
        width: 40px !important;
        height: 40px !important;
        padding: 15px !important;
        background: transparent !important;
        border: none !important;
    }
    
    .menu-toggle-logo {
        width: 24px !important;
        height: 18px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablettes portrait */
    .nk-menu-trigger .nk-nav-toggle {
        width: 40px !important;
        height: 40px !important;
        padding: 15px !important;
        background: transparent !important;
        border: none !important;
    }
    
    .menu-toggle-logo {
        width: 28px !important;
        height: 20px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Écrans moyens */
    .nk-menu-trigger .nk-nav-toggle {
        width: 40px !important;
        height: 40px !important;
        padding: 15px !important;
        background: transparent !important;
        border: none !important;
    }
    
    .menu-toggle-logo {
        width: 32px !important;
        height: 24px !important;
    }
}

/* Responsive - Masquer sur xl et plus */
@media (min-width: 1200px) {
    .nk-menu-trigger {
        display: none !important;
    }
}

.line-marquee {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.line-finalbuttons {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}

.line-jumpbuttons {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.line-catalogs {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.logo-complete-section {
    position: relative;
}

.logo-complete-section .line-logo {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════
   LOGO
   ═══════════════════════════════════════════════════════════ */

.logo-wrapper,
.logo-wrapper:focus,
.logo-wrapper:hover,
.logo-wrapper:active,
.logo-wrapper:focus-visible,
#anchortop,
#anchortop:focus,
#anchortop:hover,
#anchortop:active,
#anchortop:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.logo-wrapper {
    display: inline-block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: none !important;
    outline: none !important;
}



.logo-beta-container {
    position: relative;
    display: inline-block;
}

.catalog-logo {
    height: 100%;
    width: 150%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.logo-beta-tag {
    position: absolute;
    top: -5px;
    right: -35px;
    background: #000000;
    color: #DAA520;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 0;
    border: 1px solid rgba(218, 165, 32, 0.3);
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
    opacity: 0.7;
}

.beta-bientot {
    font-size: 0.4rem;
    display: block;
}

/* Badge BETA au bord droit du logo - CACHÉ PAR DÉFAUT */
.logo-beta-tag-right {
    position: relative;
    top: 0;
    left: 10px;
    background: #000000;
    color: #DAA520;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 0;
    border: 1px solid rgba(218, 165, 32, 0.5);
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-block;
    backface-visibility: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

/* Badge BETA au hover du logo - DÉSACTIVÉ */
.logo-wrapper:hover ~ .line-logo-right .logo-beta-tag-right,
.logo-wrapper:hover + .line-logo-right .logo-beta-tag-right,
.line-logo-left:hover .line-logo-right .logo-beta-tag-right,
.logo-wrapper:hover .logo-beta-tag-right {
    /* Effets hover désactivés */
    opacity: 0;
}


/* Pulsation désactivée car mode performance toujours ON */
/* body:not(.performance-mode) .logo-beta-tag-right {
    animation: betaPulse 3s ease-in-out infinite;
} */

/* 🚀 OPTIMISATION PARANOÏAQUE - Désactiver toutes les animations coûteuses */
@media (prefers-reduced-motion: reduce) {
    .catalog-logo,
    .btn-landscape,
    .catalog-btn {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* Responsive: adapter la taille - Aligné DashLite */
@media (max-width: 1199px) {
    .logo-beta-tag-right {
        font-size: calc(0.5rem - 0.3rem);
        padding: 3px 6px;
    }
    
    
    /* Ajuster les largeurs des zones sur écrans moyens */
    .header-zone-topleft {
        width: 45%; /* Plus d'espace sur écrans moyens */
    }
    
    .header-zone-topright {
        width: 55%; /* Compenser */
    }
}

@media (max-width: 767px) {
    .logo-beta-tag-right {
        display: none; /* Masquer sur mobile */
    }
    
    
    /* Ajuster les largeurs des zones sur mobile */
    .header-zone-topleft {
        width: 50%; /* Encore plus d'espace sur mobile */
    }
    
    .header-zone-topright {
        width: 50%; /* Équilibre sur mobile */
    }
}
/* ═══════════════════════════════════════════════════════════
   QUICK LINKS
   ═══════════════════════════════════════════════════════════ */

.quick-link-flag-mini {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.quick-link-flag-mini:hover {
    background: transparent;
    border: none;
    opacity: 0.8;
}

.flag-mini-img {
    width: 32px;
    height: 24px;
    object-fit: cover;
    border-radius: 0;
}

.quick-link-separator {
    color: rgba(218, 165, 32, 0.5);
    font-size: 1.2rem;
    margin: 0 4px;
}


.dashboard-svg,
.moon-svg {
    cursor: pointer;
    width: 28px;
    height: 28px;
}

.dashboard-svg.disabled {
    cursor: not-allowed;
    stroke: #555;
}

/* Styles pour le bouton dashboard cliquable */
.dashboard-svg-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
}

.dashboard-svg-wrapper:hover {
    background: transparent;
    border: none;
    transform: scale(1.05);
    opacity: 0.8;
}

.dashboard-svg-wrapper:active {
    transform: scale(0.95);
}

.dashboard-svg-wrapper .dashboard-svg {
    color: #09c2de;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.dashboard-svg-wrapper:hover .dashboard-svg {
    color: #07a6c4;
    transform: rotate(5deg);
    filter: drop-shadow(0 0 8px rgba(9, 194, 222, 0.5));
}

.moon-svg {
    fill: #ccc;
}

.dark-mode .moon-svg {
    fill: #f39c12;
}

/* Wrappers pour tooltips basiques du navigateur */
.dashboard-svg-wrapper,
.moon-svg-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 40px;
    height: 40px;
}


/* ═══════════════════════════════════════════════════════════
   BOUTON PUBLIER ANNONCE - DESIGN MODERNE GLASSMORPHISM
   ═══════════════════════════════════════════════════════════ */
.publish-modern-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.1rem;
    background: linear-gradient(135deg, rgba(13, 217, 255, 0.08) 0%, rgba(13, 217, 255, 0.15) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(13, 217, 255, 0.25);
    border-radius: 0;
    color: #0dd9ff;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(13, 217, 255, 0.1), 
                0 2px 6px rgba(13, 217, 255, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    font-family: inherit;
}

/* Respect des classes Bootstrap pour responsive */
.publish-modern-btn.d-none {
    display: none !important;
}

.publish-modern-btn.d-xl-inline-flex {
    display: none !important;
}

@media (min-width: 1200px) {
    .publish-modern-btn.d-xl-inline-flex {
        display: inline-flex !important;
    }
    /* Rétablit le layout flex de la ligne marquee malgré d-xl-block */
    .line-marquee.d-xl-block {
        display: flex !important;
    }
}

.publish-modern-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(13, 217, 255, 0.2) 50%, 
        transparent 100%);
    transition: left 0.6s ease;
}

.publish-modern-btn:hover::before {
    left: 100%;
}

.publish-modern-btn:hover {
    background: linear-gradient(135deg, rgba(13, 217, 255, 0.15) 0%, rgba(13, 217, 255, 0.22) 100%);
    border-color: rgba(13, 217, 255, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 217, 255, 0.2), 
                0 4px 10px rgba(13, 217, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.publish-modern-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(13, 217, 255, 0.15);
}

/* Icône circulaire avec effet de brillance */
.publish-icon-wrapper {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(13, 217, 255, 0.2) 0%, rgba(13, 217, 255, 0.35) 100%);
    border-radius: 0;
    border: 1.5px solid rgba(13, 217, 255, 0.4);
    box-shadow: 0 0 12px rgba(13, 217, 255, 0.3),
                inset 0 2px 4px rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.publish-modern-btn:hover .publish-icon-wrapper {
    background: linear-gradient(135deg, rgba(13, 217, 255, 0.3) 0%, rgba(13, 217, 255, 0.5) 100%);
    border-color: rgba(13, 217, 255, 0.6);
    box-shadow: 0 0 20px rgba(13, 217, 255, 0.5),
                inset 0 2px 4px rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.05);
}

.publish-icon {
    width: 20px;
    height: 20px;
    transition: all 0.4s ease;
    filter: drop-shadow(0 2px 4px rgba(13, 217, 255, 0.4));
}

.publish-modern-btn:hover .publish-icon {
    filter: drop-shadow(0 0 8px rgba(13, 217, 255, 0.8));
}

/* Contenu texte - une seule ligne pour Dashboard */
.publish-text-content {
    display: flex;
    align-items: center;
    line-height: 1;
    z-index: 1;
}

.publish-text-main {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #0dd9ff;
    text-shadow: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.publish-modern-btn:hover .publish-text-main {
    text-shadow: none;
}

/* Bouton Dashboard texte mobile */
.dashboard-text-link {
    background: transparent;
    border: none;
    color: #0dd9ff;
    padding: 0.5rem 0.4rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.dashboard-text-link:hover {
    color: #09c2de;
    opacity: 0.8;
    text-shadow: none;
}

/* Effets desktop spectaculaires pour le bouton texte "Dashboard" */
@media (min-width: 1200px) {
    .dashboard-text-link {
        position: relative;
        transition: all 320ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform, letter-spacing;
        backface-visibility: hidden;
    }
    /* Soulignement néon animé */
    .dashboard-text-link::before {
        content: '';
        position: absolute;
        left: 8%;
        right: 8%;
        bottom: 4px;
        height: 2px;
        background: linear-gradient(90deg, rgba(13,217,255,0) 0%, rgba(13,217,255,0.9) 50%, rgba(13,217,255,0) 100%);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 380ms ease;
        filter: drop-shadow(0 0 6px rgba(13,217,255,0.7));
    }
    /* Halo néon subtil autour du texte */
    .dashboard-text-link::after {
        content: '';
        position: absolute;
        inset: -6px -10px;
        border-radius: 0;
        background: radial-gradient(60% 50% at 50% 90%, rgba(13,217,255,0.18), rgba(13,217,255,0) 70%);
        opacity: 0;
        transition: opacity 380ms ease;
        pointer-events: none;
    }
    .dashboard-text-link:hover {
        color: #0dd9ff;
        opacity: 1;
        transform: translateY(-1px);
        text-shadow: none;
    }
    .dashboard-text-link:hover::before {
        transform: scaleX(1);
    }
    .dashboard-text-link:hover::after {
        opacity: 1;
    }
}

/* Compatibilité avec l'ancien style (backward compatibility) */
.publish-text-link {
    background: rgba(13, 217, 255, 0.1);
    border: 1px solid rgba(13, 217, 255, 0.3);
    border-radius: 0;
    color: #0dd9ff;
    padding: 0.5rem 0.8rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.publish-text-link:hover {
    background: rgba(13, 217, 255, 0.2);
    border-color: #0dd9ff;
    color: #0dd9ff;
}

/* Typewriter désactivé pour performance CPU */
.typewriter-text {
    display: inline;
    /* Animation désactivée */
    animation: none !important;
}

.typewriter-cursor {
    display: inline-block;
    margin-left: 2px;
    opacity: 1;
    /* Animation désactivée */
    animation: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MARQUEE (TUNNEL BETA)
   ═══════════════════════════════════════════════════════════ */

.beta-tunnel-label {
    background: rgba(218, 165, 32, 0.15);
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 0;
    padding: 6px 12px;
    color: #DAA520;
    font-size: 0.7rem;
    font-weight: bold;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    will-change: auto;
}

.beta-tunnel-label:hover {
    background: rgba(218, 165, 32, 0.3);
    border-color: #DAA520;
    color: #FFD700;
}

.catalog-marquee-container {
    flex: 1;
    max-width: 800px; /* Agrandi 400 → 800px (+100% supplémentaires) */
    min-width: 500px; /* Agrandi 250 → 500px (+100% supplémentaires) */
    overflow: hidden;
}

.catalog-marquee-text {
    color: #FFD700;
    font-size: 0.75rem;
    font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════
   3 BOUTONS FINAUX (HYPER PROFIL, LOUPE, VISITEUR)
   ═══════════════════════════════════════════════════════════ */

/* BOUTON VISITEUR - ULTRA-OPTIMISÉ (0% CPU) */
.visitor-v-btn {
    min-width: 160px;
    padding: 10px;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #000000;
    border: 2px solid rgba(218, 165, 32, 0.3);
    border-radius: 0;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.visitor-v-btn:hover {
    transform: translateY(-1px) scale(1.01);
    border-color: rgba(218, 165, 32, 0.6);
}

/* Avatar visiteur (si connecté) */
.visitor-avatar-container {
    width: 60px; /* Agrandi */
    height: 60px; /* Agrandi */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0;
}

.visitor-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* SVG V doré (si visiteur) */
.visitor-v-svg {
    width: 60px; /* Agrandi */
    height: 60px; /* Agrandi */
    display: block;
    margin: 0 auto;
}

/* Texte visiteur */
.visitor-greeting {
    font-size: 0.85rem;
    font-weight: 600;
    color: #DAA520;
}

.menu-jump-btn {
    min-width: 100px;
    padding: 10px;
    background: rgba(9, 194, 222, 0.1);
    border: 1px solid rgba(9, 194, 222, 0.3);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.menu-jump-btn:hover {
    background: rgba(9, 194, 222, 0.2);
    border-color: #09c2de;
}

.menu-jump-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.menu-jump-text {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #09c2de;
    line-height: 1.2;
    text-align: center;
}

.menu-jump-text-hyper {
    font-weight: 800;
}

.menu-jump-text-profil {
    font-weight: 600;
    color: #08b8d8;
}

.menu-jump-btn:hover .menu-jump-text {
    color: #0dd9ff;
}

.search-btn-modern {
    padding: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(218, 165, 32, 0.1);
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 0;
    cursor: pointer;
}

.search-btn-modern:hover {
    background: rgba(218, 165, 32, 0.2);
    border-color: #DAA520;
}

.search-btn-modern.active {
    background: rgba(218, 165, 32, 0.3);
    border-color: #FFD700;
}

.search-icon-svg {
    width: 32px;
    height: 32px;
}

.visitor-v-panel-simple {
    width: 110px;
    height: 45px;
    padding: 6px;
    background: rgba(218, 165, 32, 0.1);
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 0;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
}

.visitor-v-panel-simple:hover {
    background: rgba(218, 165, 32, 0.2);
    border-color: #DAA520;
}

.visitor-simple-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 6px;
}

.visitor-simple-text {
    font-size: 0.65rem;
    font-weight: 600;
    color: #DAA520;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visitor-simple-avatar {
    width: 20px;
    height: 20px;
}

.visitor-v-svg-simple {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   BOUTONS JUMP (CATÉGORIES, RAYONS, DEVISES, LANGUES, PAYS)
   ═══════════════════════════════════════════════════════════ */

.jump-btn-prototype {
    background: rgba(218, 165, 32, 0.1);
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 0;
    color: #DAA520;
    padding: 0 0.8rem;
    font-weight: 600;
    font-size: 0.7rem;
    height: 32px;
    line-height: 32px;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.jump-btn-prototype:hover {
    background: rgba(218, 165, 32, 0.2);
    border-color: #DAA520;
    color: #FFD700;
}

/* ═══════════════════════════════════════════════════════════
   🔧 FIX ZOOM ET VIEWPORT - CORRECTION DES PROBLÈMES DE ZOOM
   ═══════════════════════════════════════════════════════════ */

/* Correction globale pour permettre le zoom utilisateur */
html {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden; /* Empêcher le scroll horizontal global */
}

body {
    touch-action: manipulation;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    overflow-x: hidden; /* Empêcher le scroll horizontal global */
    width: 100%; /* S'assurer que le body ne déborde pas */
    max-width: 100%; /* Limiter la largeur maximale */
}

/* Fix pour éviter la double barre de défilement */
.nk-wrap {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

.container-fluid {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════
   🚪 BOUTONS CATALOGUES - PORTES ÉLÉGANTES VERS DIFFÉRENTS MONDES
   Chaque bouton est une invitation vers un univers unique
   ═══════════════════════════════════════════════════════════ */

/* BASE COMMUNE - GRANDI POUR MEILLEURE VISIBILITÉ */
.catalog-btn {
    min-width: 80px;
    height: 48px;
    padding: 5px 5px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    border: 2px solid rgba(218, 165, 32, 0.4);
    border-radius: 0;
    color: #FFD700;
    font-weight: 700;
    font-size: 0.55rem;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 10px rgba(218, 165, 32, 0.2);
}

/* Effet de profondeur subtil */
.catalog-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.3s ease;
    z-index: 1;
}

/* LAST - Porte vers la nouveauté */
.catalog-btn[data-catalog="ads"] {
    border-color: rgba(34, 197, 94, 0.5);
    color: #4ade80;
    background: var(--gradient-ads);
    box-shadow: 
        0 4px 12px rgba(34, 197, 94, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 15px rgba(34, 197, 94, 0.2);
}

.catalog-btn[data-catalog="ads"]:hover {
    border-color: rgba(34, 197, 94, 0.8);
    color: #4ade80;
    background: var(--gradient-ads-hover);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

/* TOP - Porte vers l'excellence */
.catalog-btn[data-catalog="top"] {
    border-color: rgba(251, 191, 36, 0.5);
    color: #fcd34d;
    background: var(--gradient-top);
    box-shadow: 
        0 4px 12px rgba(251, 191, 36, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 15px rgba(251, 191, 36, 0.2);
}

.catalog-btn[data-catalog="top"]:hover {
    border-color: rgba(251, 191, 36, 0.8);
    color: #fcd34d;
    background: var(--gradient-top-hover);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
}

/* SPONSORS - Porte vers le premium */
.catalog-btn[data-catalog="sponsors"] {
    border-color: rgba(168, 85, 247, 0.5);
    color: #c084fc;
    background: var(--gradient-sponsors);
    box-shadow: 
        0 4px 12px rgba(168, 85, 247, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 15px rgba(168, 85, 247, 0.2);
}

.catalog-btn[data-catalog="sponsors"]:hover {
    border-color: rgba(168, 85, 247, 0.8);
    color: #c084fc;
    background: var(--gradient-sponsors-hover);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4);
}

/* PUBLICITAIRE - Porte vers l'urgence */
.catalog-btn[data-catalog="advertisements"] {
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
    background: var(--gradient-advertisements);
    box-shadow: 
        0 4px 12px rgba(239, 68, 68, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 15px rgba(239, 68, 68, 0.2);
}

.catalog-btn[data-catalog="advertisements"]:hover {
    border-color: rgba(239, 68, 68, 0.8);
    color: #f87171;
    background: var(--gradient-advertisements-hover);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* Effet de brillance au hover */
.catalog-btn:hover::before {
    left: 100%;
}

/* État actif - Background orange Commercify */
.catalog-btn.active {
    background: linear-gradient(135deg, #FF8C00 0%, #FFA500 50%, #FFB347 100%) !important;
    border: 2px solid #FFD700 !important;
    color: #000000 !important;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.3);
    font-weight: 600;
}

.catalog-btn.active .catalog-label {
    color: #000000 !important;
    font-weight: 700;
}

.catalog-btn.active .catalog-text {
    color: #000000 !important;
    font-weight: 600;
}

.catalog-btn.active i {
    color: #000000 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Icônes des catalogues - GRANDIES */
.catalog-btn i {
    font-size: 1.2rem;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.catalog-btn:hover i {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
}

/* Labels des catalogues - PLUS VISIBLES */
.catalog-label {
    font-size: 0.5rem;
    opacity: 1;
    font-weight: 800;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-shadow: none;
}

.catalog-btn:hover .catalog-label {
    opacity: 1;
    transform: translateY(-1px);
    color: #FFFFFF;
    text-shadow: none;
}

/* Texte des catalogues - AMÉLIORÉ */
.catalog-text {
    font-size: 0.6rem;
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    text-shadow: none;
}

.catalog-btn:hover .catalog-text {
    color: #FFFFFF;
    transform: scale(1.1);
    text-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   BOUTON VISITEUR SANS MODAL (LEVEL 1)
   ═══════════════════════════════════════════════════════════ */

.btn-visitor-no-modal {
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-visitor-no-modal:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(218, 165, 32, 0.3);
    border-color: rgba(218, 165, 32, 0.6);
}

.btn-visitor-no-modal:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(218, 165, 32, 0.2);
}

/* Animation de pulsation pour attirer l'attention sur le bouton visiteur */
.btn-visitor-no-modal .btn-landscape-icon {
    animation: visitorPulse 12s ease-in-out infinite; /* 6s → 12s (2x plus lent) */
}

@keyframes visitorPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Style pour indiquer que c'est un bouton de navigation */
.btn-visitor-no-modal::after {
    content: "→";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #DAA520;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-visitor-no-modal:hover::after {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   MODAL VISITEUR - STYLE NOIR & DORÉ COMMERCIFY
   ═══════════════════════════════════════════════════════════ */

/* Modal principal - Style noir Commercify */
#modalvisitor .modal-content {
    /* background géré par PHP */
    border: 1px solid #DAA520 !important;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

#modalvisitor .modal-header {
    /* background géré par PHP */
    border-bottom: 1px solid #DAA520 !important;
    color: #DAA520 !important;
}

#modalvisitor .modal-body {
    /* background géré par PHP */
    color: #ffffff !important;
    padding: 2rem !important;
}

.modal-visitor-logo {
    max-width: 80px;
    height: auto;
    margin-right: 15px;
    filter: drop-shadow(0 0 10px rgba(218, 165, 32, 0.6));
}

.modal-visitor-avatar-container {
    width: 100px;
    height: 100px;
    border-radius: 0;
    border: 3px solid #DAA520;
    margin: 0 auto 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    box-shadow: 0 4px 15px rgba(218, 165, 32, 0.3);
}

.modal-visitor-avatar-letter {
    color: #DAA520;
    font-size: 3rem;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.modal-visitor-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-visitor-username {
    color: #DAA520;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 20px 0;
    text-shadow: none;
}

.modal-visitor-actions {
    margin-top: 30px;
}

.modal-visitor-actions .btn {
    width: 100%;
    margin-bottom: 10px;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 0;
    transition: all 0.3s ease;
}

.modal-visitor-actions .btn-primary {
    background: #DAA520;
    border-color: #DAA520;
    color: #000000;
}

.modal-visitor-actions .btn-primary:hover {
    background: #B8860B;
    border-color: #B8860B;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(218, 165, 32, 0.4);
}

.modal-visitor-actions .btn-secondary {
    background: rgba(218, 165, 32, 0.1);
    border-color: #DAA520;
    color: #DAA520;
}

.modal-visitor-actions .btn-secondary:hover {
    background: rgba(218, 165, 32, 0.2);
    border-color: #B8860B;
    color: #B8860B;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(218, 165, 32, 0.2);
}

.modal-visitor-actions .btn-danger {
    background: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
    color: #dc3545;
}

.modal-visitor-actions .btn-danger:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: #c82333;
    color: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2);
}

/* Style pour logout-btn-custom dans le modal */
.modal-visitor-actions .logout-btn-custom {
    background: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
    color: #dc3545;
}

.modal-visitor-actions .logout-btn-custom:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: #c82333;
    color: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2);
}

.modal-visitor-actions .form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #DAA520;
    color: #ffffff;
    border-radius: 0;
    padding: 12px 15px;
}

.modal-visitor-actions .form-control:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #B8860B;
    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.2);
    color: #ffffff;
}

.modal-visitor-actions .form-control option {
    background: #000000;
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════
   PRELOADER SPÉCIAL SWITCH PUBLISHER
   ═══════════════════════════════════════════════════════════ */

#publisher-switch-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.publisher-switch-loading-container {
    text-align: center;
    color: #DAA520;
    max-width: 400px;
    padding: 2rem;
}

.publisher-switch-loading-spinner {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
}

.publisher-switch-loading-spinner .spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid #DAA520;
    border-radius: 0;
    animation: publisherSwitchSpin 6s linear infinite; /* 3s → 6s (2x plus lent) */
}

.publisher-switch-loading-spinner .spinner-ring:nth-child(2) {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    border-top-color: #B8860B;
    animation-delay: -0.5s;
}

.publisher-switch-loading-spinner .spinner-ring:nth-child(3) {
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    border-top-color: #FFD700;
    animation-delay: -1s;
}

@keyframes publisherSwitchSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.publisher-switch-loading-text h3 {
    color: #DAA520;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: none;
}

.publisher-switch-loading-text p {
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.publisher-switch-loading-text strong {
    color: #DAA520;
    font-weight: 700;
}

.loading-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.loading-dots span {
    color: #DAA520;
    font-size: 1.5rem;
    font-weight: bold;
    animation: publisherSwitchDots 1.5s infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes publisherSwitchDots {
    0%, 20% { opacity: 0; }
    50% { opacity: 1; }
    80%, 100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   PRELOADER SPÉCIAL CHANGEMENT DE LANGUE
   ═══════════════════════════════════════════════════════════ */

#language-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#language-loading-overlay.active {
    opacity: 1;
}

.language-loading-container {
    text-align: center;
    color: #DAA520;
    max-width: 400px;
    padding: 2rem;
}

.language-loading-spinner {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
}

.language-loading-spinner .spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid #DAA520;
    border-radius: 0;
    animation: languageSwitchSpin 3s linear infinite; /* 1.5s → 3s (2x moins de CPU) */
}

.language-loading-spinner .spinner-ring:nth-child(2) {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    border-top-color: #B8860B;
    animation-delay: -0.5s;
}

.language-loading-spinner .spinner-ring:nth-child(3) {
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    border-top-color: #FFD700;
    animation-delay: -1s;
}

@keyframes languageSwitchSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.language-loading-text h3 {
    color: #DAA520;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: none;
}

.language-loading-text p {
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.language-loading-text strong {
    color: #DAA520;
    font-weight: 700;
}

.language-loading-text .loading-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.language-loading-text .loading-dots span {
    color: #DAA520;
    font-size: 1.5rem;
    font-weight: bold;
    animation: languageSwitchDots 1.5s infinite;
}

.language-loading-text .loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.language-loading-text .loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes languageSwitchDots {
    0%, 20% { opacity: 0; }
    50% { opacity: 1; }
    80%, 100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   MODAL DASHBOARD - DESIGN WINDOWS 10 TABLETTE
   ═══════════════════════════════════════════════════════════ */

/* Optimisation radicale : masquer complètement le modal du rendu quand fermé */
#dashboardModal:not(.show) {
    display: none !important;
}

#dashboardModal:not(.show) * {
    animation-play-state: paused !important;
    transition: none !important;
}


#dashboardModal.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#dashboardModal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100vh !important;
}

.dashboard-modal-content {
    /* background géré par PHP */
    color: #ffffff !important;
    border: none !important;
    border-radius: 0;
    height: 100vh !important;
    overflow: hidden !important; /* Fix Safari iOS: Un seul overflow sur le body */
}

.dashboard-modal-header {
    position: relative;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-bottom: 2px solid #DAA520;
    padding: 2rem 0;
}

.dashboard-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #DAA520;
    border-radius: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #DAA520;
    transition: all 0.3s ease;
    z-index: 10;
}

.dashboard-modal-close:hover {
    background: #DAA520;
    color: #000000;
    transform: scale(1.1);
}

.dashboard-modal-title {
    color: #DAA520;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: none;
    margin-bottom: 0.5rem;
}

.dashboard-modal-subtitle {
    color: #ffffff;
    font-size: 1.2rem;
    opacity: 0.8;
    margin-bottom: 0;
}

.dashboard-modal-body {
    background: #000000;
    padding: 3rem 0;
}

.dashboard-section-title {
    color: #DAA520;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    text-shadow: none;
    position: relative;
}

.dashboard-section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #DAA520, transparent);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.dashboard-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border: 2px solid transparent;
    border-radius: 0;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.1) 0%, rgba(218, 165, 32, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.dashboard-card:hover {
    border-color: #DAA520;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(218, 165, 32, 0.3);
}

.dashboard-card:hover::before {
    opacity: 1;
}

.dashboard-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

.dashboard-card.disabled:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

.dashboard-card-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.4rem; /* Espacement uniforme entre icône et contenu */
}

.dashboard-card-icon {
    color: #DAA520;
    margin-bottom: 0; /* Supprimé pour utiliser gap du parent */
    transition: all 0.3s ease;
}

.dashboard-card:hover .dashboard-card-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(218, 165, 32, 0.5));
}

.dashboard-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.dashboard-card-title {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: none;
}

.dashboard-card-subtitle {
    color: #cccccc;
    font-size: 0.9rem;
    margin-bottom: 0;
    opacity: 0.8;
}

.dashboard-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
}

.dashboard-card-badge .badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-card-badge .badge-warning {
    background: linear-gradient(135deg, #ffc107, #ff8c00);
    color: #000000;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.dashboard-card-badge .badge-info {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
}

.dashboard-card-badge .badge-secondary {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

/* Animations d'entrée - Supprimées car causent des bugs sur iPad */
.dashboard-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

#dashboardModal.show .dashboard-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Délais d'animation supprimés */
/*
.dashboard-card:nth-child(1) { animation-delay: 0.1s; }
...
*/

@keyframes dashboardCardSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        padding: 0 0.5rem;
    }
    
    .dashboard-card {
        min-height: 150px;
        padding: 1rem;
    }
    
    .dashboard-card-title {
        font-size: 1.1rem;
    }
    
    .dashboard-card-subtitle {
        font-size: 0.8rem;
    }
    
    .dashboard-modal-title {
        font-size: 2rem;
    }
    
    .dashboard-modal-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    
    .dashboard-card {
        min-height: 120px;
        padding: 0.8rem;
    }
    
    .dashboard-card-icon svg {
        width: 36px;
        height: 36px;
    }
}

/* ═══════════════════════════════════════════════════════════
   MODAL CHANGEMENT DE LANGUE - STYLES GLOBAUX
   ═══════════════════════════════════════════════════════════ */

/* Optimisation radicale : masquer complètement le modal du rendu quand fermé */
#languageModal:not(.show) {
    content-visibility: hidden;
    contain: strict;
}

#languageModal:not(.show) * {
    animation-play-state: paused !important;
    transition: none !important;
}

/* Reset complet et modal noir fullscreen */
#languageModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    /* background géré par PHP */
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
}

#languageModal.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#languageModal .modal-dialog {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

#languageModal .modal-content {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    /* background géré par PHP */
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Header du modal */
#languageModal .language-modal-header {
    /* background géré par PHP */
    border-bottom: 1px solid rgba(218,165,32,0.3) !important;
    padding: 2rem !important;
    margin: 0 !important;
    position: relative !important;
}

/* Body du modal */
#languageModal .language-modal-body {
    /* background géré par PHP */
    color: #ffffff !important;
    padding: 2rem !important;
    margin: 0 !important;
    flex: 1 !important;
    overflow-y: auto !important;
}

/* Titre du modal */
#languageModal .language-modal-title {
    color: #DAA520 !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-shadow: none !important;
}

#languageModal .language-modal-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.2rem !important;
    margin: 0 !important;
}

/* Bouton fermeture */
#languageModal .language-modal-close {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: rgba(218, 165, 32, 0.1) !important;
    border: 1px solid rgba(218, 165, 32, 0.3) !important;
    border-radius: 0;
    color: #DAA520 !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

#languageModal .language-modal-close:hover {
    background: rgba(218, 165, 32, 0.2) !important;
    border-color: #DAA520 !important;
    transform: scale(1.05) !important;
}

/* Titre des sections */
#languageModal .language-section-title {
    color: #DAA520 !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    margin: 2rem 0 1rem 0 !important;
    text-align: center !important;
}

/* Barre de recherche */
#languageModal .language-search-wrapper {
    position: relative !important;
    max-width: 500px !important;
    margin: 0 auto !important;
}

#languageModal .language-search-input {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(218,165,32,0.3) !important;
    border-radius: 0;
    padding: 1rem 1rem 1rem 3rem !important;
    color: #ffffff !important;
    font-size: 1.1rem !important;
    width: 100% !important;
    outline: none !important;
    transition: all 0.3s ease !important;
}

#languageModal .language-search-input:focus {
    border-color: #DAA520 !important;
    box-shadow: 0 0 15px rgba(218,165,32,0.2) !important;
    background: rgba(255,255,255,0.08) !important;
}

#languageModal .language-search-input::placeholder {
    color: rgba(255,255,255,0.6) !important;
}

#languageModal .language-search-icon {
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #DAA520 !important;
    z-index: 10 !important;
}

/* Grille des langues */
#languageModal .language-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-top: 2rem !important;
}

/* Cartes de langue */
#languageModal .language-card {
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.05) 0%, rgba(0, 0, 0, 0.8) 100%) !important;
    border: 1px solid rgba(218, 165, 32, 0.2) !important;
    border-radius: 0;
    padding: 1.5rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

#languageModal .language-card:hover {
    border-color: #DAA520 !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(218, 165, 32, 0.2) !important;
}

#languageModal .language-card.active {
    border-color: #DAA520 !important;
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%) !important;
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.3) !important;
}

#languageModal .language-card.upcoming {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

#languageModal .language-card.upcoming:hover {
    transform: none !important;
    border-color: rgba(218, 165, 32, 0.2) !important;
}

/* Contenu des cartes */
#languageModal .language-card-inner {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

#languageModal .language-flag {
    width: 40px !important;
    height: 40px !important;
    border-radius: 0;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

#languageModal .language-info {
    flex: 1 !important;
}

#languageModal .language-name {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
}

#languageModal .language-native-name {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9rem !important;
}

/* Badge "Bientôt" */
#languageModal .language-upcoming-badge {
    background: rgba(218, 165, 32, 0.2) !important;
    color: #DAA520 !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 0;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Check pour langue active */
#languageModal .language-check {
    color: #DAA520 !important;
    font-size: 1.2rem !important;
}

/* Message aucun résultat */
#languageModal #noResultsMessage {
    text-align: center !important;
    padding: 3rem 0 !important;
}

/* Backdrop noir */
#languageModal + .modal-backdrop {
    /* background géré par PHP */
    opacity: 1 !important;
    z-index: 999998 !important;
}

.public-page-btn-custom,
.logout-btn-custom {
    background: rgba(218, 165, 32, 0.1);
    border: 1px solid rgba(218, 165, 32, 0.3);
    color: #DAA520;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
}

.public-page-btn-custom:hover,
.logout-btn-custom:hover {
    background: rgba(218, 165, 32, 0.2);
    border-color: #DAA520;
    color: #FFD700;
}

.modal-btn-icon {
    font-size: 1.2rem;
}

/* ═══════════════════════════════════════════════════════════
   RÈGLES GLOBALES FORCÉES - PRIORITÉ MAXIMALE
   ═══════════════════════════════════════════════════════════ */

/* RÈGLE DE DEBUG GLOBALE - TRÈS VISIBLE */
.btn-visitor-header[data-debug-badge-level] {
    position: relative !important;
}

.btn-visitor-header[data-debug-badge-level]::after {
    content: "Badge:" attr(data-debug-badge-level) " | Label:" attr(data-mobile-label) !important;
    position: absolute !important;
    top: -30px !important;
    left: 0 !important;
    background: red !important;
    color: white !important;
    padding: 2px 4px !important;
    font-size: 10px !important;
    border-radius: 0;
    white-space: nowrap !important;
    z-index: 9999 !important;
}

/* MASQUAGE FORCÉ Menu Jump et Carte du monde : smartphone uniquement (≤767.98px) ; tablette 768-1024px non concernée */
@media (max-width: 1024px) {
    /* FORCER l'ordre d'affichage uniforme sur TOUS les mobiles/tablettes */
    .header-logo-section {
        order: 1 !important;
    }
    
    .header-actions {
        order: 2 !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }
    
    .header-wrap-codepen {
        overflow: visible !important;
    }
    
    .logo-wrapper {
        order: 1 !important;
    }
    
    .btn-search-header-tablet {
        order: 2 !important;
    }
    
    .catalog-selector-trigger {
        order: 3 !important;
    }
    
    .header-flag-btn-after-logo {
        order: 1 !important;
    }
    
    .catalog-nav-item-dashboard-tablet {
        order: 2 !important;
    }
    
    .btn-visitor-header {
        order: 3 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        max-height: none !important;
        min-width: 9.5em !important;
        white-space: nowrap !important;
    }
    
    /* FORCER l'affichage du label court sur TOUS les mobiles/tablettes */
    .btn-visitor-header.mobile-label-enabled .visitor-name-header,
    .btn-visitor-header.mobile-label-enabled .visitor-avatar-img-header,
    .btn-visitor-header.mobile-label-enabled .visitor-btn-label-default,
    .btn-visitor-header.mobile-label-enabled .visitor-btn-label-hover,
    .btn-visitor-header[data-mobile-label] .visitor-name-header,
    .btn-visitor-header[data-mobile-label] .visitor-avatar-img-header,
    .btn-visitor-header[data-mobile-label] .visitor-btn-label-default,
    .btn-visitor-header[data-mobile-label] .visitor-btn-label-hover {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Masquer le texte par défaut */
    .btn-visitor-header.mobile-label-enabled {
        font-size: 0 !important;
        text-indent: -9999px !important;
    }
    
    .btn-visitor-header.mobile-label-enabled::before,
    .btn-visitor-header[data-mobile-label]::before {
        content: attr(data-mobile-label) !important;
        font-weight: 900 !important;
        color: #000000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        height: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1.2rem !important;
        text-indent: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        background: transparent !important;
        border: none !important;
        line-height: 1 !important;
    }
    
    /* Sur tablette : afficher "login" au lieu de "V" pour le bouton visiteur (badge non connecté) */
    .btn-visitor-header[data-tablet-label]::before {
        content: attr(data-tablet-label) !important;
    }
    
    /* Centrer le SVG V dans le bouton visiteur */
    .visitor-v-svg,
    .visitor-v-svg-simple {
        display: block !important;
        margin: 0 auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE ADAPTATIONS
   ═══════════════════════════════════════════════════════════ */

/* Breakpoint obsolète remplacé par la logique DashLite */

/* Breakpoint obsolète remplacé par la logique DashLite - Utilise maintenant les breakpoints md, sm, xs */

@media (max-width: 767px) {
    .catalog-header {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        min-height: 70px !important;
        height: auto !important;
        /* background géré par PHP */
    }
    
    html[dir="rtl"] .header-actions {
        margin-inline-end: 0 !important;
    }
    
    /* Réduction des tailles de police pour viewport FHD et moins */
    .line-marquee {
        font-size: calc(var(--font-size-sm) - 0.3rem);
    }
    
    .catalog-marquee-text {
        font-size: calc(var(--font-size-sm) - 0.3rem);
    }
    
    .btn-landscape {
        font-size: calc(var(--font-size-xs) - 0.3rem);
    }
    
    .btn-landscape-text {
        font-size: calc(var(--font-size-xs) - 0.3rem);
    }
    
    .btn-landscape-icon {
        font-size: calc(var(--font-size-sm) - 0.3rem);
    }
    
    .nk-content {
        padding-top: 220px;
    }
    
    .catalog-logo {
        max-height: 40px;
        transform: scaleX(1.2);
    }
    
    
    .publish-text-link,
    .menu-jump-btn,
    .catalog-btn {
        min-width: 45px !important; /* ULTRA COMPACT */
        height: 32px !important; /* Hauteur réduite */
        padding: 2px 4px !important; /* Padding minimal */
        font-size: 0.4rem !important; /* Texte très petit */
    }
    
    /* FORCER le masquage Menu Jump et Carte du monde sur smartphone */
    .catalog-selector-trigger,
    a.catalog-selector-trigger {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    .mappemonde-link,
    a.mappemonde-link,
    #mappemonde-link {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* FORCER l'ordre d'affichage uniforme */
    .header-logo-section {
        order: 1 !important;
    }
    
    .header-actions {
        order: 2 !important;
    }
    
    .logo-wrapper {
        order: 1 !important;
    }
    
    .btn-search-header-tablet {
        order: 2 !important;
    }
    
    .catalog-selector-trigger {
        order: 3 !important;
    }
    
    .header-flag-btn-after-logo {
        order: 1 !important;
    }
    
    .catalog-nav-item-dashboard-tablet {
        order: 2 !important;
    }
    
    .btn-visitor-header {
        order: 3 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* FORCER l'affichage du label court sur mobile */
    .btn-visitor-header .visitor-name-header,
    .btn-visitor-header .visitor-avatar-img-header,
    .btn-visitor-header .visitor-btn-label-default,
    .btn-visitor-header .visitor-btn-label-hover {
        display: none !important;
    }
    
    .btn-visitor-header::before {
        content: attr(data-mobile-label) !important;
        font-weight: 700 !important;
        font-size: 0.65rem !important;
        color: inherit !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .publish-modern-btn {
        padding: 0.4rem 0.6rem !important;
        gap: 0.5rem !important;
        border-radius: 0;
    }
    
    .publish-icon-wrapper {
        width: 24px !important;
        height: 24px !important;
    }
    
    .publish-icon {
        width: 14px !important;
        height: 14px !important;
    }
    
    .publish-text-main {
        font-size: 0.65rem !important;
    }
    
    .catalog-btn i {
        font-size: 0.45rem !important; /* Icônes ultra petites */
    }
    
    .catalog-label {
        font-size: 0.28rem !important; /* Labels ultra petits */
        letter-spacing: 0.3px !important;
    }
    
    .search-btn-modern {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }
    
    .search-icon-svg {
        width: 30px;
        height: 30px;
    }
    
    /* Centrer le SVG V dans le bouton visiteur */
    .visitor-v-svg,
    .visitor-v-svg-simple {
        display: block !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    .catalog-header {
        /* background géré par PHP */
        min-height: 180px;
    }
    
    .nk-content {
        padding-top: 60px !important; /* Hauteur du header sticky sur smartphone */
    }
    
    
    .catalog-logo {
        max-height: 35px;
    }
    
    .line-marquee {
        display: none !important;
    }
    
    .visitor-v-panel-simple {
        width: 90px !important;
        height: 45px !important;
        max-width: 90px !important;
    }
    
    .visitor-v-svg,
    .visitor-v-svg-simple {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    
    .visitor-simple-text {
        font-size: 0.6rem !important;
    }
    
    .visitor-simple-avatar {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   OPTIMISATION PERFORMANCES - PREFERS-REDUCED-MOTION
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .catalog-header {
        animation: none !important;
        will-change: auto !important;
        /* background géré par PHP */
        padding: 15px !important;
    }
    
    .catalog-header::before {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   📋 LIGNE CATALOGUES - NOUVELLE LIGNE DÉDIÉE
   ═══════════════════════════════════════════════════════════ */

.line-catalogs {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 0;
    gap: 8px;
}

.line-catalogs .row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* Styles pour le texte des catalogues */
.catalog-text {
    font-size: 0.4rem;
    font-weight: 600;
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform: translateZ(0);
}

.catalog-btn:hover .catalog-text {
    color: #FFD700;
    transform: scale(1.02);
}

/* ═══════════════════════════════════════════════════════════
   🎨 HARMONIE GLOBALE - COMPOSITION VISUELLE COHÉRENTE
   L'art de l'équilibre entre forme et fonction
   ═══════════════════════════════════════════════════════════ */

/* Synchronisation des transitions pour une chorégraphie fluide */
.btn-search-landscape,
.catalog-btn,
.btn-hyperprofil-landscape,
.btn-visitor-landscape {
    will-change: auto;
    backface-visibility: hidden;
}

/* Rythme harmonieux des interactions */
.line-buttons-landscape .row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Orchestration des effets de profondeur */
.line-buttons-landscape {
    position: relative;
    z-index: 10;
}

/* Effet de respiration collective au hover de la zone */
.line-buttons-landscape:hover .btn-search-landscape,
.line-buttons-landscape:hover .catalog-btn,
.line-buttons-landscape:hover .btn-hyperprofil-landscape,
.line-buttons-landscape:hover .btn-visitor-landscape {
    transform: translateY(-1px);
    transition-delay: calc(var(--btn-index, 0) * 0.05s);
}

/* Gradation subtile de l'attention */
.btn-search-landscape { --btn-index: 1; }
.catalog-btn:nth-of-type(1) { --btn-index: 2; }
.catalog-btn:nth-of-type(2) { --btn-index: 3; }
.catalog-btn:nth-of-type(3) { --btn-index: 4; }
.catalog-btn:nth-of-type(4) { --btn-index: 5; }
.btn-hyperprofil-landscape { --btn-index: 6; }
.btn-visitor-landscape { --btn-index: 7; }

/* Cohérence des ombres portées */
.btn-search-landscape,
.catalog-btn,
.btn-hyperprofil-landscape,
.btn-visitor-landscape {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* 🚀 OPTIMISATION ULTIME */
.catalog-logo,
.megaphone-layer,
.btn-landscape,
.catalog-btn {
    contain: layout style paint;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Équilibre chromatique global */
:root {
    --gold-primary: #DAA520;
    --gold-bright: #FFD700;
    --cyan-primary: #09c2de;
    --cyan-bright: #0dd9ff;
    --green-primary: #22c55e;
    --green-bright: #4ade80;
    --yellow-primary: #fbbf24;
    --yellow-bright: #fcd34d;
    --purple-primary: #a855f7;
    --purple-bright: #c084fc;
    --red-primary: #ef4444;
    --red-bright: #f87171;
}

/* ═══════════════════════════════════════════════════════════
   OPTIMISATION PERFORMANCES - DÉSACTIVATION SUR MOBILE
   ═══════════════════════════════════════════════════════════ */

/* Breakpoint obsolète remplacé par la logique DashLite */

/* ═══════════════════════════════════════════════════════════
   BOUTON DE MENU COMPACT - FORCER LA VISIBILITÉ
   ═══════════════════════════════════════════════════════════ */

/* Styles pour le bouton de menu compact - CACHÉ sur petits écrans */
.nk-nav-compact {
    display: none !important; /* Caché par défaut sur petits écrans */
    visibility: hidden !important;
    opacity: 0 !important;
    position: relative !important;
    z-index: 1000 !important;
    background-color: var(--bs-dark) !important;
    color: var(--bs-warning) !important;
    border-radius: 0;
    width: 40px !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    margin-left: 10px !important;
    border: 2px solid var(--bs-warning) !important;
}

.nk-nav-compact:hover {
    background-color: var(--bs-warning) !important;
    color: var(--bs-dark) !important;
    transform: scale(1.1) !important;
}

.nk-nav-compact .icon {
    font-size: 1.2em !important;
    color: inherit !important;
}

/* S'assurer que le conteneur du bouton est visible */
.nk-menu-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 10px !important;
}

/* CACHÉ sur tous les écrans sauf les très grands (XL, XXL, 4K) */
@media (max-width: 1199.98px) {
    .nk-nav-compact {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* VISIBLE uniquement sur très grands écrans (à partir de 1200px) où le menu peut être fixé */
@media (min-width: 1200px) {
    .nk-nav-compact {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* CACHER le bouton mégaphone sur les très grands écrans où le menu est toujours visible */
@media (min-width: 1200px) {
    .nk-menu-trigger.d-xl-none {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

@media (min-width: 1400px) {
    .nk-menu-trigger.d-xl-none {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

@media (min-width: 1920px) {
    .nk-menu-trigger.d-xl-none {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

@media (min-width: 2560px) {
    .nk-menu-trigger.d-xl-none {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

@media (min-width: 3840px) {
    .nk-menu-trigger.d-xl-none {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

@media (min-width: 1200px) {
    .nk-nav-compact {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (min-width: 1400px) {
    .nk-nav-compact {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (min-width: 1920px) {
    .nk-nav-compact {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (min-width: 2560px) {
    .nk-nav-compact {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (min-width: 3840px) {
    .nk-nav-compact {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   MESSAGE SYSTÈME - POSITIONNEMENT NORMAL (AU-DESSUS DES VIGNETTES)
   ═══════════════════════════════════════════════════════════ */

.system-message-wrapper {
    width: 100%;
    margin-bottom: 1rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.system-message-wrapper .container-fluid {
    max-width: 100%;
}

.system-message-wrapper #alertMessage {
    margin: 0;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-size: 1rem;
    padding: 1rem 1.25rem;
    position: relative;
    animation: slideDownMessage 0.3s ease-out;
    word-wrap: break-word;
    word-break: break-word;
}

@keyframes slideDownMessage {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive - Smartphones */
@media (max-width: 767.98px) {
    .system-message-wrapper {
        padding: 0 0.5rem;
    }
    
    .system-message-wrapper #alertMessage {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
    }
    
    .system-message-wrapper #alertMessage strong {
        font-size: 0.875rem;
        display: block;
        margin-bottom: 0.25rem;
    }
    
    .system-message-wrapper #alertMessage small {
        font-size: 0.75rem;
        display: block;
    }
}

/* Responsive - Tablettes */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .system-message-wrapper #alertMessage {
        font-size: 0.9375rem;
        padding: 0.875rem 1.125rem;
    }
}

/* Assurer que le message est toujours visible */
.system-message-wrapper #alertMessage .icon {
    font-size: 1.2em;
    margin-right: 0.5rem;
}

.system-message-wrapper #alertMessage .close {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.system-message-wrapper #alertMessage .close:hover {
    opacity: 1;
}

/* Compteur de fermeture automatique */
.system-message-wrapper #alertMessage #countdown {
    font-weight: 600;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   TABLETTES (768-1024) : RESET COMPLET DU BOUTON VISITEUR
   Supprime TOUTE la complexité mobile-label / ::before.
   Le bouton se comporte comme en desktop, libellé « login ».
   Ce bloc est placé en FIN DE FICHIER pour gagner en cascade.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {

    /* 1. Reset du bouton lui-même — style desktop */
    .catalog-header .btn-visitor-header[data-tablet-label],
    .btn-visitor-header[data-tablet-label].mobile-label-enabled,
    .btn-visitor-header[data-tablet-label][data-mobile-label] {
        font-size: 0.875rem !important;
        text-indent: 0 !important;
        padding: 0.5rem 1rem !important;
        min-height: 44px !important;
        min-width: auto !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        background: #FFD700 !important;
        color: #000000 !important;
        border: 2px solid #FFD700 !important;
        font-weight: 700 !important;
        flex-shrink: 0 !important;
        gap: 0 !important;
    }

    /* 2. Supprimer le pseudo-élément ::before (plus de label court) */
    .catalog-header .btn-visitor-header[data-tablet-label]::before,
    .btn-visitor-header[data-tablet-label].mobile-label-enabled::before,
    .btn-visitor-header[data-tablet-label][data-mobile-label]::before {
        content: none !important;
        display: none !important;
    }

    /* 3. Masquer le label par défaut « login » (redondant si affiché via ::before) */
    .btn-visitor-header[data-tablet-label] .visitor-btn-label-default {
        display: none !important;
    }

    /* 4. Afficher le label « login » (déjà présent dans le HTML) */
    .btn-visitor-header[data-tablet-label] .visitor-btn-label-hover {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
        left: auto !important;
        font-size: 0.875rem !important;
        font-weight: 700 !important;
        color: #000000 !important;
        text-indent: 0 !important;
    }

    /* 5. Sécuriser les parents — ne pas couper le bouton */
    .catalog-header .header-actions,
    .catalog-header .header-wrap-codepen {
        overflow: visible !important;
    }
}