/* Sens de lecture droite a gauche, pour la version arabe des diaporamas.

   Le moteur de diaporama est cale a gauche de bout en bout : le contenu, le
   logo, le numero de page, la barre des sections, les commandes. Cette feuille
   met tout en miroir. Elle ne s applique QUE sous [dir="rtl"], donc les
   versions francaise et anglaise ne peuvent pas etre touchees.

   L avance reste la meme au clavier : la fleche droite avance, comme sur le
   site arabe de TwinMe, qui garde lui aussi la logique de progression. */

[dir="rtl"] body { direction: rtl; }

/* ---- Le texte de la diapositive passe a droite ---- */
[dir="rtl"] .slide .content { text-align: right; }
[dir="rtl"] .slide .content.left { left: auto; right: 0; }
[dir="rtl"] .slide .content.center { text-align: center; }

/* ---- Le cadrage de l image s inverse : le sujet reste du cote oppose
        au texte, sinon la photo se retrouve sous les mots ---- */
[dir="rtl"] .slide img.bg.fit-right { object-position: left center; }
[dir="rtl"] .slide img.bg.fit-left  { object-position: right center; }

/* ---- Le voile degrade s inverse aussi ---- */
[dir="rtl"] .scrim.left {
  background: linear-gradient(to left,
    rgba(4, 16, 27, .92) 0%, rgba(4, 16, 27, .72) 32%,
    rgba(4, 16, 27, .34) 62%, rgba(4, 16, 27, 0) 100%);
}
[dir="rtl"] .scrim.right {
  background: linear-gradient(to right,
    rgba(4, 16, 27, .92) 0%, rgba(4, 16, 27, .72) 32%,
    rgba(4, 16, 27, .34) 62%, rgba(4, 16, 27, 0) 100%);
}
[dir="rtl"] .slide.tm-voile-doux .scrim.left {
  background: linear-gradient(to left,
    rgba(4, 16, 27, .74) 0%, rgba(4, 16, 27, .52) 26%,
    rgba(4, 16, 27, .22) 52%, rgba(4, 16, 27, .05) 78%, rgba(4, 16, 27, 0) 100%);
}

/* ---- Le logo passe en haut a droite, le numero en bas a gauche ---- */
[dir="rtl"] .brand    { left: auto; right: clamp(20px, 3vw, 44px); }
[dir="rtl"] .slide-no { right: auto; left: clamp(20px, 3vw, 44px); }

/* ---- La barre des sections et le retour au sommaire ---- */
[dir="rtl"] .act-nav     { left: auto; right: clamp(20px, 3vw, 44px); text-align: right; }
[dir="rtl"] .site-return { left: auto; right: clamp(20px, 3vw, 44px); }
[dir="rtl"] .progress span { transform-origin: right center; }

/* ---- Les commandes du bas : on inverse l ordre, pas la fonction.
        La fleche « suivant » reste celle qui va vers la suite du recit ---- */
[dir="rtl"] .controls { flex-direction: row-reverse; }

/* ---- Les listes ---- */
[dir="rtl"] .tm-noms-sig,
[dir="rtl"] .tm-noms-analyses,
[dir="rtl"] .tm-marqueurs ul { text-align: right; padding-right: 0; }
[dir="rtl"] .tm-noms-sig li + li::before { margin-right: 0; margin-left: 18px; }
[dir="rtl"] .tm-noms-analyses li::before { margin-right: 0; margin-left: 9px; }
[dir="rtl"] .tm-marqueurs { direction: rtl; }

/* ---- Arbre et foret : la foret garde ses 70 pour cent, mais du bon cote ---- */
[dir="rtl"] .split-frame.tm-3070 { direction: ltr; }
[dir="rtl"] .split-frame.tm-3070 > * { direction: rtl; }

/* ---- Les boutons de fin ---- */
[dir="rtl"] .tm-boutons { justify-content: flex-start; }

/* ---- Les panneaux d aide et de notes ---- */
[dir="rtl"] .notes-panel,
[dir="rtl"] .help-panel { text-align: right; left: auto; right: clamp(20px, 3vw, 44px); }

/* ---- Le titre pose en haut sur le rendu du portail ---- */
[dir="rtl"] .slide.tm-titre-sombre .content { text-align: right; }

/* ---- L arabe demande un peu plus d interligne : les signes diacritiques et
        les jambages sortent d une boite calculee pour l alphabet latin ---- */
[dir="rtl"] .slide .content h1,
[dir="rtl"] .slide .content h2 { line-height: 1.26; padding-bottom: .1em; }
[dir="rtl"] .tm-desc,
[dir="rtl"] .tm-lit { line-height: 1.62; }
[dir="rtl"] .tm-marqueurs li { line-height: 1.6; }