/* ============================================================
   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{padding:0 24px 0 72px}
.fnews button{right:auto;left:6px;transform:scaleX(-1)}
/* le texte d'invite est en arabe : il part du bord droit, loin du bouton ;
   l'adresse tapée, elle, reste en latin, de gauche à droite */
.fnews input:placeholder-shown{direction:rtl;text-align:right}

/* le menu plein écran : Changa en 400 paraît maigre à côté de Boldonse,
   on lui donne le même poids visuel que la version française */
.nav__links a{font-weight:800;letter-spacing:0}

/* 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}

/* ---------- 4. l'outil de nom de domaine ----------
   « .ma » écrit au milieu d'une phrase arabe ressort « ma. » : le point
   est un caractère neutre, il se range du côté de la phrase. Les
   extensions, les noms de domaine et le menu du chercheur sont donc
   isolés en lecture latine — ce sont des adresses, pas du texte. */
.dmk,.dmk b,.dsearch__in,.dtop__d,.drow__d,.dhero__lead b,.dvs__mk,.dsearch__hint b{
  direction:ltr;unicode-bidi:isolate}
.dsearch__in{text-align:start}
.dsearch__hint{direction:rtl}


/* ---------- les deux pastilles de l'en-tête ----------
   Le bouton de commande et le sélecteur de langue sont bâtis autour d'une
   pastille ronde pleine : l'icône ou le drapeau. C'est elle qui donne sa
   forme au bouton, et le retrait est dissymétrique pour elle (6 px de son
   côté, 24 px du côté du texte).

   En lecture de droite à gauche, les éléments d'un flex s'inversent : la
   pastille passait à droite, contre le retrait de 24 px prévu pour le
   texte, et le texte contre les 6 px. On rétablit donc l'ordre d'origine.
   Seul l'ordre des deux blocs change : le texte reste écrit de droite à
   gauche. */
.nav__cta,
.lng__btn{flex-direction:row-reverse}


/* ---------- la FAQ ----------
   .faq__q impose text-align:left dans la feuille principale : en
   français la question part de la gauche et le « + » reste à droite.
   En arabe, l'ordre des deux blocs s'inverse bien tout seul, mais le
   texte restait collé au bord gauche de son espace au lieu de partir de
   la droite. On lui rend le début de ligne de sa langue. */
.faq__q{text-align:start}


/* ---------- le mur de téléphones ----------
   Le mur occupe la moitié droite (.mur__plane est calé à right:-10%) et
   un masque efface les téléphones derrière le texte, à gauche. En
   lecture de droite à gauche, l'œil part de la droite : le texte doit
   donc tenir la droite et le mur passer à gauche. On retourne les trois
   choses qui donnent ce sens — le calage du plan, le masque, et
   l'inclinaison 3D (seules les rotations Z et Y changent de signe, la
   bascule X reste, sinon le mur se coucherait vers l'arrière).
   .mur__plane garde direction:ltr : ses colonnes resteraient sinon
   rangées à l'envers, et les captures sont des sites français. */
.mur__txt{direction:rtl}
.mur__wall{-webkit-mask:linear-gradient(270deg,transparent 0,transparent 28%,#000 62%);
  mask:linear-gradient(270deg,transparent 0,transparent 28%,#000 62%)}
.mur__plane{right:auto;left:-10%;transform:rotateX(28deg) rotateZ(18deg) rotateY(8deg)}
@media(max-width:800px){.mur__plane{right:auto;left:-40%}}


/* ---------- la carte « en chiffres » ----------
   Trois choses y restaient composées pour le français.

   1. .proof__rows impose text-align:left : les titres et les légendes
      se collaient au bord gauche de la carte, loin de leur chiffre,
      alors qu'en français ils le touchent. Ils repartent de la droite,
      du côté du chiffre, et la ligne redevient une paire.
   2. Le chiffre et son unité (« 399 درهم ») n'étaient pas isolés : le
      grand prix l'est déjà plus haut, pas celui des lignes.
   3. L'unité héritait de la police d'affichage sur un interligne de 1 :
      les hampes basses du ه et du م se faisaient rogner, et elle
      touchait le chiffre. Même traitement que le grand prix.
   min-width : « درهم » est plus large que « DH », la colonne des
   chiffres s'élargit pour que les quatre restent alignés comme en
   français. Les unités vides (30, 2) ne prennent pas la marge. */
.proof__rows{text-align:right}
.proof__rows b{direction:rtl;unicode-bidi:isolate;min-width:4.2em}
.proof__rows 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}
.proof__rows b i:empty{margin:0}


/* ---------- les boutons ----------
   Un bouton est fait d'un texte et d'une pastille ronde, et son
   rembourrage est volontairement dissymétrique : 0,62 rem du côté de la
   pastille, 1,4 rem du côté du texte. Ces deux valeurs sont physiques,
   elles ne suivaient pas l'inversion : la pastille se retrouvait à
   23 px du bord au lieu de 11, donc collée au texte au lieu d'être
   calée contre le bord. On rend chaque valeur à son côté.
   WhatsApp : sa pastille est la seule à être placée avant le texte dans
   le code, elle basculait donc à droite alors que toutes les autres
   passent à gauche. row-reverse la remet du même côté que les autres.
   L'écart pastille/texte passe de 0,6 à 0,95 em : l'arabe est plus
   dense, la pastille a besoin d'un peu plus d'air pour s'en détacher. */
.btn{gap:.95em;padding-left:.52rem;padding-right:1.15rem}
.btn--lg{padding-left:.62rem;padding-right:1.4rem}
.btn--wa{flex-direction:row-reverse;padding-left:.52rem;padding-right:1.15rem}
.btn--wa.btn--lg{padding-left:.62rem;padding-right:1.4rem}