/* ============================================ Cartogo — Support RTL (arabe) Chargé uniquement quand dir="rtl" est actif sur . Inverse les propriétés directionnelles sans dupliquer tout le CSS existant. ============================================ */ html[dir="rtl"] body { font-family: 'Tahoma', 'Segoe UI', var(--font-body); } /* ============== Header ============== */ html[dir="rtl"] .header-topbar-inner { justify-content: flex-start; } html[dir="rtl"] .main-nav { direction: rtl; } html[dir="rtl"] .main-nav a::after { right: 0; left: auto; } html[dir="rtl"] .header-main-inner { direction: rtl; } html[dir="rtl"] .logo { direction: ltr; /* Le logo "CARTOGO" garde son sens d'écriture latin */ } html[dir="rtl"] .nav-toggle { margin-right: auto; margin-left: 0; } @media (max-width: 968px) { html[dir="rtl"] .main-nav { right: auto; left: -100%; } html[dir="rtl"] .main-nav.is-open { left: 0; right: auto; } } /* ============== Hero & recherche ============== */ html[dir="rtl"] .hero-text, html[dir="rtl"] .search-form, html[dir="rtl"] .checkout-layout, html[dir="rtl"] .car-detail-layout, html[dir="rtl"] .catalogue-layout { direction: rtl; } html[dir="rtl"] .hero-pin { right: 18%; left: auto; } html[dir="rtl"] .search-field label svg, html[dir="rtl"] .btn-icon { transform: scaleX(-1); } html[dir="rtl"] .btn:hover .btn-icon { transform: scaleX(-1) translateX(3px); } /* ============== Cards & listes ============== */ html[dir="rtl"] .car-card-badge { right: 18px; left: auto; } html[dir="rtl"] .car-card-fav { left: 18px; right: auto; } html[dir="rtl"] .feature-card, html[dir="rtl"] .car-specs, html[dir="rtl"] .car-card-footer, html[dir="rtl"] .stat-item, html[dir="rtl"] .step-item { text-align: center; /* éléments centrés, pas affectés par la direction */ } html[dir="rtl"] .car-card-top, html[dir="rtl"] .testimonial-author, html[dir="rtl"] .contact-info-item, html[dir="rtl"] .order-car, html[dir="rtl"] .booking-summary-row, html[dir="rtl"] .order-row, html[dir="rtl"] .track-row { direction: rtl; } html[dir="rtl"] .step-number { left: -6px; right: auto; } /* ============== Filtres catalogue ============== */ html[dir="rtl"] .filters-panel { direction: rtl; } @media (max-width: 968px) { html[dir="rtl"] .filters-panel { right: -100%; left: auto; } html[dir="rtl"] .filters-panel.is-open { right: 0; left: auto; } } /* ============== Footer ============== */ html[dir="rtl"] .footer-grid, html[dir="rtl"] .footer-cta-inner { direction: rtl; } html[dir="rtl"] .logo-text small { direction: ltr; } /* ============== Checkout / Paiement ============== */ html[dir="rtl"] .checkout-steps { direction: rtl; } html[dir="rtl"] .form-row, html[dir="rtl"] .admin-form-row { direction: rtl; } /* ============== Numéros, prix, et contenus toujours LTR ============== */ /* Les montants, numéros de réservation et numéros de téléphone restent en sens de lecture occidental même sur une page RTL, par convention universelle. */ html[dir="rtl"] .car-price, html[dir="rtl"] .booking-price, html[dir="rtl"] .stat-number, html[dir="rtl"] .kpi-value, html[dir="rtl"] .confirmation-number, html[dir="rtl"] .track-result-number, html[dir="rtl"] .eyebrow-line { direction: ltr; unicode-bidi: isolate; } /* ============== Sélecteur de langue (inversion RTL uniquement) ============== */ /* Le style de base de .lang-switcher-* vit dans layout.css (chargé sur toutes les pages). Ici on inverse seulement le positionnement du dropdown pour le contexte RTL. */ html[dir="rtl"] .lang-switcher-dropdown { right: auto; left: 0; }