/* * RTL (Right-to-Left) Styles for Arabic * Applied when * * APPROCHE : CSS minimaliste ciblé * Le navigateur gère automatiquement 90% de l'inversion grâce à dir="rtl" * Ce fichier corrige UNIQUEMENT les 10% problématiques * * Version: 1.0.0 * Date: 2025-10-25 * Based on: MultilanguePlanNew.md v4.2 */ /* ============================================ SECTION 1 : FIXES CRITIQUES (10%) ============================================ */ /* 0. HEADER - Forcer RTL uniquement sur le header (pour pages sans dir="rtl" global) */ html[lang="ar"] .header { direction: rtl; } html[lang="ar"] .header__inner, html[lang="ar"] .menu, html[lang="ar"] .menu__list { direction: rtl; } /* Language Switcher Dropdown - Correction débordement à gauche en RTL */ html[lang="ar"] .dropdown__content, [dir="rtl"] .dropdown__content { /* Le dropdown est à gauche du header en RTL, donc on l'ouvre vers la DROITE (left: 0) pour qu'il reste dans l'écran */ left: 0 !important; right: auto !important; /* Direction LTR pour que le texte reste lisible */ direction: ltr; } /* 1. FORMULAIRES - Alignement et espacement */ [dir="rtl"] .input-wrapper label { padding-right: 10px; padding-left: 0; } [dir="rtl"] .checkbox-container { flex-direction: row-reverse; } [dir="rtl"] .checkbox-input { margin-left: 8px; margin-right: 0; } [dir="rtl"] .checkmark { margin-left: 0.5rem; margin-right: 0; } [dir="rtl"] .formSuccess, [dir="rtl"] .formError { text-align: right; } [dir="rtl"] .input-contacts-form, [dir="rtl"] .contacts-form-textaria { text-align: right; } [dir="rtl"] input::placeholder, [dir="rtl"] textarea::placeholder { text-align: right; } /* 2. COMPOSANT HERO - Alignement texte UNIQUEMENT (pas d'inversion de colonnes) */ /* IMPORTANT : Empêcher l'inversion automatique de la structure Hero */ [dir="rtl"] .hero .row, [dir="rtl"] .hero__inner { direction: ltr; /* Garde la structure LTR */ } /* Mais aligner le CONTENU TEXTE à droite */ [dir="rtl"] .hero__content { direction: rtl; /* Remet RTL uniquement pour le contenu texte */ text-align: right; } [dir="rtl"] .hero { text-align: right; } [dir="rtl"] .hero__subtitle, [dir="rtl"] .hero__title, [dir="rtl"] .hero__text { text-align: right; } [dir="rtl"] .hero__buttons { /* Garde les boutons dans leur flux normal */ align-items: flex-start; } /* ============================================ SECTION 2 : AMÉLIORATIONS OPTIONNELLES Décommenter si des problèmes visuels apparaissent ============================================ */ /* Typography utilities (si nécessaire) */ /* [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } */ /* Margin/Padding inversions (si classes utilisées) */ /* [dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } */ /* Icons directionnels (si présents) */ /* [dir="rtl"] .icon-arrow-right::before { content: '←'; } [dir="rtl"] .icon-arrow-left::before { content: '→'; } */ /* Lists (si bullets mal alignés) */ /* [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.5rem; padding-left: 0; } */ /* Breadcrumbs (si présents et mal alignés) */ /* [dir="rtl"] .breadcrumb { direction: rtl; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right; padding-left: 0.5rem; padding-right: 0; } */ /* Header/Footer inversions supplémentaires (si nécessaire) */ /* [dir="rtl"] .header__inner { flex-direction: row-reverse; } [dir="rtl"] .menu li { margin-left: 0; margin-right: 2rem; } [dir="rtl"] .menu li:last-child { margin-right: 0; } [dir="rtl"] .footer__inner { direction: rtl; } */