/* =========================================================================
   Ajustements RTL (arabe). La structure utilise déjà des propriétés logiques
   (inset-inline, padding-inline, margin-inline) qui s'inversent seules.
   Ici on corrige uniquement ce qui reste : police, icônes directionnelles,
   éléments positionnés en %, et quelques détails mobiles.
   ========================================================================= */

/* --- Typographie arabe --- */
[dir="rtl"] body { font-family: 'Cairo', 'Open Sans', system-ui, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: 'Cairo', sans-serif; }
[dir="rtl"] .hero-title, [dir="rtl"] .text-gradient, [dir="rtl"] .slide-inner .hero-title { letter-spacing: 0; }
[dir="rtl"] .eyebrow, [dir="rtl"] .standard-code, [dir="rtl"] .kpi-delta { letter-spacing: 0; }

/* --- Icônes directionnelles (flèches) : on les retourne horizontalement.
       On cible les "liens flèche" (toujours une flèche) + la dernière icône
       des boutons CTA secondaires, sans toucher aux icônes de sens (livre,
       jauge…) placées AU DÉBUT des boutons. --- */
[dir="rtl"] .audience-link .icon,
[dir="rtl"] .service-link .icon,
[dir="rtl"] .standard-link .icon,
[dir="rtl"] .news-link .icon,
[dir="rtl"] .video-info .icon,
[dir="rtl"] .faq-home-actions .btn .icon,
[dir="rtl"] .section-cta .btn .icon,
[dir="rtl"] .dropdown-all .icon,
[dir="rtl"] .btn-light .icon:last-child,
[dir="rtl"] .drive-band .btn .icon { transform: scaleX(-1); }

/* --- Méthode : numéro d'étape (positionné en absolu) --- */
[dir="rtl"] .method-num { right: auto; left: 18px; }

/* --- Scroll-to-top : flèche vers le haut, bouton à droite --- */
[dir="rtl"] .scroll-top { transform: translateY(0) rotate(90deg); }
[dir="rtl"] .scroll-top.show .icon { transform: scaleX(-1); }

/* --- Soulignement du titre de section (positionné en left:50%) : OK car centré.
       Variante alignée (section-head-row) : on repasse à droite. --- */
[dir="rtl"] .section-head-row .section-title::after { left: auto; right: 0; }

/* --- Slider : flèches inversées + points centrés (déjà via translateX) --- */
[dir="rtl"] .slider-arrow .icon { transform: scaleX(-1); }

/* --- Lightbox : flèches inversées --- */
[dir="rtl"] .lightbox-nav .icon { transform: scaleX(-1); }

/* --- Chat : la bulle visiteur reste du bon côté (géré par align-self) ;
       on s'assure que le lanceur et le panneau collent au bon bord --- */
[dir="rtl"] .chat-launcher .icon { transform: scaleX(-1); }

/* =========================================================================
   MOBILE en arabe (≤ 768px) : le tiroir s'ouvre depuis la DROITE
   ========================================================================= */
@media (max-width: 768px) {
  /* Le drawer arrive de la droite en RTL (déjà via translateX(105%)),
     on aligne les contenus correctement */
  [dir="rtl"] .main-nav > a,
  [dir="rtl"] .has-dropdown > a { justify-content: flex-start; text-align: right; }

  /* Bouton flèche du sous-menu : à gauche en RTL (inset-inline-end gère déjà,
     mais on force la bordure du bon côté) */
  [dir="rtl"] .dd-toggle { border-inline-start: 1px solid var(--border); border-inline-end: none; }

  /* Élément actif : barre verte + retrait du bon côté (inset-inline gère) */
  [dir="rtl"] .main-nav > a.is-active,
  [dir="rtl"] .has-dropdown > a.is-active { padding-inline-start: 17px; }

  /* Boutons du slider : icônes retournées, texte bien centré */
  [dir="rtl"] .slide-inner { text-align: center; }

  /* Cartes secteurs / listes : puces du bon côté (gérées par dir, rien à forcer) */
  [dir="rtl"] .intro-list li,
  [dir="rtl"] .why-card li,
  [dir="rtl"] .feature-list li { text-align: right; }
}