/* ########################################################################################################
 * RTL Support CSS - Commercify
 * ########################################################################################################
 */

html[dir="rtl"] {
    direction: rtl;
    --rtl-nk-menu-toggle-mr: 0px;
    --rtl-nk-menu-toggle-ml: 0px;
}

/* start (et non right) : identique en RTL, mais un bloc dir="ltr" / dir="auto" (texte juridique FR/EN,
   contenu saisi par un éditeur) s'aligne selon son propre sens. */
html[dir="rtl"] body {
    text-align: start;
}

/* ========================================================================================================
 * MENU DASHLITE A DROITE
 * ======================================================================================================== */

html[dir="rtl"] .nk-sidebar,
html[dir="rtl"] .nk-sidebar.nk-sidebar-fixed {
    left: auto !important;
    right: 0 !important;
    border-right: none !important;
    border-left: 1px solid var(--sb-line, var(--cfy-t-line)) !important;
}

/* WRAP - Padding à droite au lieu de gauche (Desktop uniquement) */
@media (min-width: 1200px) {
    html[dir="rtl"] .nk-sidebar + .nk-wrap,
    html[dir="rtl"] .nk-sidebar-overlay + .nk-wrap {
        padding-left: 0 !important;
        /* Menu déplié (290px) : le contenu doit être poussé, pas superposé */
        padding-right: 290px !important;
    }
    
    /* Sidebar compact (76px) */
    html[dir="rtl"] .nk-sidebar.is-compact + .nk-wrap {
        padding-right: 76px !important;
    }

    /* Variables CSS non utilisées (les styles inline PHP gèrent maintenant les espacements) */
    html[dir="rtl"] .nk-sidebar.is-compact:not(.cfy-menu-hover-expand:hover) {
        --rtl-nk-menu-toggle-mr: 0px;
        --rtl-nk-menu-toggle-ml: 0px;
    }
}

/* Menu actif : visible en RTL */
html[dir="rtl"] .nk-sidebar.nk-sidebar-active {
    transform: translateX(0) !important;
}

/* ========================================================================================================
 * HEADER - Position depuis la droite
 * ======================================================================================================== */

/* Desktop uniquement : header décalé de la largeur du menu, seulement quand le menu est présent.
   Menu masqué : aucun .nk-sidebar dans le DOM, le header reste pleine largeur (left:0 / right:0). */
@media (min-width: 1200px) {
    html[dir="rtl"] .nk-sidebar + .nk-wrap > .nk-header-fixed,
    html[dir="rtl"] .nk-sidebar-overlay + .nk-wrap > .nk-header-fixed {
        left: 0 !important;
        right: 290px !important;
        transition: right 450ms ease;
    }
}

/* Desktop uniquement : sidebar compact */
@media (min-width: 1200px) {
    html[dir="rtl"] .nk-sidebar.is-compact + .nk-wrap > .nk-header-fixed {
        right: 76px !important;
    }
}

/* Mobile/Tablette : annuler le right pour sidebar compact */
@media (max-width: 991px) {
    html[dir="rtl"] .nk-sidebar.is-compact + .nk-wrap > .nk-header-fixed {
        right: 0 !important;
    }
}

/* ========================================================================================================
 * HEADER PUBLISHER STICKY — Ne pas passer sous le menu Dashlite en RTL (menu à droite)
 * ======================================================================================================== */
@media (min-width: 1200px) {
    html[dir="rtl"] .nk-sidebar + .nk-wrap .page-publisher-typology[data-sticky-desktop="1"] .publisher-header-card.publisher-header-sticky,
    html[dir="rtl"] .nk-sidebar-overlay + .nk-wrap .page-publisher-typology[data-sticky-desktop="1"] .publisher-header-card.publisher-header-sticky {
        left: 0 !important;
        right: 290px !important;
    }
    html[dir="rtl"] .nk-sidebar.is-compact + .nk-wrap .page-publisher-typology[data-sticky-desktop="1"] .publisher-header-card.publisher-header-sticky {
        left: 0 !important;
        right: 76px !important;
    }
}

/* Container du header */
html[dir="rtl"] .nk-header .container-fluid,
html[dir="rtl"] .nk-header-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ========================================================================================================
 * MESSAGES SYSTÈME - Positionnement forcé en RTL/LTR
 * ======================================================================================================== */

/* Header top + message applicatif : structure verticale simple (ligne boutons puis ligne message) */
.catalog-header {
    flex-direction: column !important;
    align-items: stretch !important;
}

.catalog-header > .header-wrap-codepen {
    width: 100% !important;
    max-width: 100% !important;
}

/* Conteneur message dans le header top */
.catalog-header > .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: right !important;
    padding: 0.5rem 1rem 0 1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    max-height: none !important;
}

/* ========================================================================================================
 * HEADER TOP - RTL : Séparer les groupes logo/loupe/menu jump des autres boutons
 * Groupe 1 (à droite en RTL) : Logo, Loupe, Menu Jump
 * Groupe 2 (à gauche en RTL) : Carte, Flag, Dashboard, Visiteur
 * ======================================================================================================== */

/* Catalogue header - direction RTL */
html[dir="rtl"] .catalog-header {
    direction: rtl !important;
}

