/* ============================================================
   LA VERSION ARABE : écriture de droite à gauche, polices arabes
   ------------------------------------------------------------
   Chargée uniquement par les pages /ar/ (tools/i18n-build.mjs), par
   dessus base.css et site.css. Elle ne touche JAMAIS aux pages
   françaises ou anglaises.

   Deux choses seulement :
     1. les polices. Boldonse et Satoshi n'ont pas de caractères arabes.
        Les titres passent en Changa (lettres serrées, gras franc, très
        « affiche » : c'est elle qui garde le mieux le caractère de
        Boldonse) et le texte courant en
        IBM Plex Sans Arabic (très lisible à petite taille).
        Les chiffres et les mots latins restants (Google, WhatsApp, MAD)
        gardent Satoshi : la pile de polices le prévoit.
     2. le sens de lecture. dir="rtl" retourne déjà les flex, les grilles
        et l'alignement du texte ; il reste à retourner ce qui est posé
        en dur à gauche ou à droite (positions absolues, décalages,
        icônes qui pointent, dégradés de bord).
   ============================================================ */

/* ---------- 1. les polices ---------- */
:root{
  --font-body:'IBM Plex Sans Arabic','Satoshi',system-ui,sans-serif;
  --font-display:'Changa','IBM Plex Sans Arabic',system-ui,sans-serif;
}
body{font-family:var(--font-body)}

/* Boldonse écrit en capitales très serrées : l'arabe ne se met pas en
   capitales et n'aime pas les interlignes courts. On rend donc aux
   titres une casse normale, un interligne respirant et un gras franc.
   Changa est déjà compacte : un demi-cran d'interlettrage en plus
   suffit à retrouver la densité du titre français. */
.hero-type,.h2,h1,h2,h3,.ofh__t,.px2 h2,.mot{
  font-family:var(--font-display);
  text-transform:none;
  font-weight:800;
  letter-spacing:0;
  line-height:1.42;
}
.hero-type{font-size:clamp(1.9rem,3.8vw,3.2rem)}
.tag,.crumb,.shead .tag,.ck__k,.fml__tag{letter-spacing:0;text-transform:none}
.lead,.soft,p{line-height:1.9}
.btn,.nav__cta,.ofbar__go,.fml__go,.ck__cta,.ck__pay{letter-spacing:0;font-weight:600}
/* le surlignage des titres : la pastille colle moins haut en arabe */
.hl{padding:.08em .34em .16em}

/* les nombres restent en chiffres occidentaux (2 999, 399 : c'est
   l'usage au Maroc) mais le montant se lit comme le reste, de droite à
   gauche : le chiffre d'abord, la devise à sa gauche — « 399 درهم ».
   L'isolement empêche ce petit bloc de perturber la phrase autour. */
.pbox__amt b,.ofh__price b,.fml__p b,.proof__big,.fig b,.tkt__total b,
.ck__total b,.px2-sel__price b{font-family:'Boldonse','Changa',sans-serif;direction:rtl;unicode-bidi:isolate}

/* l'unité collée au prix (« درهم », « /الشهر ») est de l'arabe posé au
   milieu d'un chiffre composé en Boldonse, sur un interligne de 0,95 :
   les hampes basses du ه et du م se faisaient rogner. On lui rend sa
   police de texte, son propre interligne, et on l'écarte du chiffre. */
.ofh__price b i,.pbox__amt b i,.fml__p b i,.fig b i,.proof__big i,
.tkt__total b i,.ck__total b i,.px2-sel__price b i{
  font-family:var(--font-body);font-weight:700;line-height:1.35;
  display:inline-block;vertical-align:.08em;margin-left:0;margin-right:.22em}
.ofh__price b i{font-size:.32em}
.ofh__price b{line-height:1.12}

/* le filet qui sépare le prix de sa légende passe de l'autre côté */
.ofh__price span{padding-left:0;border-left:0;
  padding-right:clamp(.9rem,1.6vw,1.3rem);border-right:2px solid var(--line-2)}

/* ---------- 2. le sens de lecture ---------- */
/* la barre du haut : la pastille « menu » passe à gauche, ses coins avec */
.nav__toggle{right:auto;left:max(var(--gut),22px)}
.nav__corner--l{left:auto;right:-17px;transform:scaleX(-1)}
.nav__corner--r{right:auto;left:-17px;transform:scaleX(-1)}
.nav__panel{transform-origin:0 0}
.lng__menu{right:auto;left:0;transform-origin:0 0}

