/* ==========================================================================
   rtl.css — version arabe du site (/ar/, <html lang="ar" dir="rtl">)
   Chargée en dernier, et seulement par les pages arabes (shared.head, langue="ar"),
   après bootstrap.rtl.min.css : les feuilles du site restent celles des pages
   françaises, ce fichier n'en corrige que ce qui dépend du sens de lecture.

   1. Police : Cairo (sous-ensemble arabe, auto-hébergé, 31 Ko, graisses 200 à 1000) ;
      le texte latin (EASY-POINTAGES, modèles) garde Plus Jakarta Sans. Pas
      d'espacement des lettres : il casse la liaison des lettres arabes.
   2. Miroir des positions gauche/droite de my_style.css, seo_pages.css, home.css et
      racine.css (relevées le 2026-10-15 ; toute nouvelle règle « left/right » de ces
      feuilles doit avoir son miroir ici).
   3. Flèches : les icônes « vers la droite » pointent vers la gauche, sens de lecture.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. POLICE ET TYPOGRAPHIE
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/cairo-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

[dir="rtl"] {
  --h-titre: "Cairo", "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif;
  --ep-ar: "Cairo", "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif;
}

/* Les feuilles du site imposent "testfont" en !important à plusieurs endroits (#main_div h1,
   menu, accordéon) : la double négation d'id donne à cette règle la priorité sur elles. Les
   icônes (<i class="bx …">) gardent leur police. */
[dir="rtl"] body,
[dir="rtl"] body *:not(i):not(.bx):not(#ep-rtl-a):not(#ep-rtl-b) {
  font-family: var(--ep-ar) !important;
  letter-spacing: normal !important;
}

/* L'élément en français (lien « Français » de l'en-tête) garde la police latine. */
[dir="rtl"] body [lang="fr"]:not(#ep-rtl-a):not(#ep-rtl-b),
[dir="rtl"] body [lang="fr"] *:not(i):not(#ep-rtl-a):not(#ep-rtl-b) {
  font-family: "testfont", "Segoe UI", system-ui, sans-serif !important;
}

/* Les lettres arabes montent et descendent plus loin que les latines : interligne plus aéré
   pour les titres, sinon deux lignes d'un H1 se touchent. */
[dir="rtl"] body :is(h1, h2, h3, h4):not(#ep-rtl-a):not(#ep-rtl-b) {
  line-height: 1.45 !important;
}

/* Cairo paraît plus grande que Plus Jakarta Sans à taille égale : H1 un peu réduits */
[dir="rtl"] body.page-home #main_div .home-hero__titre {
  font-size: clamp(38px, 5vw, 64px);
}

[dir="rtl"] body.page-racine #main_div .page-hero__titre {
  font-size: clamp(32px, 3.6vw, 48px);
}

@media (max-width: 575px) {
  [dir="rtl"] body.page-home #main_div .home-hero__titre {
    font-size: 36px;
  }

  [dir="rtl"] body.page-racine #main_div .page-hero__titre {
    font-size: 30px;
  }
}

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

/* Mention « (بالفرنسية) » des liens vers une page qui n'existe qu'en français */
.lien-langue {
  font-size: .86em;
  font-weight: 500;
  opacity: .75;
}

/* Étiquettes du pied de page (ADRESSE, TÉLÉPHONE…) : marge du côté du texte qui suit */
.footer-etiquette {
  margin-inline-end: 10px;
}

/* Numéros, e-mails et adresses latines gardent leur sens de lecture */
[dir="rtl"] input[type="email"],
[dir="rtl"] #footer_phone,
[dir="rtl"] #footer_mail,
[dir="rtl"] #header_phone,
[dir="rtl"] #main_mail {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] input[type="email"] {
  text-align: right;
}

/* --------------------------------------------------------------------------
   2. MIROIR DES POSITIONS
   -------------------------------------------------------------------------- */

/* ---- my_style.css : menu, pied de page ---- */
[dir="rtl"] .navbar a i,
[dir="rtl"] .navbar a:focus i {
  margin-right: 5px;
  margin-left: 0;
}

