/* Ajustements droite-à-gauche (arabe). * * Cette feuille est ADDITIVE et n'est chargée que par les pages dont le `dir` * vaut `rtl`. Le parti pris est délibéré : convertir style.css et legal.css en * propriétés logiques aurait touché toutes les langues d'un site déjà en * production, pour ne servir qu'à une seule. Ici, une langue nouvelle ne peut * rien casser pour les onze autres. * * `dir="rtl"` sur retourne déjà le flux du texte et l'ordre des boîtes * flex/grid. Ne restent que les décorations posées avec des propriétés * PHYSIQUES, que le navigateur ne miroite pas : marges, bordures latérales, * alignements explicites, et les glyphes qui pointent dans une direction. */ /* — Marges et alignements auxiliaires ————————————————————————————— */ [dir="rtl"] .legal-id { margin-left: revert; margin-inline-start: 0; } [dir="rtl"] .section-header p { /* Centrage horizontal : symétrique, donc inchangé — mais on repasse par les propriétés logiques pour rester cohérent si la règle évolue. */ margin-left: revert; margin-right: revert; margin-inline: auto; } /* — Bordures latérales ————————————————————————————————————————— */ [dir="rtl"] blockquote, [dir="rtl"] .legal-callout { border-left: none; border-inline-start: 3px solid var(--black); } [dir="rtl"] .feature-card, [dir="rtl"] .sim2-panel, [dir="rtl"] .pricing-card { border-left: revert; border-right: revert; border-inline-start: 1px solid var(--gray-200); border-inline-end: 1px solid var(--gray-200); } /* — Alignements de texte explicites ——————————————————————————————— */ [dir="rtl"] .legal-doc, [dir="rtl"] .sim2-hero, [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .sim2-vs-v { text-align: left; } /* — Rythme des étapes numérotées ————————————————————————————————— */ [dir="rtl"] .step:first-child { padding-left: revert; padding-inline-start: 0; } [dir="rtl"] .step:last-child { padding-right: revert; padding-inline-end: 0; } /* — Glyphes directionnels ———————————————————————————————————————— * Une flèche « suivant » doit pointer vers la gauche en arabe. On ne miroite * QUE les glyphes de direction : une icône de lecture, un logo ou une coche * miroités seraient au mieux étranges, au pire faux. */ [dir="rtl"] .arrow, [dir="rtl"] .chevron, [dir="rtl"] .btn-arrow, [dir="rtl"] .nav-arrow { transform: scaleX(-1); } /* — Chiffres ————————————————————————————————————————————————————— * Les montants et les dates restent en chiffres latins, comme dans la version * française : l'arabe standard moderne les accepte, et cela évite qu'un prix * (« 24,90 € ») change d'apparence d'une langue à l'autre. */ [dir="rtl"] .price, [dir="rtl"] .stat-num, [dir="rtl"] [class*="tabular"] { direction: ltr; unicode-bidi: embed; } /* — Sélecteur de langue en pied de page ——————————————————————————— */ [dir="rtl"] .lang-switch { text-align: right; } /* — Lien d'évitement ———————————————————————————————————————————— * Il est masqué par `left: -9999px`, technique sans effet en écriture * gauche-à-droite : le navigateur ignore ce qui dépasse de ce côté. En RTL, le * même dépassement est bien compté, et la page gagnait 9 999 px de défilement * horizontal — l'écran s'ouvrait alors sur une zone vide, page blanche. * * On le masque donc par découpe plutôt que par déplacement : invisible, toujours * lu par les lecteurs d'écran, et sans un pixel de débordement. */ [dir="rtl"] .skip-link:not(:focus):not(:focus-visible) { left: auto; right: auto; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Le bandeau défilant est plus large que l'écran par construction ; son * conteneur le découpe déjà, on s'assure qu'il ne pousse jamais le défilement. */ [dir="rtl"] .marquee-wrapper { overflow: hidden; } /* — Interlettrage ———————————————————————————————————————————————— * La charte resserre l'interlettrage des titres (jusqu'à -3 px) pour le latin. * Appliqué à l'arabe, cela DÉTACHE les lettres les unes des autres : l'arabe est * une écriture liée, où chaque lettre change de forme selon sa position dans le * mot. Un titre s'y affichait comme une suite de caractères isolés, illisible. * On rend donc l'interlettrage à sa valeur normale sur toute la page RTL. */ [dir="rtl"] * { letter-spacing: normal; } /* — Police arabe —————————————————————————————————————————————————— * Ni Google Sans Flex ni Inter ne portent l'arabe : sans famille dédiée, le * rendu dépend de la police système du visiteur, donc de sa plateforme. Noto * Sans Arabic donne un résultat identique partout, et le latin continue de * passer par la police de la charte — un texte mêlant « nullbot » et de l'arabe * garde ses deux écritures correctes. */ @font-face { font-family: 'Noto Sans Arabic'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-arabic:vf@latest/arabic-wght-normal.woff2') format('woff2-variations'); } [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea { font-family: 'Noto Sans Arabic', 'Google Sans Flex', Inter, -apple-system, system-ui, sans-serif; }