/* les flèches des boutons pointent vers la gauche */
.btn__ic svg,.alink svg,.fml__go svg,.ck__cta svg,.px4-go svg,.ofbar__go svg,
.bmore i svg,.case__go svg,.ck__who button svg,.vv__visit svg{transform:scaleX(-1)}
.btn:hover .btn__ic svg,.alink:hover svg{transform:scaleX(-1)}

/* les blocs posés en absolu, retournés */
.mph__b--top-l{left:auto;right:14px}
.mph__b--top-r{right:auto;left:14px}
.mph__b--bot-l{left:auto;right:14px}
.vv__card{left:auto;right:0}
.vv__tel{right:auto;left:9%}
.ck__delai{padding-left:0;padding-right:1.9rem}
.ck__steps li+li::before{margin-right:0;margin-left:.25rem}
.ct__chev{right:auto;left:1rem;transform:scaleX(-1)}
.ck__avs img+img,.deck__avs span+span{margin-left:0;margin-right:-9px}
.ck__avs img:first-child{margin-right:0}
.days::before{left:auto;right:0}
.bpost__cat{left:auto;right:16px}
.ill__pill--a{left:auto;right:8%}
.ill__pill--b{right:auto;left:8%}
.deck__chip--tl{left:auto;right:12px}
.deck__chip--tr{right:auto;left:12px}
.deck__chip--bl{left:auto;right:12px}
.ecta__blob--1,.cta__blob--1{left:auto;right:-10%}
.ecta__blob--2,.cta__blob--2{right:auto;left:-12%}
.hv__frame,.hv__burger,.hv__links,.hv__palette,.hv__seo,.hv__cursor{direction:ltr}

/* les listes à puces de la prose et des cartes */
.prose ul li::before,.faq__inner li::before{margin-right:0;margin-left:.6rem}
.prose blockquote{border-left:0;border-right:3px solid var(--terracotta);padding-left:0;padding-right:1.2rem}
.toc{direction:rtl}

/* les rubans qui défilent gardent leur sens : le texte y est déjà
   retourné par le navigateur, seule l'animation doit repartir dans
   l'autre sens pour ne pas se lire à l'envers */
.marquee__set,.mur__track,.px4-rub__track{direction:rtl}

/* la vitrine du hero et les captures de sites restent en LTR : ce sont
   des images de sites français, les retourner n'aurait pas de sens */
.ofv,.ofv__bar,.ofv__foot,.vv__win,.vv__bar,.mur,.shots,.px3-rec__doc,
.tkt,.hy-mini,.px2-plan__l{direction:ltr}
.ofv__cap,.vv__card,.tkt__lines,.px3-rec__l{direction:rtl}

/* le formulaire et les champs */
input,textarea,select{text-align:right}
input[type=email],input[type=tel],input[type=url]{text-align:left;direction:ltr}
.ck__seg,.px2-sel__seg{direction:rtl}

/* le pied de page */
.foot__cols,.foot__bot{text-align:right}
.fnews button{right:auto;left:6px;transform:scaleX(-1)}

/* la barre collante de commande */
.ofbar__in{flex-direction:row-reverse}

/* sur téléphone, le logo est à droite : la pastille « menu » reste donc
   à gauche, sinon les deux se superposent. */

/* ---------- 3. le débordement horizontal ----------
   Les bandeaux qui défilent (rail des réalisations, mur de logos) sont
   des pistes plus larges que l'écran, clipées par leur conteneur. En
   écriture arabe, le point de départ passe à droite et ces pistes
   poussaient la page à 11 000 px de large : tout le contenu se
   retrouvait hors de l'écran. On les remet donc dans le sens latin —
   ce sont des captures de sites, elles se lisent de gauche à droite —
   et on empêche la page de déborder. `clip` plutôt que `hidden` : il
   ne crée pas de conteneur de défilement et ne casse pas les éléments
   collants (récapitulatif de commande, sommaire d'article). */
html,body{overflow-x:clip}
.marquee,.marquee__track,.marquee__set,
.shots__rail,.shots__track,.shots__set,
.mur,.mur__wall,.mur__plane,.px4-rub__band,.px4-rub__track{direction:ltr}

/* Le lien « aller au contenu » est caché hors écran à gauche
   (left:-9999px). En lecture de droite à gauche, ce décalage n'est plus
   « avant » la page mais « après » : il ajoutait 10 000 px de vide et
   poussait tout le contenu hors de l'écran. Il se cache donc à droite. */
.skip{left:auto;right:-9999px}
.skip:focus{right:auto;left:auto;inset-inline-start:12px}