/* ═══════════════════════════════════════════════════════════ MLEH — Styles RTL (mode Arabe) Activé automatiquement via (voir i18n.js) ═══════════════════════════════════════════════════════════ */ html[dir="rtl"] body { font-family: 'Tajawal', 'Segoe UI', sans-serif; text-align: right; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] .navbar-brand, html[dir="rtl"] .btn { font-family: 'Tajawal', 'Cairo', sans-serif; } /* Icônes : petit espace cohérent avant le texte en RTL */ html[dir="rtl"] .fas + span, html[dir="rtl"] .fab + span { margin-right: 6px; } /* Barre de recherche : icône et espacement inversés */ html[dir="rtl"] .search-icon { right: auto; left: 15px; } html[dir="rtl"] .search-professional .form-control { padding-right: 15px; padding-left: 40px; } html[dir="rtl"] .search-suggestions { text-align: right; } /* Hero */ html[dir="rtl"] .hero-professional { text-align: right; } html[dir="rtl"] .hero-badges { justify-content: flex-start; } /* Carousel produit */ html[dir="rtl"] .carousel-arrow-prev { left: auto !important; right: 10px !important; } html[dir="rtl"] .carousel-arrow-next { right: auto !important; left: 10px !important; } /* Bannières promotionnelles — la position reste celle du design (espace vide), seul l'alignement du texte s'adapte à l'arabe */ html[dir="rtl"] .promo-banner-track { direction: ltr; /* empêche flex de réordonner physiquement les slides, sinon translateX() casse la navigation */ } html[dir="rtl"] .promo-overlay { text-align: right !important; } /* Les flèches gauche/droite du carousel, elles, s'inversent bien avec la langue */ html[dir="rtl"] .promo-arrow-prev { left: auto !important; right: 16px !important; } html[dir="rtl"] .promo-arrow-next { right: auto !important; left: 16px !important; } @media (max-width: 767px) { html[dir="rtl"] .promo-overlay { text-align: center !important; } } /* Cartes produits / catégories */ html[dir="rtl"] .product-card-pro, html[dir="rtl"] .category-card-pro, html[dir="rtl"] .card-body, html[dir="rtl"] .product-info { text-align: right; } /* Menus déroulants */ html[dir="rtl"] .dropdown-menu { text-align: right; } /* Fil d'Ariane */ html[dir="rtl"] .breadcrumb { padding-right: 0; } /* Alertes / notifications */ html[dir="rtl"] .alert, html[dir="rtl"] .toast { text-align: right; } /* Formulaires */ html[dir="rtl"] .form-label { text-align: right; } html[dir="rtl"] .form-check { padding-right: 1.5em; padding-left: 0; } html[dir="rtl"] .form-check .form-check-input { float: right; margin-right: -1.5em; margin-left: 0; } /* Boutons avec icône + texte (input-group quantité, etc.) */ html[dir="rtl"] .input-group { flex-direction: row-reverse; } /* Footer */ html[dir="rtl"] .footer-professional { text-align: right; } /* Badges de prix / réduction (carousel bannière) */ html[dir="rtl"] .price-box .discount-badge, html[dir="rtl"] .price-box-lg .discount-badge { order: -1; }