/* ═══════════════════════════════════════════════
   M-FORCE — calque arabe (RTL)
   Charge UNIQUEMENT par les pages /ar/. Ne redefinit que ce que
   dir="rtl" ne retourne pas tout seul : positions explicites,
   marges laterales, decalages, et la typographie arabe.
   ═══════════════════════════════════════════════ */

/* ── typographie ────────────────────────────────
   L'ordre compte : Montserrat / IBM Plex Mono n'ont aucun glyphe arabe,
   le navigateur retombe donc sur Cairo caractere par caractere.
   Resultat : les noms de marque latins gardent la police d'origine,
   le texte arabe passe en Cairo. */
:root {
  --font-display: "Montserrat", "Cairo", sans-serif;
  --font-body: "Montserrat", "Cairo", sans-serif;
  --font-mono: "IBM Plex Mono", "Cairo", monospace;
}

/* L'arabe est cursif : l'interlettrage separe les glyphes lies et
   detruit la ligature. On l'annule partout, puis on le rend aux
   quelques blocs qui ne contiennent que du latin ou des chiffres. */
[dir="rtl"] body,
[dir="rtl"] .mono,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] a,
[dir="rtl"] span, [dir="rtl"] strong, [dir="rtl"] b,
[dir="rtl"] button, [dir="rtl"] label, [dir="rtl"] input {
  letter-spacing: 0;
}
/* blocs restes en latin : on leur rend leur chasse d'origine */
[dir="rtl"] .hs__title, [dir="rtl"] .hs__count,
[dir="rtl"] .pack__title, [dir="rtl"] .duel__name, [dir="rtl"] .duel__num,
[dir="rtl"] .dive__name, [dir="rtl"] .rituel__product,
[dir="rtl"] .shop__name, [dir="rtl"] .pp__title,
[dir="rtl"] .footer__legal a, [dir="rtl"] .langsw {
  letter-spacing: 0.04em;
}

/* l'arabe a des jambages hauts et bas : un peu d'air en plus */
[dir="rtl"] p, [dir="rtl"] li { line-height: 1.9; }
[dir="rtl"] .doc__section p { line-height: 2; }

/* ── en-tete et menu ────────────────────────── */
[dir="rtl"] .burger { margin-left: 0; }
[dir="rtl"] .mnav__list li a .mono { margin-left: 0.7rem; margin-right: 0; }

/* (les styles de .langsw vivent dans style.css : les deux langues les partagent) */

/* ── carrousel d'accueil ────────────────────── */
[dir="rtl"] .hs__nav { right: auto; left: 2.2rem; }
[dir="rtl"] .hs__hint { left: auto; right: 4vw; }
[dir="rtl"] .hs__hint-line { transform: scaleX(-1); }
[dir="rtl"] .hs__bottle--l { transform: translateX(-9%) rotate(4deg); }
[dir="rtl"] .hs__bottle--r { transform: translateX(9%) rotate(-4deg); }
[dir="rtl"] .hs__cta:hover i { transform: scaleX(-1) translateX(5px); }
@media (max-width: 900px) {
  [dir="rtl"] .hs__nav { left: 50%; right: auto; }
}

/* ── bandeau defilant ───────────────────────── */
/* le ruban garde son sens de defilement : il est purement decoratif */

