/* ==========================================================================
   WebRescue — Atelier · assets/css/rtl.css
   The Arabic layer. Loaded only by the /ar/ pages, after style.css, which they share
   with French and English. <html lang="ar" dir="rtl"> does the structural work (flex and
   grid rows, logical properties and text start follow the reading direction); this file
   only adds Arabic typography and corrects the few places that are hard-wired to left/right.
   Nothing is mirrored for its own sake: logos, photographs, screenshots and the 3D scenes
   keep their composition.
   ========================================================================== */

/* IBM Plex Sans Arabic (SIL OFL 1.1, assets/fonts/FONTS.md) — Arabic subset only. Latin
   letters and the digits 0–9 keep the site's own faces through the font stacks below. */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-300-normal.woff2) format('woff2');unicode-range:U+0600-065F,U+066A-06EF,U+06FA-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:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-065F,U+066A-06EF,U+06FA-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-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-065F,U+066A-06EF,U+06FA-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-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-065F,U+066A-06EF,U+06FA-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}
/* (the Arabic-Indic digit ranges U+0660–0669 and U+06F0–06F9 are left out on purpose:
   the Arabic pages use the digits 0–9 only) */

/* ---- 1. Typography ------------------------------------------------------------ */
html[lang="ar"]{
  --font-display:"Instrument Serif","IBM Plex Sans Arabic",Georgia,serif;
  --font-sans:"Archivo","IBM Plex Sans Arabic","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Sans Arabic",ui-monospace,monospace;
  /* Arabic letters rise and fall further than Latin ones: the reveal masks get more room */
  --mask-t:.22em;--mask-b:.34em;--mask-x:.1em;
}
/* Tracking separates joined Arabic letters: no letter-spacing anywhere on Arabic pages,
   except in the Latin-only language switch. */
html[lang="ar"] body *:not([lang="fr"]):not([lang="en"]){letter-spacing:normal !important}
/* No slanted Arabic (there is no Arabic italic; a synthetic slant breaks the letterforms):
   the accent word keeps its copper colour and gains a little weight instead. */
html[lang="ar"] em,html[lang="ar"] i:not(:empty){font-style:normal}
html[lang="ar"] .display em,html[lang="ar"] .hero__title em{font-weight:500}
html[lang="ar"] .display{font-weight:400;line-height:1.28}
html[lang="ar"] .hero__title{line-height:1.22}
html[lang="ar"] body{line-height:1.8}
/* the monospaced labels are tiny caps in Latin; Arabic needs a readable size */
html[lang="ar"] .meta{font-size:.8rem;line-height:1.6}
html[lang="ar"] .nav__link{font-size:.9rem}

/* ---- 2. Direction-bound details ------------------------------------------------ */
/* buttons: the arrow (already pointing ←) moves the way it points */
@media (hover:hover) and (pointer:fine){
  html[dir="rtl"] .btn:hover .btn__arrow,html[dir="rtl"] .hero__go:hover .btn__arrow{transform:translateX(-.28em)}
}
html[dir="rtl"] .btn--cta[aria-busy="true"] .btn__arrow{transform:translateX(.5em)}
@keyframes nudge-rtl{50%{transform:translateX(-.35em)}}
html[dir="rtl"] .form-block[data-state="loading"] [data-submit] .btn__arrow{animation-name:nudge-rtl}
html[dir="rtl"] .hero__go-l{text-align:start}
@media(max-width:520px){html[dir="rtl"] .price-line__val{text-align:left}}
/* the price scale grows from the reading edge (main.js sets "right" on RTL pages) */
html[dir="rtl"] .calc__range i{left:auto;right:0;transition:right .4s var(--ease-out),width .4s var(--ease-out)}
/* the language switch keeps the order FR / EN / AR */
html[dir="rtl"] .lang{direction:ltr}
/* the "makers" word is positioned by measurement from the left (makers.js) */
html[dir="rtl"] .makers-word{direction:ltr;font-style:normal}
/* code is read left to right, also inside an Arabic page */
html[dir="rtl"] code,html[dir="rtl"] .hv__code{direction:ltr;unicode-bidi:isolate}
/* touch screens: the copper "tap" arrow on rows and cards points the reading way */
@media (hover: none), (pointer: coarse){
  html[dir="rtl"] a.price-line .price-line__name::after,
  html[dir="rtl"] .work-item__title::after{content:"\00a0←";content:"\00a0←" / ""}
}
/* the hero headline: Arabic lines need more height, so the type is set a little smaller
   (the scale is on the line, so each mask grows with it) */
