/* ═══════════════════════════════════════════════════════════
   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: "Orbitron";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/Orbitron-V35.woff2') format('woff2');
}
@font-face {
    font-family: "Rajdhani";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/Rajdhani-300.woff2') format('woff2');
}
@font-face {
    font-family: "Rajdhani";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Rajdhani-400.woff2') format('woff2');
}
@font-face {
    font-family: "Rajdhani";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Rajdhani-500.woff2') format('woff2');
}
@font-face {
    font-family: "Rajdhani";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Rajdhani-600.woff2') format('woff2');
}
@font-face {
    font-family: "Rajdhani";
    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: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E") center / contain no-repeat;
    margin-right: 4px;
    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: calc(10px + 0.25rem) !important;
        padding-right: calc(10px + 0.25rem) !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;
    }

    .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: calc(10px + 0.25rem) !important;
        padding-right: calc(10px + 0.25rem) !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,
    .btn-search-landscape,
    .catalog-nav-item-search,
    .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,
    .catalog-nav-item-search {
        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,
    .btn-search-landscape svg,
    .catalog-nav-item-search 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,
    .catalog-nav-item-search:hover,
    .btn-search-landscape.active,
    .catalog-nav-item-search.active {
        transform: none !important;
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
    }

    .btn-search-landscape:hover svg,
    .catalog-nav-item-search:hover svg,
    .btn-search-landscape.active svg,
    .catalog-nav-item-search.active svg,
    .btn-search-landscape:hover .search-icon-header,
    .catalog-nav-item-search:hover .search-icon-header {
        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: calc(10px + 0.25rem) !important;
        padding-right: calc(10px + 0.25rem) !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;
    }

    .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;
    }
    
    /* 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: calc(10px + 0.25rem) !important;
        padding-right: calc(10px + 0.25rem) !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 Carte du monde sur smartphone et tablette */
    .cfy-header-options-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 */
    }
    
    .cfy-header-options-link,
    a.cfy-header-options-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;
    }

    .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 {
    /* background, border-bottom-color et box-shadow définis via variables CSS */
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        padding-left: calc(10px + 0.25rem) !important;
        padding-right: calc(10px + 0.25rem) !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;
}


/* 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;
}

/* 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 */
}

/* Décalage vers la gauche à l'ouverture des modales (corrigé 2026-09-25) :
   html porte la scrollbar (overflow-x:hidden ci-dessus), donc body.modal-open{overflow:hidden}
   ne la retire pas ; la compensation padding-right de Bootstrap 5 (ScrollBarHelper, bundle.js)
   rétrécissait alors tout le flux sous .nk-header-fixed de ~15-17px. Aucune compensation nécessaire. */
body.modal-open,
body.swal2-shown {
    padding-right: 0 !important;
}

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-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-logo {
    display: block;
    height: 72px;
    width: auto;
    margin: 0 auto 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-overlay .language-loading-container {
    text-align: center;
    color: #DAA520;
    max-width: 520px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#language-loading-overlay .language-loading-logo {
    display: block;
    height: 72px;
    width: auto;
    margin: 0 0 2rem;
}

#language-loading-overlay .language-loading-flag {
    display: block;
    width: 44px;
    height: 33px;
    object-fit: cover;
    border-radius: 3px;
}

#language-loading-overlay .language-loading-spinner {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 0 2.5rem;
}

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

#language-loading-overlay .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-overlay .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-overlay .language-loading-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

#language-loading-overlay .language-loading-text p {
    color: #ffffff;
    font-size: 1.35rem;
    margin: 0 0 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

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

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

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

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

#language-loading-overlay .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;
}

/* 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;
    }

    .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: calc(10px + 0.25rem) !important;
        padding-right: calc(10px + 0.25rem) !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: 0 !important; /* Contrat header flow <1200 : pas de compensation fantôme */
    }
    
    .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 */
    }
    
    .cfy-header-options-link,
    a.cfy-header-options-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;
    }

    .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 — hauteur réelle du contenu, pas 180px fantôme */
        min-height: 0;
        height: auto !important;
    }
    
    .nk-content {
        padding-top: 0 !important; /* Contrat header flow : header relative pousse le contenu */
    }
    
    
    .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 plateforme : styles déplacés dans commercify_theme_panels.css (§ Message plateforme). */

/* ═══════════════════════════════════════════════════════════
   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;
    }
}

/* ═══════════════════════════════════════════════════════════
   FIX — chevauchement des boutons du header sur tablette (768-1199px)
   Cause : Menu Jump, Carte du monde, Dashboard et Login étaient
   forcés à ne jamais rétrécir (flex-shrink:0 / min-width fixes) tout
   en gardant overflow:visible → au lieu de rétrécir ou de tronquer,
   leur contenu débordait par-dessus les boutons voisins.
   On restaure un rétrécissement sûr avec troncature (ellipsis) au
   lieu du débordement visuel. Placé en toute fin de fichier pour
   gagner la cascade sur les règles précédentes de même spécificité.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .catalog-header .header-actions,
    .catalog-header .header-wrap-codepen {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .catalog-header .cfy-header-options-link,
    .catalog-header .catalog-nav-item-dashboard-tablet,
    .catalog-header .btn-visitor-header,
    .catalog-header .btn-visitor-header[data-tablet-label] {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .catalog-header .visitor-name-header {
        max-width: 100px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}
.header-wrap-codepen .line-logo-left .catalog-logo {
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
}

@media (max-width: 1024px) {
    .header-wrap-codepen .line-logo-left .catalog-logo {
        height: 30px !important;
        max-height: 30px !important;
    }
}

.line-logo-left .header-flag-btn-after-logo {
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.line-logo-left .flag-img-after-logo {
    height: 30px;
    width: 50px;
    max-width: 50px;
    object-fit: fill;
}