/* ═══════════════════════════════════════════════════════════
   EQUAMOOV — LA COUCHE ARABE
   ═══════════════════════════════════════════════════════════

   Chargée APRÈS css/style.css, et seulement par les pages de /ar/.
   Les cinq autres langues ne la voient jamais : elles ne la
   demandent pas.

   ⚠ CE FICHIER S'ÉCRIT À LA MAIN. Il n'est pas engendré par
     Tailwind et ne passe pas par npm run build. Une classe
     Tailwind écrite ici ne sera pas fabriquée — on n'écrit donc
     que du CSS ordinaire.

   ⚠ POURQUOI IL GAGNE SUR style.css : Tailwind 4 range tout sa
     production dans des @layer. Le CSS hors couche l'emporte sur
     le CSS en couche quelle que soit la spécificité. Ces règles
     passent donc devant sans avoir besoin de !important. Ne pas
     en ajouter.

   Trois choses seulement sont faites ici :
     1. les polices, parce que Fredoka et Nunito n'ont pas un seul
        glyphe arabe ;
     2. l'interlettrage et les majuscules, qui n'existent pas en
        arabe et qui, laissés en place, cassent l'écriture ;
     3. la vingtaine de règles de style.css qui nomment un côté.

   Le retournement des classes posées dans le HTML ne se fait PAS
   ici : il se fait dans outils/miroir.py, à la génération. Le
   pourquoi est écrit là-bas.
   ═══════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────
   1. LES POLICES
   ───────────────────────────────────────────────────────────

   Baloo Bhaijaan 2 remplace Fredoka pour les titres : c'est la
   plus proche de caractère — ronde, pleine — et son latin et son
   arabe sont dessinés dans la même famille, ce qui compte parce
   que « Equamoov », « ORIAS » et « Google Maps » restent en
   lettres latines au milieu de l'arabe.

   IBM Plex Sans Arabic remplace Nunito pour le texte courant.

   Les deux sont sous licence OFL. Les .ttf d'origine sont dans
   assets/fonts/Baloo_Bhaijaan_2,IBM_Plex_Sans_Arabic/ avec leurs
   OFL.txt ; les .woff2 servis ici en sont découpés
   (pyftsubset, latin + arabe + flèches, toutes les tables
   OpenType gardées).

   ⚠ NE PAS RETIRER layout-features EN REDÉCOUPANT. L'arabe est
     une écriture liée : init, medi, fina et rlig décident de la
     forme de chaque lettre selon ses voisines, et mark place les
     points et les voyelles. Sans elles le texte s'affiche en
     lettres détachées — lisible par un robot, illisible par un
     lecteur.

   Les poids déclarés correspondent un pour un à ceux du latin :
     affichage 400 / 500 / 600   (Fredoka 400 / 500 / 600)
     texte     300 / 400 / 600 / 700  (Nunito, les mêmes)
   N'en déclarer aucun de plus : chaque fichier arabe pèse trois
   fois son équivalent latin, l'écriture ayant quatre formes par
   lettre. */

@font-face {
  font-family: "Baloo Bhaijaan 2"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/baloo-bhaijaan-2-ar-400.woff2") format("woff2");
}
@font-face {
  font-family: "Baloo Bhaijaan 2"; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/baloo-bhaijaan-2-ar-500.woff2") format("woff2");
}
@font-face {
  font-family: "Baloo Bhaijaan 2"; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/baloo-bhaijaan-2-ar-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-300.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
}

/* Les deux variables du thème. Tout le site passe par elles —
   var(--font-display) et var(--font-body) — donc les redéfinir
   ici suffit : pas une seule règle de style.css à reprendre.
   Fredoka et Nunito restent en secours derrière, pour le cas où
   un caractère manquerait aux polices arabes. */
html[dir="rtl"] {
  --font-display: "Baloo Bhaijaan 2", "Fredoka", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Nunito", ui-sans-serif, system-ui, sans-serif;
}

/* L'arabe se lit plus petit que le latin à taille égale : les
   lettres sont moins hautes, et les points et voyelles demandent
   de la place au-dessus et au-dessous. D'où un corps un peu plus
   grand et un interligne plus ouvert. 6 % et non 10 : au-delà,
   les titres d'accueil débordaient en dessous de 400 px.

   ⚠ Mesuré dans le navigateur, pas calculé. Si on retouche, on
     remesure — à 390 px d'abord, c'est là que ça casse. */
[dir="rtl"] body {
  font-size: 106%;
  line-height: 1.85;
}