/* ── section pack ───────────────────────────── */
[dir="rtl"] .pack__save { left: auto; right: 14px; }
[dir="rtl"] .pack__price em { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .pack__price s { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .pack__list li .mono { margin-left: 0.5rem; margin-right: 0; }

/* ── le pique ───────────────────────────────── */
[dir="rtl"] .dive__go { margin-left: 0; margin-right: auto; }
[dir="rtl"] .dive__prod:hover .dive__go { transform: translateX(-4px); }
@media (max-width: 900px) {
  [dir="rtl"] .dive__go { margin-right: 0; }
}

/* ── le duel ────────────────────────────────── */
[dir="rtl"] .duel__price s { margin-left: 0; margin-right: 0.3rem; }

/* ── le rituel ──────────────────────────────── */
[dir="rtl"] .rituel__bar .rituel__dose { margin-right: 0; margin-left: auto; }
[dir="rtl"] .rituel__tag { left: auto; right: 0.9rem; }
@media (max-width: 900px) {
  [dir="rtl"] .rituel__bar .rituel__dose { margin-left: 0; }
  [dir="rtl"] .rituel__tag { right: 0.55rem; }
}

/* ── pages de contenu (a-propos, faq, CGV…) ─── */
[dir="rtl"] .doc__section ul li { padding-left: 0; padding-right: 1.4rem; }
[dir="rtl"] .doc__section ul li::before { left: auto; right: 0; }
[dir="rtl"] .doc__crest { right: auto; left: -30%; transform: scaleX(-1); }
[dir="rtl"] .doc__section h2::before { left: auto; right: 0; }

/* ── boutique ───────────────────────────────── */
[dir="rtl"] .shop__badge { left: auto; right: 14px; }
[dir="rtl"] .shop__price em { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .shop__price s { margin-left: 0; margin-right: 6px; }

/* ── page produit ───────────────────────────── */
[dir="rtl"] .sec__head { padding-left: 0; padding-right: 3.6rem; }
[dir="rtl"] .sec__crest { left: auto; right: 0; transform: scaleX(-1); }
[dir="rtl"] .buy__watermark { right: auto; left: -6%; transform: scaleX(-1); }
[dir="rtl"] .pp__badge { right: auto; left: 5%; }
@media (max-width: 900px) {
  [dir="rtl"] .sec__head { padding-right: 0; }
  [dir="rtl"] .buy__watermark { left: -34%; }
}
/* le pot de miel reste hors ecran quel que soit le sens */
[dir="rtl"] .pp__hp { left: auto; right: -5000px; }

/* ── champs de commande ─────────────────────── */
[dir="rtl"] .pp__field input { text-align: right; }
/* telephone et e-mail restent lus de gauche a droite */
[dir="rtl"] .pp__field input[type="tel"],
[dir="rtl"] .pp__field input[type="email"] {
  direction: ltr;
  text-align: right;
}

/* ── pied de page ───────────────────────────── */
[dir="rtl"] .footer__legal { line-height: 1.9; }

/* ── fleches ────────────────────────────────────
   Les fleches ecrites dans le texte ont ete retournees a la traduction ;
   celles qui sont des elements decoratifs sont miroitees ici. */
[dir="rtl"] .hs__cta i,
[dir="rtl"] .btn i,
[dir="rtl"] .doc__cta i {
  display: inline-block;
  transform: scaleX(-1);
}

/* ── chiffres et pourcentages ────────────────────
   Un « − » ou un « % » colle a un nombre est un caractere neutre : en
   contexte RTL il bascule de l'autre cote. On isole ces pastilles en LTR. */
[dir="rtl"] .pp__badge,
[dir="rtl"] .pack__save,
[dir="rtl"] .shop__badge,
[dir="rtl"] .hs__count {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── noms de marque latins ───────────────────────
   « EAGLE POWER + » se termine par un caractere neutre : dans un paragraphe
   RTL ce « + » bascule DEVANT le nom (« + EAGLE POWER »). unicode-bidi:
   plaintext fait deduire la direction du premier caractere fort de chaque
   element : latin -> LTR, arabe -> RTL. L'alignement, lui, reste a droite. */
[dir="rtl"] .buy__title,
[dir="rtl"] .hs__title,
[dir="rtl"] .duel__name,
[dir="rtl"] .rituel__product,
[dir="rtl"] .shop__name,
[dir="rtl"] .pack__title,
[dir="rtl"] .mnav__buy .btn span,
[dir="rtl"] .footer__links a {
  unicode-bidi: plaintext;
  text-align: right;
}
/* deja centres par leur conteneur : on ne touche pas a leur alignement */
[dir="rtl"] .dive__name,
[dir="rtl"] .pp__title,
[dir="rtl"] .doc__title {
  unicode-bidi: plaintext;
}

/* ═══════════════════════════════════════════════
   ECHELLE TYPOGRAPHIQUE ARABE
   A taille de police egale, l'arabe se lit plus petit que le latin :
   pas de capitales pour porter le mot, hauteur d'oeil plus basse, et des
   points diacritiques qui ont besoin d'air. Le design francais descend a
   0.46-0.7rem sur ses micro-libelles — lisible en capitales latines,
   beaucoup moins en arabe. On remonte donc l'echelle SANS toucher aux
   marges ni aux gabarits : seules les tailles de texte changent.
   ═══════════════════════════════════════════════ */

/* ── micro-libelles partages (.mono) ──
   Un seul reglage couvre les eyebrows, les etiquettes, les liens de pied
   de page et les intitules de formulaire. */
[dir="rtl"] .mono { font-size: 0.84rem; }
/* sauf le selecteur de langue, qui ne porte que « FR » */
[dir="rtl"] .langsw { font-size: 0.68rem; }

/* ── pastilles posees sur une image ──
   Plus discretes que .mono, mais tres au-dessus des 0.46-0.55rem d'origine. */
[dir="rtl"] .rituel__tag,
[dir="rtl"] .action__tag,
[dir="rtl"] .dive__when,
[dir="rtl"] .dive__go,
[dir="rtl"] .doc__toc span,
[dir="rtl"] .pp__trustgrid span,
[dir="rtl"] .pp__trust,
[dir="rtl"] .footer__head {
  font-size: 0.72rem;
}
[dir="rtl"] .cta__stats { font-size: 0.78rem; }
[dir="rtl"] .footer__legal { font-size: 0.76rem; }
[dir="rtl"] .doc__toc a { font-size: 0.9rem; }
[dir="rtl"] .pp__field span { font-size: 0.85rem; }
/* le formulaire de commande : c'est l'ecran qui encaisse, il doit etre
   le plus lisible de tous */
[dir="rtl"] .pp__field input { font-size: 1.05rem; }
[dir="rtl"] .pp__field input::placeholder { font-size: 0.95rem; }
[dir="rtl"] .buy__submit { font-size: 1rem; letter-spacing: 0.02em; }
[dir="rtl"] .pp__error { font-size: 0.85rem; }
[dir="rtl"] .buy__remise { font-size: 0.88rem; }
[dir="rtl"] .pp__total .mono { font-size: 0.76rem; }
[dir="rtl"] .formula__d { font-size: 0.82rem; }
[dir="rtl"] .mnav__list a span { font-size: 0.72rem; }

/* ── boutons ── */
[dir="rtl"] .btn { font-size: 0.92rem; letter-spacing: 0.02em; }
[dir="rtl"] .btn--small { font-size: 0.8rem; }
[dir="rtl"] .btn--big { font-size: 1.05rem; }

/* ── corps de texte ── */
[dir="rtl"] .doc__section p,
[dir="rtl"] .doc__section li { font-size: 1rem; }
[dir="rtl"] .doc__lead { font-size: clamp(1.05rem, 2.4vw, 1.2rem); }
[dir="rtl"] .doc__pillar p { font-size: 0.9rem; }
[dir="rtl"] .doc__card small { font-size: 0.86rem; }
[dir="rtl"] .buy__desc { font-size: 1.06rem; }
[dir="rtl"] .proto p { font-size: 0.96rem; }
[dir="rtl"] .formula__w { font-size: 1rem; }
[dir="rtl"] .dive__note { font-size: 0.88rem; }
[dir="rtl"] .pack__intro,
[dir="rtl"] .duel__intro,
[dir="rtl"] .duel__desc,
[dir="rtl"] .action__intro,
[dir="rtl"] .shop__desc,
[dir="rtl"] .footer__tag {
  font-size: 1.04rem;
}

/* ── LE CARROUSEL D'ACCUEIL ──
   C'est la que le texte etait le plus serre : premiere chose que voit le
   visiteur, et la plus petite de la page. */
[dir="rtl"] .hs__eyebrow span { font-size: 0.86rem; letter-spacing: 0.08em; }
[dir="rtl"] .hs__desc {
  font-size: clamp(1.15rem, 1.5vw, 1.32rem);
  line-height: 1.95;
  max-width: 33rem;
}
[dir="rtl"] .hs__badges span { font-size: 0.8rem; padding: 0.5rem 1rem; }
[dir="rtl"] .hs__cta { font-size: 0.98rem; padding: 1.1rem 2.1rem; }
[dir="rtl"] .hs__hint { font-size: 0.8rem; }
[dir="rtl"] .hs__price em { font-size: 1.35rem; }

/* ── mobile : on garde le gain, en plus mesure ── */
@media (max-width: 900px) {
  [dir="rtl"] .mono { font-size: 0.8rem; }
  [dir="rtl"] .hs__eyebrow span { font-size: 0.78rem; }
  [dir="rtl"] .hs__desc { font-size: 1.08rem; line-height: 1.85; }
  [dir="rtl"] .hs__badges span { font-size: 0.72rem; padding: 0.42rem 0.85rem; }
  [dir="rtl"] .hs__cta { font-size: 0.92rem; }
  [dir="rtl"] .rituel__tag,
  [dir="rtl"] .dive__when { font-size: 0.66rem; }
  [dir="rtl"] .dive__go { font-size: 0.72rem; }
  [dir="rtl"] .cta__stats { font-size: 0.74rem; }
  [dir="rtl"] .btn--big { font-size: 0.95rem; }
}

/* ── lisibilite du carrousel ─────────────────────
   Le design francais pose sa description en gris (#8d887c) sur la photo du
   hero : ca tient avec des capitales latines epaisses, pas avec des traits
   arabes plus fins et un fond charge. On repasse en blanc, et on remonte
   les elements voisins qui souffrent du meme probleme. */
[dir="rtl"] .hs__desc { color: var(--blanc); }
[dir="rtl"] .hs__badges span {
  color: var(--blanc);
  border-color: rgba(244, 240, 230, 0.32);
}
[dir="rtl"] .hs__hint { color: rgba(244, 240, 230, 0.9); }
[dir="rtl"] .hs__count { color: rgba(244, 240, 230, 0.78); }