/* ==========================================================
   LATAFA — pages arabes (/ar/)
   Chargée uniquement quand dir="rtl". Les pages françaises ne
   téléchargent ni cette feuille ni le sous-ensemble arabe.
========================================================== */

/* Sous-ensemble arabe de Cairo (30 Ko, variable). Amiri reste réservé au
   mot-symbole لطافة du logo, qui est une image. */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/cairo-arabic-variable.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4,
                 U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24,
                 U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42,
                 U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54,
                 U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64,
                 U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
                 U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9,
                 U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* La serif latine n'a pas d'équivalent arabe : en RTL, les titres passent à
   Cairo, qui reste élégant en gras léger. Sans cela le navigateur choisirait
   une police système au hasard. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .price,
[dir="rtl"] .card__name,
[dir="rtl"] .post__title,
[dir="rtl"] .sizer__headline,
[dir="rtl"] .review__text,
[dir="rtl"] .thanks__row dd,
[dir="rtl"] .option__value,
[dir="rtl"] .reviews__invite-title,
[dir="rtl"] .sticky-cta__price,
[dir="rtl"] .modal__title,
[dir="rtl"] .circle__title,
[dir="rtl"] .testimonials__stat,
[dir="rtl"] .form__recap {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

/* Le mot-symbole latin garde son sens de lecture mais passe à Cairo :
   charger la serif Cormorant (37 Ko) pour le seul mot « LATAFA » serait du
   poids mort sur chaque page arabe. Le logo porte déjà l'identité visuelle. */
[dir="rtl"] .brand__fr {
  font-family: var(--font-body);
  font-weight: 600;
  direction: ltr;
}

/* ---------- Inversions de mise en page ---------- */
/* Les marges internes utilisent déjà des propriétés logiques (padding-inline,
   margin-inline) : elles s'inversent seules. Restent les positions fixes et
   les quelques valeurs left/right explicites. */

[dir="rtl"] .whatsapp-float {
  right: auto;
  left: 18px;
}

[dir="rtl"] .gallery__zoom-hint {
  right: auto;
  left: 14px;
}

[dir="rtl"] .card__badge {
  left: auto;
  right: 12px;
}

[dir="rtl"] .skip-link {
  left: auto;
  right: -999px;
}
[dir="rtl"] .skip-link:focus {
  right: 0;
}

[dir="rtl"] .lightbox__close {
  right: auto;
  left: 18px;
}

/* La flèche « retour » doit pointer vers la droite en lecture arabe */
[dir="rtl"] .site-nav__back svg {
  transform: scaleX(-1);
}

/* Les champs de formulaire alignent leur texte à droite */
[dir="rtl"] .field input,
[dir="rtl"] .field select,
[dir="rtl"] .field textarea {
  text-align: right;
}
[dir="rtl"] .field select {
  background-position: 13px 21px, 18px 21px;
  padding-right: 2px;
  padding-left: 28px;
}

/* Le survol d'un article décale vers la gauche en RTL */
[dir="rtl"] .post__link:hover {
  padding-left: 0;
  padding-right: 10px;
}

/* Le contenu rédactionnel : listes et citations du bon côté */
[dir="rtl"] .prose ul,
[dir="rtl"] .prose ol {
  padding-left: 0;
  padding-right: 22px;
}
[dir="rtl"] .prose th,
[dir="rtl"] .prose td {
  text-align: right;
}
/* Une cellule qui melange arabe et latin (« S, M, L », « 229 DH ») se lit dans
   le sens de son propre contenu, pas dans celui du tableau. */
[dir="rtl"] .prose td { unicode-bidi: plaintext; }

/* L'arabe est une ecriture liee : espacer les lettres detache visuellement les
   glyphes et rend l'en-tete penible a lire. Les majuscules n'existent pas non
   plus, la regle latine ne s'applique donc pas ici. */
[dir="rtl"] .prose th {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.86rem;
}

/* Les chiffres et les tailles (S, M, L, 229 DH) restent en lecture latine */
[dir="rtl"] .size-btn,
[dir="rtl"] .sticky-cta__price,
[dir="rtl"] .card__price,
[dir="rtl"] .availability__item {
  unicode-bidi: plaintext;
}

@media (min-width: 900px) {
  [dir="rtl"] .whatsapp-float { left: 26px; right: auto; }
}

/* Le degrade de defilement suit le sens de lecture : en RTL, la suite du
   tableau se trouve a gauche. */
[dir="rtl"] .prose__tablewrap::after {
  background: linear-gradient(to right, var(--sand) 18%, rgba(244, 241, 236, 0));
}
[dir="rtl"] .prose__tablewrap::before {
  background: linear-gradient(to left, var(--sand) 18%, rgba(244, 241, 236, 0));
}

/* Les degrades des rails de filtres suivent aussi le sens de lecture. */
[dir="rtl"] .filters__group::after {
  background: linear-gradient(to right, var(--sand) 22%, rgba(244, 241, 236, 0));
}
[dir="rtl"] .filters__group::before {
  background: linear-gradient(to left, var(--sand) 22%, rgba(244, 241, 236, 0));
}