/* ============================================================ FUTURA ESTHETIC — Surcouche RTL (version arabe) Chargée uniquement lorsque , après style.css. Ne modifie jamais les versions LTR. ============================================================ */ /* ---------- Typographie arabe ---------- Cormorant Garamond ne dispose pas de glyphes arabes : on bascule les titres sur Noto Kufi Arabic (rendu éditorial) et le texte courant sur Cairo, très lisible aux petites tailles. Les fallbacks latins sont conservés pour les termes techniques (Botox, Morpheus8, All-on-4…). */ [dir="rtl"] { --serif: "Noto Kufi Arabic", "Cairo", "Cormorant Garamond", Georgia, serif; --sans: "Cairo", "Noto Kufi Arabic", "Jost", system-ui, sans-serif; } [dir="rtl"] body { line-height: 1.9; font-size: 17.5px; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.45; letter-spacing: 0; /* l'interlettrage nuit à la liaison des glyphes arabes */ font-weight: 700; } /* L'interlettrage large et les majuscules forcées n'ont pas de sens en arabe. */ [dir="rtl"] .eyebrow, [dir="rtl"] .btn, [dir="rtl"] .card-tag, [dir="rtl"] .vtag, [dir="rtl"] .prose th, [dir="rtl"] .kicker, [dir="rtl"] .sn, [dir="rtl"] .lbl, [dir="rtl"] .foot-col h5, [dir="rtl"] .drawer-langs__lbl, [dir="rtl"] .foot-langs__lbl { letter-spacing: 0; text-transform: none; } [dir="rtl"] .marquee span { letter-spacing: 0; text-transform: none; } /* ---------- Sens de lecture des blocs de texte ---------- */ [dir="rtl"] .faq-q, [dir="rtl"] .drawer .macc > button, [dir="rtl"] .drawer .macc2 > button, [dir="rtl"] .prose caption, [dir="rtl"] .prose th, [dir="rtl"] .prose td { text-align: right; } /* ---------- Puces et pseudo-éléments décalés ---------- */ [dir="rtl"] .prose li, [dir="rtl"] .sec-split li { padding-left: 0; padding-right: 28px; } [dir="rtl"] .prose li::before, [dir="rtl"] .sec-split li::before { left: auto; right: 2px; } [dir="rtl"] .mega li a:hover { padding-left: 0; padding-right: 10px; } [dir="rtl"] .mega li a:hover::before { content: "‹"; left: auto; right: 0; } [dir="rtl"] .foot-col a:hover { padding-left: 0; padding-right: 6px; } [dir="rtl"] .drawer .macc2 .msub2 a { padding: 9px 28px 9px 4px; } [dir="rtl"] .drawer .macc2 .msub2 a:hover { padding-left: 4px; padding-right: 34px; } [dir="rtl"] .drawer .macc2 > button { padding: 14px 14px 14px 4px; } [dir="rtl"] .eyebrow::before { order: 2; } /* ---------- Titres décoratifs ---------- */ [dir="rtl"] .sec-title .kicker { margin-right: 0; margin-left: 20px; } [dir="rtl"] .step::before { left: auto; right: 0; } [dir="rtl"] .hero-visual .ring { left: auto; right: -26px; } [dir="rtl"] .card-tag, [dir="rtl"] .vtag { left: auto; right: 16px; } [dir="rtl"] .vtag { right: 14px; } /* ---------- Halos radiaux : symétrie miroir ---------- */ [dir="rtl"] .inter::before { right: auto; left: -140px; } [dir="rtl"] .faq::before { left: auto; right: -120px; } /* ---------- Navigation ---------- */ [dir="rtl"] .topbar .dot { margin-right: 0; margin-left: 8px; } [dir="rtl"] .menu > li > a::after { transform-origin: right; } [dir="rtl"] .menu > li > a .chev { transform: rotate(45deg); } /* Le mega-menu reste centré : on inverse seulement la lecture interne. */ [dir="rtl"] .mega { direction: rtl; } [dir="rtl"] .mega ul { text-align: right; } /* ---------- Boutons : reflet et flèche ---------- */ [dir="rtl"] .btn-gold::after { left: auto; right: -120%; transform: skewX(20deg); } [dir="rtl"] .btn-gold:hover::after { right: 130%; } /* Les flèches sont déjà retournées côté PHP (fe_arrow), on neutralise donc toute rotation CSS résiduelle et on inverse l'animation de survol. */ [dir="rtl"] .btn .ar, [dir="rtl"] .card-link .ar { transform: none; } [dir="rtl"] .btn:hover .ar, [dir="rtl"] .card-link:hover .ar { transform: translateX(-4px); } /* ---------- Carrousel : défilement inversé ---------- */ [dir="rtl"] .track { direction: rtl; } [dir="rtl"] .carousel-nav { flex-direction: row-reverse; } [dir="rtl"] .arrows { flex-direction: row-reverse; } /* ---------- Bandeau défilant ---------- */ [dir="rtl"] .marquee-track { animation-direction: reverse; } /* ---------- Tiroir mobile : entrée par la gauche ---------- */ [dir="rtl"] .drawer { right: auto; left: 0; transform: translateX(-100%); } [dir="rtl"] .drawer.open { transform: translateX(0); } [dir="rtl"] .drawer-head { flex-direction: row-reverse; } /* ---------- Formulaire ---------- */ [dir="rtl"] .field input, [dir="rtl"] .field select, [dir="rtl"] .field textarea { text-align: right; direction: rtl; } /* Téléphone et e-mail restent en LTR même dans un contexte RTL. */ [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { text-align: left; direction: ltr; } [dir="rtl"] .consent { flex-direction: row-reverse; text-align: right; } /* ---------- Numéros de téléphone dans le texte ---------- */ [dir="rtl"] .tb-right a[href^="tel"], [dir="rtl"] .foot-col a[href^="tel"], [dir="rtl"] .btn[href^="tel"] { direction: ltr; unicode-bidi: embed; } /* ---------- Sélecteur de langue ---------- */ [dir="rtl"] .langsw__list { inset-inline-end: 0; text-align: right; } [dir="rtl"] .langsw__list a { flex-direction: row-reverse; } [dir="rtl"] .langsw__code { text-align: left; } /* ---------- Pied de page ---------- */ [dir="rtl"] .foot-bottom { flex-direction: row-reverse; } [dir="rtl"] .foot-social { flex-direction: row-reverse; } /* ---------- Tableaux de tarifs ---------- */ [dir="rtl"] .prose table { direction: rtl; } /* ---------- Fil d'ariane ---------- */ [dir="rtl"] .breadcrumb { flex-direction: row-reverse; justify-content: flex-end; } /* ---------- WhatsApp flottant ---------- */ [dir="rtl"] .wa-float { right: auto; left: 20px; } .arrows button { direction: ltr; } .contact-grid,.phone__footer,.phone__topbar { direction: ltr; text-align: right; }