/* ══════════════════════════════════════════════════════════════════════════
   BOOTH AI STUDIO — CE QUE LE SENS DE LECTURE NE CORRIGE PAS TOUT SEUL (i176)
   ══════════════════════════════════════════════════════════════════════════

   Tout le CSS du site a été converti en propriétés logiques :
   `margin-inline-start` au lieu de `margin-left`, `inset-inline-start` au
   lieu de `left`, `text-align:start` au lieu de `left`. Ces propriétés
   suivent le sens de lecture, donc elles se retournent toutes seules quand
   la page passe en `dir="rtl"`, et elles sont identiques aux anciennes dans
   les dix langues qui se lisent de gauche à droite.

   Reste ce qu'aucune propriété logique ne couvre. C'est tout ce fichier, et
   il ne s'applique QU'EN arabe (ou toute autre écriture droite-à-gauche).

   Ce qui n'est VOLONTAIREMENT pas retourné : les animations décoratives
   (le balayage de lumière sur une carte, la dérive du mur du héros, la
   rotation des vignettes). Un reflet n'a pas de sens de lecture, et le
   retourner ne rendrait service à personne.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. LA LETTRINE ────────────────────────────────────────────────────────
   `float` n'a pas d'équivalent logique fiable sur tous les navigateurs, et
   la marge de la lettrine est écrite en raccourci (haut droite bas gauche) :
   les deux doivent être retournés à la main. */
[dir="rtl"] .occ-texte p:first-child::first-letter{
  float:right;
  margin:.06em 0 0 .1em;
}

/* ── 2. LES CHEVRONS DE LA VISIONNEUSE ────────────────────────────────────
   Leurs POSITIONS se retournent déjà (inset-inline). Mais le dessin, lui,
   ne se retourne pas : « précédent » se retrouvait à droite avec un chevron
   qui pointe à gauche. On échange donc les deux glyphes. */
[dir="rtl"] .lb-prev{font-size:0}
[dir="rtl"] .lb-prev::before{content:"\203A";font-size:2.4rem;line-height:1}
[dir="rtl"] .lb-next{font-size:0}
[dir="rtl"] .lb-next::before{content:"\2039";font-size:2.4rem;line-height:1}

/* ── 3. LES FLÈCHES ÉCRITES DANS LE TEXTE ─────────────────────────────────
   « ← Galeries », « Voir le catalogue → » : la flèche fait partie du
   balisage ou de la traduction. Celles du balisage sont retournées ici, par
   un miroir horizontal qui ne touche qu'au dessin. Celles des traductions
   sont écrites dans le bon sens directement dans lang/ar.php. */
[dir="rtl"] .g-back::first-letter,
[dir="rtl"] .occ-fil-retour::first-letter{
  display:inline-block;
  transform:scaleX(-1);
}

/* ── 4. CE QUI DOIT RESTER EN CHIFFRES OCCIDENTAUX ────────────────────────
   Les prix, les codes de cabine et les adresses restent lisibles de gauche
   à droite même au milieu d'une phrase arabe : sans cette isolation, un
   « 20 € » collé à du texte arabe se réordonne à l'affichage. */
[dir="rtl"] .hpamt,
[dir="rtl"] .b-prix,
[dir="rtl"] .prod-price,
[dir="rtl"] .cart-sum,
[dir="rtl"] .lb-count,
[dir="rtl"] code,
[dir="rtl"] .mono{
  direction:ltr;
  unicode-bidi:isolate;
}

/* ── 5. LES PUCES ET LES LISTES ────────────────────────────────────────────
   Une liste à puces garde ses puces du côté de la lecture. */
[dir="rtl"] ul,
[dir="rtl"] ol{padding-inline-start:1.2em;padding-inline-end:0}

/* ── 6. LES CHAMPS DE SAISIE ───────────────────────────────────────────────
   Un champ qui attend une adresse e-mail, une URL ou un code se remplit de
   gauche à droite, même sur une page arabe : c'est le contenu qui décide,
   pas la page. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[name="public_slug"],
[dir="rtl"] input[name="parent_password"],
[dir="rtl"] input[type="password"]{
  direction:ltr;
  text-align:start;
}