/* ============================================================= Inline ROX wordmark dans le texte ============================================================= */ .inline-rox { height: 0.78em; width: auto; vertical-align: -0.08em; margin: 0 0.18em; display: inline-block; color: #fff; fill: #fff; opacity: 1; filter: brightness(1.15); } html[dir="rtl"] .inline-rox { margin: 0 0.25em 0 0.1em; } /* ============================================================= RTL & i18n styles — Autohaus Tanger Active uniquement quand (langue arabe) ============================================================= */ /* --- Sélecteur de langue (3 boutons FR · AR · EN) --- */ .lang-switcher { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-fg, #fff); } .lang-btn { background: transparent; border: 0; padding: 0.35rem 0.45rem; color: inherit; font: inherit; cursor: pointer; opacity: 0.55; transition: opacity 200ms ease, color 200ms ease; letter-spacing: 0.06em; } .lang-btn:hover { opacity: 0.85; } .lang-btn.is-active { opacity: 1; color: var(--color-accent, #C9A961); } .lang-sep { opacity: 0.35; pointer-events: none; } .nav-mobile-langs { display: flex; gap: 1rem; justify-content: center; padding: 1.5rem 0 0; margin-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); } .nav-mobile-langs .lang-btn { font-size: 1rem; padding: 0.5rem 0.85rem; } /* ============================================================= RTL mode (arabe) ============================================================= */ html[dir="rtl"] body { font-family: "Inter", "Cairo", "Tajawal", "Segoe UI", sans-serif; } /* Inverser flex pour navigation principale */ html[dir="rtl"] .site-header .container { flex-direction: row-reverse; } html[dir="rtl"] .nav-main { flex-direction: row-reverse; } html[dir="rtl"] .header-actions { flex-direction: row-reverse; } /* Inverser le sens des arrows (les SVG ◢ pointent maintenant à gauche) */ html[dir="rtl"] .btn-arrow svg, html[dir="rtl"] .stock-cta svg, html[dir="rtl"] .universe-arrow svg, html[dir="rtl"] .category-cta svg { transform: scaleX(-1); } /* Eyebrow et titres alignés à droite */ html[dir="rtl"] .eyebrow, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .lead, html[dir="rtl"] p { text-align: right; } /* Hero — réaligner contenu */ html[dir="rtl"] .hero-content { text-align: right; } html[dir="rtl"] .hero-actions { justify-content: flex-end; flex-direction: row-reverse; } /* Stock specs — inverser */ html[dir="rtl"] .stock-specs { flex-direction: row-reverse; } html[dir="rtl"] .vh-key-specs { direction: rtl; } /* Section heads */ html[dir="rtl"] .section-head { flex-direction: row-reverse; } html[dir="rtl"] .section-head .actions { text-align: left; } /* Footer */ html[dir="rtl"] .site-footer .container { direction: rtl; } html[dir="rtl"] .footer-bottom { flex-direction: row-reverse; } /* WhatsApp FAB reste à droite (visible) — pas de changement mais on peut le déplacer à gauche pour RTL */ html[dir="rtl"] .whatsapp-fab { right: auto; left: 1.5rem; } /* Universes grid garde l'ordre (visuel logique 01-02-03) */ /* Si on veut inverser : flex-direction: row-reverse sur .universes-grid */ /* Cards multimarque */ html[dir="rtl"] .multimarque-categories { direction: rtl; } html[dir="rtl"] .category-card { text-align: right; } /* Surmesure steps */ html[dir="rtl"] .surmesure-steps { direction: rtl; } html[dir="rtl"] .sm-step { text-align: right; } /* Vehicule pages — hero panel */ html[dir="rtl"] .vh-hero-panel { direction: rtl; text-align: right; } html[dir="rtl"] .vh-breadcrumb { flex-direction: row-reverse; } /* Stock cards — RTL */ html[dir="rtl"] .stock-card-v-content { text-align: right; } html[dir="rtl"] .stock-card-v-content .stock-specs li { text-align: center; } /* Em italics — l'italique fonctionne moins bien en arabe, on garde la couleur sans italique */ html[dir="rtl"] em { font-style: normal; font-weight: 700; } /* ============================================================= Masquer la barre Google Translate ============================================================= */ #google_translate_element { display: none !important; } .goog-te-banner-frame.skiptranslate, .skiptranslate iframe { display: none !important; } body { top: 0 !important; position: static !important; } .goog-tooltip, .goog-tooltip:hover, .goog-te-balloon-frame { display: none !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } font[style*="vertical-align"] { vertical-align: inherit !important; }