/* ──────────────────────────────────────────────────────────────────────────
   rtl.css — mise en page de droite à gauche, pages arabes uniquement.
   Chargé après style.css, jamais sur les pages FR ou EN.

   Les grilles et les conteneurs flex s'inversent déjà seuls sous dir="rtl" :
   seules les propriétés physiques (left/right, margin-left…), les flèches et
   les quelques blocs qui doivent rester de gauche à droite sont repris ici.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Typographie ── */
[dir="rtl"] body,
[dir="rtl"] .btn,
[dir="rtl"] .lang-btn,
[dir="rtl"] .ndtog,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button{font-family:'Noto Sans Arabic','Manrope',system-ui,sans-serif}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0}
[dir="rtl"] .lbl,[dir="rtl"] .eyebrow,[dir="rtl"] .strip-lbl,
[dir="rtl"] .legal-badge,[dir="rtl"] .pc2-plan{letter-spacing:0;text-transform:none}

/* ── Barre de navigation ── */
[dir="rtl"] .nav-links{margin-left:0;margin-right:4px}
[dir="rtl"] .nav-r{margin-left:0;margin-right:auto}
[dir="rtl"] .lang-dd{right:auto;left:0}
[dir="rtl"] .ndi-badge{margin-left:0;margin-right:5px}
[dir="rtl"] .mob-sub{padding:4px 16px 8px 0}
[dir="rtl"] .spec-fn{margin-left:0;margin-right:6px}
[dir="rtl"] .spec-live{margin-left:0;margin-right:auto}

/* ── Flèches directionnelles ──
   Les chevrons (menus déroulants) pointent vers le bas : on les laisse. */
[dir="rtl"] .btn svg,
[dir="rtl"] .fsub svg,
[dir="rtl"] .ph-send{transform:scaleX(-1)}
[dir="rtl"] .ndtog svg,
[dir="rtl"] .lang-btn svg,
[dir="rtl"] .fsel{transform:none}

/* ── Texte à l'intérieur des SVG ──
   Les <text> des logos opérateurs sont positionnés par une coordonnée x fixe,
   calculée pour un flux de gauche à droite. Sous dir="rtl" ils partent de ce x
   vers la gauche et sortent du viewBox : seules les formes restaient visibles.
   Les logos sont des marques, leur sens de lecture ne s'inverse pas. */
[dir="rtl"] svg{direction:ltr}
[dir="rtl"] svg text{direction:ltr;unicode-bidi:bidi-override}

/* ── Hero : carte téléphone ── */
/* Symétrique du FR. Remontée de 28px : en RTL le nom de l'expéditeur occupe
   le côté que la carte recouvrirait sinon. */
[dir="rtl"] .fl-dlr{right:auto;left:-24px;top:-10px}
[dir="rtl"] .fl.fl-l{left:auto;right:-44px}
[dir="rtl"] .fl.fl-r{right:auto;left:-28px}
[dir="rtl"] .bub-in,
[dir="rtl"] .bub-green{border-bottom-left-radius:13px;border-bottom-right-radius:3px}
[dir="rtl"] .bub-out{border-bottom-right-radius:13px;border-bottom-left-radius:3px}

/* ── KPI : la séparation passe à gauche ── */
[dir="rtl"] .kpi-card{border-right:none;border-left:1px solid var(--bd)}
[dir="rtl"] .kpi-card:last-child{border-left:none}
[dir="rtl"] .hstat{border-right:none;border-left:1px solid var(--bd)}
[dir="rtl"] .hstat:last-child{border-left:none}

/* ── Exemples de SMS et encadrés ── */
[dir="rtl"] .sms-preview{border-left:1px solid rgba(0,201,167,.25);border-right:3px solid var(--teal)}
[dir="rtl"] .legal-sec ul,[dir="rtl"] .legal-sec ol,
[dir="rtl"] .legal-toc ol{padding-left:0;padding-right:20px}

/* ── Pied de page ── */
[dir="rtl"] .ft-brand{align-items:flex-start}

/* ── Bouton WhatsApp flottant ── */
[dir="rtl"] .wa-float{right:auto;left:24px}
@media(max-width:768px){[dir="rtl"] .wa-float{right:auto;left:16px}}

/* ── Formulaire ──
   Le chevron de fond des <select> est positionné à droite par style.css. */
[dir="rtl"] .fsel{background-position:left 14px center;padding-left:38px;padding-right:14px}

/* ── Blocs qui restent de gauche à droite ──
   Numéros, adresses e-mail, URL, clés API et code ne se lisent pas en RTL. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .ft-em,
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .ltr{direction:ltr;unicode-bidi:embed;text-align:left}
[dir="rtl"] pre{display:block;text-align:left}
[dir="rtl"] code,[dir="rtl"] .ltr{display:inline-block}

/* Horodatages et accusés : suite « heure · ✓✓ » sans texte arabe, à lire
   de gauche à droite comme dans la messagerie d'origine. */
[dir="rtl"] .bub-time{direction:ltr;unicode-bidi:embed;text-align:right}
[dir="rtl"] .bub-out .bub-time{text-align:left}

/* ── Tableaux de prix ── */
[dir="rtl"] .legal-table th,[dir="rtl"] .legal-table td,
[dir="rtl"] .wa-price-table th,[dir="rtl"] .wa-price-table td,
[dir="rtl"] .al-price-table th,[dir="rtl"] .al-price-table td{text-align:right}
/* Le montant suit le flux arabe : « 0,49 درهم » avec le nombre à droite.
   Forcer direction:ltr ici placerait l'unité avant le chiffre. */
[dir="rtl"] .pc2-amount{text-align:right}
