/* ============================================================ css_ar.css — Styles RTL & Typographie Arabe Actif quand ou body.lang-ar Importé APRÈS style.css pour surcharger les règles LTR ============================================================ */ /* ── 0. RESET RTL GLOBAL ─────────────────────────────────── */ html[lang="ar"], html[dir="rtl"] { direction: rtl; text-align: right; } /* ── 1. TYPOGRAPHIE ARABE ────────────────────────────────── */ body.lang-ar, html[lang="ar"] body { font-family: 'Tajawal', 'Cairo', 'Segoe UI', Arial, sans-serif; letter-spacing: 0; /* L'arabe n'utilise pas le letter-spacing */ word-spacing: 0.05em; line-height: 1.8; /* Meilleure lisibilité pour l'arabe */ } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 { font-family: 'Cairo', 'Tajawal', sans-serif; font-weight: 700; letter-spacing: 0; } /* Remplace Space Mono (police LTR monospace) pour les labels */ html[lang="ar"] .s2__label, html[lang="ar"] .s3__label, html[lang="ar"] .footer-cta-badge { font-family: 'Cairo', 'Tajawal', sans-serif; letter-spacing: 0; } /* ── 2. HEADER ───────────────────────────────────────────── */ html[lang="ar"] .header__container {} html[lang="ar"] .header__nav__menu {} html[lang="ar"] .header__right-side {} /* ── 3. HERO / INTRO ─────────────────────────────────────── */ html[lang="ar"] .intro { text-align: center; /* Le héro reste centré */ } html[lang="ar"] .intro__title { font-family: 'Cairo', 'Tajawal', sans-serif; } /* ── 4. SERVICES ─────────────────────────────────────────── */ html[lang="ar"] .services-grid { direction: rtl; } html[lang="ar"] .service-card { text-align: right; } html[lang="ar"] .btn-outline {} /* ── 5. STICKY TABS ──────────────────────────────────────── */ html[lang="ar"] .tabs-row {} /* ── 6. POURQUOI / FEATURES ──────────────────────────────── */ html[lang="ar"] .pq-row {} html[lang="ar"] .pq-title { font-family: 'Cairo', 'Tajawal', sans-serif; } html[lang="ar"] .feature-item { text-align: right; } html[lang="ar"] .features-grid { direction: rtl; } /* ── 7. SECTION FEATURES (propulsez vos ventes) ──────────── */ html[lang="ar"] .features_component {} html[lang="ar"] .features-component-left { text-align: right; } html[lang="ar"] .text-rich-text ul { padding-right: 1.5rem; padding-left: 0; } html[lang="ar"] .heading-style-h3 { font-family: 'Cairo', 'Tajawal', sans-serif; } /* ── 8. PROCESSUS / STEPS ────────────────────────────────── */ html[lang="ar"] .big-title, html[lang="ar"] .big-title-eng { font-family: 'Cairo', 'Tajawal', sans-serif; letter-spacing: 0; } html[lang="ar"] .item-step { text-align: right; } html[lang="ar"] .content-step { text-align: right; } html[lang="ar"] .number-step { margin-left: 0; margin-right: 0; } /* ── 9. PROJETS ──────────────────────────────────────────── */ html[lang="ar"] .projects__row {} html[lang="ar"] .project__inner { text-align: right; } html[lang="ar"] .project__badges { justify-content: flex-end; } html[lang="ar"] .swiper-arrow-group {} /* ── 10. SECTION DIGITAL (s2) ────────────────────────────── */ html[lang="ar"] .s2__row {} html[lang="ar"] .s2__left, html[lang="ar"] .s2__right { text-align: right; } html[lang="ar"] .s2__logos { justify-content: flex-end; } /* ── 11. SECTION PARTNER (s3) ────────────────────────────── */ html[lang="ar"] .s3__grid { direction: rtl; } html[lang="ar"] .s3__col1 { text-align: right; } html[lang="ar"] .icon-box { text-align: right; } html[lang="ar"] .icon-box__cta { align-self: flex-end; } /* ── 12. ENGAGEMENTS ─────────────────────────────────────── */ html[lang="ar"] .engagement-card {} html[lang="ar"] .engagement-content { text-align: right; } html[lang="ar"] .custom-list { padding-right: 1.2rem; padding-left: 0; } html[lang="ar"] .custom-list li::before { right: -1.2rem; left: auto; } /* ── 13. FORMULAIRE CONTACT ──────────────────────────────── */ html[lang="ar"] .edito-form__row {} html[lang="ar"] .edito-form__left { text-align: right; } html[lang="ar"] .edito-form__title { text-align: right; font-family: 'Cairo', 'Tajawal', sans-serif; } html[lang="ar"] .edito-form__address { text-align: right; } html[lang="ar"] .form-group label { text-align: right; display: block; } html[lang="ar"] .form-group input, html[lang="ar"] .form-group select, html[lang="ar"] .form-group textarea { text-align: right; direction: rtl; } html[lang="ar"] .form-submit { text-align: right; } /* ── 14. FOOTER ──────────────────────────────────────────── */ html[lang="ar"] .footer-cta-band {} html[lang="ar"] .footer-cta-band__left { text-align: right; } html[lang="ar"] .footer-cta-band__right { text-align: right; } html[lang="ar"] .footer-cta-btn {} html[lang="ar"] .footer-main {} html[lang="ar"] .footer-col { text-align: right; } html[lang="ar"] .footer-links li a {} html[lang="ar"] .footer-link-arrow { margin-left: 0; margin-right: 0.4rem; } html[lang="ar"] .footer-contact-list li {} html[lang="ar"] .footer-contact-list>li>div:last-child { text-align: right; } html[lang="ar"] .footer-price-features { padding-right: 0; padding-left: 0; text-align: right; } html[lang="ar"] .footer-price-features li i { margin-left: 0.5rem; margin-right: 0; } html[lang="ar"] .footer-bottom {} html[lang="ar"] .footer-bottom__right {} html[lang="ar"] .header__menu.is-open { transform: translateX(0); } /* Si le menu slide depuis la droite dans style.css, on inverse */ html[lang="ar"] .header__actions--mobile { text-align: center; } /* ── 16. MARQUEE (partenaires) ───────────────────────────── */ html[lang="ar"] .marquee-track { direction: ltr; /* Le défilement reste LTR pour les logos */ } /* ── 17. AJUSTEMENTS MEDIA QUERIES ──────────────────────── */ @media (max-width: 768px) { html[lang="ar"] .pq-row { flex-direction: column; } html[lang="ar"] .edito-form__row { flex-direction: column; } html[lang="ar"] .footer-main { flex-direction: column; } html[lang="ar"] .footer-cta-band { flex-direction: column; text-align: center; } html[lang="ar"] .footer-cta-band__left, html[lang="ar"] .footer-cta-band__right { text-align: center; } html[lang="ar"] .engagement-card { flex-direction: column; } html[lang="ar"] .s2__row { flex-direction: column; } html[lang="ar"] .footer-col { text-align: center; } html[lang="ar"] .footer-price-features li { justify-content: center; } } .text-rich-text li { padding-right: 1.75rem; padding-left: 0; } .text-rich-text li::before { right: 0; } .swiper-arrow svg { transform: scaleX(-1); } .engagement-content h2 { border-right: 4px solid var(--accent); padding-right: 20px; border-left: 0; padding-left: 0; } .footer-col-title::after { right: 0; } @media (max-width: 1024px) { .header__logo { z-index: 1200; } } .service-card.active-card { border-right-color: var(--primary); } .service-card { border-right: 3px solid transparent; border-left: 0px solid transparent; padding: 1.8rem 1.8rem 2rem 0px; }