/* ========================================================================== Photo Éléments — Marc-André Côté macotear.css — RTL overrides for the Arabic pages (indexar.html, bioar.html, contactar.html). Loaded AFTER macote.css, on top of it. It does not repeat any rule from macote.css — it only overrides the handful of declarations in macote.css that use physical left/right values instead of direction- aware ones, so they mirror correctly under . Everything else in macote.css (colors, borders, spacing, the header, the gallery grid, the element rows, etc.) is written with direction- agnostic properties — flex/grid track order, "margin: 0 auto", "text-align: center/justify" — and already mirrors correctly on its own once dir="rtl" is set on , with no override needed. ========================================================================== */ /* ---------------------------------------------------------------------- */ /* Nav separators ("|") — margin-left pushed the next item away from the */ /* separator assuming left-to-right flow. In RTL the next item sits to */ /* the left of the separator, so the gap belongs on the other side. */ /* ---------------------------------------------------------------------- */ .main-nav__primary li:not(:last-child)::after { margin-left: 0; margin-right: 10px; } .lang-switch li:not(:last-child)::after { margin-left: 0; margin-right: 8px; } /* ---------------------------------------------------------------------- */ /* Links list paragraph — was hard-left aligned regardless of direction. */ /* ---------------------------------------------------------------------- */ .linklist p { text-align: right; } /* ---------------------------------------------------------------------- */ /* Gallery hover-flyout — was anchored with left:100% / margin-left, */ /* i.e. it always opened toward the right. In RTL the natural "next" */ /* position relative to the thumbnail is to the left, so the flyout */ /* needs to open that way instead. */ /* ---------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) and (min-width: 760px) { .gallery__item span { left: auto; right: 100%; margin-left: 0; margin-right: 10px; } }