@media (min-width:1537px) and (max-width: 1537px)
{
    ul#change_color li a {
        padding-left: 2px !important;
        padding-right: 5px !important;
    }
 
}
@media (min-width:300px) and (max-width: 1208px)
{
ul.navbar-nav.ml-auto.menu-middle a {
 
    padding-left: 8px !important; 
    padding-right: 7px  !important; 
}
ul#change_color li a {
    padding-left: 2px !important;
    padding-right: 5px !important;
}
 
}
 @media screen and (min-width: 991px) and (max-width: 1358px)
{
ul.navbar-nav.ml-auto.btn-connx a {
            font-size: 11px;
    margin-left: -3px !important;
    margin-right: 3px !important;
    padding: 8px 5px  
}
}
li.nav-item.text-center {
    margin: 0 9px 0 0;
}
@media (max-width : 992px)  
{
li.nav-item.text-center {
    margin: 10px 9px 0 0 !important;
}
 
}
@media (min-width : 992px) and (max-width : 1016px)
{
    .form_direction_ltr  li.nav-item.text-center {
        margin: 0 27px 0 0 !important;
 }

 .form_direction_rtl  li.nav-item.text-center {
    margin: 0 -70px 0 0 !important;
}
    .ml-auto {
         margin-right: -12px !important;
    }
}
@media screen and (min-width: 991px) and (max-width: 1016px)
{
    ul.navbar-nav.ml-auto.btn-connx a {
        font-size: 11px;
        margin-left: -17px !important;
        margin-right: -10px !important;
        padding: 5px 0px 
    }
    .fixed-top {
        right: 45px;
    }
}
 @media screen and (min-width: 991px) and (max-width: 1537px)
{
.navbar-expand-lg .navbar-collapse {
     left: 12%;
    position: absolute;
}
}
 @media screen and (min-width: 1087px) and (max-width: 1358px)
{
        ul.navbar-nav.ml-auto.menu-middle a {
     padding-right: 3px !important;
}
ul.navbar-nav.ml-auto.btn-connx a {
     margin-left: 0px !important;
    margin-right: 9px !important;
 }
}
/* Style the active class, and buttons on mouse-over */
.actives > a {
    color: #EE6F35 !important;
   }
   html, body ,.article-box .card-body p.card-text,.card-text{
    
    text-align: justify;
    }
   .text-slider > h1 , .text-slider > h5 ,.text-slider > h2, .text-slider > h3  
   {
    
    text-align: left;
   }
   .l-card__text > p 
   {
    
    text-align: justify !important;
   }
 @media (max-width : 991px )   {
        ul.navbar-nav.ml-auto.btn-connx.align-items-center.d-flex {
            position: relative;
        }
                #notifCart {
     background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    position: absolute !important;
    top: 3px !important;
}
        }
        @media (min-width : 992px ) and (max-width :  1537px) {
                #notifCart {
 
    top: -10px !important;
}
        }
#notifCart {
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    position: absolute;
         top: -8px   
}
.fa {
     color: #ffffff;
         font-size: 12px;
}
ul.navbar-nav.ml-auto.btn-connx a {
    background-color: #ee6f35db;
     padding: 8px 11px ;
    border-radius: 30px;
    border: 1px solid #EE6F35;
}
ul.navbar-nav.ml-auto.btn-connx a:hover {
    background-color: #1568B1;
    color: #EE6F35;
    border: 1px solid #1568B1;
}
 .dropdown-item.auth {
    padding: 0.25rem 1rem !important;
 }
.section-FAQ , .edit-profile-section , .container-fluid, .section-gallery {
    padding-top: 5% !important;
 }
 .section-services > .section-FAQ {
    padding: 0px  !important;
}
div#navbarSupportedContent {
    background: white;
}
#navbarSupportedContent  .dropdown-toggle::after{
    margin-left: 0;
 }
 a.dropdown-toggle.dropbtn.display-desktop.notification-ring {
    padding: 9px 7px;
}
 
@media (max-width: 1358px){
    a.dropdown-toggle.dropbtn.display-desktop.notification-ring {
        padding: 10px 8px!important;
    }  
    i.fa.fa-shopping-cart {
     font-size: 11px!important;
    }  
    
}
.fa-solid .fa-bell {
     display: contents !important;
}
a.dropdown-item.notification-item.new {
    margin: 8px 11px !important;
    border-radius: 30px;
    text-align: left;
    width: auto;
    direction: ltr;
    padding: 2px 8px !important;
}
.notification-items > li {
     border-radius: 30px;
}
.notification-items > li:hover {
    background-color: #1568B1;
    border-radius: 30px;
}
.form_direction_rtl #dropdown-Dae {
    left: 30px;
}
#cart-shop {
     border-radius: 50%  !important;
    color: white  !important;
    padding: 0px !important
}
#notif-r  {
    border-radius: 50%  !important;
   color: white  !important;
   padding: 3px 1px  !important;
   line-height: 0!important;
}
#navbarSupportedContent ul li a.notification-ring {
    padding: 10px 11px !important
}
 
