/* ============================================================
   Sélecteur de langue + mise en page droite-à-gauche (arabe)
   ============================================================ */

/* ---------- le sélecteur de langue ---------- */
/* Couleurs explicites, pas héritées : l'en-tête est noir sur l'accueil et
   blanc sur la page de paiement. Le script ajoute .sur-fond-sombre selon le
   fond réel mesuré, pour que le bouton reste lisible dans les deux cas. */
.lang-switch { position: relative; display: inline-flex; margin-inline-start: 10px; vertical-align: middle; }

.lang-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  appearance: none; cursor: pointer;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .05);
  border: 1.5px solid rgba(0, 0, 0, .18);
  color: #111;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .03em;
  transition: background .15s ease, border-color .15s ease;
}
.lang-toggle:hover { background: rgba(0, 0, 0, .10); }
.lang-globe { font-size: 15px; line-height: 1; }
.lang-caret { font-size: 10px; opacity: .65; }

.lang-switch.sur-fond-sombre .lang-toggle {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}
.lang-switch.sur-fond-sombre .lang-toggle:hover { background: rgba(255, 255, 255, .2); }

/* ---------- le menu ---------- */
.lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 164px; padding: 6px;
  background: #fff; color: #111;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .20);
  display: none; z-index: 1200;
}
.lang-switch.open .lang-menu { display: block; }

.lang-item {
  display: block; width: 100%; text-align: start;
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 11px 13px; border-radius: 9px;
  color: #111;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600; font-size: 15px; line-height: 1.2;
}
.lang-item:hover { background: rgba(0, 0, 0, .06); }
.lang-item.on { background: rgba(0, 71, 255, .10); color: #0047ff; font-weight: 800; }
.lang-item.on::after { content: " \2713"; }
.lang-item:focus-visible, .lang-toggle:focus-visible { outline: 2px solid #0047ff; outline-offset: 2px; }

@media (max-width: 640px) {
  .lang-switch { margin-inline-start: 6px; }
  .lang-toggle { padding: 7px 10px; font-size: 12px; gap: 5px; }
  .lang-menu { min-width: 150px; }
}

/* ============================================================
   DROITE À GAUCHE
   `dir="rtl"` sur <html> retourne déjà le flux du texte et les
   propriétés logiques. Ne restent à corriger que les valeurs
   écrites en dur à gauche/droite dans le CSS du site.
   ============================================================ */

.rtl body { text-align: right; }

/* Une police arabe lisible, avec repli sur celles du système. */
.rtl, .rtl body {
  font-family: 'Noto Naskh Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, system-ui, sans-serif;
}
/* Les titres gardent leur graisse sans la police latine, qui ne
   couvre pas l'arabe et produirait des carrés vides. */
.rtl h1, .rtl h2, .rtl h3, .rtl .eyebrow, .rtl .btn, .rtl .price, .rtl .pricetag {
  font-family: 'Noto Naskh Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, system-ui, sans-serif;
}

/* Les chiffres, prix et comptes à rebours restent en latin :
   mélanger les sens de lecture sur un montant le rend illisible. */
.rtl .pricetag, .rtl .was, .rtl .price, .rtl .cb-timer,
.rtl .compte, .rtl .vs-val, .rtl .vs-payval, .rtl .co-price {
  direction: ltr;
  unicode-bidi: isolate;
}
.rtl .pricetag, .rtl .price { justify-content: flex-end; }

/* Éléments alignés en dur dans le CSS d'origine. */
.rtl .hero-cta { justify-content: flex-end !important; }
.rtl .back { direction: rtl; }
.rtl .back::before { content: ""; }

/* Les listes à puces : la coche passe à droite. */
.rtl .ic { margin-left: 8px; margin-right: 0; }

/* Le bandeau défilant repart dans l'autre sens, sinon le texte
   arabe défile à contresens de sa lecture. */
.rtl .cb-track { animation-direction: reverse; }

/* Le tableau comparatif. */
.rtl table th, .rtl table td { text-align: right; }
.rtl .rowh { text-align: right; }

/* Les blocs de valeur : libellé à droite, montant à gauche. */
.rtl .vs-item, .rtl .vs-pay { flex-direction: row-reverse; }

/* Le menu suit le sens de lecture de la langue choisie. */
.rtl .lang-item { text-align: right; }