/* =========================================================================
   Homy Cozy — la mise en miroir, pour l'arabe.

   Cette feuille ne se charge que sur les pages `/ar/`, après `styles.css`,
   et elle ne fait que deux choses : retourner ce que `styles.css` écrit en
   coordonnées PHYSIQUES (left, right, margin-left…), et donner à l'arabe les
   deux caractères qui lui manquaient. Tout ce que `styles.css` exprime déjà en
   logique — grilles, flex, `margin-inline`, `padding-inline`,
   `scroll-padding-inline-start` — se retourne tout seul avec `dir="rtl"` et
   n'a rien à faire ici.

   Chaque règle est préfixée `[dir="rtl"]` : la feuille est inerte sur une
   page qui ne l'est pas, et sa spécificité (0,2,0) passe devant les règles à
   une classe de `styles.css` sans qu'un seul `!important` soit nécessaire.
   ========================================================================= */

/* ---------------------------- LES DEUX ÉCRITURES ----------------------------
   Le site a deux voix — Cormorant annonce, Jost lit — et l'arabe les garde.
   AMIRI annonce : une naskh de livre, à pleins et déliés, qui est à l'écriture
   arabe ce qu'une Garamond est à la latine ; c'est le seul dessin arabe qui
   tienne à côté d'une sérif gravée sans jurer. IBM PLEX SANS ARABIC lit :
   sobre, ouverte, dessinée pour l'écran, et son gris de page est proche de
   celui de Jost 400.

   LES DEUX NE PORTENT QUE L'ARABE. Leurs fichiers (assets/fonts/i18n.css) ne
   déclarent que la plage U+0600… : tout ce qui est latin sur une page arabe —
   « Homy Cozy », « JBR », « Dubai Marina », le numéro — tombe donc de lui-même
   sur Cormorant et Jost, sans qu'on ait à baliser quoi que ce soit. La marque
   reste dans sa propre lettre, au milieu d'une page qui n'est pas la sienne. */
[dir="rtl"] {
  --stamp: 'Amiri', 'Cormorant Garamond', 'Times New Roman', serif;
  --body:  'IBM Plex Sans Arabic', 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

/* L'ARABE NE S'ESPACE PAS. L'interlettrage est le principal outil expressif du
   site — « The Air Rule » de DESIGN.md — et c'est le seul qui ne survive pas au
   changement d'écriture : l'arabe est cursif, ses lettres se lient, et un
   `letter-spacing` les décolle en morceaux. Chrome l'applique quand même. Il
   est donc ramené à zéro partout où du texte arabe peut passer, puis rendu
   plus bas aux seuls éléments qui restent latins.
   Les capitales espacées gardent leur `text-transform` : sans effet sur
   l'arabe, il continue de faire son travail sur « JBR » dans la même ligne. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .cap, [dir="rtl"] .plate figcaption,
[dir="rtl"] .head-meta, [dir="rtl"] .head-link,
[dir="rtl"] .langs, [dir="rtl"] .step-n,
[dir="rtl"] .action, [dir="rtl"] .skip,
[dir="rtl"] .aussi a, [dir="rtl"] .fil,
[dir="rtl"] .viewer-cap {
  letter-spacing: 0;
}
/* Ce qui reste latin reprend son air : le nom de la marque, le téléphone, la
   liste des quartiers en bas de page, et le quartier balisé `lang="en"` dans
   chaque légende — « JBR » y garde son espacement de capitale pendant que le
   nom de la pièce, en arabe, n'en a pas. */
[dir="rtl"] .head-mark span { letter-spacing: 0.16em; }
[dir="rtl"] .tel, [dir="rtl"] .foot-areas { letter-spacing: 0.22em; }
[dir="rtl"] .cap [lang="en"], [dir="rtl"] figcaption [lang="en"],
[dir="rtl"] .viewer-cap [lang="en"] { letter-spacing: 0.22em; }

/* L'ARABE A BESOIN DE HAUTEUR. Une naskh porte des hampes au-dessus et des
   boucles au-dessous que la latine n'a pas, et l'interligne serré des titres
   (1,1) les fait se toucher d'une ligne à l'autre. On desserre : les titres à
   1,4, le corps à 1,85 au lieu de 1,7. Ce n'est pas plus d'air pour le
   plaisir, c'est la place que les lettres occupent. */
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] h1 { line-height: 1.4; }
[dir="rtl"] h2 { line-height: 1.4; }

