/* ============================================================
   VERSION ARABE — feuille additive, chargée uniquement par
   index-ar.html. Ne modifie jamais style.css : le site français
   reste strictement identique, quel que soit ce fichier.

   Ce que dir="rtl" fait déjà tout seul, sans qu'on y touche :
   Flexbox en `row` et CSS Grid suivent nativement le sens
   d'écriture — la navigation, la grille du héros (texte/illustration),
   les grilles de cartes se sont déjà inversées correctement.

   Ce qu'il reste à corriger à la main : les éléments en position
   fixe/absolue calés avec `left`/`right` physiques (qui ne suivent
   jamais la direction), et la taille de Cairo, qui rend plus grand
   qu'Inter Tight / Instrument Serif à valeur de police identique.
   ============================================================ */

/* ---------- 1 · calibration typographique de Cairo ----------
   Trois passes : 0.90 (insuffisant), puis une coupe encore plus
   agressive qui s'est révélée cette fois TROP petite — les titres ont
   perdu leur aspect de titre une fois combinés à la consolidation des
   lignes (qui, à elle seule, réduisait déjà beaucoup la hauteur
   perçue). Retour à l'échelle 0.78 pure, la même appliquée au reste
   du site, pour un rendu cohérent. Toujours à vérifier sur le vrai
   déploiement — Cairo ne peut pas se charger dans cet environnement. */
html[lang="ar"] .d1{font-size:clamp(23.4px,2.51vw,41.2px);line-height:1.18;letter-spacing:0}
html[lang="ar"] .d2{font-size:clamp(22.5px,2.46vw,37.4px);line-height:1.22;letter-spacing:0}
html[lang="ar"] .d3{font-size:clamp(20px,1.87vw,27.5px);line-height:1.3;letter-spacing:0}
html[lang="ar"] .lede{font-size:clamp(14px,1.09vw,16.2px);line-height:1.7}
html[lang="ar"] body{font-size:14.9px;line-height:1.75}
html[lang="ar"] .calc-ask{font-size:clamp(20px,2.34vw,30px)}
html[lang="ar"] .calc-lead{font-size:clamp(13.1px,1.48vw,16.8px);line-height:1.4}
html[lang="ar"] .s2-recap .rline p{font-size:clamp(13.1px,1.01vw,15.6px)}
html[lang="ar"] .exit-q{font-size:16px}
html[lang="ar"] .tri-card b{font-size:11.9px;line-height:1.35}
html[lang="ar"] .s4-cost h3{font-size:16.8px;line-height:1.3}
html[lang="ar"] .s6-pillar h3{font-size:18.7px}
html[lang="ar"] .s6-concl-box b{font-size:21.2px}
html[lang="ar"] .s7-concl b,
html[lang="ar"] .s8-final b,
html[lang="ar"] .s3-concl b,
html[lang="ar"] .s10-final b{font-size:18.7px}
html[lang="ar"] .formcard h3,
html[lang="ar"] .calc h3{font-size:22.5px}
html[lang="ar"] .of-id h3{font-size:clamp(20px,1.87vw,26.2px)}
html[lang="ar"] .of-grid .of-id h3{font-size:clamp(18.1px,1.56vw,23.1px)}
html[lang="ar"] .s9-mstep h3{font-size:18.1px}
html[lang="ar"] .s6cap-txt h3{font-size:12.5px}

@media (max-width:899px){
  html[lang="ar"] .d1{font-size:clamp(22.5px,5.56vw,28.1px)}
  html[lang="ar"] .s1-copy .d1{font-size:clamp(18.8px,1.99vw,28.1px)}
  html[lang="ar"] .d2{font-size:clamp(17.8px,3.31vw,21.1px)}
  html[lang="ar"] .s2-copy .d2{font-size:clamp(15px,4.22vw,19.7px)}
  html[lang="ar"] .s6-stage .s6-copy .d2{font-size:clamp(14px,3.86vw,17.8px)}
  html[lang="ar"] .lede{font-size:14.3px}
  html[lang="ar"] .calc-ask{font-size:clamp(16.8px,4.99vw,23.7px)}
  html[lang="ar"] .tri-card b{font-size:10.2px}
  html[lang="ar"] .s9-triwrap.portrait .tri-card b{font-size:9.98px}
  html[lang="ar"] .d3{font-size:17px;line-height:1.3}
  html[lang="ar"] .s2-recap .rline p{font-size:11.5px}
}

/* ---------- 2 · éléments à position physique fixe, à recaler ---------- */
html[lang="ar"] .progress{right:auto;left:28px}
html[lang="ar"] .wa-float{right:auto;left:28px}
@media (max-width:899px){
  html[lang="ar"] .wa-float{right:auto;left:16px}
}

/* Le repère vertical de section se lit désormais côté gauche. On évite
   volontairement `writing-mode:vertical-rl` pour l'arabe — le rendu des
   lettres arabes en mode vertical est peu fiable d'un moteur à l'autre,
   les lettres perdent parfois leurs formes de liaison. On fait tourner
   un texte horizontal normal à la place, qui garde une forme fiable. */
html[lang="ar"] .progress .plabel{
  right:auto;left:14px;top:50%;
  writing-mode:horizontal-tb;
  transform:rotate(-90deg) translateX(50%);
  transform-origin:right center;
}

