/* =========================================================
   SafePool — adaptations pour la version arabe (RTL)
   Chargee uniquement par ar.html, apres style.css
   ========================================================= */

:root{ --font-ar:'Cairo', 'Segoe UI', system-ui, sans-serif; }

body, h1, h2, h3, h4, p, a, span, li, b, i, small, cite, label,
.btn, .eyebrow, .am-sub, .tv-phrase, nav, .logo-txt b, .logo-txt i,
input, select, textarea, button, th, td, figcaption{
  font-family: var(--font-ar);
}

/* l'espacement des lettres casse la liaison de l'ecriture arabe */
*{ letter-spacing: normal !important; }

/* « SafePool » de l'en-tete est un mot latin : il garde le Cinzel et son
   interlettrage des versions FR/EN, que les deux regles ci-dessus ecrasent. */
.logo-txt b{ font-family:Cinzel, serif !important; letter-spacing:.1em !important; }

body{ font-size:16.5px; line-height:1.85; }
h1,h2,h3,h4{ line-height:1.35; font-weight:700; }
/* Amiri : naskh classique, reserve au titre du hero. Cairo reste la police
   de lecture — Amiri perd en lisibilite aux petites tailles. */
/* Reem Kufi : koufi geometrique, lisible jusqu'aux tailles mobiles
   contrairement au nastaliq. Graisse 700 disponible. */
.hero-h1{ line-height:1.3; font-family:'Reem Kufi', 'Amiri', Cairo, sans-serif !important; font-weight:700 !important; }
/* « Safe Pool » garde la fonte latine des versions FR/EN ; le 400 impose
   ci-dessus ne doit pas l'affadir. */
.hero-h1 em{ font-family:'Cormorant Garamond', Georgia, serif !important; font-weight:700 !important; }
.lead, .card-bd p, .step p, .wit p, .q-b p{ line-height:1.9; }

/* ---------- en-tete : disposition identique dans les trois langues ----------
   Le logo reste a gauche et le bouton ☰ a droite, meme en arabe. */
.hd{ direction:ltr; }

/* ---------- elements decales ---------- */
/* El Messiri : accroche du hero — plus de caractere que Cairo sans perdre
   en lisibilite sur la photo. */
.claim{ text-shadow:0 1px 12px rgba(0,0,0,.35); font-family:'El Messiri', Cairo, sans-serif !important; }

.card-im .tag{ left:auto; right:14px; }
.am-tag{ left:auto; right:18px; }
.ring{ right:auto; left:-34px; }
.ph-badge{ left:auto; right:-28px; }

.lnk span{ display:inline-block; transform:scaleX(-1); }
.lnk:hover span{ transform:scaleX(-1) translateX(6px); }

a.ic:hover{ transform:translateX(-6px); }
footer li a:hover{ padding-left:0; padding-right:5px; }

/* menu mobile : s'ouvre a droite, du meme cote que le bouton ☰ */
.drawer{ left:auto; right:0; transform:translateX(100%); }
.drawer.open{ transform:translateX(0); }
.drawer nav a{ transform:translateX(24px); }
.drawer.open nav a{ transform:none; }

/* boutons flottants inverses */
.fab{ right:auto; left:26px; }
.totop{ left:auto; right:26px; }

/* galerie — écran 3 : flèches précédent/suivant inversées, comme l'ancienne lightbox */
.gv-prev{ left:auto; right:14px; transform:translateY(-50%) scaleX(-1); }
.gv-next{ right:auto; left:14px; transform:translateY(-50%) scaleX(-1); }

/* galerie — écran 2 : flèche de retour tournée vers la droite */
.gal-back::before{ display:inline-block; transform:scaleX(-1); }

/* galerie — badge « photo · n » : coin haut-gauche en arabe */
.proj-badge{ right:auto; left:10px; }

/* chiffres, telephones et e-mails restent en lecture latine */
.stats b, .ic .big, .topbar b,
a[href^="tel:"], a[href^="mailto:"]{ direction:ltr; }
.stats b{ display:block; }
.ic .big{ display:block; }

/* ---------- mobile ---------- */
@media(max-width:860px){
  .card-im .tag{ right:12px; }
  .am-tag{ right:14px; }
  .ph-badge{ right:14px; left:auto; }
  .fab{ left:16px; }
  .totop{ right:16px; left:auto; }
  .gv-prev{ right:10px; }
  .gv-next{ left:10px; }
  /* 26px convient au Cormorant latin ; Cairo rend plus gros a taille egale
     et deborde la carte etroite du mobile. */
  .card-bd h3{ font-size:21px; }
  /* توسيط كتلة الهيرو في الموبايل — النص العربي يبدأ من اليمين دون هذا التصحيح */
  .hero-in{ text-align:center !important; }
  .hero-in .claim{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
  .hero-in .hero-h1, .hero-in .hero-h1 .ln{ text-align:center !important; }
}

/* ---------- carte : les ancres de texte SVG suivent le sens latin ---------- */
.dzmap text{ direction:ltr; }
.maplegend li{ text-align:right; }

/* pastille "voir les realisations" : cote gauche et fleche inversee en arabe */
.card-gal{right:auto;left:12px}
.card-gal i{transform:scaleX(-1)}
.card-lien:hover .card-gal i{transform:scaleX(-1) translateX(3px)}
@media(max-width:860px){
  .card-gal{right:auto;left:10px}
}

/* cartes sur deux colonnes : l'arabe (Cairo) deborde d'environ 4 px par ligne
   avec une hauteur de ligne de 1,4 — on l'aere un peu. */
@media(max-width:767.98px){
  .step h3,.wit h3{line-height:1.6}
  .step p,.wit p{line-height:1.65}
}



/* ---------- Apercu gratuit : particularites RTL ---------- */
/* le menu de choix du type s'ouvre a droite ; sans override, left:0;right:0 est symetrique */
.ap-sel-menu li.is-selected::after{margin-inline-start:auto}
/* icone appareil photo depuis un coin : le fil pointille suit la lecture arabe */
.ap-step:nth-child(3) .ap-ico svg{transform:scaleX(-1)}
/* dans le badge "vignette coupee", le recadrage reste visuel : on ne touche pas object-position */

/* ---------- Hero : taille du claim (arabe, desktop seulement) ---------- */
/* El Messiri a un oeil bien plus grand que le Cormorant latin : a 28px il
   concurrencait le h1. 22px retrouve la proportion visuelle du francais. */
@media(min-width:1024px){
  .hero-in .claim{font-size:22px}
  /* plafond abaisse a 60px (le francais monte a 72px). On garde la structure
     clamp/min : le garde-fou 8vh evite le debordement sur ecran court. */
  .hero-in .hero-h1{font-size:clamp(52px,min(5.6vw,8vh),60px)}
}