/* ═══════════════════════════════════════════════════════════════════════════
   rtl.css — l'arabe.

   Deux drapeaux, deux métiers, jamais mélangés :

   • `[dir="rtl"]`  → tout ce qui relève du **sens de lecture** : le sens des
                      animations horizontales, les icônes directionnelles, le
                      côté de la ligne de temps, l'origine des transformations.
   • `.lang-ar`     → **uniquement la typographie arabe** : famille de police,
                      interlignage, interlettrage.

   Un sélecteur ne fait jamais le travail de l'autre. C'est ce qui permet
   d'afficher un jour de l'hébreu ou de l'ourdou sans réécrire la typographie,
   et d'afficher de l'arabe en LTR dans un bloc de code sans casser le sens.

   Le gros du travail est déjà fait ailleurs : le reste du CSS n'emploie que
   des propriétés logiques (`margin-inline-start`, `inset-inline`,
   `border-inline-end`…), qui se retournent toutes seules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────── Sens de lecture — [dir="rtl"] ────────────────────── */

[dir="rtl"] {
  /* Toute animation horizontale d'interface multiplie sa translation par ce
     facteur. Une seule déclaration retourne les cascades, les entrées de
     fiches et les glissements de liste. */
  --dir: -1;
}

/* `transform-origin` n'a pas d'équivalent logique : il faut le basculer.
   **Tout élément animé en `scaleX` doit figurer dans cette liste.** C'est
   l'oubli le plus silencieux du projet : en arabe, un filet qui se dessine
   depuis la gauche ne provoque aucune erreur — il donne simplement
   l'impression que l'interface recule. */
[dir="rtl"] .rule,
[dir="rtl"] .nav__progress i,
[dir="rtl"] .nav__links a::after,
[dir="rtl"] .card__edge,
[dir="rtl"] .panel__edge,
[dir="rtl"] .hero__title .cut,
[dir="rtl"] .mk-el-bar i,
[dir="rtl"] .mk-sf-fill,
[dir="rtl"] .mk-vm-limit { transform-origin: right; }

/* En revanche, les barres de la courbe de VetMonitor montent : leur origine
   est `bottom`, qui ne dépend pas du sens de lecture. Les inscrire dans la
   liste ci-dessus les ferait pousser de côté. */

/* Le mot découpé du hero s'incline dans l'autre sens — `--dir` s'en charge
   dans la déclaration elle-même — mais son aplat doit aussi se dessiner
   depuis le bord de départ de la lecture. */
[dir="rtl"] .hero__kicker { clip-path: inset(0 0 0 100%); }

/* Le soulignement de l'URL d'une plaque part lui aussi du bord de lecture. */
[dir="rtl"] .deliv__url { background-position: 100% 100%; }

[dir="rtl"] .mk-jz-seg--a,
[dir="rtl"] .mk-jz-seg--c { transform-origin: right center; }

[dir="rtl"] .panel__card { transform-origin: top right; }

/* Le soulignement des liens et des titres part de l'origine du texte. */
[dir="rtl"] .link,
[dir="rtl"] .card__title { background-position: 100% 100%; }

/* Les icônes directionnelles se retournent. */
[dir="rtl"] .icon-arrow { transform: scaleX(-1); }

/* Le bandeau de technologies défile dans l'autre sens. */
[dir="rtl"] .marquee__track { animation-direction: reverse; }

/* ── L'exception : les scènes à ancrage spatial réel ────────────────────────
   La carte de Jahiz n'est pas une interface, c'est un lieu. Une voiture qui
   roulerait à l'envers sur une carte serait une erreur, pas une adaptation.
   Le tracé, le lac, les repères et la voiture gardent leur sens d'origine.

   Les segments du tracé sont positionnés en `inset-inline-start`, qui se
   retourne en arabe. Rétablir `direction: ltr` sur la carte suffit à tout
   remettre d'aplomb — le pseudo-élément du lac en hérite. */
[dir="rtl"] .mk-jz-map { direction: ltr; }

/* ── Ligne de temps ───────────────────────────────────────────────────────── */
/* `border-inline-start` et `inset-inline-start` la font déjà passer à droite,
   sans une règle de plus. */

/* ───────────────────── Typographie arabe — .lang-ar ──────────────────────── */

.lang-ar,
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4,
.lang-ar .mono,
.lang-ar .tag,
.lang-ar .hero__title,
.lang-ar .panel__problem,
.lang-ar .deliv__name,
.lang-ar .deliv__kind,
.lang-ar .reel__title,
.lang-ar .mk-title {
  font-family: var(--font-arabic);
  /* L'arabe a besoin de plus d'air entre les lignes… */
  line-height: 1.85;
  /* …et jamais d'interlettrage : cela casse les ligatures. */
  letter-spacing: 0;
}

.lang-ar h1, .lang-ar h2, .lang-ar h3,
.lang-ar .hero__title { line-height: 1.45; font-weight: 600; }

.lang-ar .kicker,
.lang-ar .panel__label,
.lang-ar .contact__list dt,
.lang-ar .timeline__head { letter-spacing: 0; }

/* Fraunces porte quatre axes variables que Plex Sans Arabic n'a pas : on
   retire les réglages, sinon la police est synthétisée — et une graisse
   synthétisée en arabe épaissit les ligatures jusqu'à les rendre illisibles. */
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4,
.lang-ar .hero__title,
.lang-ar .h-section,
.lang-ar .card__title,
.lang-ar .panel__title,
.lang-ar .panel__problem,
.lang-ar .deliv__name,
.lang-ar .reel__title { font-variation-settings: normal; }
/* Les chiffres de preuve restent en Fraunces — ce sont des chiffres latins —
   et gardent donc leurs axes. */
.lang-ar .hero__title,
.lang-ar .deliv__name { font-weight: 300; }

/* Ce qui reste en latin et de gauche à droite, même en arabe :
   noms de technologies, montants, URL, numéros, badges de stack. */
.lang-ar .ltr,
.lang-ar .tags li,
.lang-ar .card__stack li,
.lang-ar .mk-browser__url,
.lang-ar .marquee__track,
.lang-ar .langbar__btn[data-lang="fr"],
.lang-ar .langbar__btn[data-lang="en"] {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.lang-ar .tags li[data-i18n],
.lang-ar .card__stack li[data-i18n] {
  /* Un badge traduit redevient de l'arabe : il reprend le sens de lecture. */
  direction: rtl;
  font-family: var(--font-arabic);
}

/* Les chiffres restent en chiffres latins (1234), jamais en arabo-indiens. */
.lang-ar { font-variant-numeric: lining-nums; }

/* « 2021 – 2023 » : deux nombres séparés par un tiret. En contexte arabe, le
   tiret est un caractère neutre qui prend la direction du paragraphe, et la
   plage s'affiche à l'envers — « 2023 – 2021 ». D'où le `direction: ltr`,
   qui impose l'ordre, et l'alignement à droite, qui le remet du bon côté :
   avec `direction: ltr`, `text-align: start` voudrait dire « à gauche ». */
.lang-ar .timeline__year {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}