/* Header wrap - RTL natif avec space-between pour séparer les groupes */
html[dir="rtl"] .header-wrap-codepen {
    direction: rtl !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Bouton menu dashlite - Marge depuis le bord droit en RTL */
html[dir="rtl"] .nk-nav-toggle.d-xl-none {
    margin-inline-start: var(--cfy-header-edge-offset, 10px) !important;
    margin-inline-end: 0 !important;
}

/* Gap de 10px entre dashboard et visiteur en RTL */
html[dir="rtl"] .btn-visitor-header {
    margin-inline-start: var(--cfy-header-edge-offset, 10px) !important;
    margin-inline-end: 0 !important;
}

/* Groupe Logo/Loupe/Menu Jump - À droite en RTL, direction interne RTL */
html[dir="rtl"] .header-logo-section {
    direction: rtl !important;
    display: flex !important;
    align-items: center !important;
    margin-inline-start: var(--cfy-header-edge-offset, 10px) !important;
    margin-inline-end: 0 !important;
}

html[dir="rtl"] .header-logo-section .line-logo,
html[dir="rtl"] .header-logo-section .line-logo-left {
    direction: rtl !important;
    display: flex !important;
    align-items: center !important;
}

/* Alignement du logo à droite en RTL sur tablettes et smartphones (incluant iPad Mini) */
@media (max-width: 1024px) {
    html[dir="rtl"] .header-logo-section {
        justify-content: flex-end !important;
        margin-right: 0 !important;
        margin-left: auto !important;
    }
    
    html[dir="rtl"] .line-logo-left {
        justify-content: flex-end !important;
    }
    
    html[dir="rtl"] .header-zone-topleft {
        justify-content: flex-end !important;
    }
    
    /* Correction largeur header RTL mobile/tablette */
    html[dir="rtl"] .catalog-header {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    
    html[dir="rtl"] .header-wrap-codepen {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Supprimer la marge droite du conteneur parent en RTL mobile/tablette */
    html[dir="rtl"] .nk-wrap,
    html[dir="rtl"] .nk-content {
        margin-right: 0 !important;
    }
    
    /* Masquer Carte du monde sur smartphone et tablette en RTL (incluant iPad Mini) */
    html[dir="rtl"] .cfy-header-options-link {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Groupe Actions - À gauche en RTL, direction interne RTL */
html[dir="rtl"] .header-actions {
    direction: rtl !important;
    display: flex !important;
    align-items: center !important;
}

/* Navigation center - Au centre */
html[dir="rtl"] .header-nav-center {
    direction: rtl !important;
    flex: 1 !important;
}

/* ========================================================================================================
 * RTL SMARTPHONES - Alignement boutons dashboard et visiteur contre le bord gauche
 * ======================================================================================================== */

/* Smartphones RTL uniquement : Aligner les boutons contre le bord gauche avec 10px de padding */
@media (max-width: 575px) {
    /* Alignement du header-actions contre le bord gauche (visuellement à droite en RTL) */
    /* En RTL, padding-right correspond au bord gauche visuel */
    html[dir="rtl"] .header-actions {
        padding-inline-start: var(--cfy-header-edge-offset, 10px) !important;
        padding-inline-end: 0 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
    }
    
    /* Renforcer le gap de 10px entre dashboard et visiteur en RTL smartphones */
    html[dir="rtl"] .btn-visitor-header {
        margin-inline-start: var(--cfy-header-edge-offset, 10px) !important;
        margin-inline-end: 0 !important;
    }
}

/* Menu Dashlite - À droite en RTL */
html[dir="rtl"] .nk-nav-toggle {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
    float: none !important;
}

/* Menu mobile - À gauche en RTL */
html[dir="rtl"] .mobile-nav-toggle {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    float: none !important;
}

/* Compatibilité - Anciennes classes */
html[dir="rtl"] .btn-lang-menu {
    float: none !important;
}

html[dir="rtl"] .btn-search {
    float: none !important;
}

html[dir="rtl"] .logo-container {
    float: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Line buttons landscape */
html[dir="rtl"] .line-buttons-landscape {
    direction: rtl !important;
}

html[dir="rtl"] .line-buttons-landscape .catalog-button {
    float: right !important;
}

/* ========================================================================================================
 * CONTENU PRINCIPAL
 * ======================================================================================================== */

/* Sous 1200px, le contenu garde le même retrait latéral qu'en LTR (symétrique) : l'annuler ici faisait déborder le mur
   de 10px de chaque côté (vignettes rognées, barre des catalogues collée aux bords de l'écran). */

/* Grid des vignettes inversée */
html[dir="rtl"] .row.g-0 {
    direction: rtl !important;
}

html[dir="rtl"] .product-card {
    text-align: right !important;
}

/* Bouton à cocher des vignettes - Position inversée en RTL */
html[dir="rtl"] .vignette-checkbox {
    right: auto !important;
    left: 8px !important;
}

/* === VIGNETTES — MIROIR COMPLET DU RECTO ===
   LTR : avatar + pin's + date en haut à gauche, boutons (+, retourner, localité) en haut à droite.
   RTL : exact miroir. Le flex hérite de direction:rtl, l'avatar se place donc naturellement au bord droit. */
html[dir="rtl"] .product-badges {
    left: auto !important;
    right: 1rem !important;
}

/* Pin's sous l'avatar : accroché au bord de départ (droit), il s'étend vers l'intérieur de la carte */
html[dir="rtl"] .vignette-urgent-pin {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .location-toggle {
    right: auto;
    left: 5px;
}
html[dir="rtl"] .location-toggle.vignette-categories-rayon-toggle {
    right: auto;
    left: 38px;
}
html[dir="rtl"] .vignette-flip-toggle {
    right: auto;
    left: 5px;
}
html[dir="rtl"] .vignette-flip-toggle::before {
    right: -2px;
    left: -6px;
}
html[dir="rtl"] .vignette-flip-toggle-verso-back {
    right: auto !important;
    left: 5px !important;
}
html[dir="rtl"] .vignette-verso-close {
    right: auto !important;
    left: 37px !important;
}
@media (max-width: 576px) {
    html[dir="rtl"] .vignette-flip-toggle {
        right: auto;
        left: 5px;
    }
    html[dir="rtl"] .location-toggle.vignette-categories-rayon-toggle {
        right: auto;
        left: 35px;
    }
}

html[dir="rtl"] .location-info {
    right: auto;
    left: 0;
}
@media (min-width: 769px) {
    html[dir="rtl"] .location-info,
    html[dir="rtl"] .location-info li {
        text-align: left;
    }
    html[dir="rtl"] .location-info .badge {
        margin-left: 0;
        margin-right: 0.25rem;
    }
}

/* ========================================================================================================
 * INTERIEUR DU MENU DASHLITE - Inverser les éléments
 * ======================================================================================================== */

html[dir="rtl"] .nk-sidebar-head {
    padding-left: 20px !important;
    padding-right: 10px !important;
}

/* Bouton fixation menu */
html[dir="rtl"] .nk-menu-trigger {
    order: 1;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Items du menu - Padding à droite à 0 pour coller les icônes au bord (sauf en compact desktop) */
html[dir="rtl"] .nk-menu-item {
    text-align: right !important;
    padding-right: 0 !important; /* Coller les icônes au bord droit */
    padding-left: 12px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}



html[dir="rtl"] .nk-menu-link {
    flex-direction: row-reverse !important;
    text-align: right !important;
    padding-right: 0 !important; /* Forcer padding à 0 à droite */
    padding-left: 12px !important;
    margin-right: 0 !important;
}



/* Forcer le padding-right à 0 sur tous les éléments enfants du lien en RTL */
html[dir="rtl"] .nk-menu-link > * {
    margin-right: 0 !important;
    /* padding-right: 0 !important; */
}

html[dir="rtl"] .nk-menu-text {
    text-align: right !important;
    margin-right: 0 !important;
    margin-left: 8px !important;
    padding-right: 0 !important;
}

/* Icônes collées au bord droit en RTL - Styles très agressifs (SAUF en mode compact desktop) */
html[dir="rtl"] .nk-menu-icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    order: 1 !important; /* Forcer l'icône en premier (visuellement à droite) */
    position: relative !important;
    right: 0 !important;
}

/* Desktop compact : annuler les règles agressives */
@media (min-width: 1200px) {
    html[dir="rtl"] .nk-sidebar.is-compact:not(.cfy-menu-hover-expand:hover) .nk-menu-icon {
        position: static !important;
        right: auto !important;
        order: 0 !important;
        margin: 0 !important;
    }
}

/* Forcer les icônes à toucher le bord droit du conteneur (SAUF en mode compact desktop) */
html[dir="rtl"] .nk-menu-item .nk-menu-link .nk-menu-icon {
    margin-right: 0 !important;
    padding-right: 0 !important;
    right: 0 !important;
}

/* Desktop compact : annuler */
@media (min-width: 1200px) {
    html[dir="rtl"] .nk-sidebar.is-compact:not(.cfy-menu-hover-expand:hover) .nk-menu-item .nk-menu-link .nk-menu-icon {
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Approche alternative : Positionner les icônes au bord droit absolu en RTL */
html[dir="rtl"] .nk-menu-item {
    position: relative !important;
}

html[dir="rtl"] .nk-menu-item .nk-menu-link {
    justify-content: flex-end !important;
}

html[dir="rtl"] .nk-menu-item .nk-menu-link .nk-menu-icon {
    margin-right: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}


/* ========================================================================================================
 * RTL DESKTOP - MENU REPLIÉ : corriger l’alignement des toggles (artisanal Firefox -> CSS)
 * Sur certains items (nk-menu-toggle), l’alignement est trop collé au bord droit en compact.
 * ======================================================================================================== */
@media (min-width: 1200px) {
    /* Menu replié : padding symétrique pour centrer les icônes */
    html[dir="rtl"] .nk-sidebar.is-compact:not(.cfy-menu-hover-expand:hover) .nk-menu-item {
        padding: 4px 12px !important; /* Symétrique pour centrer */
    }

    html[dir="rtl"] .nk-sidebar.is-compact:not(.cfy-menu-hover-expand:hover) .nk-menu-link,
    html[dir="rtl"] .nk-sidebar.is-compact:not(.cfy-menu-hover-expand:hover) .nk-menu-item .nk-menu-link {
        justify-content: center !important; /* Centrer les icônes */
        padding: 0.625rem 12px !important; /* Symétrique */
    }

    /* CACHER LE TEXTE en mode compact - sinon il pousse les icônes hors écran ! */
    html[dir="rtl"] .nk-sidebar.is-compact:not(.cfy-menu-hover-expand:hover) .nk-menu-text {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        flex-grow: 0 !important;
    }

    /* Annuler TOUTES les règles agressives qui poussent hors de la zone - Spécificité maximale */
    html[dir="rtl"] .nk-sidebar.is-compact:not(.cfy-menu-hover-expand:hover) .nk-menu-icon,
    html[dir="rtl"] .nk-sidebar.is-compact:not(.cfy-menu-hover-expand:hover) .nk-menu-item .nk-menu-link .nk-menu-icon,
    html[dir="rtl"] .nk-sidebar.is-compact:not(.cfy-menu-hover-expand:hover) .nk-menu-link .nk-menu-icon {
        position: static !important; /* Au lieu de absolute/relative avec right:0 */
        right: auto !important;
        left: auto !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        order: 0 !important; /* Ordre normal au lieu de forcer à droite */
        flex-shrink: 0 !important;
    }
}

/* Badges/compteurs - Positionnés juste après la flèche en RTL (approche Dashlite) */
html[dir="rtl"] .nk-menu-badge {
    position: absolute !important;
    right: auto !important;
    left: 1.5rem !important; /* Juste après la flèche qui est à left: 0 */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* Badges dans les toggles - même approche */
    html[dir="rtl"] .nk-menu-toggle > .nk-menu-badge {
        position: absolute !important;
        right: auto !important;
        left: 1.5rem !important; /* Juste après la flèche */
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-left: -17px !important;
    }

/* Sous-menus */
html[dir="rtl"] .nk-menu-sub {
    padding-right: 0 !important; /* Pas de padding pour coller les toggles au bord */
    padding-left: 0 !important;
}

html[dir="rtl"] .nk-menu-sub .nk-menu-link {
    padding-right: 0 !important; /* Icônes collées au bord droit */
    padding-left: 1rem !important;
}

/* Icônes des sous-menus collées au bord droit en RTL */
html[dir="rtl"] .nk-menu-sub .nk-menu-icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
    order: 1 !important; /* Icône en premier (visuellement à droite) */
}

html[dir="rtl"] .nk-menu-sub .nk-menu-text {
    order: 2 !important; /* Texte après l'icône */
}

/* Switches (toggles) des sous-menus - Structure RTL alignée sur le modèle LTR */
/* En LTR: padding-left: 3.75rem, toggle à left: -3.75rem */
/* En RTL: padding-right: 3.75rem, toggle à right: -3.75rem */
html[dir="rtl"] .nk-menu-sub .custom-switch {
    padding-left: 0 !important;
    padding-right: 3.75rem !important; /* Équivalent du padding-left LTR */
    padding-top: 0.1rem !important; /* Espace réduit en haut */
    padding-bottom: 0.1rem !important; /* Espace réduit en bas */
    margin-top: 0.1rem !important; /* Marge réduite entre les lignes */
    margin-bottom: 0.1rem !important; /* Marge réduite entre les lignes */
}

html[dir="rtl"] .nk-menu-sub .custom-switch.custom-control-sm {
    padding-left: 0 !important;
    padding-right: 2.46875rem !important; /* Équivalent du padding-left LTR pour sm */
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    margin-top: 0.1rem !important;
    margin-bottom: 0.1rem !important;
}

html[dir="rtl"] .nk-menu-sub .custom-switch.custom-control-xl {
    padding-left: 0 !important;
    padding-right: 3.75rem !important; /* Équivalent du padding-left LTR pour xl */
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    margin-top: 0.1rem !important;
    margin-bottom: 0.1rem !important;
}

/* Exclure le padding-right pour les menu-item (bouton +) */
html[dir="rtl"] .nk-menu-sub .custom-switch.custom-control-xl.menu-item {
    padding-right: 0 !important; /* Pas de padding-right pour les menu-item */
}

/* Label (texte) - Structure normale comme en LTR */
html[dir="rtl"] .nk-menu-sub .custom-switch .custom-control-label {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    display: block !important;
}

/* Toggle positionné à droite, en miroir du LTR */
/* En LTR: left: -3.75rem, width: 3rem, height: 1.5rem (implicite) */
/* En RTL: right: -3.75rem, width: 3rem, height: 1.5rem */
html[dir="rtl"] .nk-menu-sub .custom-switch .custom-control-label::before {
    left: auto !important;
    right: -3.75rem !important; /* Équivalent de left: -3.75rem en LTR */
    top: -0.028125rem !important; /* Alignement vertical comme en LTR */
    width: 3rem !important;
    height: 1.5rem !important; /* Hauteur standard pour correspondre au LTR */
    border-radius: 0;
    position: absolute !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .nk-menu-sub .custom-switch.custom-control-sm .custom-control-label::before {
    left: auto !important;
    right: -2.46875rem !important; /* Équivalent de left: -2.46875rem en LTR */
    top: -0.028125rem !important; /* Alignement vertical */
    width: 1.96875rem !important;
    height: 1.125rem !important; /* Hauteur pour sm (proportionnelle) */
    border-radius: 0;
    position: absolute !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .nk-menu-sub .custom-switch.custom-control-xl .custom-control-label::before {
    left: auto !important;
    right: -3.75rem !important; /* Équivalent de left: -3.75rem en LTR */
    top: -0.028125rem !important; /* Alignement vertical */
    width: 3rem !important;
    height: 1.5rem !important; /* Hauteur standard */
    border-radius: 0;
    position: absolute !important;
    margin-right: 0 !important;
}

/* Cercle intérieur du toggle */
/* En LTR: left: -3.5rem, top: 0.25rem, width: 1rem, height: 1rem */
/* En RTL: right: -3.5rem, top: 0.25rem, width: 1rem, height: 1rem */
html[dir="rtl"] .nk-menu-sub .custom-switch .custom-control-label::after {
    left: auto !important;
    right: -3.5rem !important; /* Équivalent de left: -3.5rem en LTR */
    top: 0.25rem !important;
    width: 1rem !important;
    height: 1rem !important;
    border-radius: 0;
    position: absolute !important;
}

html[dir="rtl"] .nk-menu-sub .custom-switch.custom-control-sm .custom-control-label::after {
    left: auto !important;
    right: calc(-2.46875rem + 4px) !important; /* Équivalent de left: calc(-2.46875rem + 4px) en LTR */
    top: 0.2375rem !important;
    width: 0.65rem !important;
    height: 0.65rem !important;
    border-radius: 0;
    position: absolute !important;
}

html[dir="rtl"] .nk-menu-sub .custom-switch.custom-control-xl .custom-control-label::after {
    left: auto !important;
    right: -3.5rem !important; /* Équivalent de left: -3.5rem en LTR */
    top: 0.25rem !important;
    width: 1rem !important;
    height: 1rem !important;
    border-radius: 0;
    position: absolute !important;
}

/* Texte aligné à droite dans son espace disponible */
html[dir="rtl"] .nk-menu-sub .custom-switch .custom-control-label a {
    display: block !important;
    text-align: right !important;
    padding-right: 0 !important;
}

html[dir="rtl"] .nk-menu-sub .custom-switch .custom-control-label span {
    display: inline-block !important;
}

/* Hyper profil : une ligne = plusieurs liens catalogue (.hp-jump) separes par un
   ' / ' litteral, le tout dans un conteneur .hp-jump-row. Les regles RTL
   ci-dessus forcent 'display: block' sur chaque <a> du label, ce qui empile les
   segments (bug "nomrayon" puis " / " puis "nomSousRayon" sur des lignes
   separees). On restaure le flux inline pour ces seuls segments, afin d'obtenir
   la meme ligne unique qu'en LTR. Regle scopee html[dir="rtl"] : le LTR, qui
   fonctionne deja, n'est pas modifie. Specificite (0,5,2) > la regle
   'custom-control-label a' (0,4,2). */
html[dir="rtl"] .nk-menu-sub .custom-switch .custom-control-label span.hp-jump-row {
    display: inline !important;
    white-space: nowrap !important;
}

html[dir="rtl"] .nk-menu-sub .custom-switch .custom-control-label a.hp-jump {
    display: inline !important;
    white-space: nowrap !important;
}

/* Animation du toggle quand coché - en miroir du LTR */
/* En LTR: transform: translateX(1.5rem) */
/* En RTL: transform: translateX(-1.5rem) */
html[dir="rtl"] .nk-menu-sub .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(-1.5rem) !important; /* Équivalent inverse de translateX(1.5rem) en LTR */
}

html[dir="rtl"] .nk-menu-sub .custom-switch.custom-control-sm .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(-1.31875rem + 8px)) !important; /* Équivalent inverse de translateX(calc(1.31875rem - 8px)) en LTR */
}

html[dir="rtl"] .nk-menu-sub .custom-switch.custom-control-xl .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(-1.5rem) !important; /* Équivalent inverse de translateX(1.5rem) en LTR */
}

/* Input checkbox positionné à droite */
html[dir="rtl"] .nk-menu-sub .custom-switch .custom-control-input {
    left: auto !important;
    right: -3.75rem !important; /* Équivalent de left: 0 en LTR, mais positionné à droite */
    width: 1.5rem !important;
    height: 1.471875rem !important;
}

/* Suppression de toutes les bordures dans les sous-menus en RTL (rayons, hyperprofil, etc.) */
html[dir="rtl"] .nk-menu-sub .custom-control-label::before,
html[dir="rtl"] .nk-menu-sub .custom-control-label,
html[dir="rtl"] .nk-menu-sub .custom-switch .custom-control-label::before,
html[dir="rtl"] .nk-menu-sub .custom-switch .custom-control-label,
html[dir="rtl"] .nk-menu-sub .custom-control-input:checked ~ .custom-control-label::before,
html[dir="rtl"] .nk-menu-sub .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
html[dir="rtl"] .nk-menu-sub .custom-control-input:focus ~ .custom-control-label::before,
html[dir="rtl"] .nk-menu-sub .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
html[dir="rtl"] .nk-menu-sub .custom-control-label a,
html[dir="rtl"] .nk-menu-sub .custom-control-label span,
html[dir="rtl"] .nk-menu-sub .custom-control-label * {
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Conteneur menu-item avec bouton + - Correction RTL */
html[dir="rtl"] .nk-menu-sub .menu-item {
    position: relative !important;
    overflow: hidden !important;
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
    padding-bottom: 0.5rem !important;
    display: flex !important;
    flex-direction: column !important; /* Colonne : contenu en haut, bouton en bas */
    align-items: flex-start !important; /* Alignement à droite en RTL */
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
}

/* Boutons float-right dans les sous-menus - Correction RTL */
html[dir="rtl"] .nk-menu-sub .float-right {
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Correction spécifique pour le bouton + dans menu-item - Positionné en dessous en RTL */
html[dir="rtl"] .nk-menu-sub .menu-item .float-right {
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-top: 0.5rem !important; /* Espacement entre le contenu et le bouton */
    margin-bottom: 0 !important;
    order: 2 !important; /* Le bouton apparaît après le contenu (en dessous) */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 32px !important;
    height: 32px !important;
    align-self: flex-start !important; /* Aligné à droite en RTL */
}

/* Lien dans menu-item - Prend toute la largeur en haut */
html[dir="rtl"] .nk-menu-sub .menu-item > a {
    flex: 0 0 auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important; /* Prend toute la largeur disponible */
    width: 100% !important;
    overflow: hidden !important;
    order: 1 !important; /* Le lien apparaît avant le bouton (en haut) */
}

/* S'assurer que les éléments suivants ne sont pas affectés */
html[dir="rtl"] .nk-menu-sub .menu-item + .custom-switch,
html[dir="rtl"] .nk-menu-sub .menu-item + div {
    clear: both !important;
    margin-top: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Chevrons - Positionnés à gauche en RTL */
html[dir="rtl"] .nk-menu-toggle::after {
    right: auto !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateY(-50%) rotate(180deg) !important;
}

html[dir="rtl"] .nk-menu-toggle.active::after {
    transform: translateY(-50%) rotate(90deg) !important;
}

/* Labels Hyper-Profil et Murs Personnalisés - Alignement RTL */
html[dir="rtl"] .hyper-profil-heading > div,
html[dir="rtl"] .murs-perso-heading > div {
    justify-content: flex-end !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

html[dir="rtl"] .hyper-profil-heading,
html[dir="rtl"] .murs-perso-heading {
    padding-right: 0.25rem !important;
    padding-left: 1.8rem !important;
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
    text-align: right !important;
}

html[dir="rtl"] .hyper-profil-label,
html[dir="rtl"] .murs-perso-label {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .hyper-profil-label .label-full,
html[dir="rtl"] .murs-perso-label .label-full {
    text-align: right !important;
    display: inline-block !important;
    width: 100% !important;
}

/* ========================================================================================================
 * FOOTER
 * ======================================================================================================== */

html[dir="rtl"] .footer-grid {
    direction: rtl !important;
}

html[dir="rtl"] .footer-brand-section,
html[dir="rtl"] .footer-nav-section {
    text-align: right !important;
}

html[dir="rtl"] .social-icons-group {
    flex-direction: row-reverse !important;
}

/* ========================================================================================================
 * UTILITIES
 * ======================================================================================================== */

html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }

html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }

html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }

html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }

/* ========================================================================================================
 * HOMEPAGE - Zone pré-vignettes (sélecteur catalogues Commercify + icônes vues liste/carte/vignette)
 * En RTL : sélecteur à droite, icônes de vue à gauche.
 * ======================================================================================================== */
html[dir="rtl"] .cfy-vignettes-pre-banner .cfy-vignettes-pre-row,
html[dir="rtl"] .cfy-vignettes-pre-banner.row.cfy-vignettes-pre-row {
    flex-direction: row !important;
}
html[dir="rtl"] .cfy-vignettes-pre-banner .cfy-vignettes-pre-col-select {
    text-align: start !important;
}
html[dir="rtl"] .cfy-vignettes-pre-banner .cfy-vignettes-pre-col-view-icons {
    text-align: end !important;
}

/* ========================================================================================================
 * RESPONSIVE - Mobile/Tablette
 * ======================================================================================================== */

/* Desktop (≥1200px) : Menu toujours visible en RTL */
@media (min-width: 1200px) {
    html[dir="rtl"] .nk-sidebar {
        transform: translateX(0) !important;
    }
}

/* Mobile/Tablette (<1200px) : Menu caché par défaut en RTL */
@media (max-width: 1199px) {
    /* Annuler le padding du wrap même quand le menu est actif (overlay) */
    html[dir="rtl"] .nk-sidebar + .nk-wrap,
    html[dir="rtl"] .nk-sidebar-overlay + .nk-wrap,
    html[dir="rtl"] .nk-sidebar.nk-sidebar-active + .nk-wrap,
    html[dir="rtl"] .nk-wrap {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Header pleine largeur même quand le menu est actif (overlay) */
    html[dir="rtl"] .nk-header-fixed,
    html[dir="rtl"] .nk-sidebar + .nk-wrap > .nk-header-fixed,
    html[dir="rtl"] .nk-sidebar-overlay + .nk-wrap > .nk-header-fixed,
    html[dir="rtl"] .nk-sidebar.nk-sidebar-active + .nk-wrap > .nk-header-fixed {
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Menu caché par défaut (hors écran à droite) */
    html[dir="rtl"] .nk-sidebar {
        transform: translateX(100%) !important;
    }
    
    /* Menu visible quand activé (overlay, ne pousse pas le contenu) */
    html[dir="rtl"] .nk-sidebar.nk-sidebar-active {
        transform: translateX(0) !important;
    }
}


/* ========================================================================================================
 * CORRECTION RTL MOBILE/TABLETTE - Force direction sur conteneurs parents
 * ======================================================================================================== */

/* Smartphones et tablettes uniquement */
@media (max-width: 1199px) {
    html[dir="rtl"] body {
        direction: rtl !important;
    }
    
    html[dir="rtl"] .nk-wrap {
        direction: rtl !important;
    }
    
    html[dir="rtl"] .nk-content {
        direction: rtl !important;
    }
}

/* ========================================================================================================
 * MESSAGERIE - Support RTL complet
 * ======================================================================================================== */

/* Container principal de la messagerie */
html[dir="rtl"] .nk-chat,
html[dir="rtl"] .nk-chat-boxed {
    direction: rtl !important;
}

/* Panneau latéral (liste des conversations) */
html[dir="rtl"] .nk-chat-aside {
    left: auto !important;
    right: 0 !important;
    border-right: none !important;
    border-left: 1px solid var(--cfy-t-line) !important;
}

html[dir="rtl"] .nk-chat-aside-head {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-aside-user {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-aside-user .title {
    text-align: right !important;
    padding-right: 0 !important;
    padding-left: 0.5rem !important;
}

html[dir="rtl"] .nk-chat-aside-body {
    direction: rtl !important;
}

/* Liste de conversations */
html[dir="rtl"] .nk-chat-list {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-list .title {
    text-align: right !important;
}

html[dir="rtl"] .chat-list {
    direction: rtl !important;
}

html[dir="rtl"] .chat-item {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .chat-link {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

html[dir="rtl"] .chat-info {
    text-align: right !important;
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

html[dir="rtl"] .chat-info .name {
    text-align: right !important;
}

html[dir="rtl"] .chat-info .time {
    text-align: left !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .chat-preview {
    text-align: right !important;
}

html[dir="rtl"] .chat-preview .ad-title {
    text-align: right !important;
}

html[dir="rtl"] .chat-preview .message-preview {
    text-align: right !important;
}

html[dir="rtl"] .chat-preview .badge {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* Corps de la messagerie */
html[dir="rtl"] .nk-chat-body {
    direction: rtl !important;
}

html[dir="rtl"] .nk-chat-body.profile-shown {
    direction: rtl !important;
}

/* Tête de la messagerie */
html[dir="rtl"] .nk-chat-head {
    direction: rtl !important;
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .nk-chat-head-info {
    direction: rtl !important;
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .nk-chat-head-tools {
    direction: rtl !important;
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .nk-chat-head-user {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-head-user .user-card {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-head-user .user-info {
    text-align: right !important;
    margin-right: 0.75rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .nk-chat-head-user .lead-text {
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-head-user .sub-text {
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-body-close {
    order: -1 !important;
}

html[dir="rtl"] .nk-chat-body-close .nk-chat-hide {
    transform: scaleX(-1) !important;
}

/* Panneau de messages */
html[dir="rtl"] .nk-chat-panel {
    direction: rtl !important;
    text-align: right !important;
}

/* Messages */
html[dir="rtl"] .chat {
    direction: rtl !important;
}

/* Messages envoyés (is-me) - Positionnés à gauche en RTL */
html[dir="rtl"] .chat.is-me {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

html[dir="rtl"] .chat.is-me .chat-content {
    text-align: right !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

html[dir="rtl"] .chat.is-me .chat-bubbles {
    direction: rtl !important;
}

html[dir="rtl"] .chat.is-me .chat-bubble {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .chat.is-me .chat-msg {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .chat.is-me .chat-meta {
    text-align: right !important;
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .chat.is-me .chat-meta li {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

html[dir="rtl"] .chat.is-me .chat-meta li:not(:first-child)::before {
    content: "" !important;
    margin: 0 !important;
}

html[dir="rtl"] .chat.is-me .chat-meta li:not(:last-child)::after {
    content: "•" !important;
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

/* Messages reçus (is-you) - Positionnés à droite en RTL */
html[dir="rtl"] .chat.is-you {
    flex-direction: row !important;
    text-align: right !important;
}

html[dir="rtl"] .chat.is-you .chat-avatar {
    order: 1 !important;
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

html[dir="rtl"] .chat.is-you .chat-content {
    order: 2 !important;
    text-align: right !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .chat.is-you .chat-bubbles {
    direction: rtl !important;
}

html[dir="rtl"] .chat.is-you .chat-bubble {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .chat.is-you .chat-msg {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .chat.is-you .chat-meta {
    text-align: right !important;
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .chat.is-you .chat-meta li {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

html[dir="rtl"] .chat.is-you .chat-meta li:not(:first-child)::before {
    content: "" !important;
    margin: 0 !important;
}

html[dir="rtl"] .chat.is-you .chat-meta li:not(:last-child)::after {
    content: "•" !important;
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

/* Bulles de messages */
html[dir="rtl"] .chat-bubbles {
    direction: rtl !important;
}

html[dir="rtl"] .chat-bubble {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .chat-msg {
    text-align: right !important;
    direction: rtl !important;
}

/* Éditeur de message */
html[dir="rtl"] .nk-chat-editor {
    direction: rtl !important;
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .nk-chat-editor-form {
    direction: rtl !important;
    flex: 1 !important;
}

html[dir="rtl"] .nk-chat-editor-form .form-control,
html[dir="rtl"] .nk-chat-editor-form textarea {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-editor-form textarea::placeholder {
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-editor-upload {
    order: 1 !important;
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

html[dir="rtl"] .nk-chat-editor-tools {
    order: 2 !important;
    flex-direction: row-reverse !important;
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

html[dir="rtl"] .nk-chat-editor-tools li {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

/* Profil utilisateur dans la messagerie */
html[dir="rtl"] .nk-chat-profile {
    left: 0 !important;
    right: auto !important;
    border-right: 1px solid var(--cfy-t-line) !important;
    border-left: none !important;
    transform: translateX(-100%) !important; /* Caché à gauche en RTL par défaut */
    direction: rtl !important;
    text-align: right !important;
}

/* Profil visible - affiché correctement en RTL (seulement avec la classe .visible) */
html[dir="rtl"] .nk-chat-profile.visible {
    transform: none !important;
}

/* S'assurer que le profil reste caché même si profile-shown est sur le body */
html[dir="rtl"] .nk-chat-body.profile-shown .nk-chat-profile:not(.visible) {
    transform: translateX(-100%) !important; /* Forcer le cachement si pas .visible */
}

/* Padding inversé pour profile-shown en RTL */
html[dir="rtl"] .nk-chat-body.profile-shown {
    padding-right: 0 !important;
    padding-left: 365px !important;
}

/* Overlay du profil */
html[dir="rtl"] .nk-chat-profile-overlay {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
}

html[dir="rtl"] .nk-chat-profile .user-card {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .nk-chat-profile .user-info {
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-profile .chat-profile-group {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-profile .chat-profile-head {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-profile .chat-profile-head .title {
    text-align: right !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

html[dir="rtl"] .nk-chat-profile .chat-profile-head .indicator-icon {
    order: -1 !important;
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .nk-chat-profile .chat-profile-body-inner {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .nk-chat-profile .chat-profile-options {
    direction: rtl !important;
}

html[dir="rtl"] .nk-chat-profile .chat-option-link {
    flex-direction: row-reverse !important;
    text-align: right !important;
    padding-right: 0 !important;
    padding-left: 1rem !important;
}

html[dir="rtl"] .nk-chat-profile .chat-option-link .icon-circle {
    order: 1 !important;
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

html[dir="rtl"] .nk-chat-profile .chat-option-link .lead-text {
    order: 2 !important;
    text-align: right !important;
}

/* Select dans la tête de la messagerie */
html[dir="rtl"] .nk-chat-head-tools .form-select,
html[dir="rtl"] .nk-chat-head-tools select {
    direction: rtl !important;
    text-align: right !important;
    background-position: left 0.75rem center !important;
    padding-right: 0.75rem !important;
    padding-left: 2.25rem !important;
}

/* Boutons dans la tête de la messagerie */
html[dir="rtl"] .nk-chat-head-tools .btn {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

html[dir="rtl"] .nk-chat-head-tools .btn-icon {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

/* Responsive messagerie */
@media (max-width: 859px) {
    html[dir="rtl"] .nk-chat-aside {
        right: 0 !important;
        left: auto !important;
    }
    
    html[dir="rtl"] .nk-chat-body {
        right: 0 !important;
        left: auto !important;
    }
    
    html[dir="rtl"] .nk-chat-profile {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-100%) !important; /* Caché à gauche en RTL */
    }
    
    html[dir="rtl"] .nk-chat-profile.visible {
        transform: none !important;
    }
}

@media (min-width: 860px) {
    html[dir="rtl"] .nk-chat-aside {
        border-right: none !important;
        border-left: 1px solid var(--cfy-t-line) !important;
    }
    
    /* Largeur et padding du profil en RTL */
    html[dir="rtl"] .nk-chat-body.profile-shown {
        padding-right: 0 !important;
        padding-left: 365px !important;
    }
    
    html[dir="rtl"] .nk-chat-profile {
        width: 365px !important;
        border-right: 1px solid var(--cfy-t-line) !important;
        border-left: none !important;
    }
    
    /* S'assurer que le profil reste caché par défaut même avec profile-shown */
    html[dir="rtl"] .nk-chat-body.profile-shown .nk-chat-profile:not(.visible) {
        transform: translateX(-100%) !important;
    }
}

/* Bouton toggle du profil en RTL */
html[dir="rtl"] .nk-chat-profile-toggle {
    right: auto !important;
    left: -18px !important;
    margin-right: 0 !important;
    margin-left: 40px !important;
    transition: left 0.3s ease-in-out, margin 0.3s ease-in-out 0.2s !important;
}

html[dir="rtl"] .nk-chat-profile-toggle.active {
    margin-left: 0 !important;
}

@media (max-width: 1539.98px) {
    html[dir="rtl"] .profile-shown .nk-chat-profile-toggle {
        right: auto !important;
        left: 262px !important;
    }
    
    html[dir="rtl"] .has-apps-sidebar .profile-shown .nk-chat-profile-toggle {
        right: auto !important;
        left: -18px !important;
    }
}

/* Desktop large - règles supplémentaires */
@media (min-width: 1540px) {
    html[dir="rtl"] .nk-chat-body.profile-shown {
        padding-left: 365px !important;
        padding-right: 0 !important;
    }
}

/* ========================================================================================================
 * PRODUCT GALLERY SLIDER - Correction RTL pour vidéo + images (bug Slick RTL + fade + asNavFor)
 * ======================================================================================================== */

/* Forcer le positionnement correct du slider en RTL */
html[dir="rtl"] .product-gallery #sliderFor {
    direction: ltr !important;
}

html[dir="rtl"] .product-gallery #sliderFor .slick-track {
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    transform: translate3d(0, 0, 0) !important;
}

/* Forcer la largeur correcte du slick-list en RTL */
html[dir="rtl"] .product-gallery #sliderFor .slick-list {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Forcer la largeur des slides en RTL - éviter les duplications */
html[dir="rtl"] .product-gallery #sliderFor .slick-slide {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    float: left !important;
}

/* Seul le slide actif doit être visible */
html[dir="rtl"] .product-gallery #sliderFor .slick-slide:not(.slick-active) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

html[dir="rtl"] .product-gallery #sliderFor .slick-slide.slick-active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Empêcher les clones de Slick */
html[dir="rtl"] .product-gallery #sliderFor .slick-slide.slick-cloned {
    display: none !important;
}

/* ========================================================================================================
 * MODAL DES LANGUES - Support RTL
 * ======================================================================================================== */

/* Carte du monde - Positionnement symétrique en RTL */
html[dir="rtl"] #languageModal .language-modal-globe {
    right: auto !important;
    left: 80px !important;
    transform: translateY(-50%) !important; /* Maintenir le centrage vertical */
}

html[dir="rtl"] #languageModal .language-modal-globe:hover {
    transform: translateY(-50%) !important; /* Maintenir le centrage vertical */
}

html[dir="rtl"] #languageModal .language-modal-globe:active {
    transform: translateY(-50%) scale(0.98) !important; /* Maintenir le centrage vertical + scale */
}

/* Media query pour tablettes */
@media (max-width: 991.98px) {
    html[dir="rtl"] #languageModal .language-modal-globe {
        right: auto !important;
        left: 48px !important; /* Équivalent de right: 48px en LTR */
    }
}

/* Media query pour smartphones */
@media (max-width: 575.98px) {
    html[dir="rtl"] #languageModal .language-modal-globe {
        right: auto !important;
        left: 36px !important; /* Équivalent de right: 36px en LTR */
    }
}

/* ========================================================================================================
 * MODAL CARTE DU MONDE - Support RTL
 * ======================================================================================================== */

/* Inverser les marges des boutons toggle pour qu'ils restent centrés en RTL */
html[dir="rtl"] .map-view-toggle {
    margin-left: 12px !important;
    margin-right: auto !important;
}

/* Chevrons du fil de navigation Monde/Continent/Pays (map-view-btn) : inversés en RTL */
html[dir="rtl"] .map-view-btn + .map-view-btn::before {
    transform: scaleX(-1);
}

/* Liste Départements du panneau pays (symétrique de la liste Régions déjà en RTL via
   direction héritée) : aligner le compteur d'annonces à gauche en RTL comme .map-country-info-reg-ads */
html[dir="rtl"] .map-country-info-dep-ads {
    text-align: left;
}

/* ========================================================================================================
 * VIGNETTES - Correction margin-left en RTL smartphones uniquement
 * ======================================================================================================== */

/* RTL smartphones uniquement : remplacer margin-left -3.5px par 1px */
@media (max-width: 767.98px) {
    html[dir="rtl"] .nk-block-head .row.position-relative[style*="margin-left"],
    html[dir="rtl"] .nk-block .row.position-relative[style*="margin-left"],
    html[dir="rtl"] .row.position-relative[style*="margin-left"],
    html[dir="rtl"] .nk-block-head .row[style*="margin-left"],
    html[dir="rtl"] .nk-block .row[style*="margin-left"],
    html[dir="rtl"] .row[style*="margin-left"] {
        margin-left: 1px !important;
    }
}