/* =====================================================================
   WEBI — Sens d'ecriture arabe (RTL)
   Chargee uniquement sur /ar/... , APRES theme.css.
   Le prefixe [dir="rtl"] garantit la priorite sur les regles du theme,
   y compris celles placees dans des media queries.
   ===================================================================== */

[dir="rtl"] {
  --start: right;
  --end: left;
}

[dir="rtl"] body { text-align: right; }

/* Les suites latines (telephone, e-mail, URL, prix, code) restent lisibles
   de gauche a droite meme au milieu d'un texte arabe. */
[dir="rtl"] .ltr,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .footer__contact-value,
[dir="rtl"] .contact-card__value,
[dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] pre {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* ------------------------------ Listes ------------------------------ */
[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 20px; }

/* ------------------------------ Accessibilite ------------------------------ */
[dir="rtl"] .skip-link { left: auto; right: -9999px; }
[dir="rtl"] .skip-link:focus { left: auto; right: 0; }
[dir="rtl"] .qf-hp { left: auto; right: -9999px; }

/* ------------------------------ En-tete & navigation ------------------------------ */
[dir="rtl"] .main-nav__item.is-button { margin-left: 0; margin-right: 14px; }
[dir="rtl"] .main-nav__sub { left: auto; right: 0; }
[dir="rtl"] .main-nav__item > a svg { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .header__inner .lang-switch { margin-left: 6px; margin-right: auto; }

/* Le panneau mobile arrive par la gauche */
[dir="rtl"] .mobile-menu__panel { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

/* Les chevrons « suivant / precedent » pointent dans l'autre sens */
[dir="rtl"] .breadcrumb__sep,
[dir="rtl"] .btn--arrow svg,
[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }

/* ------------------------------ Blocs de contenu ------------------------------ */
[dir="rtl"] .intro-video__media::before { right: auto; left: -18px; }
[dir="rtl"] .image-services.image-right .image-services__inner { margin-left: 0; margin-right: auto; }
[dir="rtl"] .price-card__features { text-align: right; }
[dir="rtl"] .qf-field select { padding-right: 14px; padding-left: 40px; background-position: left 14px center; }
[dir="rtl"] .table-compare th, [dir="rtl"] .table-compare td { text-align: right; }

/* ------------------------------ Article ------------------------------ */
[dir="rtl"] .prose-figure { float: left; }
[dir="rtl"] .prose-figure--left { float: right; }
[dir="rtl"] .article__content .note {
  border-left: 0;
  border-right: 4px solid var(--brand);
  border-radius: var(--radius) 0 0 var(--radius);
}
[dir="rtl"] .article__card--list li { padding-left: 0; padding-right: 16px; }
[dir="rtl"] .article__card--list li::before { left: auto; right: 0; }
[dir="rtl"] .page-title.is-split { text-align: right; }
[dir="rtl"] .page-title.is-split .page-title__subtitle { margin-left: auto; margin-right: 0; }

/* ------------------------------ Diaporama & galerie ------------------------------ */
[dir="rtl"] .slideshow__arrow--prev { left: auto; right: 22px; }
[dir="rtl"] .slideshow__arrow--next { right: auto; left: 22px; }
[dir="rtl"] .slideshow__arrow svg { transform: scaleX(-1); }
[dir="rtl"] .portfolio__zoom { right: auto; left: 14px; }
[dir="rtl"] .lightbox__close { right: auto; left: 20px; }
[dir="rtl"] .lightbox__prev { left: auto; right: 20px; }
[dir="rtl"] .lightbox__next { right: auto; left: 20px; }
[dir="rtl"] .lightbox__prev svg, [dir="rtl"] .lightbox__next svg { transform: scaleX(-1); }

/* ------------------------------ Elements flottants ------------------------------ */
[dir="rtl"] .announcement__close { right: auto; left: 14px; }
[dir="rtl"] .quote-float { right: auto; left: 26px; }
[dir="rtl"] .to-top { right: auto; left: 26px; }
[dir="rtl"] .wa-float { right: auto; left: 26px; }
[dir="rtl"] .toasts { right: auto; left: 22px; }
[dir="rtl"] .toast--success { border-left: 0; border-right: 4px solid #2fbf71; }
[dir="rtl"] .toast--error { border-left: 0; border-right: 4px solid #e5484d; }

/* ------------------------------ Divers ------------------------------ */
[dir="rtl"] .google-badge__score small { margin-left: 0; margin-right: 2px; }

/* L'arabe n'a pas de capitales : les libelles en majuscules deviennent
   illisibles et l'interlettrage latin decolle les glyphes. */
[dir="rtl"] .btn,
[dir="rtl"] .section-head__eyebrow,
[dir="rtl"] .badge,
[dir="rtl"] .main-nav__item > a {
  text-transform: none;
  letter-spacing: 0;
}

/* Montserrat ne couvre pas l'arabe : hauteur de ligne adaptee a Cairo/Tajawal */
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  line-height: 1.45;
  letter-spacing: 0;
}

/* ------------------------- Passe de design 2026 -------------------------
   Les composants ajoutes lors de la refonte ont eux aussi leurs reglages
   directionnels : bannieres alignees a droite, aretes et degrades inverses. */

/* Banniere de page : le titre s'aligne a droite */
[dir="rtl"] .page-title { text-align: right; }
[dir="rtl"] .page-title .breadcrumb,
[dir="rtl"] .page-title .breadcrumb ol { justify-content: flex-start; }
[dir="rtl"] .page-title.has-image::before {
  background: linear-gradient(260deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 45%, rgba(0,0,0,.46) 100%);
}
[dir="rtl"] .page-title.no-image {
  background: radial-gradient(115% 150% at 92% 0%, #2a2a2e 0%, #1a1a1a 58%, #101010 100%);
}
[dir="rtl"] .page-title::after {
  background: linear-gradient(270deg, var(--brand) 0%, var(--brand) 38%, rgba(255,206,14,.18) 38%);
}

/* Fond sombre des sections : la source de lumiere passe a droite */
[dir="rtl"] .bg-dark {
  background: radial-gradient(120% 140% at 88% 0%, #26262a 0%, #1a1a1a 55%, #121212 100%);
}

/* Sur-titre de section : le trait passe a droite du texte */
[dir="rtl"] .section-head__eyebrow { flex-direction: row-reverse; }

/* Arete jaune des cartes : elle se deploie depuis la droite */
[dir="rtl"] .icon-box::after { transform-origin: right; }

/* Fleches des liens de carte */
[dir="rtl"] .sector-card__link svg,
[dir="rtl"] .post-card__more svg { transform: scaleX(-1); }
[dir="rtl"] .sector-card:hover .sector-card__link svg { transform: scaleX(-1) translateX(4px); }

/* Badge de categorie des cartes metier */
[dir="rtl"] .sector-card__tag { left: auto; right: 12px; }

/* Apparition au defilement : le leger deplacement reste vertical, rien a inverser */

/* Frise verticale des etapes : la ligne et les pastilles passent a droite.
   Les proprietes logiques (inset-inline-start, border-inline-start) s'en
   chargent seules — il ne reste que l'ombre portee a symetriser. */
[dir="rtl"] .steps:not(:has(.step__media)) .step__num { box-shadow: 0 0 0 1px var(--line); }

/* Mega-menu : le filet separateur des colonnes secondaires suit le sens
   d'ecriture grace aux proprietes logiques — rien a inverser ici. */