/* — LES GRANDS TITRES —
   Leurs interlignes serrés — .94, .96, .98, 1.02 — sont faits pour
   Fredoka, dont les capitales n'ont presque rien au-dessous de la
   ligne de base. L'arabe en a beaucoup : les boucles de ـم, ـح, ـج
   descendent loin, et les points des lettres descendent encore plus.
   À .94 les deux lignes de « ثروتكم، / طموحاتكم. » se touchaient.

   ⚠ Mesuré à l'écran, pas calculé. Ces valeurs se revérifient si on
     change de police : elles tiennent à la façon dont Baloo
     Bhaijaan 2 dessine ses descendantes, pas à une règle générale. */
[dir="rtl"] .display      { line-height: 1.26; }
[dir="rtl"] .calm         { line-height: 1.26; }
[dir="rtl"] .hero-line    { line-height: 1.28; }
[dir="rtl"] .display-sm,
[dir="rtl"] .banner-title,
[dir="rtl"] .conv-payoff,
[dir="rtl"] .intro-titre  { line-height: 1.3; }
[dir="rtl"] .vie-pivot    { line-height: 1.35; }


/* ───────────────────────────────────────────────────────────
   2. L'INTERLETTRAGE ET LES MAJUSCULES
   ───────────────────────────────────────────────────────────

   L'arabe est une écriture liée : les lettres se tiennent par un
   trait. Écarter les lettres ne les espace pas, ça COUPE le mot
   — et le resserrer les fait se chevaucher. Positif ou négatif,
   l'interlettrage est à mettre à zéro.

   ⚠ Les huit valeurs négatives (.display, .hero-line, .calm…)
     ne sont pas moins graves que les positives. Elles serrent un
     titre latin, elles écrasent un titre arabe.

   Exception gardée : les numéros — 01, 02, 03 — et le compteur
   « 1 / 4 ». Ce sont des chiffres latins, l'interlettrage y est
   voulu et n'y casse rien. D'où leur absence de cette liste :
   .door-num, .acc-num, .xp-num, .step-num, .value-num,
   .deliv-num, .qf-count et le .menu-link i qui porte « 01 ». */
[dir="rtl"] .display,
[dir="rtl"] .display-sm,
[dir="rtl"] .hero-line,
[dir="rtl"] .calm,
[dir="rtl"] .banner-title,
[dir="rtl"] .conv-payoff,
[dir="rtl"] .intro-titre,
[dir="rtl"] .vie-pivot,
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .hero-pastille,
[dir="rtl"] .foot-head,
[dir="rtl"] .explore-word,
[dir="rtl"] .assoc-wait,
[dir="rtl"] .post-wait,
[dir="rtl"] .actu-filtre,
[dir="rtl"] .card-meta,
[dir="rtl"] .banner-tag,
[dir="rtl"] .slide-meta {
  letter-spacing: 0;
}

/* L'arabe n'a pas de majuscules : text-transform n'y fait rien.
   Mais ces dix règles habillent des étiquettes où se glissent des
   mots latins — « Equamoov », « ORIAS », « Google Maps ». Laissée
   en place, la règle les met en capitales au milieu d'un texte
   arabe qui, lui, ne peut pas suivre : le mot latin se met à
   crier tout seul.
   Ce que ces étiquettes perdent en capitales et en interlettrage,
   elles le gardent par ailleurs — petit corps, graisse, couleur
   turquoise : elles restent reconnaissables comme étiquettes. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .hero-pastille,
[dir="rtl"] .foot-head,
[dir="rtl"] .assoc-wait,
[dir="rtl"] .post-wait,
[dir="rtl"] .actu-filtre,
[dir="rtl"] .card-meta,
[dir="rtl"] .banner-tag,
[dir="rtl"] .slide-meta {
  text-transform: none;
}


/* ───────────────────────────────────────────────────────────
   3. LES RÈGLES QUI NOMMENT UN CÔTÉ
   ───────────────────────────────────────────────────────────

   Relevé sur src/input.css. Ne sont PAS ici, et c'est voulu :

     .nav-link::after et .navtop::after  — left:50%/right:50% qui
       s'ouvrent à left:0/right:0 : symétrique de bout en bout.
     .explore-word::after, .mark i, .banner-cue, .burger.is-open
       span, .fab — symétriques ou centrés.

   Les ajouter reviendrait à les retourner deux fois.
   ─────────────────────────────────────────────────────────── */

/* — les flèches —
   Leur caractère est posé par le CSS, pas par le HTML : miroir.py
   ne les voit pas passer. Vers la gauche, donc, comme la lecture,
   et le survol les pousse du même côté. */
