/* ===================================================================== Feuille de style RTL — chargée uniquement quand la langue active est l'arabe (voir includes/header.php : + ce fichier). Le reste de la mise en page (flex, grid) s'inverse automatiquement avec dir="rtl" ; ce fichier corrige les cas où le CSS d'origine utilise des valeurs physiques (left/right, margin-left, etc.) ===================================================================== */ html[dir="rtl"] body { font-family: 'Cairo', 'Jost', sans-serif; } html[dir="rtl"] .logo, html[dir="rtl"] .hero-eyebrow, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { font-family: 'Cairo', 'Cormorant Garamond', serif; } /* ---------- En-tête / logo ---------- */ html[dir="rtl"] .logo { margin-right: 0; margin-left: auto; } /* ---------- Burger + menu latéral : on le fait glisser depuis la droite ---------- */ html[dir="rtl"] .burger-btn { left: auto; right: 16px; } html[dir="rtl"] .header-inner { padding-left: 0; padding-right: 44px; } @media (max-width: 640px) { html[dir="rtl"] .burger-btn { right: 12px; } html[dir="rtl"] .header-inner { padding-right: 36px; } } html[dir="rtl"] .side-menu { left: auto; right: 0; transform: translateX(100%); } html[dir="rtl"] .side-menu.is-open { transform: translateX(0); } /* ---------- Langue / menu latéral ---------- */ html[dir="rtl"] .side-lang-switch { display: flex; align-items: center; gap: 8px; } .lang-switch { display: flex; align-items: center; gap: 6px; font-size: .8rem; margin-inline-start: 8px; } .lang-btn { opacity: .55; font-weight: 600; } .lang-btn.active, .lang-btn:hover { opacity: 1; color: var(--primary-deep); } .lang-sep { opacity: .4; } .side-lang-switch { gap: 8px; } .side-lang-label { color: var(--ink-light); font-size: .85rem; } /* ---------- Hero ---------- */ html[dir="rtl"] .hero { text-align: right; } html[dir="rtl"] .hero::before { right: auto; left: -100px; } html[dir="rtl"] .hero::after { left: auto; right: -60px; } html[dir="rtl"] .hero h1 em { background: linear-gradient(180deg, transparent 62%, var(--parme-pale) 62%); } /* ---------- Carrousel promo : on inverse les flèches précédent/suivant ---------- */ html[dir="rtl"] .promo-slider-arrow.prev { left: auto; right: 18px; } html[dir="rtl"] .promo-slider-arrow.next { right: auto; left: 18px; } @media (max-width: 640px) { html[dir="rtl"] .promo-slider-arrow.prev { right: 10px; } html[dir="rtl"] .promo-slider-arrow.next { left: 10px; } } /* ---------- Tableaux (panier) ---------- */ html[dir="rtl"] .cart-table th { text-align: right; } /* ---------- Boîte de contacts flottante ---------- */ html[dir="rtl"] .floating-contacts { right: auto; left: 24px; } @media (max-width: 640px) { html[dir="rtl"] .floating-contacts { left: 14px; } } /* ---------- Cases à cocher / champs de formulaire : garder l'alignement naturel ---------- */ html[dir="rtl"] .filter-checkbox, html[dir="rtl"] .qty-form, html[dir="rtl"] .cat-phare-link, html[dir="rtl"] .promo-slide-cta { direction: rtl; } /* ---------- Nombres / prix : toujours affichés en LTR pour éviter d'inverser les chiffres ---------- */ .card-price, .price-old, .price-new, .numero { direction: ltr; unicode-bidi: isolate; } html[dir="rtl"] .cart-summary .total-row span:last-child, html[dir="rtl"] #total-final-affiche, html[dir="rtl"] #sous-total-affiche, html[dir="rtl"] #frais-livraison-affiche { direction: ltr; unicode-bidi: isolate; } /* ---------- Sélecteurs natifs : garder la flèche du navigateur à sa place logique ---------- */ html[dir="rtl"] select { background-position: left 12px center; }