[dir="rtl"] #main_div::before {
  right: auto;
  left: -100%;
}

[dir="rtl"] #footer .footer-top .footer-links ul i {
  padding-right: 0;
  padding-left: 2px;
}

[dir="rtl"] .social-links a {
  margin-right: 0;
  margin-left: 4px;
}

[dir="rtl"] #footer .copyright {
  float: right;
}

[dir="rtl"] #footer .credits {
  float: left;
}

/* ---- seo_pages.css ---- */
[dir="rtl"] .skip-link {
  left: auto;
  right: -9999px;
  border-radius: 0 0 0 8px;
}

[dir="rtl"] .skip-link:focus {
  right: 0;
}

[dir="rtl"] .navbar .dropdown>a .bx-chevron-down {
  margin-right: 4px;
  margin-left: 0;
}

[dir="rtl"] .navbar .dropdown>ul {
  left: auto;
  right: 10px;
}

[dir="rtl"] .seo-list li {
  padding: 5px 36px 5px 0;
}

[dir="rtl"] .seo-list li::before,
[dir="rtl"] .seo-olist li::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .seo-olist li {
  padding: 3px 40px 3px 0;
}

[dir="rtl"] .seo-card::after {
  transform-origin: right;
}

[dir="rtl"] .seo-table th,
[dir="rtl"] .seo-table td {
  text-align: right;
}

[dir="rtl"] .seo-steps::before {
  left: auto;
  right: 21px;
}

[dir="rtl"] .seo-callout {
  border-left: 1px solid var(--h-line);
  border-right: 4px solid var(--h-blue);
}

[dir="rtl"] .seo-callout--legal {
  border-right-color: #d9a520;
}

[dir="rtl"] .seo-callout--tip {
  border-right-color: #1f9d6b;
}

[dir="rtl"] .seo-product-badge {
  left: auto;
  right: 20px;
}

[dir="rtl"] .seo-toc summary::after {
  margin: -4px auto 0 4px;
}

[dir="rtl"] .seo-galerie__zoom {
  right: auto;
  left: 10px;
}

[dir="rtl"] .seo-visionneuse__fermer {
  right: auto;
  left: 18px;
}

[dir="rtl"] .seo-visionneuse__prec {
  left: auto;
  right: 16px;
}

[dir="rtl"] .seo-visionneuse__suiv {
  right: auto;
  left: 16px;
}

/* Boutons flottants : la pastille « Menu » passe en bas à droite, WhatsApp et le retour en
   haut en bas à gauche — toujours sous le pouce. */
[dir="rtl"] .mobile-nav-toggle {
  left: auto;
  right: var(--ep-flottant-marge);
}

[dir="rtl"] #num_wtsp {
  right: auto;
  left: var(--ep-flottant-marge);
}

[dir="rtl"] .back-to-top {
  right: auto;
  left: calc(var(--ep-flottant-marge) + 7px);
}

[dir="rtl"] .header-contact {
  margin-left: 0;
  margin-right: 14px;
}

@media (max-width: 767px) {
  [dir="rtl"] .seo-product-badge {
    right: 16px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  [dir="rtl"] .header-contact {
    margin-right: 8px;
  }
}

@media screen and (max-width: 992px) {
  [dir="rtl"] #navbar .navbar-mobile > li > a {
    text-align: right;
  }

  [dir="rtl"] #navbar .navbar-mobile > li > a .bx-chevron-down {
    margin-left: 0;
    margin-right: auto;
  }

  [dir="rtl"] #navbar .dropdown > ul a {
    padding: 11px 26px 11px 12px;
  }
}

/* ---- home.css (accueil, et composants repris par toutes les pages) ---- */
[dir="rtl"] body.page-home .home-head--left {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

[dir="rtl"] body.page-home #main_div.home-hero {
  text-align: right;
}

[dir="rtl"] body.page-home .home-hero__halo {
  right: auto;
  left: -140px;
}

