/* ============================================================================
   PISCINE LAGON MAROC · feuille arabe
   Chargée uniquement par les pages /ar/. Elle ajoute la police arabe et
   retourne les rares règles de style.css qui sont orientées à gauche.
   style.css n'est pas modifié : les versions française et anglaise ne
   téléchargent rien de plus.
   ============================================================================ */

/* ---------------------------------------------------------------- police ---
   IBM Plex Sans Arabic (licence SIL Open Font License 1.1), hébergée avec le
   site comme la police latine. Seul le sous-ensemble arabe est téléchargé :
   les caractères latins restent servis par Instrument Sans, ce qui garde une
   seule identité typographique pour le nom de la société, les URL et les
   numéros. */
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-400.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: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-500.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: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-600.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: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-700.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;
}

/* La police arabe passe devant : elle ne couvre que les caractères arabes,
   tout le reste retombe automatiquement sur Instrument Sans. */
:root {
    --sans: "IBM Plex Sans Arabic", "Instrument Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* L'arabe a une hauteur d'x plus grande : sans cette correction, le texte
   paraît serré à côté du même corps en latin. */
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] .type-title,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.35; }

/* L'arabe n'a pas de capitales : les libellés en petites majuscules espacées
   deviennent illisibles. On rend l'interlettrage et la casse au texte. */
[dir="rtl"] .kicker,
[dir="rtl"] .overline,
[dir="rtl"] .type-num {
    letter-spacing: 0;
    text-transform: none;
}

/* ------------------------------------------------- retournement gauche/droite --- */

[dir="rtl"] .type-desc,
[dir="rtl"] .types-lire,
[dir="rtl"] .type-body { text-align: right; }

/* la flèche des cartes pointe vers la gauche en lecture droite-à-gauche */
[dir="rtl"] .type-arrow svg,
[dir="rtl"] .btn-disc svg,
[dir="rtl"] .hero-cta svg { transform: scaleX(-1); }
[dir="rtl"] .type-row:hover .type-arrow,
[dir="rtl"] .type-row:focus-visible .type-arrow { transform: translateX(-2px); }

/* le lien d'évitement, la galerie et le bouton WhatsApp sont positionnés en
   absolu : leurs ancrages doivent basculer de bord */
[dir="rtl"] .skip-link { left: auto; right: 20px; }
[dir="rtl"] .whatsapp  { right: auto; left: max(18px, var(--sa-left)); }

/* la galerie défile horizontalement : en RTL le sens de défilement s'inverse
   tout seul, mais les boutons doivent échanger leur position */
[dir="rtl"] .gal-prec svg,
[dir="rtl"] .gal-suiv svg { transform: scaleX(-1); }

/* champs de formulaire : le texte saisi et les libellés repassent à droite,
   sauf le téléphone et l'email qui restent en lecture gauche-à-droite */
[dir="rtl"] .quote-form label,
[dir="rtl"] .quote-form input,
[dir="rtl"] .quote-form textarea { text-align: right; }
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"] {
    direction: ltr;
    text-align: right;
}

/* Numéro de téléphone, email, RC, ICE et URL : ce sont des suites de chiffres
   et de caractères latins qui doivent rester lues de gauche à droite, meme au
   milieu d'une phrase arabe. Sans cela, « +212 7 11 16 41 06 » s'affiche a
   l'envers. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;      /* court : ne se coupe jamais en fin de ligne */
}
/* Adresse postale, RC, ICE : longues suites latines au milieu d’une phrase
   arabe. On isole leur sens de lecture SANS inline-block, sinon une adresse
   longue déborderait au lieu de passer à la ligne. */
[dir="rtl"] .ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ------------------------------------------------- puces de liste --- */

/* Les listes du site dessinent leur puce en absolu à gauche, avec un retrait
   à gauche. En lecture droite-à-gauche les deux doivent changer de bord,
   sinon la puce se retrouve du mauvais côté du texte. */
[dir="rtl"] .legal-liste { padding-left: 0; padding-right: 1.35em; }
[dir="rtl"] .legal-liste li::before { left: auto; right: -1.35em; }

[dir="rtl"] .art-liste li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .art-liste li::before { left: auto; right: 0; }

[dir="rtl"] .refus-list li { padding-left: 0; padding-right: 34px; }
[dir="rtl"] .refus-list li::before,
[dir="rtl"] .refus-list li::after { left: auto; right: 0; }

/* le filet terracotta cousu en haut du formulaire */
[dir="rtl"] .quote-form::before { left: auto; right: clamp(30px, 4vw, 54px); }

/* ------------------------------------------- sélecteur de langue en RTL --- */

/* le sélecteur est défini dans style.css ; en arabe seule la marge change de côté */
[dir="rtl"] .lang-switch { margin-inline-end: 0; margin-inline-start: 6px; }