/* ========================================================================== SKGENIUS — couche arabe. Chargée en dernier, uniquement sur les pages arabes, APRÈS style.rtl.css. Elle ne fait que trois choses : substituer la police, neutraliser les réglages typographiques latins qui abîment l'arabe, et corriger les rares endroits où un miroir automatique ne suffit pas. Elle ne touche à aucune couleur, aucune largeur, aucun espacement de bloc. ========================================================================== */ /* --------------------------------------------------------------- police -- IBM Plex Sans Arabic remplace les trois familles latines. Elle est dessinée sur l'ossature d'IBM Plex, dont les proportions sont proches d'Archivo et d'Inter : les hauteurs d'x concordent, on n'a donc aucun réglage optique à faire au passage d'une langue à l'autre. Les latines restent en repli : une page arabe contient des mots latins (SKGENIUS, SaaS, ERP, RGAA, llms.txt) et ils doivent garder leur dessin. */ html[lang="ar"]{ --disp: 'IBM Plex Sans Arabic', 'Archivo', system-ui, sans-serif; --body: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif; --mono: 'IBM Plex Sans Arabic', 'Lato', system-ui, sans-serif; } /* L'arabe se lit avec des hampes plus hautes et des descendantes plus profondes que le latin : à interligne égal, les lignes se touchent. */ html[lang="ar"] body{ line-height:1.85; } html[lang="ar"] :is(h1,h2,h3,h4){ line-height:1.4; } /* ------------------------------------------------- casse et interlettrage -- Deux réglages omniprésents dans la feuille latine sont destructeurs ici : text-transform:uppercase n'a aucun effet sur l'arabe mais s'applique aux sigles latins mêlés au texte, et letter-spacing SÉPARE les lettres, ce qui casse la ligature — un mot arabe espacé n'est plus lisible, il est décomposé. On les neutralise partout, y compris le tracking négatif des titres, calé sur Archivo et non sur cette police. */ html[lang="ar"] *{ letter-spacing:normal !important; } html[lang="ar"] :is(.eyebrow,.hero-tag,.topbar,.hpanel-v,.nv-titre,.nv-pied a, .ttag,.proj .pi,.post .cat,.ref .client,footer .col h2,.bar .bl,.xp-num, .step .n,.hero-intro-tagline){ text-transform:none; } /* Le mot-clé « uppercase » reste pertinent pour les sigles latins isolés que la maquette met en capitales : on le rétablit sur les éléments qui ne contiennent que du latin, marqués comme tels dans le gabarit. */ html[lang="ar"] [lang="en"], html[lang="ar"] [lang="fr"]{ letter-spacing:inherit !important; } /* ------------------------------------------------------ chiffres et sens -- Les chiffres occidentaux n'ont PAS besoin d'être isolés : l'algorithme bidi les rend déjà de gauche à droite à l'intérieur d'un paragraphe arabe. Isoler un nombre séparé de son unité par une espace fait au contraire disparaître cette espace — « 79 DT / mois » devient « 79DT / mois ». On n'isole donc que ce qui en a réellement besoin : les suites où un signe précède les chiffres (téléphones, +216…), marquées dir="ltr" dans le gabarit, et les dates machine. */ html[lang="ar"] :is(time,[dir="ltr"]){ direction:ltr; unicode-bidi:isolate; text-align:start; } /* --------------------------------------------- nombre suivi de son unité -- « 79 دينار / شهرياً » : le nombre s'écrit en chiffres latins, mais dans un paragraphe arabe il se pose à DROITE et l'unité vient à sa gauche. L'espace qui les sépare doit donc être posé sur le bord droit de l'unité, et c'est exactement ce que produit le miroir automatique (margin-left → margin-right) dans les feuilles .rtl.css. Il n'y a rien à corriger ici : une surcharge qui remettrait margin-left ouvrirait l'espace du mauvais côté et collerait le nombre à sa devise. Le point est noté parce qu'il se trompe à l'œil. */ /* ------------------------------------------------------------ champ piège -- Masquer un champ avec left:-9999px fonctionne en LTR, où le navigateur ignore le débordement à gauche. En RTL, ce même décalage tombe dans le sens du défilement et ouvre une barre horizontale de dix mille pixels sur toute la page. On masque par découpe, qui ne dépend d'aucune direction. */ html[lang="ar"] .ad-piege{ inset-inline-start:auto; right:auto; left:auto; position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* ------------------------------------------------------------- chevrons -- Le chevron du menu est dessiné en CSS par deux bords tournés à 45°. Le miroir automatique inverse sa position mais pas son dessin : il pointerait vers l'extérieur de la page. On le retourne. */ html[lang="ar"] nav.links .nv>a::after{ border-right:0; border-left:1.5px solid currentColor; transform:rotate(-45deg); } /* Le panneau vertical du hero est tourné à 180° pour se lire de bas en haut ; en RTL, writing-mode et rotation se combinent dans l'autre sens. */ html[lang="ar"] .hpanel-v{ writing-mode:vertical-rl; transform:none; } /* -------------------------------------------------------------- ponctuation -- La virgule et le point-virgule arabes ne sont pas les latins. On ne remplace pas le texte en CSS — c'est le catalogue de chaînes qui porte la bonne ponctuation. Rien à faire ici : la note est là pour qu'on n'y revienne pas en croyant à un oubli. */ /* ------------------------------------- unité commençant par un signe latin -- « € / شهرياً » : le signe monétaire est un caractère neutre. Sans isolation il rejoint la suite de chiffres qui le précède, la marge du passe alors de l'autre côté du signe et « 59 € » se colle en « 59€ ». Isoler le contenu de l'unité en fait une suite à part entière, dont la boîte — et donc la marge — reste à sa place. On n'isole que l'unité, jamais le nombre : la règle inverse déplacerait le nombre lui-même. */ html[lang="ar"] .sp-tete .sp-repere dd .u, html[lang="ar"] .sp-montants dd .dev{ unicode-bidi:isolate; } /* ------------------------------------------------------- code et exemples -- Une balise citée dans une phrase arabe — <head>, <script type="…"> — est une suite latine contenant des caractères neutres (chevrons, guillemets, deux-points). Sans isolation, l'algorithme bidi la découpe et la réordonne : «