[dir="rtl"] body.page-home .home-hero__halo--2 {
  left: auto;
  right: -160px;
}

[dir="rtl"] body.page-home .home-hero__points li:hover {
  transform: translateX(-3px);
}

[dir="rtl"] body.page-home .home-pill--wa {
  padding-right: 0;
  padding-left: 6px;
}

[dir="rtl"] body.page-home .home-mock__barre em {
  margin-left: 0;
  margin-right: 12px;
}

/* Fenêtres de l'application : inclinées dans l'autre sens, le visuel étant à gauche */
[dir="rtl"] body.page-home .home-hero__visuel {
  padding: 36px 28px 56px 0;
}

[dir="rtl"] body.page-home .home-mock {
  transform: rotateY(9deg) rotateX(4deg) rotateZ(-.4deg);
  transform-origin: 40% 50%;
}

[dir="rtl"] body.page-home .home-hero__visuel:hover .home-mock {
  transform: rotateY(3deg) rotateX(1.5deg);
}

[dir="rtl"] body.page-home .home-carte {
  padding: 12px 12px 12px 16px;
}

[dir="rtl"] body.page-home .home-carte--pointage {
  left: auto;
  right: -8px;
}

[dir="rtl"] body.page-home .home-carte--gps {
  right: auto;
  left: -18px;
}

[dir="rtl"] body.page-home .home-carte--conge {
  left: auto;
  right: 38%;
}

[dir="rtl"] body.page-home .home-hero__pointeuses {
  left: auto;
  right: -10px;
}

[dir="rtl"] body.page-home .home-hero__marques {
  margin-left: 0;
  margin-right: 10px;
}

@media (min-width: 992px) {
  [dir="rtl"] body.page-home .home-hero__visuel {
    padding: 34px 28px 76px 0;
  }

  [dir="rtl"] body.page-home .home-carte--conge {
    right: 32%;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  [dir="rtl"] body.page-home .home-carte--conge {
    right: 46%;
  }
}

@media (min-width: 1400px) {
  [dir="rtl"] body.page-home .home-hero__visuel {
    margin-right: 0;
    margin-left: -64px;
  }
}

[dir="rtl"] body.page-home .device__marque {
  left: auto;
  right: 10px;
}

[dir="rtl"] body.page-home .device:hover .device__lien i,
[dir="rtl"] .page-lien-carte:hover .page-lien-carte__plus i,
[dir="rtl"] .page-service__lien:hover i,
[dir="rtl"] .page-famille__lien:hover i,
[dir="rtl"] .seo-card:hover .seo-card__plus i,
[dir="rtl"] .seo-product:hover .seo-product-more i,
[dir="rtl"] .flow__lien:hover i {
  transform: scaleX(-1) translateX(3px);
}

[dir="rtl"] body.page-home .solution::after,
[dir="rtl"] body.page-racine .page-lien-carte::after {
  transform-origin: right;
}

[dir="rtl"] body.page-home .home-galerie__agrandir {
  right: auto;
  left: 14px;
  padding: 7px 10px 7px 12px;
}

/* Défilement des logos partenaires : la boucle (translateX) est écrite de gauche à droite */
[dir="rtl"] body.page-home .home-defile {
  direction: ltr;
}

@media (max-width: 1199px) {
  [dir="rtl"] body.page-home .home-carte--gps {
    left: -6px;
  }
}

@media (max-width: 991px) {
  [dir="rtl"] body.page-home #main_div.home-hero {
    text-align: right !important;
  }

  [dir="rtl"] body.page-home .home-hero__visuel {
    padding: 26px 18px 40px 0;
  }

  [dir="rtl"] body.page-home .home-mock {
    transform: rotateY(5deg) rotateX(3deg);
  }

  [dir="rtl"] body.page-home .hero-consulting-pills {
    padding-left: 0;
    padding-right: 78px;
  }

  [dir="rtl"] body.page-home .home-apropos__ligne,
  [dir="rtl"] body.page-home .home-apropos__ligne--inverse {
    text-align: right;
  }

  [dir="rtl"] body.page-home #details .content h3,
  [dir="rtl"] body.page-home #details .content p,
  [dir="rtl"] body.page-home #details .content ul {
    text-align: right !important;
  }

  [dir="rtl"] body.page-home #footer .footer-top {
    text-align: right !important;
  }
}