/* L'ARABE SE LIT UN CRAN AU-DESSUS DU LATIN — 2 septembre 2026. Plex Arabic
   est dessinée dans le même cadratin que Jost, mais l'œil arabe lit des
   formes plus basses et plus liées : à corps égal, le texte paraît plus petit
   et les points diacritiques se perdent les premiers. Le corps monte de cinq
   pour cent (17,6 → 18,4 px sur grand écran, 17,2 → 18 sur téléphone), les
   notes et paragraphes secondaires de 16 à 16,8, et les capitales espacées —
   qui ne sont plus des capitales en arabe, juste de petits mots — passent de
   12,8 à 14 px, 14,4 sur téléphone. Le bouton suit : 13 px d'arabe sur du
   cuivre, c'était le plus petit texte de la page. */
[dir="rtl"] body { font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.15rem); }
[dir="rtl"] .rayon-note, [dir="rtl"] .metier p, [dir="rtl"] .step p,
[dir="rtl"] .facteur p, [dir="rtl"] .aussi p, [dir="rtl"] .no-price,
[dir="rtl"] .micro, [dir="rtl"] .foot-photo, [dir="rtl"] .foot-credit,
[dir="rtl"] .foot-legal { font-size: 1.05rem; }
[dir="rtl"] .cap, [dir="rtl"] .plate figcaption, [dir="rtl"] .head-meta,
[dir="rtl"] .head-link, [dir="rtl"] .langs, [dir="rtl"] .langue-actuelle,
[dir="rtl"] .langue-lien, [dir="rtl"] .pied-langues ul, [dir="rtl"] .viewer-cap,
[dir="rtl"] .fil { font-size: 0.875rem; }
[dir="rtl"] .action { font-size: 0.9rem; }
[dir="rtl"] .action-lg { font-size: 0.95rem; }
@media (max-width: 900px) {
  [dir="rtl"] .cap, [dir="rtl"] .plate figcaption, [dir="rtl"] .head-meta,
  [dir="rtl"] .head-link, [dir="rtl"] .langs, [dir="rtl"] .langue-actuelle,
  [dir="rtl"] .langue-lien, [dir="rtl"] .pied-langues ul, [dir="rtl"] .viewer-cap,
  [dir="rtl"] .fil { font-size: 0.9rem; }
}
@media (max-width: 560px) {
  [dir="rtl"] .action { font-size: 0.9rem; }
  [dir="rtl"] .action-lg { font-size: 0.95rem; }
}
[dir="rtl"] .rayon-tete h3, [dir="rtl"] .metiers-tete h3, [dir="rtl"] .metier h3,
[dir="rtl"] .facteurs-tete h3, [dir="rtl"] .facteur h3,
[dir="rtl"] .step h3, [dir="rtl"] .aussi a { line-height: 1.45; }
/* Amiri est dessinée petite dans son cadratin — c'est le propre des naskh de
   livre. À corps égal elle paraît un cran sous Cormorant, dont la hauteur d'x
   est pourtant déjà basse. Les titres montent donc de six pour cent, pas plus :
   au-delà, le second membre du H1 repasse à trois lignes sur téléphone. */
[dir="rtl"] h1 { font-size: clamp(2rem, 1.35rem + 1.8vw, 3.2rem); }
[dir="rtl"] h2 { font-size: clamp(1.9rem, 1.15rem + 2.1vw, 3.2rem); }
[dir="rtl"] .close h2 { font-size: clamp(2.1rem, 1.25rem + 2.7vw, 3.6rem); }

/* `text-wrap: balance` est conservé ; `text-align` n'a pas à être touché :
   `start` et `center` suivent la direction. Seul le bouton d'ouverture d'une
   photo forçait `left` en clair. */
[dir="rtl"] .open-frame { text-align: right; }

/* ---------------------------- LES POSITIONS PHYSIQUES ----------------------------
   Tout ce que styles.css pose avec `left` ou `right`. */

/* Le lien d'évitement sort par le bord de départ. */
[dir="rtl"] .skip { left: auto; right: -9999px; }
[dir="rtl"] .skip:focus { right: var(--s3); }

