/* ========================================================================== JAD Signature — surcharges RTL (arabe) Chargé uniquement sur les pages , APRÈS styles.css. Le CSS partagé n'utilise que des propriétés logiques (margin-inline, padding-inline, inset-inline-*, border-inline-*), donc la mise en page se retourne d'elle-même : header, nav, footer, bouton WhatsApp, bordures de grilles et menu de langues basculent sans règle supplémentaire. Ce fichier ne traite que ce que les propriétés logiques ne résolvent pas : la police arabe, le tracking, et les fragments latins/numériques. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 1. Polices arabes (self-hosted — voir /fonts) Miroir du couple latin du design system : Cormorant Garamond (serif éditoriale, titres) → Noto Naskh Arabic Montserrat (sans légère, corps) → Noto Sans Arabic Les deux sont des polices variables : un seul fichier couvre toute la plage de graisses utilisée (400–700 pour le naskh, 300–600 pour la sans). unicode-range est volontairement limité au bloc arabe : les fragments latins (JAD Signature, Villa Siena, A/B/C/D, m², chiffres) ne sont donc JAMAIS rendus par ces polices et retombent sur Cormorant / Montserrat. Ce fichier n'étant chargé que par les pages /ar/, les autres langues ne sont pas affectées. -------------------------------------------------------------------------- */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/noto-naskh-arabic-variable-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Noto Sans Arabic'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fonts/noto-sans-arabic-variable-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* Corps : la sans arabe, plus lisible que le naskh en petites tailles. Les polices latines restent en secours pour les fragments non arabes. */ [dir='rtl'] body { font-family: 'Noto Sans Arabic', var(--font-sans), 'Segoe UI', Tahoma, sans-serif; } /* Titres et chiffres-clés : le naskh, écho de la serif éditoriale. */ [dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3, [dir='rtl'] h4, [dir='rtl'] .site-logo, [dir='rtl'] .stat-bar__value, [dir='rtl'] .spec-list dd, [dir='rtl'] .villa-card__name, [dir='rtl'] .gallery-item figcaption, [dir='rtl'] .mobile-nav__link { font-family: 'Noto Naskh Arabic', var(--font-serif), 'Segoe UI', Tahoma, serif; } /* Le corps arabe supporte mal les tailles trop fines : on remonte d'un cran la graisse et l'interligne, sans toucher à l'échelle de tailles. */ [dir='rtl'] body { line-height: 1.9; } [dir='rtl'] h1, [dir='rtl'] h2 { font-weight: 400; } /* -------------------------------------------------------------------------- 2. Tracking Le letter-spacing large des libellés en capitales est dessiné pour le latin. Appliqué à l'arabe, il disloque les ligatures : on l'annule partout. -------------------------------------------------------------------------- */ [dir='rtl'] .eyebrow, [dir='rtl'] .btn, [dir='rtl'] .site-nav__link, [dir='rtl'] .lang-switch__btn, [dir='rtl'] .lang-switch__menu a, [dir='rtl'] .mobile-nav__langs a, [dir='rtl'] .stat-bar__label, [dir='rtl'] .footer-grid h3, [dir='rtl'] .footer-bottom, [dir='rtl'] .hero__tagline, [dir='rtl'] .hero__scroll, [dir='rtl'] .villa-card__type, [dir='rtl'] .villa-card__specs, [dir='rtl'] .spec-list dt, [dir='rtl'] .form-field label, [dir='rtl'] .media-frame figcaption, [dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3, [dir='rtl'] h4 { letter-spacing: 0; } /* La graisse 600 en capitales n'existe pas en arabe : on garde le contraste par la couleur et la taille, déjà portées par styles.css. */ [dir='rtl'] .eyebrow, [dir='rtl'] .btn { text-transform: none; } /* -------------------------------------------------------------------------- 3. Fragments latins et numériques Les noms de marque, lettres de type et unités restent en latin. isole déjà chaque fragment dans le HTML ; ces règles garantissent en plus qu'ils ne soient jamais rendus dans une police arabe ni retournés. -------------------------------------------------------------------------- */ [dir='rtl'] bdi.latin { font-family: var(--font-sans); direction: ltr; unicode-bidi: isolate; } [dir='rtl'] .site-logo bdi.latin, [dir='rtl'] .villa-card__name bdi.latin { font-family: var(--font-serif); } /* Fourchettes et mesures : isolées pour que « 807–925 » ne s'inverse pas en « 925–807 » (le tiret est un caractère neutre, il prendrait sinon la direction du paragraphe). */ [dir='rtl'] bdi.num { direction: ltr; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 4. Champs de formulaire à contenu latin L'e-mail et le téléphone se saisissent de gauche à droite, mais restent alignés sur le bord droit pour suivre le flux de la page. -------------------------------------------------------------------------- */ [dir='rtl'] .form-field input[type='email'], [dir='rtl'] .form-field input[type='tel'] { direction: ltr; text-align: right; } /* -------------------------------------------------------------------------- 5. Carrousel Le défilement est géré en JS par un delta mesuré (getBoundingClientRect), donc il fonctionne déjà dans les deux sens. Les points de navigation suivent l'ordre du DOM : le premier point se place à droite, comme la première image. Rien à corriger ici. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 6. Détails -------------------------------------------------------------------------- */ /* Le filet sous les titres de section part du bord droit : géré par margin-inline dans styles.css, rien à faire. Le bloc-marque, lui, est du latin isolé en : il garde exactement la même forme dans les cinq langues, italique compris. */ /* Les listes à puces « · » séparées restent lisibles ; on force juste l'espacement autour du séparateur pour éviter le collage des ligatures. */ [dir='rtl'] .villa-card__specs span + span::before { content: ' '; } /* Flèches de la vue agrandie : tracées par rotation, donc insensibles à `dir`. En RTL, « précédent » doit pointer vers la droite : on échange les deux rotations. Leur position, elle, est déjà logique. */ [dir='rtl'] .lightbox__nav--next::before { transform: translate(-35%, -50%) rotate(-135deg); } [dir='rtl'] .lightbox__nav--prev::before { transform: translate(-65%, -50%) rotate(45deg); }