/* ════════════════════════════════════════════════════════════════════════
precellence-shared-ar.css — Overlay RTL pour pages /ar/*
Session M — 13 mai 2026
Charge APRÈS precellence-shared.css. Active quand ou élément [dir="rtl"].
Stratégie :
- Polices arabes via Google Fonts : Tajawal (sans) + Reem Kufi (serif/titres)
- Override des variables CSS --serif et --sans quand dir="rtl"
- Bascule text-align, padding, margin via attribute selectors [dir="rtl"]
- Le footer.njk a déjà dir="rtl" inline quand lang=ar → cascade naturelle
- Marques latines (Mercedes, Bentley, Precellence logo) restent LTR
auto-gérées par Unicode bidirectional algorithm
════════════════════════════════════════════════════════════════════════ */
/* ──── Polices arabes Google Fonts ──── */
/* Important: charger dans le via pour éviter FOUC.
Lien à ajouter sur chaque page AR :
*/
/* ──── Variables polices override (cascade depuis :root du shared.css) ──── */
html[dir="rtl"],
html[lang="ar"],
:root[dir="rtl"] {
--serif: 'Reem Kufi', 'Cormorant Garamond', 'Noto Naskh Arabic', Georgia, serif;
--sans: 'Tajawal', 'Jost', 'Noto Naskh Arabic', sans-serif;
/* Précellence garde sa palette d'origine — seul le rendu typo change */
}
/* ──── Corps & héritage RTL ──── */
[dir="rtl"] body,
:lang(ar) {
text-align: right;
font-family: 'Tajawal', 'Jost', 'Noto Naskh Arabic', sans-serif;
}
/* Titres serif → Reem Kufi (matche Cormorant Garamond en serif arabe) */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .hero__brand,
[dir="rtl"] .page-hero__title,
[dir="rtl"] .srv-hero__title,
[dir="rtl"] .srv-h2,
[dir="rtl"] .srv-h3,
[dir="rtl"] .footer-brand-name,
[dir="rtl"] .nav__logo-main,
[dir="rtl"] .ct-hero__title,
[dir="rtl"] .ct-form__title,
[dir="rtl"] .ct-info__title,
[dir="rtl"] .ct-b2b__title,
[dir="rtl"] .ct-faq__title {
font-family: 'Reem Kufi', 'Cormorant Garamond', serif;
font-weight: 500;
letter-spacing: 0; /* L'arabe n'aime pas le letter-spacing */
}
/* Petits labels et tags : Tajawal medium */
[dir="rtl"] .hero__label,
[dir="rtl"] .page-hero__label,
[dir="rtl"] .srv-hero__label,
[dir="rtl"] .footer-brand-sub,
[dir="rtl"] .footer-col-title,
[dir="rtl"] .nav__logo-top,
[dir="rtl"] .ct-hero__label,
[dir="rtl"] .ct-b2b__label,
[dir="rtl"] .ct-faq__label {
font-family: 'Tajawal', sans-serif;
letter-spacing: 0.05em; /* moins que la version FR/EN qui est .2em */
}
/* ──── Layout RTL — overrides communs ──── */
/* Footer (déjà dir="rtl" géré par footer.njk pour AR) */
[dir="rtl"] .footer__top,
[dir="rtl"] .footer__bottom {
text-align: right;
}
[dir="rtl"] .footer-contact {
flex-direction: row-reverse;
}
[dir="rtl"] .footer-contact svg {
margin-left: 0.5rem;
margin-right: 0;
}
[dir="rtl"] .footer-legal {
flex-direction: row-reverse;
}
[dir="rtl"] .footer-links {
padding-right: 0;
padding-left: 0;
}
/* Navbar v4-dior — drawer déjà dir="rtl" via partial */
[dir="rtl"] .lx-menu-trigger {
flex-direction: row-reverse;
}
[dir="rtl"] .lx-logo {
text-align: center;
}
/* Mobile menu */
[dir="rtl"] .mobile-menu {
text-align: right;
}
[dir="rtl"] .mob-close {
right: auto;
left: 1.5rem;
}
/* Boutons & CTAs : flèches arabes pointent ← (gauche) au lieu de → */
/* Les filles utiliseront ← directement dans le texte AR. Ce CSS n'est pas nécessaire ici. */
/* ──── Tables et grilles ──── */
[dir="rtl"] table {
text-align: right;
}
[dir="rtl"] th,
[dir="rtl"] td {
text-align: right;
}
/* ──── Formulaires ──── */
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
text-align: right;
}
/* Inputs téléphone et email gardent LTR car contenu ASCII */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] {
text-align: left;
direction: ltr;
}
/* Placeholder direction */
[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder {
text-align: right;
}
/* Select dropdown arrow (positionnée à gauche en RTL au lieu de droite en LTR) */
[dir="rtl"] select {
background-position: left 1rem center;
padding-left: 2.5rem;
padding-right: 1rem;
}
/* ──── Cookie banner (déjà dir="rtl" via partial) ──── */
[dir="rtl"] .cookie-banner {
text-align: right;
flex-direction: row-reverse;
}
/* ──── WhatsApp widget (icône flottante) — pas de bascule, c'est neutre ──── */
/* ──── Hero & sections génériques ──── */
[dir="rtl"] .hero__content,
[dir="rtl"] .page-hero,
[dir="rtl"] .srv-hero__content,
[dir="rtl"] .ct-hero {
text-align: center; /* On garde center sur les hero pour cohérence visuelle FR/EN/AR */
}
/* Cards qui ont border-left → border-right en RTL */
[dir="rtl"] .intl-block__card,
[dir="rtl"] .srv-point {
border-left: none;
border-right: 3px solid #B8960C;
}
/* Points / bullets ──── */
[dir="rtl"] .srv-points,
[dir="rtl"] .srv-point {
text-align: right;
}
[dir="rtl"] .srv-point__dot {
margin-right: 0;
margin-left: 1rem;
}
/* ──── Breadcrumb ──── */
[dir="rtl"] .breadcrumb {
direction: rtl;
text-align: right;
}
/* ──── FAQ accordéons ──── */
[dir="rtl"] .faq-q,
[dir="rtl"] .srv-faq .faq-q {
flex-direction: row-reverse;
text-align: right;
}
[dir="rtl"] .faq-a {
text-align: right;
}
/* ──── Tarifs / Prix ──── */
/* Les nombres et symboles € restent LTR auto via Unicode bidi.
On laisse le tableau prix s'aligner à droite naturellement. */
/* ──── Sliders et carousels ──── */
[dir="rtl"] .slider,
[dir="rtl"] .carousel {
direction: rtl;
}
/* ──── Skip link & accessibility ──── */
[dir="rtl"] .skip {
right: 1rem;
left: auto;
}
/* ──── Float Share button (Phase 2V.1) ──── */
[dir="rtl"] .float-share {
right: auto;
left: 2rem;
}
[dir="rtl"] .float-share-popover {
right: auto;
left: 5rem;
transform: translateX(-8px);
}
[dir="rtl"] .float-share-popover.open {
transform: translateX(0);
}
/* ──── Responsive : conserver overrides en mobile ──── */
@media (max-width: 900px) {
[dir="rtl"] .footer-contact {
justify-content: flex-start;
}
}
@media (max-width: 600px) {
[dir="rtl"] .float-share {
left: 1rem;
right: auto;
}
}
/* ──── Anti-anglicisme dans le rendu (assure que les marques latines ne se cassent pas) ──── */
[dir="rtl"] .preserve-ltr,
[dir="rtl"] .brand-latin {
direction: ltr;
unicode-bidi: embed;
}
/* ──── Fin precellence-shared-ar.css ──── */