/* ================================================================
 * Arabic / RTL overrides. Loaded only when the site is in Arabic.
 * The layout is mostly flex/grid, which mirrors automatically under
 * direction: rtl; this file sets the font, direction and the few
 * spots that need explicit flipping.
 * ============================================================== */

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

html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button,
html[dir="rtl"] .hero-badge,
html[dir="rtl"] .section-eyebrow,
html[dir="rtl"] .nav-links,
html[dir="rtl"] .lang-current,
html[dir="rtl"] .domain-card-num,
html[dir="rtl"] .qn-num {
  font-family: 'Cairo', 'Inter', 'Segoe UI', Tahoma, sans-serif;
}

/* Arabic reads better a touch larger / with looser line-height */
html[dir="rtl"] .hero-sub,
html[dir="rtl"] .section-sub,
html[dir="rtl"] p { line-height: 1.9; }

/* Keep Latin/uppercase micro-labels legible (no forced uppercase on Arabic) */
html[dir="rtl"] .hero-badge,
html[dir="rtl"] .section-eyebrow,
html[dir="rtl"] .lang-current,
html[dir="rtl"] .domain-tag { text-transform: none; letter-spacing: 0; }

/* Headings & text blocks align to the right */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .hero-inner,
html[dir="rtl"] .page-hero-inner,
html[dir="rtl"] .article-hero-inner { text-align: right; }

/* Divider / underline accents start from the right */
html[dir="rtl"] .hero-divider,
html[dir="rtl"] .domain-num-line { margin-left: auto; margin-right: 0; }

/* Number-led stat figures read left-to-right (needs unicode-bidi to take effect) */
html[dir="rtl"] .trust-stat-body strong,
html[dir="rtl"] .hv-stat-num,
html[dir="rtl"] .equipe-stat strong { direction: ltr; unicode-bidi: embed; }

/* Contact details: labels/address stay natural RTL; numbers (phone/e-mail/time)
   are marked dir="ltr" in the markup and isolated so the +/digits read correctly */
html[dir="rtl"] .contact-item-body span,
html[dir="rtl"] .horaires-row { text-align: right; }
html[dir="rtl"] [dir="ltr"].abz-num,
html[dir="rtl"] .contact-item-body span[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
  display: block;
}
html[dir="rtl"] .horaires-row .abz-num { display: inline-block; text-align: left; }

/* Bulleted lists: marker on the right */
html[dir="rtl"] .about-list li,
html[dir="rtl"] .domain-points li,
html[dir="rtl"] .checklist li { text-align: right; }
html[dir="rtl"] .checklist { padding-right: 0; }

/* Floating contact button stays on the right in RTL too; align-items must flip to flex-start to counteract flex's automatic cross-axis mirroring under direction: rtl. */
html[dir="rtl"] .fab-wrap { right: 32px; left: auto; align-items: flex-start; }
html[dir="rtl"] .fab-children { align-items: flex-start; }
@media (max-width: 600px) {
  html[dir="rtl"] .fab-wrap { right: 20px; left: auto; }
}

/* Language dropdown opens aligned to the left edge in RTL */
html[dir="rtl"] .lang-menu { right: auto; left: 0; }

/* Nav active-item underline sits correctly */
html[dir="rtl"] .nav-links li.current-menu-item > a { border-bottom-color: var(--gold); }

/* Forms: labels/inputs right-aligned, placeholders too */
html[dir="rtl"] .form-group label,
html[dir="rtl"] .form-note,
html[dir="rtl"] .form-feedback { text-align: right; }
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select { text-align: right; }

/* Footer columns and bottom bar */
html[dir="rtl"] .footer-col,
html[dir="rtl"] .footer-brand,
html[dir="rtl"] .footer-bottom { text-align: right; }

/* Article body content */
html[dir="rtl"] .article-content,
html[dir="rtl"] .article-lead,
html[dir="rtl"] .sidebar-card { text-align: right; }
html[dir="rtl"] .article-callout { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 20px; }

/* ── User-reported RTL fixes ── */

/* 1. Prevent horizontal overflow/scroll in RTL (mirrored absolute elements) */
html[dir="rtl"], html[dir="rtl"] body { overflow-x: hidden; }

/* 2. Mirror the hero background (base ships it flipped for LTR) */
html[dir="rtl"] .hero-bg { transform: scaleX(1); }

/* 3. Domain-card number label overlaps the icon in RTL → move icon to the left */
html[dir="rtl"] .domain-card-icon { right: auto; left: 24px; }

/* 4. Mirror directional arrows (arrows / chevrons inside CTAs & nav) */
html[dir="rtl"] .domain-card-link svg,
html[dir="rtl"] .domains-cta-link svg,
html[dir="rtl"] .blog-read-more svg,
html[dir="rtl"] .cta-btn svg,
html[dir="rtl"] .enc-back svg,
html[dir="rtl"] .enc-forward svg,
html[dir="rtl"] .btn-outline svg,
html[dir="rtl"] .domain-list a svg,
html[dir="rtl"] .lightbox-prev svg,
html[dir="rtl"] .lightbox-next svg { transform: scaleX(-1); }
/* breadcrumb separator › → ‹ */
html[dir="rtl"] .breadcrumb-sep { display: inline-block; transform: scaleX(-1); }

/* 5. Timeline: line + dots on the right, next to the dates */
html[dir="rtl"] .timeline { padding-left: 0; padding-right: 32px; }
html[dir="rtl"] .timeline::before { left: auto; right: 0; }
html[dir="rtl"] .timeline-item { padding-left: 0; padding-right: 36px; }
html[dir="rtl"] .timeline-dot { left: auto; right: -39px; }

/* 6. .domain-layout.reverse is an LTR-only trick (flips direction to swap
   grid columns, then resets children back to ltr so their text still reads
   normally). On real RTL pages this incorrectly forces Arabic text/checklist
   rows back into ltr — undo it so content stays rtl. */
html[dir="rtl"] .domain-layout.reverse,
html[dir="rtl"] .domain-layout.reverse > * { direction: rtl; }

/* 7. Trust-bar stat accent line: mirror to sit above the icon (now on the
   right in rtl) instead of the unmirrored left:36px/24px. */
html[dir="rtl"] .trust-stat::before { left: auto; right: 36px; }
@media (max-width: 768px) {
  html[dir="rtl"] .trust-stat::before { right: 24px; }
}

/* 8. Trust-bar numeric stats ("+40 ans", "3 niveaux", "7+ domaines"): the
   number and its label share one <strong>, ltr-embedded so the digits don't
   reverse. That embedding also fixed the number before the label (matching
   fr/en reading order), but in rtl the number should read first instead —
   reorder via flex, isolating just the digit run to stay ltr. */
html[dir="rtl"] .trust-stat-body strong.trust-stat-num {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  direction: rtl;
}
html[dir="rtl"] .trust-stat-body strong.trust-stat-num > em {
  order: 1;
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .trust-stat-body strong.trust-stat-num > .trust-stat-label { order: 2; }