html[lang="ar"] .hero__title .line{font-size:.8em}
/* the off-screen anti-spam field: off the start edge on the left in LTR becomes scrollable
   space in RTL; park it off the right edge instead */
html[dir="rtl"] .hp{left:auto;right:-10000px}
/* the copper light band of the CTA sits off the button's left edge: in RTL that would be
   scrollable overflow; clipping (not hiding) keeps it purely visual */
html[dir="rtl"] .btn--cta{overflow:clip}
/* every italic in the design becomes upright on Arabic pages (no synthetic slant) */
html[lang="ar"] .amb-type,html[lang="ar"] .bl-design__h--it,html[lang="ar"] .serp-hit__desc--none{font-style:normal}
/* code panels in the service demos read left to right */
html[dir="rtl"] .bl-dev__code{direction:ltr;text-align:left}

/* ---- 3. "Na de livegang" timeline: time runs right → left -------------------------- */
@media(min-width:900px){
  html[dir="rtl"] .after__tick--0{left:auto;right:calc(21rem + var(--s-5))}
  html[dir="rtl"] .after__tick--30{left:auto;right:calc(21rem + var(--s-5) + var(--track) * .3)}
  html[dir="rtl"] .after__tick--m{left:auto;right:calc(21rem + var(--s-5) + var(--track) * .58)}
  html[dir="rtl"] .after__tick--end{right:auto;left:0}
  html[dir="rtl"] .after__tick--end::before{right:auto;left:0}
}
@media(max-width:899px){
  html[dir="rtl"] .after__tick--0{left:auto;right:0}
  html[dir="rtl"] .after__tick--30{left:auto;right:30%}
  html[dir="rtl"] .after__tick--m{left:auto;right:58%}
  html[dir="rtl"] .after__tick--end{right:auto;left:0}
  html[dir="rtl"] .after__tick--end::before{right:auto;left:0}
}
html[dir="rtl"] .after__tick::before{left:auto;right:0}
html[dir="rtl"] .after__line{transform-origin:100% 50%}
html[dir="rtl"] .after__track--support .after__line{right:0;left:70%}
html[dir="rtl"] .after__track--support::after{left:0;right:30%}
html[dir="rtl"] .after__cap{left:auto;right:30%;margin:-11px -1px 0 0}
html[dir="rtl"] .after__beat:nth-of-type(n){left:auto}
html[dir="rtl"] .after__beat:nth-of-type(2){right:12%}html[dir="rtl"] .after__beat:nth-of-type(3){right:32%}
html[dir="rtl"] .after__beat:nth-of-type(4){right:52%}html[dir="rtl"] .after__beat:nth-of-type(5){right:72%}
html[dir="rtl"] .after__beat:nth-of-type(6){right:92%}
html[dir="rtl"] .after__ev{left:auto;right:calc(var(--at) * 100%);transform:translateX(50%)}
html[dir="rtl"] .after__ev::after{left:auto;right:50%;margin-left:0;margin-right:-2.5px}
html[dir="rtl"] .after__cursor{left:auto;right:0}
html[dir="rtl"] .after__cursor::before{left:auto;right:-3px}
html[dir="rtl"] .after__cursor b{left:auto;right:8px}

/* ---- 4. Price factors and SEO factors: scales and wipes start at the right ------------ */
html[dir="rtl"] .dial__fill{background:linear-gradient(to left,rgba(185,120,69,.25),var(--color-copper));transform-origin:100% 50%}
html[dir="rtl"] .dial__fill::after{right:auto;left:-4px}
html[dir="rtl"][data-seo="pin"] .seo__factors li{clip-path:inset(0% 0% 0% 100%)}
/* the local-SEO example details (a Latin business name and address) read left to right;
   aligned to the cell's start so they still line up with the Arabic labels, and an overflow
   is cut at the end of the address, not at the start of the name */
html[dir="rtl"] .local__val>span{direction:ltr;text-align:right}