/* * Ajustements RTL (arabe) pour le site public. * * IMPORTANT : cette feuille n'est chargée QUE lorsque la langue active est l'arabe * (voir templates/base.html.twig -> {% if is_rtl %}). Elle ne peut donc pas * affecter le mode français (LTR) : aucune régression possible côté LTR. * * Le sens du texte est déjà assuré par l'attribut dir="rtl" sur . * On ne corrige ici que les points que le seul attribut dir ne gère pas * (utilitaires Bootstrap orientés à gauche, alignements, flottements). */ /* Direction et alignement de base */ html[dir="rtl"] body { direction: rtl; text-align: right; } /* Alignements texte : on inverse la sémantique gauche/droite */ html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } /* Flottements : inversion */ html[dir="rtl"] .float-left, html[dir="rtl"] .pull-left { float: right !important; } html[dir="rtl"] .float-right, html[dir="rtl"] .pull-right { float: left !important; } /* Marges automatiques (ex. navbar `ml-auto` qui pousse le menu à droite en LTR) */ html[dir="rtl"] .ml-auto, html[dir="rtl"] .ms-auto { margin-left: unset !important; margin-right: auto !important; } html[dir="rtl"] .mr-auto, html[dir="rtl"] .me-auto { margin-right: unset !important; margin-left: auto !important; } /* Menus déroulants alignés correctement */ html[dir="rtl"] .dropdown-menu { text-align: right; } html[dir="rtl"] .dropdown-menu-end { left: 0; right: auto; } /* Listes : la puce/retrait passe à droite */ html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 1.5rem; padding-left: 0; } /* Champs de formulaire : le texte saisi s'aligne à droite */ html[dir="rtl"] .form-control, html[dir="rtl"] input[type="text"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="password"], html[dir="rtl"] input[type="search"], html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } /* Les champs numériques / e-mail / téléphone restent lisibles en LTR même en page RTL */ html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; } /* Icônes directionnelles usuelles : on les retourne horizontalement */ html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-arrow-left, html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-chevron-left, html[dir="rtl"] .fa-angle-right, html[dir="rtl"] .fa-angle-left, html[dir="rtl"] .fa-long-arrow-right, html[dir="rtl"] .fa-long-arrow-left { transform: scaleX(-1); } /* Tableaux DataTables : entêtes alignées à droite */ html[dir="rtl"] table.dataTable thead th, html[dir="rtl"] table.dataTable tbody td { text-align: right; } /* Formulaire de contact (footer accueil) */ html[dir="rtl"] #contact-footer h3 { text-align: right; } html[dir="rtl"] #contact-footer .feedback-input { direction: rtl; text-align: right; } html[dir="rtl"] #contact-footer [type="submit"] { text-align: center; } /* ========================================================================== Barre de navigation (header public) en mode RTL — ajustements ADDITIFS Le positionnement global (logo à droite, menu, groupe d'icônes) est déjà géré par les règles `.form_direction_rtl` de base.css. On ne touche donc qu'aux détails d'alignement interne, sans redéfinir les marges/flottements. ========================================================================== */ /* Entrées du menu central : texte aligné à droite */ html[dir="rtl"] .navbar-nav.menu-middle .nav-item { text-align: right; } /* Icône utilisateur : le libellé passe à gauche de l'avatar (miroir du LTR) */ html[dir="rtl"] .user-header { padding-left: 0; padding-right: 10px; } /* Menu déroulant de notifications : contenu aligné à droite */ html[dir="rtl"] .dropdown-menu.notif, html[dir="rtl"] .dropdown-menu.notif .notification-item, html[dir="rtl"] .dropdown-menu.notif h6 { text-align: right; } /* Icône « marquer comme lu » : l'icône œil précède le texte en RTL */ html[dir="rtl"] .dropdown-menu.notif .lu i { margin-left: 4px; margin-right: 0; } /* Menu profil utilisateur : contenu aligné à droite */ html[dir="rtl"] ul.dropdown-menu[aria-labelledby="dropdownUser1"] { text-align: right; } /* ========================================================================== Cartes de service (accueil + liste des services) en RTL En LTR : icône livre en haut à gauche, note (position absolue) en haut à droite. En RTL, l'icône passe à droite ; il faut donc renvoyer la note à gauche, sinon les deux se superposent (bug « التقييم x/5 » sous l'icône). ========================================================================== */ html[dir="rtl"] .note-position { right: auto !important; left: 20px !important; }