/* ================================================== Pro QC – Arabic RTL stylesheet (rtl.css) Scope: applies when or [dir="rtl"] on a container Safe to load in addition to the original LTR CSS. ================================================== */ /* ========================= Base direction & fonts ========================= */ html[dir="rtl"] body, [dir="rtl"] body { direction: rtl; text-align: right; font-family: "tt-commons-pro", "Tajawal", "Cairo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } /* Helpers: neutraliser spacing utilitaires bootstrap si besoin */ [dir="rtl"] .ms-1, [dir="rtl"] .ms-2, [dir="rtl"] .ms-3, [dir="rtl"] .ms-4, [dir="rtl"] .ms-5 { margin-right: 0 !important; } [dir="rtl"] .me-1, [dir="rtl"] .me-2, [dir="rtl"] .me-3, [dir="rtl"] .me-4, [dir="rtl"] .me-5 { margin-right: 0 !important; } [dir="rtl"] .ps-1, [dir="rtl"] .ps-2, [dir="rtl"] .ps-3, [dir="rtl"] .ps-4, [dir="rtl"] .ps-5 { padding-left: 0 !important; } [dir="rtl"] .pe-1, [dir="rtl"] .pe-2, [dir="rtl"] .pe-3, [dir="rtl"] .pe-4, [dir="rtl"] .pe-5 { padding-right: 0 !important; } [dir="rtl"] .accordion-button::after { flex-shrink: 0; width: var(--bs-accordion-btn-icon-width); height: var(--bs-accordion-btn-icon-width); margin-right: auto !important; margin-left: 0px !important; content: ""; background-image: var(--bs-accordion-btn-icon); background-repeat: no-repeat; background-size: var(--bs-accordion-btn-icon-width); transition: var(--bs-accordion-btn-icon-transition); } /* ========================= Top bar & main navbar ========================= */ @media (min-width: 992px) { [dir="rtl"] .top-nav { left: auto; right: 0; overflow: visible; } [dir="rtl"] #mainNav { left: auto; right: 0; } [dir="rtl"] #mainNav.cover { right: 0 !important; } } /* Top-nav links: inverser marges icône/texte */ [dir="rtl"] .top-nav-left a { margin-left: 20px; margin-right: 0; } [dir="rtl"] .top-nav-left i { margin-left: 5px; margin-right: 0; } /* Top-nav dropdown hover (langue, etc.) */ @media (min-width: 992px) { [dir="rtl"] .top-nav-right .dropdown-hover .dropdown-menu { right: auto !important; left: 0 !important; transform: translate3d(calc(-100% + 150px), 39px, 0) !important; } } /* Alignement nav desktop : "gauche visuelle" en RTL = flex-end */ @media (min-width: 992px) { [dir="rtl"] .navbar-nav { justify-content: flex-end !important; } [dir="rtl"] .navbar-nav > .nav-item { margin-inline-start: 1rem; margin-inline-end: 0; } } [dir="rtl"] .navbar-nav .ms-lg-auto, [dir="rtl"] .navbar-nav .ms-auto { margin-inline-start: 0 !important; } /* ==================================== RTL Overrides - Mobile (< 992px) ==================================== */ @media (max-width: 991.98px) { /* 1. Inversion du Hamburger sur la barre de navigation */ [dir="rtl"] .navbar-toggler { /* Original LTR: margin-left: 15px; */ margin: 7px 15px 0 0; /* Déplace le bouton à droite de la barre */ order: 1; /* Aide à positionner le bouton à droite si la structure HTML ne permet pas le simple justify-content: space-between */ } /* 2. Inversion de l'animation de la Croix/Hamburger */ [dir="rtl"] .hamburger, [dir="rtl"] .hamburger::before, [dir="rtl"] .hamburger::after { /* Original LTR: left: 90%; transform: translateX(-90%); */ right: 60%; /* Ancrage à droite */ left: auto; /* Supprime l'ancrage à gauche */ transform: translateX(60%); /* Inversion de la translation */ } /* 5. Position du bouton de fermeture de la recherche (Croix) */ [dir="rtl"] #search-overlay #search-close { /* Original LTR: left: 1rem; */ left: auto !important; right: 1rem !important; /* Déplace la croix de fermeture à droite */ } /* 6. Inversion de l'icône de sous-menu mobile */ [dir="rtl"] #navbarNav .mega-menu .dropdown-item::before { content: "\f053"; /* flèche Gauche (vs. \f054 flèche droite en LTR) */ margin-left: .5rem; /* Inverse la marge du côté droit au côté gauche */ margin-right: 0; } } /* --- Recherche (Input/Bouton) --- */ /* Inversion des coins arrondis du formulaire de recherche */ [dir="rtl"] #searchform input[type="search"] { border-radius: 0 0.25rem 0.25rem 0; /* Coin gauche à angle droit, coin droit arrondi */ border-right: none; border-left: 1px solid #ccc; /* Ajout de la bordure sur le côté gauche */ } [dir="rtl"] #searchform button { border-radius: 0.25rem 0 0 0.25rem; /* Coin droit à angle droit, coin gauche arrondi */ border-left: none; border-right: 1px solid #ccc; /* Ajout de la bordure sur le côté droit */ } /* =========================== OFFCANVAS MOBILE – RTL (panneau sort par la GAUCHE) =========================== */ @media (max-width: 991.98px) { /* Panneau: part à gauche (au lieu de la droite en LTR) */ [dir="rtl"] #navbarNav { transform: translateX(-100%) !important; /* caché à gauche */ transition: transform .3s ease; } /* Quand ouvert: visible */ [dir="rtl"] body.offcanvas-open #navbarNav { transform: translateX(0) !important; } /* Ne pas pousser la navbar (le logo reste fixe) */ [dir="rtl"] body.offcanvas-open .navbar { transform: none !important; } /* Le bouton hamburger reste à gauche */ [dir="rtl"] .navbar-toggler { margin-left: 15px !important; margin-right: 0 !important; } /* Les barres du hamburger restent centrées */ [dir="rtl"] .hamburger, [dir="rtl"] .hamburger::before, [dir="rtl"] .hamburger::after { left: 130% !important; /* ANCRAGE DÉPLACÉ BEAUCOUP PLUS À DROITE */ right: auto !important; transform: translateX(-50%) !important; } } /* ============================== MOBILE MENU RTL – FIX ============================== */ @media (max-width: 991.98px) { /* Quand body a la classe .offcanvas-open, on affiche le menu */ [dir="rtl"] body.offcanvas-open #navbarNav { transform: translateX(0); } /* La barre supérieure (logo + burger) reste fixe */ [dir="rtl"] body.offcanvas-open .navbar { transform: none !important; } /* Les liens à l'intérieur : alignés à droite (arabe) */ [dir="rtl"] #navbarNav .navbar-nav { text-align: right; flex-direction: column; padding-right: 0px; } [dir="rtl"] #navbarNav .nav-link, [dir="rtl"] #navbarNav .dropdown-toggle { color: #fff; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } [dir="rtl"] .hamburger, [dir="rtl"] .hamburger::before, [dir="rtl"] .hamburger::after { left: 130%; /* ANCRAGE DÉPLACÉ BEAUCOUP PLUS À DROITE */ transform: translateX(-50%); } } /* ========================= Méga-menu "Appeler" (top-nav) ========================= */ [dir="rtl"] .call-menu-wrapper { position: relative; } [dir="rtl"] .mega-menu-call{ position: absolute; top: 100%; right: 0; left: auto; display: none; background: #fff; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); padding: 12px 16px; z-index: 1300; direction: rtl; text-align: right; width: auto; max-width: min(840px, calc(100vw - 16px)); white-space: normal; } [dir="rtl"] .call-menu-wrapper:hover .mega-menu-call{ display: flex; gap: 24px; } [dir="rtl"] .mega-menu-call .menu-column{ min-width: 220px; } [dir="rtl"] .mega-menu-call a{ display:block; padding:.35rem 0; color:#333; text-decoration:none; } [dir="rtl"] .mega-menu-call a:hover{ color:#26639e; text-decoration:underline; } [dir="rtl"] .mega-menu-call hr{ margin:.25rem 0 .35rem; opacity:.25; } /* Mobile: plein largeur, pas d'absolu */ @media (max-width: 991.98px){ [dir="rtl"] .mega-menu-call{ position: static; right:auto; left:auto; display: block; max-width: 100%; box-shadow: none; border-radius: 0; padding: 8px 0 0; } [dir="rtl"] .mega-menu-call .menu-column{ min-width: 0; width: 100%; margin-bottom:.75rem; } } /* ========================= Dropdowns & chevrons ========================= */ @media (min-width: 992px) { [dir="rtl"] .navbar-nav .dropdown:not(.position-static) .dropdown-item, [dir="rtl"] .mega-menu-content .dropdown-item { text-align: right; } [dir="rtl"] .navbar-nav .dropdown:not(.position-static) .dropdown-item::before, [dir="rtl"] .mega-menu-content .dropdown-item::before { content: "\f053"; /* Font Awesome chevron-left */ font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: .5rem; margin-right: 0; } [dir="rtl"] .dropdown-toggle::after { margin-right: .255em; margin-left: 0; } [dir="rtl"] .mega-menu-title { text-align: right; padding: 9px 0 9px 5px; } } /* ========================= Search overlay & hero ========================= */ [dir="rtl"] #search-close { right: auto !important; left: 1rem !important; } [dir="rtl"] .hero-img { right: auto; left: 0; } /* ========================= Breadcrumbs & headers ========================= */ [dir="rtl"] #breadcrumb-blue span:not(:first-child) { margin-right:.5rem; margin-left:0; } [dir="rtl"] #breadcrumb-blue span:not(:last-child) { margin-left:.5rem; margin-right:0; } [dir="rtl"] main h3 { padding-left:0; padding-right:48px; } [dir="rtl] main h3::before { left:auto; right:0; } [dir="rtl] main h3::after { left:auto; right:9px; } /* ========================= Cards & badges ========================= */ [dir="rtl"] .solution-card-button .solution-card-icon-question { margin-left:8px; margin-right:0; } [dir="rtl"] .solution-card-tag { left:auto; right:30px; } [dir="rtl"] .badge.rounded-pill.bg-danger { margin-left:.75rem !important; margin-right:0 !important; } /* ========================= Lists & bullets ========================= */ [dir="rtl"] .custom-list li::before, [dir="rtl"] .proqc-list li::before { margin-left:.75rem; margin-right:0; content:'‹'; } [dir="rtl"] .custom-list li, [dir="rtl"] .proqc-list li { padding-left:0 !important; } /* ========================= Sidebars / borders ========================= */ [dir="rtl"] #local-offices { border-left:none !important; border-right:4px solid #26639e !important; } /* ========================= Image compositions ========================= */ [dir="rtl"] .image-stack::before { left:auto; right:50%; } [dir="rtl"] .image-stack .img-back { right:auto; left:0; } [dir="rtl"] .image-stack .img-front { left:auto; right:0; } /* ========================= CF7 (contact forms) ========================= */ [dir="rtl"] #contact-form .input-icon i, [dir="rtl"] #sr_contact-form .input-icon i { left:auto; right:.9rem; } [dir="rtl"] #sr_contact-form .input-icon i { right:.4rem; } [dir="rtl"] #contact-form .input-icon .form-control, [dir="rtl"] #contact-form .input-icon .form-select, [dir="rtl"] #sr_contact-form .input-icon .form-control, [dir="rtl"] #sr_contact-form .input-icon .form-select { padding-left:1.25rem; padding-right:3.5rem; } [dir="rtl"] #contact-form textarea.textarea-message, [dir="rtl"] #sr_contact-form textarea.textarea-message { padding-right:1.5rem !important; padding-left:0 !important; } [dir="rtl"] #contact-form span.wpcf7-not-valid-tip, [dir="rtl"] #sr_contact-form .wpcf7-form-control-wrap[data-name="math-quiz"] .wpcf7-not-valid-tip { left:auto; right:3.5rem; } [dir="rtl"] #contact-form .custom-file-label::before, [dir="rtl"] #sr_contact-form .custom-file-label::before { margin-right:5px !important; margin-left:0 !important; } [dir="rtl"] #contact-form .custom-file-label::after, [dir="rtl"] #sr_contact-form .custom-file-label::after { margin-left:5px !important; margin-right:0 !important; } /* ========================= Timelines ========================= */ [dir="rtl"] .timeline .step .label { transform-origin: right bottom; } [dir="rtl"] .timeline .step .icon { margin-left:0; margin-right:-20px; } [dir="rtl"] .timeline .line { left:auto; right:0; } [dir="rtl"] #NNPDL.timeline .step .icon { left:auto; right:60%; transform:translateX(50%); } @media (max-width: 768px) { [dir="rtl"] #NNPDL.timeline .step .icon { left:auto; right:65%; } } /* ========================= Search form shape ========================= */ [dir="rtl"] #searchform input[type="search"] { border-radius: 0 0.25rem 0.25rem 0; } [dir="rtl"] #searchform button { border-left: 1px solid #ccc; border-right: none; border-radius: 0.25rem 0 0 0.25rem; } /* ========================= Utilities ========================= */ [dir="rtl"] .pl-4 { padding-left:0 !important; padding-right:1.5rem !important; } [dir="rtl"] .pr-4 { padding-right:0 !important; padding-left:1.5rem !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; }