/** * Nooma — version arabe, lecture de droite à gauche. * * Cette feuille ne redéfinit PAS la charte : elle ne fait que redresser ce * qui suppose implicitement un sens de lecture. Chargée en dernier, elle * s'applique par-dessus les autres sans les dupliquer — une couleur ou une * taille modifiée ailleurs reste valable ici. * * Le principe : `dir="rtl"` sur inverse déjà l'essentiel (ordre des * éléments en flex et en grille, alignement du texte, marges logiques). Ne * restent à corriger que les valeurs écrites en dur — `left`, `right`, * `text-align`, et les éléments décoratifs qui pointent dans une direction. */ /* ── Typographie arabe ──────────────────────────────────────── Fraunces et Manrope ne contiennent aucun caractère arabe : sans substitution, le navigateur tombe sur une police système au rendu imprévisible. Noto Kufi porte le caractère éditorial des titres, Noto Sans Arabic assure la lisibilité des paragraphes. L'arabe a besoin d'un interlignage plus généreux : les signes qui montent et descendent sont plus nombreux qu'en alphabet latin. */ [dir="rtl"] { --font-display: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif; --font-body: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --font-wordmark: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif; } [dir="rtl"] body { line-height: 1.85; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.45; } /* L'arabe n'a ni majuscules ni petites capitales : l'interlettrage élargi et la mise en capitales, qui structurent les surtitres latins, y produisent un texte simplement disloqué. */ [dir="rtl"] .eyebrow, [dir="rtl"] .badge, [dir="rtl"] .foot-col h4 { letter-spacing: normal; text-transform: none; } /* L'italique n'existe pas dans la tradition typographique arabe. Aucune police arabe ne dessine de variante penchée : le navigateur en fabrique une en inclinant les lettres, ce qui déforme les liaisons entre caractères au lieu d'accentuer quoi que ce soit. Le sélecteur reprend celui d'origine (`.hero h1 em`), sans quoi il serait moins spécifique et resterait sans effet. Le dégradé animé du titre, lui, est conservé : il fonctionne aussi bien sur l'arabe. */ [dir="rtl"] em, [dir="rtl"] i, [dir="rtl"] .hero h1 em { font-style: normal; } /* ── Le nom de marque reste latin ───────────────────────────── « Nooma » et sa signature ne se translittèrent pas : une marque garde sa forme dans toutes les langues. On force donc le sens latin sur ces seuls éléments, sinon la ponctuation se retrouve du mauvais côté. */ [dir="rtl"] .nav-mark .word, [dir="rtl"] .nav-mark .tag, [dir="rtl"] .foot-brand .word { direction: ltr; unicode-bidi: isolate; font-family: var(--font-wordmark); } /* ── Corrections de positionnement ──────────────────────────── Tout ce qui était calé à gauche ou à droite en valeur absolue. */ [dir="rtl"] .legal-toc { border-left: 0; border-right: 1px solid var(--line); } [dir="rtl"] .faq-q { text-align: right; } [dir="rtl"] .field-hint { text-align: right; } [dir="rtl"] .stat, [dir="rtl"] .value-card, [dir="rtl"] .feat-card, [dir="rtl"] .step-card, [dir="rtl"] .plan-card, [dir="rtl"] .role-card { text-align: right; } [dir="rtl"] .section-head.center, [dir="rtl"] .section-head.center * { text-align: center; } /* Le signe « + » du dépliant FAQ et les flèches de lien pointent vers le contenu : ils doivent basculer avec le sens de lecture. */ [dir="rtl"] .step-link { transform: scaleX(-1); } [dir="rtl"] .step-link > * { transform: scaleX(-1); } /* Le bandeau défilant garde son sens d'origine : inversé, l'animation repartirait à contresens du mouvement de lecture. */ [dir="rtl"] .ticker-track { direction: ltr; } [dir="rtl"] .ticker-item { direction: rtl; } /* ── Le champ anti-robot ────────────────────────────────────── Il est masqué par `left: -9999px`. En lecture gauche-à-droite, la zone à gauche de l'origine n'est pas atteignable par défilement ; en lecture droite-à-gauche elle l'est, et le formulaire ouvrait alors 10 000 pixels de vide que l'on pouvait faire glisser. On le cache donc sans le déplacer : il reste dans la page, toujours remplissable par un robot, mais découpé à zéro pixel visible. Repéré le 24/08/2026. */ [dir="rtl"] .hp-field { left: auto; right: auto; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ── Chiffres, prix et numéros ──────────────────────────────── Le piège le plus visible du bilinguisme. Quand un texte arabe contient un nombre, un signe « + » ou une barre oblique, le navigateur doit décider dans quel sens lire chaque morceau. Livré à lui-même, il affiche « 66 44 39 64 6 212+ » au lieu de « +212 6 64 39 44 66 » : chaque groupe de chiffres est juste, mais leur ordre est inversé. `isolate` est le bon outil : il empêche un fragment d'influencer le sens de lecture de ses voisins, sans lui en imposer un. Forcer `direction: ltr` — ce que faisait la version précédente — corrigeait les nombres mais retournait le texte arabe présent dans le même élément, d'où le « درهم » qui atterrissait n'importe où dans la ligne de tarif. Seul le numéro de téléphone reçoit un sens imposé : un numéro se lit de gauche à droite dans toutes les langues, indicatif en tête. */ [dir="rtl"] .stat .num, [dir="rtl"] .plan-price, [dir="rtl"] .plan-price small, [dir="rtl"] .avail-slot, [dir="rtl"] .free-note, [dir="rtl"] time { unicode-bidi: isolate; } [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* Le tarif : le montant sur sa ligne, la mention en dessous. Isolés l'un de l'autre, ils ne se disputent plus le sens de lecture. */ [dir="rtl"] .plan-price small { display: block; } /* Le lecteur vidéo et ses commandes suivent la mise en page, mais l'image elle-même ne se reflète jamais. */ [dir="rtl"] .demo-player { direction: ltr; } [dir="rtl"] .demo-sound { flex-direction: row-reverse; } /* Le formulaire de liste d'attente : les champs s'alignent à droite, mais une adresse e-mail se saisit toujours de gauche à droite. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }