/* ============================================================
   UNERTH — rtl.css
   Adaptation droite-à-gauche (arabe), chargée uniquement quand
   is_rtl() est vrai — c'est-à-dire sur les URL /ar/ servies par
   TranslatePress, qui bascule la locale du site.

   Chargée APRÈS main.css : à spécificité égale, ces règles
   l'emportent. Ne pas préfixer par [dir="rtl"] sans raison,
   le fichier entier est déjà conditionnel.

   Trois familles de correctifs :
     1. Miroir      — ce que `direction:rtl` ne retourne pas seul
                      (offsets absolus, translateX, origines).
     2. Typographie — l'arabe est cursif : le letter-spacing casse
                      les liaisons entre lettres, et le tracking
                      négatif des titres est illisible.
     3. Métriques   — les descendantes arabes (ج ح ع ي) plongent
                      bien plus bas que l'alphabet latin.
   ============================================================ */

/* ============================================================
   1. MIROIR
   Les flex/grid et les marges logiques suivent déjà `direction`.
   Seuls les positionnements absolus et les transformations
   explicites doivent être retournés à la main.
   ============================================================ */

/* Soulignement animé : il doit croître depuis le bord droit. */
.u-ulink::after{ left:auto; right:0; transform-origin:right; }

/* Burger : la marge de débord passe du côté opposé. */
.u-nav-burger{ margin-right:0; margin-left:-8px; }

/* Tiroir mobile : il entre désormais par la gauche.
   L'ombre portée est retournée avec lui (voir main.css : elle
   n'est appliquée qu'ouvert, sinon elle bave sur le bord). */
.u-nav-drawer{ right:auto; left:0; transform:translateX(-100%); }
.u-nav-cb:checked ~ .u-nav-drawer{ transform:translateX(0); box-shadow:24px 0 60px rgba(78,78,60,0.16); }

/* Retour à l'index depuis une fiche projet. */
.u-pj-back{ left:auto; right:clamp(20px,3vw,40px); }

/* Colonne « projet suivant » : elle est passée à gauche. */
.u-pj-nav-link.u-right{ text-align:left; }

/* Honeypot : le sortir par la droite, sinon il élargit la page. */
.u-hp{ left:auto; right:-9999px; }

/* ============================================================
   2. TYPOGRAPHIE ARABE
   L'écriture arabe est cursive : chaque lettre se lie à la
   suivante. Un letter-spacing positif rompt ces ligatures et
   rend le mot illisible ; un tracking négatif les écrase.
   On remet donc `normal` partout où la maquette latine
   espaçait les capitales.
   ============================================================ */
.u-kicker,
.u-eyebrow-label,
.u-ulink,
.u-nav-desktop a,
.u-nav-drawer-links a,
.u-footer-label,
.u-footer-bottom,
.u-meta-label,
.u-contact-label,
.u-credit-label,
.u-pj-nav-eyebrow,
.u-pj-index,
.u-step-num,
.u-card-cap,
.u-founders-cap,
.u-form-submit,
.u-form-again,
.u-hero-caption p{ letter-spacing:normal; }

/* Les chiffres restent latins : ils gardent leur tracking. */
.u-num{ letter-spacing:0.2em; }

/* Titres : le tracking négatif de la maquette latine colle les
   lettres arabes entre elles. */
.u-display,
.u-display-2,
.u-display-3,
.u-lead,
.u-lead-sm,
.u-pj-title,
.u-cta-title,
.u-pj-nav-name,
.u-post-title,
.u-form-title,
.u-step-title,
.u-about-quote p,
.u-pj-lead,
.u-pj-body{ letter-spacing:normal; }

/* Le titre de la page À propos tient sur une ligne en anglais,
   pas en arabe : on lui rend le droit de se replier. */
.u-about-head .u-display-2{ white-space:normal; }

/* L'italique n'existe pas en typographie arabe : une oblique
   synthétique déforme le tracé. */
.u-about-quote p{ font-style:normal; }

/* ============================================================
   3. MÉTRIQUES VERTICALES
   IBM Plex Sans Arabic a une hauteur d'œil supérieure à DM Sans
   et des descendantes profondes. Les interlignes serrés de la
   maquette (0.98 à 1.08) tronquent les hampes.
   ============================================================ */
.u-display{ line-height:1.3; }
.u-display-2{ line-height:1.3; }
.u-display-3{ line-height:1.3; }
.u-pj-title{ line-height:1.25; }
.u-cta-title{ line-height:1.25; }
.u-lead{ line-height:1.6; max-width:22ch; }
.u-lead-sm{ line-height:1.7; }
.u-thanks-title{ line-height:1.2; }
.u-about-quote p{ line-height:1.6; }

/* Le soulignement des liens et des champs doit dégager les
   descendantes, sinon le trait coupe la lettre. */
.u-ulink{ padding-bottom:10px; }
.ufield{ padding-top:14px; padding-bottom:16px; }
.u-contact-line{ padding-bottom:6px; }
.u-form-again{ padding-bottom:6px; }

/* Le « guillemet » décoratif reste un glyphe latin (Billion
   Miracles) : sans correction, son interligne de 0.55 le fait
   chevaucher la citation arabe qui le suit. */
.u-quote-mark{ line-height:0.7; }
.u-quote-close{ line-height:0.5; }

/* ============================================================
   4. FRAGMENTS RESTÉS LATINS
   Une adresse e-mail, un numéro, un pseudo Instagram ne se
   traduisent pas : ils restent en caractères latins au milieu
   d'une page arabe. L'algorithme bidirectionnel réordonne alors
   leur ponctuation de bord — « @unerthdesign » s'affiche
   « unerthdesign@ », et un point final passe en tête de ligne.

   `unicode-bidi:plaintext` fait déduire le sens de chaque
   paragraphe de son premier caractère fort : latin → lu de
   gauche à droite, arabe → de droite à gauche. La règle reste
   donc juste une fois les textes traduits, sans y revenir.
   L'alignement, lui, est forcé à droite pour que les colonnes
   restent calées sur le bord de la maquette RTL.
   ============================================================ */
/* `unicode-bidi` n'est pas héritée : elle doit porter sur l'élément qui
   contient réellement le texte. Dans le pied de page, chaque coordonnée
   est un <a> ou un <span> passé en display:block par main.css — viser la
   seule colonne parente laisserait « @unerthdesign » retourné. */
.u-contact-val,
.u-contact-line,
.u-contact-address,
.u-footer-col,
.u-footer-col a,
.u-footer-col span,
.u-footer-address,
.u-meta-val,
.u-credits-row{ unicode-bidi:plaintext; text-align:right; }

/* ============================================================
   5. SÉLECTEUR DE LANGUE (TranslatePress)
   Le balisage vient du plugin : on l'aligne sur la nav du thème
   plutôt que de laisser ses styles par défaut.
   ============================================================ */
.trp-language-switcher > div{ font-family:var(--u-sans); letter-spacing:normal; }

/* Le sélecteur flottant est ancré à droite par une variable écrite en
   style inline (`--right:10vw`) : redéfinir la variable ne suffirait pas,
   l'inline l'emporte. On surcharge donc les propriétés elles-mêmes, avec
   une spécificité supérieure à celle du plugin pour ne pas dépendre de
   l'ordre de chargement des feuilles. Le côté suit le sens de lecture,
   comme le reste de la page. */
html[dir="rtl"] .trp-floating-switcher{ right:auto; left:10vw; }