/*
  STYLES POUR LA VERSION ARABE (droite à gauche)
  ----------------------------------------------
  1. Dans le <head> des pages arabes, charger la police :
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700&display=swap" rel="stylesheet">

  2. Chaque page arabe commence par : <html lang="ar" dir="rtl">

  3. Ajouter ce fichier APRÈS la feuille de style principale.
     Les règles ne s'appliquent qu'aux pages arabes ([dir="rtl"]).

  4. Vérifier visuellement chaque page : les règles ci-dessous couvrent les cas courants,
     mais si le CSS du site utilise margin-left / padding-left / left: / text-align: left
     sur des éléments précis, il faut les inverser pour [dir="rtl"].
     Le plus propre : remplacer dans le CSS principal
       margin-left  → margin-inline-start
       margin-right → margin-inline-end
       padding-left → padding-inline-start
       padding-right→ padding-inline-end
       left: / right: → inset-inline-start / inset-inline-end
       text-align: left → text-align: start
*/

[dir="rtl"] body {
  font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  line-height: 1.8;            /* l'arabe a besoin de plus d'interligne */
  letter-spacing: 0;           /* jamais d'espacement de lettres en arabe : ça casse les liaisons */
  text-align: start;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;        /* pas de majuscules en arabe */
  line-height: 1.5;
}

/* Les listes et les étapes numérotées s'alignent à droite */
[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-inline-start: 1.5em;
  padding-inline-end: 0;
}

/* Les flèches « → » doivent pointer vers la gauche en arabe.
   Dans le HTML arabe, écrire directement « ← » plutôt que « → ». */

/* Les icônes directionnelles (chevrons, flèches SVG) sont retournées */
[dir="rtl"] .icon-arrow,
[dir="rtl"] .icon-chevron {
  transform: scaleX(-1);
}

/* Numéros de téléphone, e-mails, horaires : toujours de gauche à droite */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Champs de formulaire */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: start;
  font-family: inherit;
}
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"] {
  direction: ltr;              /* on tape un numéro / un e-mail de gauche à droite */
  text-align: end;             /* mais aligné à droite pour rester cohérent avec la page */
}

/* Le menu mobile (☰) s'ouvre du côté droit */
[dir="rtl"] .nav-toggle {
  margin-inline-start: auto;
  margin-inline-end: 0;
}