/* ComptaZone — surcouche RTL (arabe). À charger APRÈS pages.css?v=2.
   Ne duplique que ce qui doit être inversé pour dir="rtl". */

html[dir="rtl"] body{direction:rtl;text-align:right}
html[dir="rtl"] .wrap,html[dir="rtl"] .container{text-align:right}

/* Alignement texte général */
html[dir="rtl"] main h2,html[dir="rtl"] main h3,html[dir="rtl"] main p,
html[dir="rtl"] main li,html[dir="rtl"] .lead,html[dir="rtl"] .vz-hero p,
html[dir="rtl"] .vz-hero h1{text-align:right}

/* Listes : puces à droite */
html[dir="rtl"] main ul{padding-left:0;padding-right:22px}

/* ===== Header / navbar ===== */
html[dir="rtl"] .vz-logo{flex-direction:row-reverse}
html[dir="rtl"] .vz-nav a{margin:0 10px}
html[dir="rtl"] .vz-login{margin-right:0;margin-left:8px}
/* Méga-menu ouvert vers la gauche (ancré à droite) */
html[dir="rtl"] .vz-drop-menu{left:auto;right:0}
html[dir="rtl"] .vz-drop-menu a{text-align:right}

/* Burger à gauche en mobile */
@media(max-width:860px){
  html[dir="rtl"] .vz-burger{margin-left:0;margin-right:auto}
  html[dir="rtl"] .vz-head .vz-nav a{text-align:right}
  html[dir="rtl"] .vz-drop summary{flex-direction:row-reverse}
  html[dir="rtl"] .vz-drop-menu a{padding:11px 18px 11px 4px}
}

/* ===== Fil d'Ariane ===== */
html[dir="rtl"] .vz-breadcrumb{text-align:right}

/* ===== Hero boutons ===== */
html[dir="rtl"] .vz-hero .btn.sec{margin-left:0;margin-right:10px}
@media(max-width:860px){html[dir="rtl"] .vz-hero .btn.sec{margin-right:0}}
html[dir="rtl"] .vz-hero .mobtag{margin-left:0;margin-right:8px}

/* ===== Steps : numéro à droite ===== */
html[dir="rtl"] .steps li{padding:14px 58px 14px 14px}
html[dir="rtl"] .steps li::before{left:auto;right:14px}
@media(max-width:860px){html[dir="rtl"] .steps li{padding-left:14px;padding-right:52px}}

/* ===== Listes "feat" (✓) ===== */
html[dir="rtl"] .feat li{padding-left:0;padding-right:30px}
html[dir="rtl"] .feat li::before{left:auto;right:0}

/* ===== baselist (fonctionnalités) ===== */
html[dir="rtl"] .baselist li{padding-left:0;padding-right:40px;text-align:right}
html[dir="rtl"] .baselist li::before{left:auto;right:0}

/* ===== Diagramme de flux : sens inversé (flèches pointent à gauche) ===== */
html[dir="rtl"] .vz-flow{flex-direction:row-reverse}
html[dir="rtl"] .vz-arrow svg{transform:scaleX(-1)}
@media(max-width:760px){
  /* en colonne, les flèches tournent vers le bas (comme en LTR) */
  html[dir="rtl"] .vz-flow{flex-direction:column}
  html[dir="rtl"] .vz-arrow svg{transform:none}
  html[dir="rtl"] .vz-arrow{transform:rotate(90deg)}
}

/* ===== Mockup navigateur / maquettes UI ===== */
html[dir="rtl"] .vz-mock-bar{flex-direction:row-reverse}
html[dir="rtl"] .mk-table th,html[dir="rtl"] .mk-table td{text-align:right}
html[dir="rtl"] .mk-table td.num,html[dir="rtl"] .mk-table th.num{text-align:left}
html[dir="rtl"] .mk-toolbar{flex-direction:row-reverse}
html[dir="rtl"] .mk-doc .mk-doc-head .no{text-align:left}
html[dir="rtl"] .mk-tot{margin-left:0;margin-right:auto}
html[dir="rtl"] .mk-card .cat{margin-right:0;margin-left:5px}
html[dir="rtl"] .mk-col h5{flex-direction:row-reverse}

/* ===== Chat (bulles inversées) ===== */
html[dir="rtl"] .vz-chatflow .vz-bub.left{align-self:flex-end;border-bottom-left-radius:14px;border-bottom-right-radius:4px}
html[dir="rtl"] .vz-chatflow .vz-bub.right{align-self:flex-start;border-bottom-right-radius:14px;border-bottom-left-radius:4px}
html[dir="rtl"] .mk-chat .mk-msg.in{align-self:flex-end;border-bottom-left-radius:14px;border-bottom-right-radius:4px}
html[dir="rtl"] .mk-chat .mk-msg.out{align-self:flex-start;border-bottom-right-radius:14px;border-bottom-left-radius:4px}

/* ===== Téléphone / mockups mobiles ===== */
html[dir="rtl"] .vz-phone .ph-item{flex-direction:row-reverse;text-align:right}
html[dir="rtl"] .vz-phone .ph-item .ph-ch{margin-left:0;margin-right:auto;transform:scaleX(-1)}
html[dir="rtl"] .vz-phone .ph-item .ph-tx small{text-align:right}

/* ===== Problème / solution ===== */
html[dir="rtl"] .probsol h2,html[dir="rtl"] .probsol p{text-align:right}

/* ===== Contact ===== */
html[dir="rtl"] .cform label{text-align:right}
html[dir="rtl"] .cform .hp{left:auto;right:-9999px}
html[dir="rtl"] .contact-side ul{text-align:right}

/* ===== Footer ===== */
html[dir="rtl"] .vz-foot .cols,html[dir="rtl"] .vz-foot .legal,
html[dir="rtl"] .vz-foot div{text-align:right}
html[dir="rtl"] .vz-social{flex-direction:row-reverse;justify-content:flex-end}

/* ===== Sélecteur de langue (base définie dans pages.css) ===== */
html[dir="rtl"] .vz-lang{margin-right:0;margin-left:8px}

/* Offre / CTA band : garder centré */
html[dir="rtl"] .offer,html[dir="rtl"] .ctaband{text-align:center}
html[dir="rtl"] .offer .btn.sec,html[dir="rtl"] .offer .btn{margin:8px 6px 0}
/* Titre du hero en clair sur fond foncé (corrige la home AR où le H1 héritait d'une couleur sombre) */
html[dir="rtl"] .vz-hero h1,html[dir="rtl"] .vz-hero h2,html[dir="rtl"] section.hero h1{color:#fff !important}
html[dir="rtl"] .vz-hero .lead,html[dir="rtl"] .vz-hero p{color:#dbe8fb !important}