/* ═══════════════════════════════════════════════════════════════
   i18n.css — Albouniane  ·  V4 — TYPOGRAPHIE ARABE PREMIUM
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;600;700&family=Noto+Serif+Arabic:wght@300;400;500&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Sélecteur de langue ───────────────────────────────────── */
.lang-switcher {
  display:flex;align-items:center;gap:4px;
  background:rgba(13,26,39,.08);border:1px solid rgba(13,26,39,.14);
  border-radius:3px;padding:3px;
}
.lang-btn {
  font-family:'Syne',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;
  border-radius:2px;border:none;background:transparent;color:var(--muted2);
  cursor:pointer;transition:all .2s;line-height:1;
}
.lang-btn:hover{color:var(--deep);background:rgba(13,26,39,.06);}
.lang-btn.lang-active{background:var(--deep);color:var(--cream);}
.lang-switcher-drawer{display:flex;gap:8px;margin:16px 0;}
.lang-btn-drawer{
  flex:1;text-align:center;padding:11px;border-radius:2px;
  font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--bd-light);background:var(--cream);color:var(--muted);
  cursor:pointer;transition:all .2s;
}
.lang-btn-drawer.lang-active{background:var(--deep);color:var(--cream);border-color:var(--deep);}


/* ════════════════════════════════════════════════════════════
   RTL — POLICES
   IBM Plex Sans Arabic : moderne, neutre, parfait pour l'UI et le corps
   Amiri : naskh élégant, ligne traditionnelle marocaine, pour les titres
════════════════════════════════════════════════════════════ */
[dir="rtl"] body,[dir="rtl"] p,[dir="rtl"] li,
[dir="rtl"] .s-sub,[dir="rtl"] .eyebrow,[dir="rtl"] .badge-text,
[dir="rtl"] .city-pill,[dir="rtl"] .nego-pill,[dir="rtl"] .phase-tag,
[dir="rtl"] .phase-badge-pill,[dir="rtl"] .task-name,[dir="rtl"] .task-desc,
[dir="rtl"] .task-deliverable,[dir="rtl"] .gate-text,[dir="rtl"] .phase-total-label,
[dir="rtl"] .phase-footer-note,[dir="rtl"] .risk-what,[dir="rtl"] .risk-impact,
[dir="rtl"] .risk-resolve,[dir="rtl"] .spec-k,[dir="rtl"] .spec-v,
[dir="rtl"] .ac-header-label,[dir="rtl"] .ac-zone-label,[dir="rtl"] .ac-price-unit,
[dir="rtl"] .ac-signed,[dir="rtl"] .hstat-l,[dir="rtl"] .proof-item,
[dir="rtl"] .f-desc,[dir="rtl"] .f-badge,[dir="rtl"] .f-col a,[dir="rtl"] .f-col h4,
[dir="rtl"] .faq-a p,[dir="rtl"] .rule-text,[dir="rtl"] .nego-item p,
[dir="rtl"] .nego-issue,[dir="rtl"] .ec-text,[dir="rtl"] .expert-role,
[dir="rtl"] .expert-city-tag,[dir="rtl"] .cta-eyebrow,[dir="rtl"] .cta-micro,
[dir="rtl"] .nav-cta,[dir="rtl"] .nav-login span,[dir="rtl"] .drawer-cta,
[dir="rtl"] .phase-cta,[dir="rtl"] .btn-primary,[dir="rtl"] .btn-secondary,
[dir="rtl"] .btn-cta-main,[dir="rtl"] .btn-cta-wa,
[dir="rtl"] .filter-label,[dir="rtl"] .drawer-link span:first-child {
  font-family:'IBM Plex Sans Arabic','Noto Sans Arabic','Syne',sans-serif;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
[dir="rtl"] .hero-h1,[dir="rtl"] .s-title,[dir="rtl"] .phase-title,
[dir="rtl"] .expert-name,[dir="rtl"] .nego-card h3,[dir="rtl"] .risk-card h3,
[dir="rtl"] .faq-q span:first-child,[dir="rtl"] .cta-content h2,
[dir="rtl"] .f-logo,[dir="rtl"] .nav-logo span,
[dir="rtl"] .risk-num,[dir="rtl"] .phase-num,[dir="rtl"] .task-letter {
  font-family:'Amiri','Noto Serif Arabic','Cormorant Garamond',serif;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
/* Chiffres avec mot arabe (ex: "3 000 درهم") : unicode-bidi:plaintext laisse
   l'algo bidi unicode placer naturellement les chiffres à gauche et l'arabe à droite
   conformément à la convention marocaine internationale */
[dir="rtl"] .ac-price-main,[dir="rtl"] .hstat-n,[dir="rtl"] .phase-total-val,
[dir="rtl"] .task-price-val {
  font-family:'Amiri','Noto Serif Arabic','Cormorant Garamond',serif;
  direction:rtl;unicode-bidi:plaintext;display:block;
}
/* Noms propres et données techniques : toujours LTR dans conteneur RTL — SAUF expert-name géré par JS */
[dir="rtl"] .ac-header-tf { direction:ltr;unicode-bidi:embed; }
[dir="rtl"] .nav-phone    { direction:ltr;unicode-bidi:embed; }


/* RTL — Eyebrow : le ◈ décoratif doit apparaître à droite en RTL
   justify-content:flex-end ancre le bloc à droite dans son conteneur */
[dir="rtl"] .eyebrow {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
[dir="rtl"] .eyebrow::before { content:'◈'; font-size:.5rem; }


/* ════════════════════════════════════════════════════════════
   RTL — NAV
   Stratégie : on utilise direction:rtl sur .nav pour que le
   browser place logo à droite et nav-right à gauche,
   SANS inverser l'ordre DOM des liens (évite Risques↔FAQ inversés).
   On surcharge les enfants qui ne doivent PAS hériter de rtl.
════════════════════════════════════════════════════════════ */
[dir="rtl"] .nav {
  direction: rtl;
}
/* nav-center : les liens gardent leur ordre DOM mais s'affichent de droite à gauche */
[dir="rtl"] .nav-center {
  direction: rtl;
  /* On ne met PAS flex-direction:row-reverse — l'ordre DOM est déjà correct */
}
/* nav-center liens : rétablir ltr pour que le texte arabe soit lisible */
[dir="rtl"] .nav-center a {
  direction: rtl;
  unicode-bidi: embed;
}
/* nav-right en RTL : direction:rtl hérité du .nav suffit pour inverser
   l'ordre visuel (téléphone → FR/AR → Mon espace → CTA de droite à gauche).
   Pas de flex-direction:row-reverse ici — ce serait une double inversion. */
[dir="rtl"] .nav-right {
  direction: rtl;
}
/* Le téléphone garde son affichage LTR pour les chiffres */
[dir="rtl"] .nav-phone { direction:ltr;unicode-bidi:embed; }
/* Logo : le ◈ reste à gauche du texte même en RTL (identité visuelle) */
[dir="rtl"] .nav-logo    { flex-direction:row;direction:ltr; }
[dir="rtl"] .nav-login   { flex-direction:row-reverse; }
/* Soulignement : part de la droite (inset-inline-start gère déjà ça en RTL) */
[dir="rtl"] .nav-center a::after { left:auto;right:0; }

/* Drawer : glisse depuis la GAUCHE en RTL */
[dir="rtl"] .nav-drawer {
  inset-inline-end:auto;
  inset-inline-start:0;
  transform:translateX(-100%);
  border-inline-start:none;
  border-inline-end:1px solid var(--bd-light);
  visibility:hidden;
}
[dir="rtl"] .nav-drawer.open { transform:translateX(0); visibility:visible; }
[dir="rtl"] .drawer-head         { flex-direction:row-reverse; }
[dir="rtl"] .drawer-head .nav-logo { flex-direction:row; }
[dir="rtl"] .drawer-body         { text-align:right;direction:rtl; }
/* drawer-link = flex justify-content:space-between
   row-reverse : flèche à gauche, texte à droite ✓ */
[dir="rtl"] .drawer-link         { flex-direction:row-reverse; }
[dir="rtl"] .drawer-link span:first-child { text-align:right;flex:1; }
[dir="rtl"] .drawer-foot         { text-align:right;direction:rtl; }
[dir="rtl"] .drawer-cta          { letter-spacing:.04em; }
/* Téléphone dans le drawer : centré, chiffres LTR préservés */
[dir="rtl"] .drawer-phone-link   { 
  direction:ltr;
  unicode-bidi:embed;
  display:block;
  text-align:center;
}
/* Switcher de langue dans le drawer : boutons côte à côte */
[dir="rtl"] .lang-switcher-drawer { flex-direction:row-reverse; }

/* ── FR/AR dans la nav : toujours visible à tous les breakpoints ─────────────── */
/* Sur tablette / petit écran : le switcher reste dans la nav, mais on le MASQUE
   dans le drawer (footer du drawer) pour éviter la redondance sur mobile */
@media (max-width:480px) {
  .lang-switcher { padding:2px; }
  .lang-btn { padding:5px 9px; font-size:.55rem; }
}
@media (max-width:900px) {
  /* Masquer le bloc FR/AR dans le drawer burger — il reste dans la nav */
  .lang-switcher-drawer { display:none !important; }
}


/* ════════════════════════════════════════════════════════════
   RTL — HERO
════════════════════════════════════════════════════════════ */
[dir="rtl"] .hero-inner    { direction:rtl; }
[dir="rtl"] .hero-left     { text-align:right; }
[dir="rtl"] .hero-badge    { flex-direction:row-reverse; }
[dir="rtl"] .hero-sub      { text-align:right; }
[dir="rtl"] .hero-h1 .indent { padding-left:0;padding-right:2.2em; }
@media(max-width:768px){ [dir="rtl"] .hero-h1 .indent { padding-right:1em; } }
@media(max-width:480px){ [dir="rtl"] .hero-h1 .indent { padding-right:0; } }
[dir="rtl"] .hero-ctas      { flex-direction:row-reverse; }
[dir="rtl"] .btn-primary    { flex-direction:row-reverse; }
[dir="rtl"] .btn-secondary  { flex-direction:row-reverse; }
/* hero-trust : direction:rtl place les chips de droite à gauche sans inverser l'ordre DOM */
[dir="rtl"] .hero-trust     { direction:rtl; }
/* t-chip : icône reste à gauche du texte en RTL (flex row normal, direction rtl sur parent suffit) */
[dir="rtl"] .t-chip         { direction:rtl; }
[dir="rtl"] .hero-stats     { direction:rtl; }
[dir="rtl"] .hstat {
  text-align:right;
  border-right:none;
  border-left:1px solid rgba(255,255,255,.06);
}
[dir="rtl"] .hstat:last-child { border-left:none; }
[dir="rtl"] .hstat-l { display:block;text-align:right; }


/* ════════════════════════════════════════════════════════════
   RTL — AUDIT CARD
   Corrections :
   1. ac-zone-label : width:100% + text-align:right pour que le titre
      "مخاطر مكتشفة" s'aligne bien à droite dans son conteneur
   2. ac-row : row-reverse → icône à DROITE, texte à GAUCHE (lecture RTL ✓)
      Le span texte a text-align:right pour coller au bord droit
   3. ac-row > span : unicode-bidi:plaintext pour isoler le bidi mixte
      (ex: "رهن غير مرفوع · BCP · 380 000 درهم" — évite l'inversion de BCP)
   4. ac-footer : row-reverse ✓, prix LTR forcé
════════════════════════════════════════════════════════════ */
/* Audit card : la direction RTL doit être posée sur le conteneur pour hériter */
[dir="rtl"] .audit-card                   { direction:rtl; }
/* ac-header : direction:rtl héritée positionne naturellement label à droite, status à gauche */
[dir="rtl"] .ac-header                    { direction:rtl; }
[dir="rtl"] .ac-header > div:first-child  { text-align:right;direction:rtl; }
[dir="rtl"] .ac-header-label             { direction:rtl;text-align:right;display:block;unicode-bidi:embed; }
/* ac-status-badge : dot (1er DOM) positionné naturellement en RTL */
[dir="rtl"] .ac-status-badge              { direction:rtl; }
[dir="rtl"] .ac-zone                      { direction:rtl;text-align:right; }
[dir="rtl"] .ac-zone-label {
  text-align:right;
  direction:rtl;
  display:block;
  width:100%;
}
[dir="rtl"] .ac-rows                      { direction:rtl; }
/* ac-row RTL : row-reverse → icône (1er DOM) à DROITE, texte à GAUCHE (lecture RTL ✓) */
[dir="rtl"] .ac-row                       { flex-direction:row-reverse; }
[dir="rtl"] .ac-row > span {
  text-align:right;
  flex:1;
  direction:rtl;
  unicode-bidi:isolate;
}
/* Montants : unicode-bidi:plaintext laisse le bidi algorithm gérer les chiffres isolés */
[dir="rtl"] .ac-row .ac-highlight        { unicode-bidi:plaintext;display:inline; }
/* ac-footer : direction:rtl place .ac-price-tag (1er DOM) à droite ✓ */
[dir="rtl"] .ac-footer                    { flex-direction:row; }
[dir="rtl"] .ac-price-tag                 { text-align:right;align-items:flex-end; }
/* Prix "⁦3 000⁩ درهم" : unicode-bidi:plaintext laisse les isolates bidi protéger
   les chiffres — le nombre reste LTR, "درهم" s'affiche à gauche en RTL ✓ */
[dir="rtl"] .ac-price-main               { direction:rtl;unicode-bidi:plaintext;display:block; }
[dir="rtl"] .ac-price-unit                { text-align:right;direction:rtl; }
[dir="rtl"] .ac-signed                    { text-align:right;direction:rtl;max-width:160px; }


/* ════════════════════════════════════════════════════════════
   RTL — PROOF BAND
════════════════════════════════════════════════════════════ */
[dir="rtl"] .proof-track { animation-direction:reverse; }
[dir="rtl"] .proof-item  { flex-direction:row-reverse; }


/* ════════════════════════════════════════════════════════════
   RTL — RISQUES
════════════════════════════════════════════════════════════ */
[dir="rtl"] .risk-intro           { text-align:right; }
/* Grid RTL : les cartes s'affichent de droite à gauche */
[dir="rtl"] .risk-grid            { direction:rtl; }
[dir="rtl"] .risk-card            { text-align:right;direction:rtl; }
[dir="rtl"] .risk-card::before    { left:auto;right:0; }
[dir="rtl"] .risk-num             { text-align:right; }
/* risk-resolve : direction:rtl héritée de .risk-card place le SVG (1er DOM) à DROITE
   et le texte à GAUCHE naturellement — pas besoin de row-reverse (évite double inversion) */
[dir="rtl"] .risk-resolve         { flex-direction:row;text-align:right;direction:rtl; }
[dir="rtl"] .risk-resolve > span  { flex:1;text-align:right;direction:rtl; }
[dir="rtl"] .risk-what            { text-align:right; }
[dir="rtl"] .risk-real            { text-align:right; }


/* ════════════════════════════════════════════════════════════
   RTL — EXPERTS
   .expert-cert-badge = position absolute top:14px right:14px
     → en RTL doit être left:14px right:auto
   .expert-name = nom latin → direction:ltr mais aligné à droite
   .expert-city-tag = flex → row-reverse : icône à droite ✓
   .spec-row = flex justify-content:space-between → row-reverse :
     clé à droite, valeur à gauche ✓ (lecture RTL naturelle)
════════════════════════════════════════════════════════════ */
[dir="rtl"] .experts-intro-row > div:first-child { text-align:right; }
[dir="rtl"] .experts-city-filter  { align-items:flex-end; }
[dir="rtl"] .city-pills            { justify-content:flex-end; }
/* Grille experts : cartes de droite à gauche */
[dir="rtl"] .experts-grid          { direction:rtl; }
[dir="rtl"] .expert-card           { direction:rtl; }

/* Badge certifié : miroir horizontal → passe en haut à gauche */
[dir="rtl"] .expert-cert-badge {
  right:auto;left:14px;
  flex-direction:row-reverse;
}
[dir="rtl"] .expert-body          { text-align:right;direction:rtl; }
[dir="rtl"] .expert-city-tag      { flex-direction:row-reverse;justify-content:flex-end; }
/* Nom : direction gérée par i18n.js (ltr pour latin, rtl pour arabe traduit)
   unicode-bidi:isolate empêche l'inversion des mots dans les noms composés */
[dir="rtl"] .expert-name          { text-align:right;display:block;unicode-bidi:isolate; }
/* Rôle : isolate pour les textes mixtes (ex: "مدير · NomAgence") */
[dir="rtl"] .expert-role          { text-align:right;direction:rtl;unicode-bidi:isolate; }
[dir="rtl"] .expert-linkedin      { flex-direction:row-reverse;justify-content:flex-end; }
[dir="rtl"] .expert-linkedin-na   { flex-direction:row-reverse;justify-content:flex-end; }
[dir="rtl"] .expert-specs         { text-align:right;direction:rtl; }
/* spec-row en RTL : direction:rtl sur le parent → flex items partent de droite.
   flex-direction:row → spec-k (1er DOM) = droite ✓ (label aligné à droite),
   spec-v (2e DOM) = gauche ✓ (valeur poussée à gauche) */
[dir="rtl"] .spec-row             { flex-direction:row; }
[dir="rtl"] .spec-k               { text-align:right;direction:rtl; }
/* spec-v : direction naturelle RTL sauf pour les valeurs numériques (exp, rating) */
[dir="rtl"] .spec-v               { text-align:right;direction:rtl;unicode-bidi:embed; }
/* Valeurs purement numériques (ex: "10+ سنة") : en RTL, l'unité arabe
   doit être à droite et le chiffre à gauche.
   unicode-bidi:plaintext laisse l'algo bidi unicode gérer l'ordre naturel */
[dir="rtl"] .spec-v.spec-exp-val  { direction:rtl;unicode-bidi:plaintext;text-align:right; }
/* Disponibilité : "متاح ●" en RTL — direction:rtl place ● (qui est au début du string) à DROITE ✓ */
[dir="rtl"] .spec-v.spec-available { direction:rtl;text-align:right;unicode-bidi:embed; }
/* Mobile : même fix */
@media (max-width:768px) {
  [dir="rtl"] .spec-row           { flex-direction:row; }
  [dir="rtl"] .spec-k             { text-align:right;flex-shrink:0;direction:rtl; }
  [dir="rtl"] .expert-specs       { text-align:right;direction:rtl; }
}
[dir="rtl"] .experts-collective   { direction:rtl; }
[dir="rtl"] .ec-text              { text-align:right; }
[dir="rtl"] .ec-cta               { flex-direction:row-reverse; }


/* ════════════════════════════════════════════════════════════
   RTL — PROCESSUS
════════════════════════════════════════════════════════════ */
[dir="rtl"] .process-section .eyebrow,
[dir="rtl"] .process-section .s-title,
[dir="rtl"] .process-section .s-sub  { text-align:right; }
[dir="rtl"] .phase-header             { direction:rtl; }
[dir="rtl"] .phase-meta               { text-align:right; }
[dir="rtl"] .task                     { direction:rtl; }
[dir="rtl"] .task-letter {
  border-right:none;
  border-left:1px solid rgba(255,255,255,.04);
}
[dir="rtl"] .task-info {
  text-align:right;
  border-right:none;
  border-left:1px solid rgba(255,255,255,.04);
}
[dir="rtl"] .task-price              { align-items:flex-start; }
[dir="rtl"] .gate-block {
  flex-direction:row-reverse;
  /* Bordure jaune à DROITE = côté du cadenas (1er DOM avec order:1) */
  border-inline-start:none;
  border-inline-end:none;
  border-right:3px solid var(--gold);
  border-left:none;
  border-start-start-radius:0;border-end-start-radius:0;
  border-start-end-radius:2px;border-end-end-radius:2px;
  text-align:right;direction:rtl;
}
/* Icône cadenas toujours à DROITE en RTL ✓ */
[dir="rtl"] .gate-icon { order:1; }
[dir="rtl"] .gate-text { order:0; direction:rtl; text-align:right; }
[dir="rtl"] .phase-footer            { flex-direction:row-reverse;direction:rtl; }
[dir="rtl"] .phase-footer-note       { text-align:right; }
[dir="rtl"] .phase-cta               { flex-direction:row-reverse; }


/* ════════════════════════════════════════════════════════════
   RTL — NÉGOCIATION
════════════════════════════════════════════════════════════ */
[dir="rtl"] .nego-section .eyebrow,
[dir="rtl"] .nego-section .s-title,
[dir="rtl"] .nego-section .s-sub  { text-align:right; }
[dir="rtl"] .nego-card             { text-align:right;direction:rtl; }
[dir="rtl"] .nego-item             { padding-left:0;padding-right:20px;text-align:right; }
[dir="rtl"] .nego-item::before     { left:auto;right:0; }
[dir="rtl"] .nego-rule {
  flex-direction:row-reverse;
  border-inline-start:none;
  border-inline-end:4px solid var(--gold);
  text-align:right;direction:rtl;
}
/* Icône balance ⚖️ toujours à DROITE en RTL (flex-direction:row-reverse + order) ✓ */
[dir="rtl"] .rule-icon { order:1; flex-shrink:0; }
[dir="rtl"] .rule-text { order:0; text-align:right; direction:rtl; }


/* ════════════════════════════════════════════════════════════
   RTL — FAQ
   Structure : .faq-q = flex space-between
     → [span (question)] [.faq-icon (+)]
     → row-reverse → [.faq-icon (+)] [span (question)]
     ✓ icône à GAUCHE, texte à DROITE
   Problème persistant : le span n'a pas direction:rtl
   → le texte arabe commence à gauche dans sa boîte
════════════════════════════════════════════════════════════ */
[dir="rtl"] .faq-section .eyebrow,
[dir="rtl"] .faq-section .s-title,
[dir="rtl"] .faq-section .s-sub { text-align:right; }
[dir="rtl"] .faq-q               { flex-direction:row-reverse; }
/* Le span prend tout l'espace et aligne le texte à droite */
[dir="rtl"] .faq-q > span:first-child {
  flex:1;text-align:right;direction:rtl;
}
[dir="rtl"] .faq-icon            { flex-shrink:0;margin-left:0;margin-right:0; }
[dir="rtl"] .faq-a               { direction:rtl; }
[dir="rtl"] .faq-a p             { text-align:right;direction:rtl; }
/* Blocs internes FAQ (styles inline → !important obligatoire) */
[dir="rtl"] .faq-steps-block {
  border-left:none !important;
  border-right:3px solid var(--gold) !important;
  border-radius:4px 0 0 4px !important;
  text-align:right;direction:rtl;
}
[dir="rtl"] .faq-steps-block span,
[dir="rtl"] .faq-steps-block p   { text-align:right;direction:rtl; }
[dir="rtl"] .faq-info-block       { flex-direction:row-reverse !important;direction:rtl; }
[dir="rtl"] .faq-info-block p     { text-align:right; }


/* ════════════════════════════════════════════════════════════
   RTL — CTA FINAL
════════════════════════════════════════════════════════════ */
[dir="rtl"] .cta-content     { text-align:right;direction:rtl; }
[dir="rtl"] .cta-content h2  { text-align:right;direction:rtl; }
/* Les spans dans h2 CTA : unicode-bidi:isolate pour que chaque span
   soit une unité bidi indépendante, évite l'inversion des mots */
[dir="rtl"] .cta-content h2 span,
[dir="rtl"] .cta-content h2 em   { unicode-bidi:isolate; }
[dir="rtl"] .cta-content p   { text-align:right;direction:rtl; }
/* btn-cluster : flex-direction column → align-items:flex-end aligne les boutons à droite */
[dir="rtl"] .cta-btn-cluster { align-items:flex-end;direction:rtl; }
[dir="rtl"] .btn-cta-main    { flex-direction:row-reverse;align-self:flex-end; }
[dir="rtl"] .btn-cta-wa      { flex-direction:row-reverse; }
/* cta-micro : s'étire sur toute la largeur pour s'aligner à droite */
[dir="rtl"] .cta-micro       { width:100%;text-align:right; }
/* Sceau SVG : texte "معتمد" — augmenter la taille et le letter-spacing */
[dir="rtl"] #seal-text       { font-size:8.5px !important; letter-spacing:1px !important; }
[dir="rtl"] .cta-eyebrow     { justify-content:flex-end; }


/* ════════════════════════════════════════════════════════════
   RTL — FOOTER
   Correction : les <a> dans .f-col nav doivent avoir width:100%
   pour que align-items:flex-end les aligne bien à droite.
   Sans ça, les liens shrinkent à leur contenu et restent à gauche.
════════════════════════════════════════════════════════════ */
[dir="rtl"] .footer-grid    { direction:rtl; }
[dir="rtl"] .f-col h4       { text-align:right; }
[dir="rtl"] .f-col nav {
  text-align:right;
  align-items:flex-end;
  display:flex;
  flex-direction:column;
  width:100%;
}
[dir="rtl"] .f-col nav a {
  width:100%;          /* étire le lien sur toute la largeur */
  text-align:right;    /* aligne le texte à droite dans le lien */
  display:block;
}
[dir="rtl"] .f-desc,[dir="rtl"] .f-badge { text-align:right;display:block; }
/* Badge footer : taille de police augmentée et padding adapté pour le texte arabe plus long */
[dir="rtl"] .f-badge {
  font-size:.65rem !important;
  letter-spacing:.03em !important;
  padding:8px 16px !important;
  white-space:normal !important;
  line-height:1.4 !important;
  max-width:none !important;
  width:auto !important;
}
[dir="rtl"] .footer-bottom  { flex-direction:row-reverse; }
[dir="rtl"] .fb-legal       { flex-direction:row-reverse; }


/* ════════════════════════════════════════════════════════════
   RTL — LISIBILITÉ TYPOGRAPHIQUE ARABE
   ────────────────────────────────────────────────────────────
   L'arabe est une écriture cursive : les ligatures relient les
   lettres entre elles. Hériter d'un letter-spacing > 0 (typique
   des styles FR uppercase mono) CASSE ces ligatures et rend le
   texte illisible. Idem pour text-transform:uppercase qui
   n'a aucun sens en arabe.
   On force letter-spacing:0 et text-transform:none sur tous
   les éléments "mono/eyebrow/tag/badge" connus.
════════════════════════════════════════════════════════════ */
[dir="rtl"] .eyebro,
[dir="rtl"] .eyebrow,
[dir="rtl"] .tl-step-tag,
[dir="rtl"] .tl-step-tag .dur,
[dir="rtl"] .tl-deliv span,
[dir="rtl"] .price-tag-head,
[dir="rtl"] .price-includes li,
[dir="rtl"] .price-fineprint,
[dir="rtl"] .risk-amount .unit,
[dir="rtl"] .price-amount .unit,
[dir="rtl"] .cta-block .meta,
[dir="rtl"] .cta-block .meta span,
[dir="rtl"] .cta-seal-inner,
[dir="rtl"] .verdict-head .seal,
[dir="rtl"] .verdict-head .ref,
[dir="rtl"] .verdict-stamp,
[dir="rtl"] .hero-supra,
[dir="rtl"] .logo-tag,
[dir="rtl"] .trust-item,
[dir="rtl"] .footer-badge,
[dir="rtl"] .footer-badge span,
[dir="rtl"] .phase-tag,
[dir="rtl"] .phase-badge-pill,
[dir="rtl"] .task-deliverable,
[dir="rtl"] .filter-label,
[dir="rtl"] .city-pill,
[dir="rtl"] .ac-header-label,
[dir="rtl"] .ac-zone-label,
[dir="rtl"] .ac-price-unit,
[dir="rtl"] .ac-signed,
[dir="rtl"] .hstat-l,
[dir="rtl"] .proof-item,
[dir="rtl"] .nego-pill,
[dir="rtl"] .spec-k,
[dir="rtl"] .spec-v,
[dir="rtl"] .nav-cta,
[dir="rtl"] .drawer-cta,
[dir="rtl"] .btn-gold,
[dir="rtl"] .btn-ghost,
[dir="rtl"] .btn .arrow,
[dir="rtl"] .cta-micro {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Tailles légèrement augmentées pour l'arabe sur les éléments
   "mono" qui étaient calibrés pour le FR uppercase 10px.
   L'arabe à 10px sans uppercase devient trop fin → 11.5px. */
[dir="rtl"] .eyebro,
[dir="rtl"] .eyebrow {
  font-size: 0.78rem;
}
[dir="rtl"] .tl-step-tag {
  font-size: 11.5px;
}
[dir="rtl"] .tl-deliv span {
  font-size: 11.5px;
  line-height: 1.55;
}
[dir="rtl"] .price-tag-head {
  font-size: 11.5px;
}
[dir="rtl"] .risk-amount .unit,
[dir="rtl"] .price-amount .unit {
  font-size: 0.95rem;
}
[dir="rtl"] .cta-block .meta {
  font-size: 11.5px;
  gap: 14px;
}
[dir="rtl"] .verdict-head .seal,
[dir="rtl"] .verdict-head .ref {
  font-size: 12px;
}
[dir="rtl"] .verdict-stamp {
  font-size: 12px;
  padding: 6px 12px;
}
[dir="rtl"] .footer-badge span {
  font-size: 11.5px;
}
[dir="rtl"] .hero-supra {
  font-size: 0.82rem;
}

/* Sceau SVG circulaire : déjà géré ailleurs mais on renforce
   le letter-spacing à 0 et la police adaptée */
[dir="rtl"] .cta-seal-arc text,
[dir="rtl"] #seal-text-ar,
[dir="rtl"] #seal-text {
  letter-spacing: 0 !important;
}
[dir="rtl"] .cta-seal-inner b {
  font-family: 'Amiri', 'Noto Serif Arabic', serif;
}


/* ════════════════════════════════════════════════════════════
   SECTION "Protégez votre capital" (CTA FINAL)
   ────────────────────────────────────────────────────────────
   Problèmes sur petit écran :
   1. Le bouton .btn-gold a un style INLINE (padding:20px 40px;
      font-size:13px) + .btn a "white-space:nowrap" + uppercase
      + letter-spacing:.14em → "SÉCURISER MON ACHAT MAINTENANT"
      déborde et est coupé.
   2. .cta-block .meta est en row avec gap:20px → les 3 chips
      se chevauchent ou débordent.
   3. Le sceau (200px) est trop large à côté du contenu.
   4. cta-seal-inner à 140px → "ASSERMENTÉ" (uppercase + 
      letter-spacing) déborde du disque sur petit écran.
   
   Solution : layout vertical centré, bouton wrap autorisé,
   meta en colonne, sceau redimensionné, et override des
   styles inline avec sélecteurs spécifiques.
════════════════════════════════════════════════════════════ */

/* Override général du style inline du bouton CTA final ─────
   Sélecteur "section.cta-final .cta-block a.btn-gold" pour
   battre le style="padding:20px 40px; font-size:13px" inline */
@media (max-width: 720px) {
  .cta-final { padding-bottom: clamp(56px, 9vw, 100px); }

  .cta-final .cta-block {
    padding: 40px 22px;
    gap: 32px;
    text-align: center;
    grid-template-columns: 1fr;
  }
  .cta-final .cta-block > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .cta-final .cta-block .eyebro {
    justify-content: center;
  }
  .cta-final .cta-block h2 {
    font-size: clamp(1.55rem, 6.8vw, 2.1rem);
    text-align: center;
    margin-bottom: 16px;
  }
  .cta-final .cta-block p {
    text-align: center;
    margin-inline: auto;
    margin-bottom: 26px;
    font-size: 0.96rem;
    max-width: 460px;
  }

  /* BOUTON : override du style inline + autoriser le wrap.
     Spécificité forte pour battre l'inline (style attribute).
     On garde un padding compact, le texte wrap si nécessaire. */
  section.cta-final .cta-block a.btn-gold {
    padding: 16px 24px !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    width: 100%;
    max-width: 340px;
    text-align: center;
    margin: 0 auto;
    word-break: keep-all;
  }
  section.cta-final .cta-block a.btn-gold svg {
    flex-shrink: 0;
  }

  /* META : colonne au lieu de ligne pour que les 3 chips
     restent toutes visibles sans débordement */
  .cta-final .cta-block .meta {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 24px;
    width: 100%;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .cta-final .cta-block .meta span {
    justify-content: center;
  }

  /* SCEAU : taille réduite + recentré + cta-seal-inner agrandi
     proportionnellement pour que "ASSERMENTÉ" tienne dedans */
  .cta-final .cta-seal {
    width: clamp(150px, 42vw, 180px);
    height: clamp(150px, 42vw, 180px);
    margin: 0 auto;
  }
  .cta-final .cta-seal-inner {
    width: 78%;
    height: 78%;
    font-size: 9px;
    letter-spacing: 0.16em;
    padding: 6px;
  }
  .cta-final .cta-seal-inner b {
    font-size: 1.25rem;
    margin: 4px 0;
  }
}

/* Très petit écran ≤ 420px : ajustements supplémentaires
   pour éviter tout débordement résiduel */
@media (max-width: 420px) {
  .cta-final .cta-block {
    padding: 32px 18px;
    gap: 26px;
  }
  .cta-final .cta-block h2 {
    font-size: clamp(1.45rem, 6.5vw, 1.85rem);
  }
  .cta-final .cta-block p {
    font-size: 0.92rem;
  }
  /* Bouton encore plus compact en très petit écran */
  section.cta-final .cta-block a.btn-gold {
    padding: 14px 18px !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    max-width: 100%;
  }
  .cta-final .cta-block .meta {
    font-size: 9.5px;
    gap: 8px;
  }
  /* Sceau plus compact */
  .cta-final .cta-seal {
    width: clamp(130px, 40vw, 155px);
    height: clamp(130px, 40vw, 155px);
  }
  .cta-final .cta-seal-inner {
    width: 80%;
    height: 80%;
    font-size: 8.5px;
    letter-spacing: 0.12em;
  }
  .cta-final .cta-seal-inner b {
    font-size: 1.05rem;
  }
  /* Texte SVG du sceau circulaire : plus petit pour rentrer */
  .cta-final .cta-seal-arc text {
    font-size: 7px;
    letter-spacing: 0.18em;
  }
}

/* RTL spécifique pour la section CTA mobile */
@media (max-width: 720px) {
  [dir="rtl"] .cta-final .cta-block > div:first-child {
    align-items: center;
  }
  [dir="rtl"] .cta-final .cta-block h2,
  [dir="rtl"] .cta-final .cta-block p {
    text-align: center;
  }
  [dir="rtl"] .cta-final .cta-block .meta {
    align-items: center;
  }
  [dir="rtl"] .cta-final .cta-block .meta span {
    justify-content: center;
  }
  [dir="rtl"] section.cta-final .cta-block a.btn-gold {
    margin: 0 auto;
    flex-direction: row-reverse;
  }
  /* Sceau RTL : taille augmentée pour le texte arabe qui occupe 
     plus de place graphiquement */
  [dir="rtl"] .cta-final .cta-seal-inner {
    font-size: 10px;
    letter-spacing: 0;
  }
}

/* ════════════════════════════════════════════════════════════
   RTL — ÉGALISATION DE LARGEUR VISUELLE (DESKTOP)
   ────────────────────────────────────────────────────────────
   Objectif : conserver intégralement les phrases arabes mais
   ajuster la taille de police rendue à l'écran pour que la
   largeur visuelle se rapproche de la version française.
   
   Méthode : pour chaque phrase concernée, on calcule le ratio
   (largeur AR / largeur FR) à font-size égale, puis on
   multiplie la font-size par 1/ratio (avec un plafond pour
   rester lisible). Appliqué UNIQUEMENT en desktop (> 720px)
   pour ne pas perturber le responsive mobile existant.
   ════════════════════════════════════════════════════════════ */

@media (min-width: 721px) {

  /* — Hero trust chips ——————————————————————————————————————
     Problème : `hero.trust.opp` (1.7×) et surtout
     `hero.trust.48h` (2.3×) débordent. On réduit la chip arabe
     concernée à ~ 70 % de la taille FR pour absorber l'écart.
     Comme les 3 chips partagent .trust-item, on réduit
     globalement et on relève la 1ère (qui est trop courte). */
  [dir="rtl"] .hero-trust .trust-item {
    font-size: 11px;          /* base réduite (était ~13px) */
    line-height: 1.35;
  }
  [dir="rtl"] .hero-trust .trust-item:first-child {
    font-size: 12.5px;        /* `sworn` est plus court → on remonte */
  }

  /* — Terrain labels (before / after sur les photos) ————————
     Ratio ~0.55 → AR trop court. On augmente d'environ +60 %. */
  [dir="rtl"] .terrain-label {
    font-size: 14px;          /* était ~ 11px en FR uppercase */
    letter-spacing: 0;
  }

  /* — Carte expert : specs (clé / valeur) ——————————————————
     spec-k AR à 0.48–0.62× : on remonte la taille.
     spec-v.spec-available idem.
     spec-v langues (1.29×) reste OK, on ne touche pas. */
  [dir="rtl"] .spec-k {
    font-size: 14px;          /* était ~11.5px */
  }
  [dir="rtl"] .spec-v.spec-available {
    font-size: 14px;
  }
  /* `سنوات` (1.76× plus large que `ans`) → on réduit l'unité */
  [dir="rtl"] .spec-v .unit {
    font-size: 0.78em;
  }

  /* — Audit 360 : livrables des 3 phases ————————————————————
     Ratios 0.47–0.84 majoritairement → AR trop court.
     Sauf aud.p3.d3 (1.71×) → trop long.
     On remonte la taille générale et on réduit le 3e livrable
     de la phase 03 spécifiquement. */
  [dir="rtl"] .tl-deliv span {
    font-size: 13.5px;        /* était 11.5px */
  }
  /* `محضر قابل للاحتجاج به` (aud.p3.d3) : 3e livrable phase III */
  [dir="rtl"] .tl-step:nth-of-type(3) .tl-deliv span:nth-child(3),
  [dir="rtl"] .tl-step:nth-of-type(3) .tl-deliv > *:nth-child(3) {
    font-size: 10.5px;
  }

  /* — Simulateur de verdict ———————————————————————————————
     `محاكي القرار` (0.60×) et `تقرير ALB-2026 · عرض تفاعلي`
     (0.65×) sont visuellement trop petits face au FR. */
  [dir="rtl"] .verdict-head .seal {
    font-size: 15px;          /* était 12px */
  }
  [dir="rtl"] .verdict-head .ref {
    font-size: 14.5px;        /* était 12px */
  }
  /* Les deux tampons go/nogo sont équilibrés (0.82 / 0.95) →
     on les laisse tels quels, juste un léger boost. */
  [dir="rtl"] .verdict-stamp {
    font-size: 13px;          /* était 12px */
  }

  /* — Pricing ———————————————————————————————————————————————
     `price.bouclier.unit` ar = 2.61× → c'est `درهم شاملة الضريبة`
     qui prend 19c contre `DH TTC` 6c. Forte réduction. */
  [dir="rtl"] .price-amount .unit {
    font-size: 0.3em;        /* était ~0.95em */
    line-height: 1.3;
  }

  /* — CTA final ———————————————————————————————————————————
     `cta.eyebrow` (0.55×), `cta.btn` (0.55×) → AR trop court.
     `cta.meta.2` (1.31×) légèrement trop long.
     `cta.seal_*` (0.41 à 0.67×) → AR trop court. */
  [dir="rtl"] .cta-final .eyebro {
    font-size: 1rem;          /* était 0.78rem */
  }
  [dir="rtl"] .cta-final .btn-gold {
    font-size: 16px;          /* était ~13px */
    letter-spacing: 0;
  }
  [dir="rtl"] .cta-block .meta span {
    font-size: 13px;          /* était 11.5px */
  }
  /* Le sceau interne : trois lignes empilées trop petites */
  [dir="rtl"] .cta-seal-inner {
    font-size: 14px;          /* était ~10px */
    line-height: 1.25;
    letter-spacing: 0;
  }
  [dir="rtl"] .cta-seal-inner b {
    font-size: 1.65rem;       /* `خبير` au centre, gras → bien lisible */
  }

  /* — Sceau SVG circulaire (cta.seal) ————————————————————————
     Ratio 0.75 → AR un peu plus court que FR, on remonte
     légèrement la taille du texte qui suit le contour. */
  [dir="rtl"] .cta-seal-arc text,
  [dir="rtl"] #seal-text-ar {
    font-size: 11.5px;        /* était 8.5–9px ailleurs */
    letter-spacing: 0 !important;
  }

  /* — Navigation : bouton "Sécuriser mon achat" ——————————————
     `تأمين شرائي` (0.61×) est notablement plus court. */
  [dir="rtl"] .nav-cta,
  [dir="rtl"] .drawer-cta {
    font-size: 14.5px;        /* était ~12px */
  }
}

/* — Override #seal-text qui était forcé à 8.5px important ————
   Notre nouvelle règle ci-dessus avec sélecteur composé est
   plus spécifique, mais on s'assure que la règle ligne 422
   ne reprenne pas le dessus en desktop. */
@media (min-width: 721px) {
  [dir="rtl"] #seal-text {
    font-size: 11.5px !important;
    letter-spacing: 0.5px !important;
  }
}