/* Le monogramme de l'en-tête a des marges négatives asymétriques pour se coller
   au bord du texte : elles s'inversent avec lui. */
[dir="rtl"] .head-mark img { margin: -0.5rem -0.6rem -0.5rem -0.4rem; }
/* La ligne de métier poussait tout ce qui la suit vers la droite ; elle pousse
   maintenant vers la gauche, où finissent les langues et WhatsApp. */
[dir="rtl"] .head-meta { margin: 0 0 0 auto; }

/* La commande du film est dans le coin de DÉPART du tirage — en bas à droite
   ici. Le glyphe de lecture, lui, ne se retourne pas : un triangle qui pointe
   vers la droite est le signe universel de la lecture, quelle que soit la
   direction de l'écriture. */
[dir="rtl"] .film-toggle { left: auto; right: var(--s2); }
@media (max-width: 599px) {
  [dir="rtl"] .film-toggle { left: auto; right: 6px; }
}

/* La bulle du bouton WhatsApp porte sa queue en bas à gauche : elle parle
   depuis la gauche. Sur une page qui se lit de droite, elle parle depuis la
   droite. C'est le seul pictogramme retourné avec les flèches. */
[dir="rtl"] .action .ico { transform: scaleX(-1); }

/* Les flèches des rayons : « précédent » est maintenant à droite, et le chevron
   qui l'habille doit pointer vers la droite. Le retournement se fait sur le
   SVG, pas sur le bouton, pour que le focus et le fond restent d'aplomb. */
[dir="rtl"] .fleche svg { transform: scaleX(-1); }
[dir="rtl"] .rayon-nav { margin-left: 0; margin-right: auto; }

/* Le pied : la signature a la même marge négative que le monogramme. */
[dir="rtl"] .foot-mark { margin: -0.9rem -1.1rem -0.9rem 0; }
@media (max-width: 560px) {
  [dir="rtl"] .foot-mark { margin: -0.7rem -0.9rem -0.7rem 0; }
}

/* La fermeture du visualiseur va dans le coin de FIN — en haut à gauche —,
   comme sur n'importe quelle fenêtre d'un système en arabe. */
[dir="rtl"] .viewer-close { right: auto; left: var(--s3); }

/* Sous 900 px, styles.css cale l'action et les langues à droite par
   `margin-left: auto` : ici elles se calent à gauche, où finit une ligne
   arabe. */
@media (max-width: 900px) {
  [dir="rtl"] .head-link { margin-left: 0; margin-right: auto; }
  /* `.langue`, lui, se cale déjà en logique (`margin-inline-start: auto`). */
}

/* ---------------------------- LES CHIFFRES ----------------------------
   Les chiffres sont occidentaux — c'est l'usage aux Émirats — et un numéro de
   téléphone est une suite qui se lit de gauche à droite jusque dans son signe
   « + ». Isolé dans son propre sens, le « + » reste devant l'indicatif au lieu
   de sauter à la fin de la ligne, ce que l'algorithme bidirectionnel lui ferait
   sans cela. Le centrage du bloc parent n'est pas touché. */
[dir="rtl"] .tel { direction: ltr; unicode-bidi: isolate; }

/* ---------------------------- LE SÉLECTEUR DE LANGUE ----------------------------
   Le pli commun (`.langue`, bloc « i18n » de styles.css) est écrit en
   propriétés logiques : `inset-inline-end` pose la liste au bord de fin, qui
   est ici la gauche, et l'ordre des langues — English, Français, العربية,
   Русский — ne change pas d'une page à l'autre. Il n'y a donc rien à
   retourner. Une seule chose : le nom de la langue courante, en arabe dans le
   pli, garde l'interlettrage nul que le bloc commun lui donne déjà. */
[dir="rtl"] .langue-actuelle, [dir="rtl"] .langue-lien { letter-spacing: 0.14em; }
[dir="rtl"] .langue [lang="ar"], [dir="rtl"] .pied-langues [lang="ar"] { letter-spacing: 0; }

/* Les flèches de rayon marchent en RTL depuis le 2 septembre 2026 : ce n'est
   pas ici que ça se règle mais dans app.js, qui lisait `scrollLeft` en
   positif alors qu'il est négatif sur un rail en `dir="rtl"`. Noté ici pour
   qu'on ne cherche pas la cause dans cette feuille. */