.form_direction_rtl ul.navbar-nav.ml-auto.btn-connx.align-items-center {
    margin-right: auto !important;
    margin-left: 6%  !important;
 }
 @media ( max-width:992px){
    .form_direction_rtl ul.navbar-nav.ml-auto.btn-connx.align-items-center { 
        margin-bottom: 30px;
    }
    li.nav-item.text-center.dropdown ,div#dropdown-Dae{
         margin-top: 28px !important;
    }
 div#navbarSupportedContent {
        overflow: auto !important;
        height: 32rem !important;
    }
 }
li.nav-item.text-center.dropdown {
    font-size: 12px;
    
}
.navbar-custom-menu.d-blocki .fa-solid.fa-bell {
    color: #ee6f35;
}
 
a#btn-notification-all-as-read {
    background-color: white!important;
    color: black!important;
    border: 0!important;
}
a.dropdown-item.traduction {
    background-color: white!important;
    border: 0!important;
}
.form_direction_rtl   #dropdown-Dae{
    color: #ee6f35 !important;
    margin-left: 5% !important;
    margin-right: -3% !important;
} 
 .nav-item.current a {
    font-weight: bold;
    color: rgb(238, 111, 53) !important;
} 

/* ==========================================================================
   Menu de navigation d'accueil centré (desktop, LTR + RTL)
   Le conteneur reste en flux normal pleine largeur, le menu central est
   centré via marges automatiques ; le groupe d'icônes conserve sa place.
   Aucune incidence sur l'affichage mobile (< 992px, menu empilé).
   ========================================================================== */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse#navbarSupportedContent {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 100%;
    }
    #navbarSupportedContent .navbar-nav.menu-middle {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Le groupe d'icônes ne capte plus l'espace libre : le menu reste centré */
    #navbarSupportedContent ul.navbar-nav.btn-connx,
    .form_direction_rtl ul.navbar-nav.ml-auto.btn-connx.align-items-center {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   Harmonisation des icônes de la navbar selon la charte (orange #EE6F35)
   S'applique en FR et AR. Aucun changement de logique ni de liens.
   Les boutons texte (Connexion / Créer un compte) ne sont pas ciblés.
   ========================================================================== */

/* Groupe d'icônes : alignement vertical et espacement réguliers */
#navbarSupportedContent .navbar-nav.btn-connx,
#dropdown-Dae {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Avatar utilisateur : cercle net, liseré à la couleur de la charte */
#dropdownUser1 img {
    width: 36px !important;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #EE6F35;
    padding: 0;
}

/* Drapeaux (sélecteur de langue) : taille homogène et coins arrondis */
a#navbarDropdown img,
a.dropdown-item.traduction img {
    width: 26px !important;
    height: 18px !important;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}
a#navbarDropdown img:hover,
a.dropdown-item.traduction img:hover {
    transform: scale(1.1);
}

/* Menu déroulant du drapeau : compact et discret */
a#navbarDropdown ~ .dropdown-menu {
    min-width: auto;
    padding: 6px;
    border: 1px solid #eee;
    border-radius: 8px;
}

/* Cloche de notification & panier : boutons circulaires cohérents (orange, icône blanche) */
a.notification-ring,
.navbar-nav.btn-connx .nav-link:has(#cart-shop) {
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    padding: 0 !important;
    background-color: #EE6F35 !important;
    border: 1px solid #EE6F35 !important;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
a.notification-ring:hover,
.navbar-nav.btn-connx .nav-link:has(#cart-shop):hover {
    background-color: #1568B1 !important;
    border-color: #1568B1 !important;
}

/* Icônes internes (cloche / panier) toujours blanches et bien dimensionnées */
#notif-r,
#cart-shop {
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    padding: 0 !important;
}

/* ==========================================================================
   Carte « article en vedette » (accueil) : bouton « Voir plus »
   La règle globale `a.btn.btn-primary { position:absolute; bottom:13px }`
   sortait ce bouton du flux dans l'overlay (display:flex; align-items:end),
   ce qui le coupait — visible surtout en RTL. On le remet dans le flux,
   juste sous la description. Scopé à la carte vedette : aucun autre bouton touché.
   ========================================================================== */
.article-box .big-col .text-overlay .btn.btn-primary {
    position: static !important;
    bottom: auto !important;
    display: inline-block;
    margin-top: 4px;
    width: fit-content;
}

/* Badge compteur de notifications : posé proprement sur le bouton circulaire */
.notification-ring .notification-dot {
    top: -6px;
    right: -6px;
    width: 18px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 9px;
    font-size: 11px;
    line-height: 15px;
    text-align: center;
    font-weight: 700;
}