/* ============================================================ RTL SUPPORT LAYER — Royal Hôtel Restaurant Bonhomme Loaded on every page (all languages). Every rule here is scoped under [dir="rtl"], so it is a complete no-op for the 6 LTR languages (fr, nl, en, de, es, zh) and only activates on the Arabic pages, where is set server-side. ============================================================ */ [dir="rtl"] { direction: rtl; text-align: right; } [dir="rtl"] body { text-align: right; } /* ---------- Navigation ---------- .nav__inner and .nav__links use the default (unset) flex-direction: row. Because direction:rtl is already set above and inherited here, a plain "row" already lays flex children out right-to-left (first DOM child — the logo — ends up on the right, matching RTL reading order) with NO extra rule needed. Do not add flex-direction: row-reverse here: reversing on top of an inherited direction:rtl cancels it back out and silently reproduces the LTR left-to-right order (logo/CTA stuck on the same side as the French version) — this bit the header for months before being caught. */ [dir="rtl"] .lang-switch { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .lang-switch__select { padding: 0.45rem 0.8rem 0.45rem 1.8rem; background-position: left 0.7rem center; } [dir="rtl"] .carte-header .lang-switch { margin-right: 0; margin-left: auto; } @media (max-width: 900px) { [dir="rtl"] .nav__links { right: auto; left: -100%; transition: left var(--transition); } [dir="rtl"] .nav__links.active { left: 0; right: auto; } } /* ---------- Buttons & icons ---------- */ [dir="rtl"] .btn i, [dir="rtl"] .faq-question i, [dir="rtl"] .poi-link i { margin-left: 0; } [dir="rtl"] .footer__col li i, [dir="rtl"] .contact-info__icon, [dir="rtl"] .about-info-card__icon { margin-right: 0 !important; margin-left: 0.5rem !important; } /* ---------- Feature blocks (about / restaurant / hotel-region) ---------- */ [dir="rtl"] .about-feature__text, [dir="rtl"] .restaurant-feature__content, [dir="rtl"] .contact-info__text, [dir="rtl"] .histoire-caption { text-align: right; } [dir="rtl"] .about-feature__text h3::before, [dir="rtl"] .section-subtitle { justify-content: center; } [dir="rtl"] .histoire-era__date { flex-direction: row-reverse; } [dir="rtl"] .gold-divider { margin-left: auto; margin-right: auto; } /* ---------- Footer ---------- */ [dir="rtl"] .footer__grid { direction: rtl; } [dir="rtl"] .footer__bottom { flex-direction: row-reverse; } [dir="rtl"] .footer__bottom-links { flex-direction: row-reverse; } /* ---------- Forms (contact page) ---------- */ [dir="rtl"] .form-group label, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; } /* ---------- FAQ accordions ---------- */ [dir="rtl"] .faq-question { text-align: right; flex-direction: row-reverse; } /* ---------- Cards & POI grids (hotel-region) ---------- */ [dir="rtl"] .poi-badge { right: auto; left: 1rem; } [dir="rtl"] .poi-card__content, [dir="rtl"] .poi-featured__content { text-align: right; } /* ---------- Room cards / offer cards ---------- */ [dir="rtl"] .room-card__content, [dir="rtl"] .offer-card__overlay { text-align: right; } /* ---------- Sticky booking / mobile call (mirror to the other edge) ---------- */ [dir="rtl"] .sticky-booking { right: auto; left: 2rem; } [dir="rtl"] .mobile-call { right: auto; left: 1rem; } /* ---------- Menu tabs (restaurant / carte) ---------- */ [dir="rtl"] .menus-tabs, [dir="rtl"] .menu-tabs { direction: rtl; } [dir="rtl"] .menu-item--price { flex-direction: row-reverse; } /* ---------- Reduced motion respected already by base stylesheet ---------- */