[dir="rtl"] .link-arrow::after,
[dir="rtl"] .hero-link::after {
  content: "←";
}
[dir="rtl"] .link-arrow:hover::after { transform: translateX(-4px); }
[dir="rtl"] .hero-link:hover::after { transform: translateX(-5px); }
[dir="rtl"] .door:hover .door-arrow { transform: translateX(-5px); }
[dir="rtl"] .menu-link:hover { transform: translateX(-0.5rem); }

/* — le bouton du menu —
   -mr-2 ramène le bouton vers le bord ; c'est l'autre bord ici. */
[dir="rtl"] .burger { margin-right: 0; margin-left: -0.5rem; }

/* — la bande défilante —
   Le ruban glisse de -50 % vers la gauche. En arabe il doit
   partir de l'autre côté, sinon le texte entre par la fin. */
@keyframes marquee-rtl { to { transform: translateX(50%); } }
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }

/* — la colonne de texte de l'accueil —
   La grande marge va du côté du .shell, la petite de l'autre.
   max() reste tel quel : c'est le même calcul, de l'autre bord. */
[dir="rtl"] .hero-copy {
  padding-left: 1.75rem;
  padding-right: max(1.75rem, calc((100% - 1400px) / 2 + 2.5rem));
}

/* — les vignettes de l'accueil —
   ⚠ Bloc mis en veille dans style.css à la demande du client.
     Retourné quand même : le jour où il revient, il revient
     retourné, et personne n'a à y repenser. */
[dir="rtl"] .hero-dots {
  right: auto;
  left: max(1.25rem, calc((100% - 1400px) / 2 + 2.5rem));
}
[dir="rtl"] .hero-dot > i { transform-origin: right center; }

/* — LE SURLIGNEUR —
   La signature de la marque : le trait jaune, turquoise ou magenta
   qui se peint sous un mot des grands titres. Il est tiré par
   scaleX depuis transform-origin, posé à « left center » dans
   style.css.

   ⚠ Le plus facile à manquer de tout ce fichier, parce qu'il ne
     casse rien : le trait apparaît, à la bonne taille, sous le bon
     mot. Il se peint simplement à l'envers — il part de la fin du
     mot arabe et remonte vers son début. On le voit une fois qu'on
     le sait, et pas avant.
   (left-[-.05em] et right-[-.05em] restent : la même valeur des
    deux côtés, rien à retourner.) */
[dir="rtl"] .mark i {
  transform-origin: right center;

  /* Et il remonte. bottom: .08em le pose juste au-dessus de la
     ligne de base — ce qui, en latin, le fait mordre le bas des
     lettres. En arabe les descendantes passent dessous : le trait
     se retrouvait SOUS le mot, flottant tout seul comme un
     soulignement raté. .32em le remet DANS la lettre, à la même
     hauteur relative qu'en français — où il mord le tiers bas de
     « ambitions ». Comparé à l'écran côte à côte, pas déduit. */
  bottom: .32em;
}

/* ⚠ RÈGLE DORMANTE — elle ne sert à rien aujourd'hui, et c'est
   pour ça qu'elle est écrite.

   Sur fond sombre le surligneur passe en mix-blend-mode: screen à
   55 % (.mark--dark) et se pose BAS, sous les lettres blanches :
   plus haut, il les mangerait. En arabe, .32em le mettrait en
   plein dedans. .18em le garde sous les corps de lettre tout en
   restant au-dessus des descendantes.

   Pourquoi dormante : .mark--dark N'EXISTE PAS dans les pages
   traduites. _batir_titre() ne reprend que la couleur du
   surligneur, pas ce modificateur-là. L'arabe partage donc le
   défaut de l'anglais, l'espagnol, l'allemand et le polonais.
   Signalé à Rino le 8 octobre, hors périmètre, pas corrigé ici.
   Le jour où _batir_titre() reprendra la classe, l'arabe sera
   juste tout seul. */
[dir="rtl"] .mark--dark i { bottom: .18em; }

/* — les barres de progression —
   scaleX part d'un bord : en arabe, de la droite. Trois endroits
   qui font la même chose, dont deux hors de l'accueil. */
[dir="rtl"] .track i {
  left: auto; right: 0;
  transform-origin: right center;
}
[dir="rtl"] .rail-bar span { transform-origin: right center; }

/* — le filet des étapes —
   Posé en classes dans le HTML (origin-left), donc déjà retourné
   par miroir.py. Rien à faire ici : la ligne est là pour qu'on ne
   le cherche pas. */

/* — le trait de la mention de conformité (mobile) — */
@media (max-width: 767px) {
  [dir="rtl"] .proof {
    border-left-width: 0;
    border-right-width: 2px;
    padding-left: 0;
    padding-right: 1.25rem;
  }
}

