/* ============================================================
   MaBourse.ma - surcharges RTL (arabe)
   Chargé uniquement quand <html dir="rtl">. La template (style.css) reste inchangée :
   ce fichier miroite les rares propriétés physiques (left/right, margin-left...).
   ============================================================ */

html[dir="rtl"] body {
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", var(--font-body), sans-serif;
  line-height: 1.75;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] .logo-name, html[dir="rtl"] .btn, html[dir="rtl"] .badge {
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", var(--font-display), sans-serif;
}
/* L'espacement des lettres casse la liaison des caractères arabes */
html[dir="rtl"] * { letter-spacing: 0 !important; text-transform: none !important; }
/* Le logo, les nombres et les URL restent lisibles de gauche à droite */
html[dir="rtl"] .logo-name, html[dir="rtl"] [dir="ltr"], html[dir="rtl"] .code { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }

/* --- Menus et navigation --- */
html[dir="rtl"] .dropdown { left: auto; right: 50%; transform: translateX(50%) translateY(6px); }
html[dir="rtl"] li:hover > .dropdown,
html[dir="rtl"] .nav-link[aria-expanded="true"] + .dropdown { transform: translateX(50%) translateY(0); }
html[dir="rtl"] .main-nav li:last-child .dropdown { right: auto; left: 0; transform: translateY(6px); }
html[dir="rtl"] .main-nav li:last-child:hover > .dropdown,
html[dir="rtl"] .main-nav li:last-child .nav-link[aria-expanded="true"] + .dropdown { transform: translateY(0); }
html[dir="rtl"] .mobile-menu { transform: translateX(-100%); }
html[dir="rtl"] .mobile-menu.open { transform: translateX(0); }

/* --- Héros --- */
html[dir="rtl"] .hero-slogan { left: auto; right: -26px; }
@media (max-width: 900px) { html[dir="rtl"] .hero-slogan { left: auto; right: 14px; } }

/* --- Formulaires --- */
html[dir="rtl"] .select { background-position: left 13px center; padding-right: 14px; padding-left: 38px; }
html[dir="rtl"] .input-icon svg { left: auto; right: 13px; }
html[dir="rtl"] .input-icon .input { padding-left: 14px; padding-right: 40px; }

/* --- Alignements et marges auto --- */
html[dir="rtl"] .opp-fav,
html[dir="rtl"] .country-item .count-pill,
html[dir="rtl"] .filter-option .count,
html[dir="rtl"] .country-card .arrow { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .action-deadline,
html[dir="rtl"] .pagination .page-info { margin-right: 0; margin-left: auto; }
html[dir="rtl"] .stat-card,
html[dir="rtl"] .cond-table th, html[dir="rtl"] .cond-table td,
html[dir="rtl"] .faq-q,
html[dir="rtl"] .table-wrap th { text-align: right; }
html[dir="rtl"] .fact-row .v { text-align: left; }

/* --- Étapes numérotées (fiche) --- */
html[dir="rtl"] .steps li { padding: 0 48px 22px 0; }
html[dir="rtl"] .steps li::before { left: auto; right: 0; }
html[dir="rtl"] .steps li::after { left: auto; right: 14px; }

/* --- Interrupteur --- */
html[dir="rtl"] .switch .track::after { left: auto; right: 3px; }
html[dir="rtl"] .switch input:checked + .track::after { transform: translateX(-20px); }

/* --- Listes de contenu --- */
html[dir="rtl"] .toc-box ol,
html[dir="rtl"] .prose ul, html[dir="rtl"] .prose ol { padding-left: 0; padding-right: 22px; }

/* --- Flèches directionnelles : miroir --- */
html[dir="rtl"] .arrow,
html[dir="rtl"] .link-more svg,
html[dir="rtl"] .breadcrumb svg,
html[dir="rtl"] .country-card .arrow { transform: scaleX(-1); }
html[dir="rtl"] .link-more:hover svg,
html[dir="rtl"] .btn-primary:hover .arrow,
html[dir="rtl"] .country-card:hover .arrow { transform: scaleX(-1) translateX(3px); }

/* Pas de débordement horizontal si un élément hors-champ reste positionné */
html[dir="rtl"], html[dir="rtl"] body { overflow-x: hidden; }

/* Lien d'évitement : hors-champ côté droit (un débordement négatif à gauche créerait du défilement en RTL) */
html[dir="rtl"] .skip-link { left: auto; right: -999px; }
html[dir="rtl"] .skip-link:focus { right: 8px; left: auto; }

/* Icône de déconnexion : la flèche suit le sens de lecture */
html[dir="rtl"] .header-icon-btn.logout svg { transform: scaleX(-1); }