@media (max-width: 767px) {
  [dir="rtl"] body.page-home .hero-consulting-pills {
    padding-right: 0;
  }

  [dir="rtl"] body.page-home .home-carte--conge {
    right: auto;
    left: 8px;
  }

  [dir="rtl"] body.page-home .home-hero__pointeuses {
    right: auto;
  }

  [dir="rtl"] body.page-home .home-hero__marques {
    margin-right: 0;
  }
}

@media (max-width: 575px) {
  [dir="rtl"] body.page-home .home-galerie__agrandir {
    left: 8px;
    padding: 5px 7px 5px 9px;
  }
}

/* ---- racine.css (pages racine et pages générées) ---- */
[dir="rtl"] body.page-racine .page-fil li + li::before {
  margin-right: 0;
  margin-left: 6px;
}

[dir="rtl"] body.page-racine .page-visuel .home-carte--conge {
  left: auto;
  right: 6%;
}

[dir="rtl"] body.page-racine .page-visuel--photos {
  padding: 20px 16px 20px 0;
}

[dir="rtl"] body.page-racine .page-visuel--photo {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] body.page-racine .page-visuel--photo figure {
  transform: rotate(-1.2deg);
}

[dir="rtl"] body.page-racine .page-visuel--photo .home-carte--pointage {
  left: auto;
  right: -26px;
}

[dir="rtl"] body.page-racine .page-visuel--photo .home-carte--gps {
  right: auto;
  left: -34px;
}

[dir="rtl"] body.page-racine .page-visuel--photo .home-carte--conge {
  left: auto;
  right: -18px;
}

[dir="rtl"] body.page-racine .page-encart {
  border-left: 1px solid var(--h-line);
  border-right: 4px solid var(--h-blue);
}

/* Bandeau d'appel : le motif s'efface du côté du texte, désormais à droite */
[dir="rtl"] body.page-racine .page-cta__carte::before {
  -webkit-mask-image: linear-gradient(270deg, transparent 30%, #000);
  mask-image: linear-gradient(270deg, transparent 30%, #000);
}

[dir="rtl"] body.page-seo .page-visuel--illustration {
  margin-left: 0;
  margin-right: auto;
  padding: 24px 20px 32px 0;
}

@media (max-width: 991px) {
  [dir="rtl"] body.page-racine .page-etapes::before {
    left: auto;
    right: 25px;
  }

  [dir="rtl"] body.page-racine .page-etapes li {
    text-align: right;
  }

  [dir="rtl"] body.page-racine .page-visuel--photo {
    margin: 36px auto 0;
  }

  [dir="rtl"] body.page-racine .page-visuel--photo .home-carte--pointage {
    right: -4px;
  }

  [dir="rtl"] body.page-racine .page-visuel--photo .home-carte--gps {
    left: -4px;
  }

  [dir="rtl"] body.page-racine .page-visuel--photo .home-carte--conge {
    right: 4px;
  }
}

@media (max-width: 767px) {
  [dir="rtl"] body.page-racine .page-visuel--photos {
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   3. FLÈCHES ET CHEVRONS DANS LE SENS DE LECTURE
   -------------------------------------------------------------------------- */
[dir="rtl"] .bx-right-arrow-alt,
[dir="rtl"] .bx-chevron-right,
[dir="rtl"] .bx-right-arrow-circle {
  transform: scaleX(-1);
}

/* Les flèches de la visionneuse sont choisies par galerie.js selon la langue */
[dir="rtl"] .seo-visionneuse .bx-chevron-right,
[dir="rtl"] .seo-visionneuse .bx-chevron-left {
  transform: none;
}