/* — l'accordéon — */
[dir="rtl"] .acc-title { text-align: right; }

/* — la bulle claire des cartes de valeurs — */
[dir="rtl"] .value::after { right: auto; left: -30%; }
[dir="rtl"] .value:hover::after { transform: translate(14%, -14%) scale(1.15); }

/* — les puces jaunes — */
[dir="rtl"] .pill-line { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .pill-line::before { left: auto; right: 0; }

/* — les fragments en escalier —
   Le décalage croissant donne l'impression d'une pile posée à la
   main. Il se lit du bord du texte : à droite en arabe. */
[dir="rtl"] .frag { text-align: right; }
[dir="rtl"] li:nth-child(1) > .frag { margin-left: 0; margin-right: 0; }
[dir="rtl"] li:nth-child(2) > .frag { margin-left: 0; margin-right: .7rem; }
[dir="rtl"] li:nth-child(3) > .frag { margin-left: 0; margin-right: .3rem; }
[dir="rtl"] li:nth-child(4) > .frag { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] li:nth-child(5) > .frag { margin-left: 0; margin-right: .5rem; }
[dir="rtl"] li:nth-child(6) > .frag { margin-left: 0; margin-right: 1.2rem; }
@media (min-width: 768px) {
  [dir="rtl"] li:nth-child(2) > .frag { margin-right: 1.6rem; }
  [dir="rtl"] li:nth-child(4) > .frag { margin-right: 2.2rem; }
  [dir="rtl"] li:nth-child(6) > .frag { margin-right: 2.6rem; }
}

/* — les halos de couleur du fond —
   Purement décoratifs. Retournés pour que la composition garde
   son équilibre : le halo qui pesait à gauche d'un titre doit
   peser du côté où le titre commence. */
[dir="rtl"] .aurora-1 { left: auto; right: -12vw; }
[dir="rtl"] .aurora-2 { right: auto; left: -10vw; }
[dir="rtl"] .aurora-3 { left: auto; right: 28vw; }

/* — la flèche de l'accordéon —
   Un SVG qui pointe en haut à DROITE, et qui au survol part dans
   cette direction. En arabe la sortie est de l'autre côté.
   scaleX(-1) retourne le dessin ; le translate qui suit est donc
   lu dans le repère retourné, d'où le +4 qui déplace vers la
   gauche à l'écran. Les deux dans la même déclaration : une
   seconde règle transform écraserait la première. */
[dir="rtl"] .acc-arrow { transform: scaleX(-1); }
[dir="rtl"] .acc-title:hover .acc-arrow,
[dir="rtl"] .acc.is-on .acc-arrow { transform: scaleX(-1) translate(4px, -4px); }

/* — la flèche des grandes portes — */
[dir="rtl"] .door--lg .door-arrow { right: auto; left: 1.75rem; }

/* — la puce des étapes — */
[dir="rtl"] .step-dot { left: auto; right: 0; }

/* — le menu déroulant des langues —
   Le panneau pend du bord du bouton. Le bouton ayant changé de
   côté, le panneau aussi, sinon il sort de l'écran. */
[dir="rtl"] .lang-liste { right: auto; left: 0; }

/* La coche de la langue courante se pousse vers l'autre bout. */
[dir="rtl"] .lang-liste a[aria-current]::after {
  margin-left: 0;
  margin-right: auto;
}

/* — le menu déroulant des formulaires —
   La place réservée au chevron change de côté. Hors accueil,
   écrit ici pour n'avoir pas à y revenir. */
[dir="rtl"] .qf-field select {
  padding-right: 1rem;
  padding-left: 42px;
  background-position: left 14px center;
}

/* ═══════════════ LA PROMESSE : LE CARRÉ DERRIÈRE LE TITRE ═══════════════
   ⚠ 16 octobre — relevé par Rino sur la home arabe.

   Le grand carré magenta de #positionnement est ancré à 56 px du bas de
   la section et mesure 260 px : il remonte donc jusqu'au milieu du bloc.
   Tant que le titre tenait sur trois lignes il passait dessous. Depuis
   que « Vous avez construit. » a été retiré le 15 octobre, la section
   est plus courte et le carré arrive derrière la dernière ligne du
   titre — c'est-à-dire derrière « أبعد », qui porte justement le
   surligneur MAGENTA. Un surligneur magenta sur un carré magenta ne se
   voit plus : le mot mis en avant est le seul qu'on ne distingue pas.

   L'arabe le montre en premier parce que rtl-ar.css l'agrandit de 6 %
   et lui donne des interlignes plus hauts : le titre descend plus bas
   que son équivalent latin.

   On le renvoie dans l'angle, sous la colonne de texte. Il reste
   visible — c'est une forme d'accent, pas un aplat — et il ne touche
   plus un seul mot. Les sélecteurs portent un id, donc ils l'emportent
   sur les classes Tailwind en ligne sans !important.
   ═══════════════════════════════════════════════════════════════════ */
html[dir="rtl"] #positionnement .ancre--carre {
  right: -86px;
  bottom: -34px;
}
@media (min-width: 768px) {
  html[dir="rtl"] #positionnement .ancre--carre {
    right: -158px;
    bottom: -62px;
  }
}

