/* Version arabe : lecture de droite à gauche. Chargée après site.css, uniquement sur /ar/. */
:root[dir=rtl]{
  --sans:'Noto Sans Arabic','Inter',system-ui,sans-serif;
  --display:'Noto Sans Arabic','Space Grotesk','Inter',sans-serif;
  --mono:'Noto Sans Arabic','JetBrains Mono',ui-monospace,monospace;
}
/* L'espacement entre lettres casse la liaison des lettres arabes */
[dir=rtl] *{letter-spacing:0!important;text-transform:none!important}
[dir=rtl] body{line-height:1.85}
[dir=rtl] h1,[dir=rtl] .hero h1{line-height:1.3}
[dir=rtl] h2{line-height:1.35}
[dir=rtl] h3,[dir=rtl] .aud h3,[dir=rtl] .card h3,[dir=rtl] .step h3{line-height:1.45}
[dir=rtl] p,[dir=rtl] li,[dir=rtl] summary{line-height:1.9}
[dir=rtl] .btn,[dir=rtl] .nav>a{line-height:1.5}
/* Latin dans une phrase arabe : on garde la marque dans son sens */
[dir=rtl] .brand,[dir=rtl] .foot-brand{direction:ltr}
[dir=rtl] .brand{flex-direction:row}
/* Positions physiques */
[dir=rtl] .skip{left:auto;right:12px}
[dir=rtl] .dd-menu{left:auto;right:0}
[dir=rtl] .nav-cta{margin-left:0;margin-right:8px}
[dir=rtl] .nav>a.lang-sw,[dir=rtl] .mnav a.lang-sw{margin-left:0;margin-right:6px;font-family:'Inter',system-ui,sans-serif}
[dir=rtl] .float.f1{left:auto;right:-6%}
[dir=rtl] .float.f2{right:auto;left:-8%}
[dir=rtl] .float.f3{left:auto;right:-2%}
@media(max-width:960px){[dir=rtl] .float.f1{left:auto;right:-2%}[dir=rtl] .float.f2{right:auto;left:-2%}[dir=rtl] .float.f3{left:auto;right:0}}
[dir=rtl] .big-num small{margin-left:0;margin-right:6px}
[dir=rtl] .switch::after{left:auto;right:4px}
@keyframes coupe-b{0%,38%{transform:translateX(-36px)}46%,92%{transform:none}100%{transform:translateX(-36px)}}
[dir=rtl] .step{padding:46px 28px 46px 0;border-left:0;border-right:2px solid var(--border-2)}
[dir=rtl] .notif time{margin-left:0;margin-right:auto}
[dir=rtl] .fig{border-right:0;border-left:1px solid var(--border)}
@media(max-width:800px){[dir=rtl] .fig:nth-child(2){border-left:0}[dir=rtl] .fig:nth-child(3){border-left:0}[dir=rtl] .fig-map{border-left:0}}
/* Les dégradés qui laissaient le texte à gauche se lisent maintenant à droite */
[dir=rtl] .hero-photo{inset:0 38% 0 0}
[dir=rtl] .hero.clair .hero-photo{inset:0 34% 0 0}
[dir=rtl] .hero-photo img{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 46%),linear-gradient(0deg,transparent 0,#000 22%);mask-image:linear-gradient(270deg,transparent 0,#000 46%),linear-gradient(0deg,transparent 0,#000 22%)}
[dir=rtl] .hero.clair .hero-photo img{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 42%),linear-gradient(0deg,transparent 0,#000 18%);mask-image:linear-gradient(270deg,transparent 0,#000 42%),linear-gradient(0deg,transparent 0,#000 18%)}
@media(max-width:960px){[dir=rtl] .hero-photo,[dir=rtl] .hero.clair .hero-photo{inset:0}}
[dir=rtl] .live-bg::after{background:linear-gradient(270deg,rgba(11,16,32,.96) 8%,rgba(11,16,32,.55) 55%,rgba(11,16,32,.9))}
[dir=rtl] .band::after{background:linear-gradient(270deg,rgba(11,16,32,.92),rgba(11,16,32,.35))}
/* Flèches : elles pointent vers la gauche */
[dir=rtl] svg.flip{transform:scaleX(-1)}
[dir=rtl] .aud a:hover .more svg.flip{transform:scaleX(-1) translateX(6px)}
/* Défilement du bandeau */
@keyframes defile{to{transform:translateX(50%)}}
/* Carte : étiquettes ancrées comme prévu, quel que soit le sens du texte */
[dir=rtl] .maroc text{direction:ltr}
/* Les écrans de l'application (vidéos et captures) restent tels quels */
[dir=rtl] .phone,[dir=rtl] .tell-phone{direction:ltr}
[dir=rtl] .notif,[dir=rtl] .notifs{direction:rtl}
/* Numéros et adresses : toujours de gauche à droite */
[dir=rtl] a[href^="tel:"],[dir=rtl] a[href^="mailto:"]{direction:ltr;text-align:right;unicode-bidi:isolate}
/* L'arabe se lit plus petit à taille égale : on compense sur les petits textes */
[dir=rtl] body{font-size:1.06em}
[dir=rtl] .eyebrow{font-size:14.5px}
[dir=rtl] .card .tag,[dir=rtl] .step .n,[dir=rtl] .inc-t{font-size:13.5px}
[dir=rtl] .card p,[dir=rtl] .inc li,[dir=rtl] .step p,[dir=rtl] .notif,[dir=rtl] .foot-grid a,[dir=rtl] .foot-bottom{font-size:15.5px}
[dir=rtl] .fig span{font-size:14.5px}
/* Photo des pages métier : fondu en haut pour que le menu reste lisible */
[dir=rtl] .hero.clair .hero-photo img{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 42%),linear-gradient(0deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(270deg,transparent 0,#000 42%),linear-gradient(0deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 22%)}