/* ---------- 4 · scènes épinglées à deux blocs (texte + visuel) ----------
   Ces sections utilisent position:absolute avec left/right physiques
   pour placer le panneau de texte et la zone visuelle — ça ne suit
   jamais dir="rtl" automatiquement, contrairement à Flexbox/Grid.
   Panneau de texte : de left:var(--mx) à right:var(--mx).
   Zone visuelle : mêmes proportions, côté opposé. */

/* S2 · « la seconde qui suit » — le panneau de texte passe à droite ;
   les éléments visuels (recherche, cartes, épingles) sont déjà centrés
   via left:50%, donc rien d'autre à corriger. */
html[lang="ar"] .s2-copy{left:auto;right:var(--mx)}

/* S6 · « les six signaux » — texte à droite, fiche GBP à gauche
   (33%/67% mesuré sur les vraies valeurs : 34% de large, scission à 36%). */
html[lang="ar"] .s6-copy{left:auto;right:var(--mx)}
html[lang="ar"] .s6-scene{right:auto;left:0}
@media (min-width:900px){
  html[lang="ar"] .s6-scene{left:0;right:36%}
}

/* S9 · « six mois » — texte à droite ; les deux preuves flottantes
   (fiche, rapport) étaient calées à droite pour laisser la place au
   texte à gauche : elles passent à gauche pour la même raison, miroir. */
html[lang="ar"] .s9-copy{left:auto;right:var(--mx)}
html[lang="ar"] .s9-fiche{right:auto;left:6%}
html[lang="ar"] .s9-report{right:auto;left:6%}
@media (max-width:899px){
  html[lang="ar"] .s9-fiche{right:auto;left:3%}
  html[lang="ar"] .s9-report{right:auto;left:3%}
}

/* S5 · le diagramme de Venn — texte de comparaison codé en dur en
   text-align:left dans style.css (jamais direction-aware), corrigé ici. */
html[lang="ar"] .s5-split{text-align:right}

/* Le calculateur construit son résultat animé colonne de chiffre par
   colonne de chiffre, dans un conteneur flex — sous dir="rtl", Flexbox
   inverse l'ordre visuel des colonnes comme n'importe quel autre flex
   row, et un nombre écrit 60000 s'affichait 00006. Un nombre n'est
   jamais un texte à inverser : on isole ces conteneurs en LTR. */
html[lang="ar"] .roll{direction:ltr}

/* Règle générale : tout élément qui affiche uniquement un nombre (prix,
   valeur d'un panneau de vérification, pourcentage, donnée flottante en
   arrière-plan) est protégé en LTR. Le calculateur ("00006" au lieu de
   "60000") et le second montant mensuel ("000 5" au lieu de "5 000")
   avaient la même cause : un nombre encadré d'éléments ou de texte arabe
   sans isolation explicite peut voir son ordre interne perturbé selon le
   contexte. Plutôt que corriger un cas à la fois, la règle s'applique à
   chaque famille de nombres du site. */
html[lang="ar"] .sp-v,
html[lang="ar"] .of-amount,
html[lang="ar"] .s2-rain i{direction:ltr;unicode-bidi:isolate}

/* Bandeau de métiers (S8) et mur d'avis (S12) : les deux pistes gardent
   la MÊME mécanique qu'en français (le JS anime un déplacement en
   pixels/pourcentage sur un conteneur flex). Pour que ce calcul reste
   valide, la piste elle-même est en LTR — mais son CONTENU (chaque
   pastille, chaque carte d'avis) repasse en RTL, pour que le texte
   arabe se lise correctement à l'intérieur. Le sens de défilement est
   inversé côté HTML (data-dir), pas ici. */
html[lang="ar"] .mq-wrap,
html[lang="ar"] .mq{direction:ltr}
html[lang="ar"] .mq .chip{direction:rtl}
html[lang="ar"] .s12-row,
html[lang="ar"] .s12-track{direction:ltr}
html[lang="ar"] .s12-track .rv{direction:rtl;text-align:right}

/* Les tirets devant chaque ligne des formules (S13) sont calés en
   padding-left / left:0 physiques dans style.css — jamais du bon côté
   en arabe, où le tiret doit précéder le texte à droite, pas à gauche. */
html[lang="ar"] .of-list li{padding-left:0;padding-right:24px}
html[lang="ar"] .of-list li::before{left:auto;right:0}
html[lang="ar"] .of-grid .of-list li{padding-right:22px}

/* L'escalier des trois phrases (S2) grandit depuis le bord gauche en
   français (transform-origin physique, jamais direction-aware) — en
   arabe, la phrase doit se déployer depuis la droite, là où commence
   sa lecture. */
html[lang="ar"] .s2-recap .rline{transform-origin:100% 50%}

/* Cinq autres endroits de style.css figent text-align:left en dur,
   sans jamais suivre dir — même correction pour chacun. */
html[lang="ar"] .pick-o,
html[lang="ar"] .dossier-head,
html[lang="ar"] .faq-q,
html[lang="ar"] .exit-opt{text-align:right}

/* ---------- 5 · notes sur ce qui reste volontairement inchangé ----------
   La géométrie interne des compositions elles-mêmes (le tracé de la
   constellation S6, la ville et l'immeuble de S9, le diagramme de
   Venn de S5, la carte du héros) reste identique à la version
   française : ce sont des dessins réglés au pixel, centrés ou
   symétriques dans leur propre boîte, qui héritent déjà du bon côté
   de page une fois leur conteneur repositionné ci-dessus. */