/* ═══════════════ L'EN-TÊTE SUR TÉLÉPHONE ═══════════════
   ⚠ 16 octobre — relevé par Rino à 360 et 390 px.

   La barre ne tient pas : logo + sélecteur de langue + bouton d'appel
   + burger dépassent les 320 px utiles d'un iPhone mini, et c'est le
   logo — premier élément, donc collé au bord droit en RTL — qui se
   fait rogner. « EQUAMOOV » sortait « ƎQUA ».

   C'est le bouton qui déborde, pas le logo. « المراجعة الشاملة » est
   plus long que « Faites le point », et c'est leur texte : on ne le
   raccourcit pas, on lui demande moins de place. Même famille que la
   barre allemande à 1280 px, à l'autre bout de l'échelle.

   Le burger porte « -mr-2 » dans style.css, un décalage écrit en dur
   vers la droite pour le coller au bord. Miroir ne retourne que les
   classes du HTML, pas les règles CSS : en RTL ce décalage tirait le
   burger DU MAUVAIS CÔTÉ, vers l'intérieur. On l'inverse.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 430px) {
  html[dir="rtl"] header .btn-primary {
    font-size: 12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  html[dir="rtl"] header .flex.items-center.gap-3 { gap: .5rem; }
  html[dir="rtl"] .burger { margin-right: 0; margin-left: -8px; }
}

/* ═══════════════ LA BARRE ARABE SUR GRAND ÉCRAN ═══════════════
   ⚠ 16 octobre. Diagnostic de Rino, et il est juste : le problème est
   de PLACE, pas de miroir. La barre dépasse dans toutes les langues ;
   seul change ce qui tombe dehors. En latin c'est le bouton d'appel,
   à la fin de la ligne. En arabe, la ligne est retournée, et c'est le
   LOGO qui sort — donc l'élément le plus visible de la page.

   On récupère la largeur là où elle ne coûte rien : l'écart entre les
   voix du menu et l'habillage du bouton. Le texte, lui, ne bouge pas :
   c'est le leur. Même méthode que la barre allemande à 1280 px —
   on demande moins de place, on ne raccourcit pas les mots.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  html[dir="rtl"] header nav { gap: 1.25rem; }
  html[dir="rtl"] header .btn-primary {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ═══════════════ LE CARROUSEL : TROIS CÔTÉS ÉCRITS EN DUR ═══════════════
   ⚠ 16 octobre — le vrai défaut derrière le titre coupé à 1728 px.

   miroir.py retourne les CLASSES du HTML. Ces trois règles-ci nomment
   un côté dans la FEUILLE DE STYLE : il ne les voit pas, et elles sont
   restées orientées pour le latin.

   .hero-copy est la colonne de texte des slides. Son grand padding est
   à GAUCHE — c'est lui qui aligne le titre sur la colonne centrée de
   1400 px : à 1728 px il vaut 204 px, contre 28 px à droite. En arabe
   le texte part de la droite : il naissait donc à 28 px du bord au lieu
   de 204, et tout ce qui dépassait sortait de l'écran. D'où le titre
   rogné que Rino a vu, et seulement sur les grandes largeurs — en
   dessous de 1400 px le calc() retombe sur 1.75rem des deux côtés et
   l'écart disparaît. C'est pour ça que la home arabe du 9 octobre,
   vérifiée à 1280, était passée.

   .hero-dots : les puces de navigation, collées au même bord que le
   texte. Même calcul, même inversion.

   .hero-dot > i : la barre de progression se remplit depuis son
   origine. En RTL elle doit partir de la droite, sinon elle se remplit
   à rebours du sens de lecture.
   ═══════════════════════════════════════════════════════════════════ */
html[dir="rtl"] .hero-copy {
  padding-left: 1.75rem;
  padding-right: max(1.75rem, calc((100% - 1400px) / 2 + 2.5rem));
}
html[dir="rtl"] .hero-dots {
  right: auto;
  left: max(1.25rem, calc((100% - 1400px) / 2 + 2.5rem));
}
html[dir="rtl"] .hero-dot > i { transform-origin: right; }