/* ============ RTL OVERRIDES ============ */
/* Charge après bootstrap.rtl.min.css et custom.css sur les pages AR */

body {
  font-family: 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Titres editorial : Amiri (équivalent serif arabe de Playfair) */
.hero-title,
.section-title,
.contact-title,
.change-claim,
.legal-title,
.proof-title,
.chapter-role,
.formation-title,
.brand-title,
.reveal-subtitle,
.hero-quote,
.change-side-text,
.change-pullquote p,
.pillar-num,
.chapter-num {
  font-family: 'Amiri', 'Playfair Display', Georgia, serif;
}

/* Hero : photo passe à GAUCHE en RTL (au lieu de droite) */
.hero-text-col {
  padding-left: 3.5rem;
  padding-right: max(1.5rem, calc((100vw - 1320px) / 2));
}

/* Hero photo : fondu côté DROIT en RTL (au lieu de gauche) */
.hero-photo::before {
  background: linear-gradient(
    270deg,
    #ffffff 0%,
    rgba(255, 255, 255, .85) 8%,
    rgba(255, 255, 255, 0) 28%
  );
}

/* Eyebrow et sub-title : direction:rtl gère le flux, mais l'ordre HTML doit être ajusté */
/* HTML section-eyebrow : [line, text] → en RTL on veut [text, line] côté droit */
.section-eyebrow > .eyebrow-line {
  order: 2;
}
.section-eyebrow > span:not(.eyebrow-line) {
  order: 1;
}

/* HTML hero-eyebrow : [text, line] → ordre déjà bon en RTL, rien à faire */

/* HTML contact-eyebrow : [line, text, line] → symétrique, ordre OK naturellement */

/* HTML sub-title (section.formation, section.preuves) : [bar, text] → swap pour AR */
.sub-title > .sub-bar {
  order: 2;
}
.sub-title > span:not(.sub-bar) {
  order: 1;
}

/* Change-opposition : inverser les paddings first-child / last-child */
/* En RTL, le first-child est visuellement à DROITE (grâce à direction:rtl du grid) */
/* Le first-child doit être flush à droite (padding-right: 0) pour s'aligner sur l'eyebrow */
.change-side:first-child {
  padding-left: 2rem;
  padding-right: 0;
}
.change-side:last-child {
  padding-left: 0;
  padding-right: 2rem;
}

/* Divider sous le titre hero : reste à gauche en RTL = côté début */
.divider {
  margin-right: 0;
  margin-left: auto;
}

/* Citation hero : barre verticale à DROITE en RTL */
.hero-quote {
  border-left: 0;
  border-right: 3px solid var(--accent, #c9a86a);
  padding-left: 0;
  padding-right: 1rem;
}

/* Pull quote (change section) : barre à DROITE */
.change-pullquote {
  border-left: 0;
  border-right: 3px solid var(--brand-2);
  padding-left: 0;
  padding-right: 2.25rem;
}

/* Pilier link : flèche pointe à GAUCHE en RTL (vers la suite de lecture) */
.pillar-link .pl-arrow,
.contact-secondary .cs-arrow,
.brand-card .bc-arrow {
  transform: scaleX(-1);
}

/* Hover : translation INVERSÉE en RTL */
.pillar-link:hover .pl-arrow {
  transform: scaleX(-1) translateX(4px);
}
.contact-secondary:hover .cs-arrow,
.brand-card:hover .bc-arrow {
  transform: scaleX(-1) translate(2px, -2px);
}

/* Reveal accordion : flèche aussi miroitée */
.rt-arrow {
  display: inline-block;
}

/* Sub-bar (sections internes) : barre à DROITE */
.sub-bar {
  margin-right: 0;
}

/* Trust list, locations list : alignement RTL */
.trust-list,
.locations-list {
  padding-right: 0;
}

/* Chapter dates et numbers : direction: rtl flippe déjà les colonnes du grid */
/* Marker (01 + date) va à droite, body (rôle + desc) prend la suite à gauche */
/* Le texte du marker s'aligne à droite naturellement (text-align: start en RTL) */

/* Formation list : trait reste cohérent */
.formation-verify .formation-verify-arrow {
  margin-right: .35rem;
  margin-left: 0;
}

/* Footer langs : sens lecture inversé */
.footer-langs {
  direction: ltr;
  text-align: right;
}

/* Brand cards : flèche à GAUCHE */
.brand-url {
  flex-direction: row-reverse;
}

/* Header langs en RTL */
.nav-lang {
  direction: ltr;
}

/* Modal carousel : flèches gardent leur sens (prev = gauche, next = droite) MAIS le sens "suivant" en RTL est différent */
/* Bootstrap RTL gère normalement ça via bootstrap.rtl.min.css */

/* Mobile : photo en haut, mêmes ajustements */
@media (max-width: 991.98px) {
  .hero-text-col {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ============ AJUSTEMENTS TYPO ARABE ============ */
/* Les glyphes arabes ont besoin de ~15-20% de plus pour égaler la lisibilité du latin */

.hero-eyebrow,
.section-eyebrow {
  font-size: .92rem;
  letter-spacing: .08em;
}

.proof-meta,
.pillar-tags,
.formation-meta,
.brand-meta,
.legal-meta,
.formation-verify,
.pillar-link,
.contact-secondary {
  font-size: .88rem;
  letter-spacing: .04em;
}

.sub-title,
.trust-context {
  font-size: .98rem;
  letter-spacing: .08em;
}

.chapter-date {
  font-size: .92rem;
  letter-spacing: .06em;
}

.pillar-title {
  font-size: 1.05rem;
  letter-spacing: .04em;
}

.hero-cta .btn,
.contact-cta .btn,
.reveal-toggle,
.form-submit {
  font-size: .95rem;
  letter-spacing: .04em;
}

.footer-eyebrow,
.proof-media-label {
  font-size: .85rem;
  letter-spacing: .08em;
}

/* ============ RAIL INVERSÉ EN RTL ============ */
/* .section-inner pose un rail-gauche en LTR ; en RTL il doit poser un rail-DROIT */
.section-inner {
  padding-left: 1.5rem;
  padding-right: max(1.5rem, calc((100vw - 1320px) / 2));
  margin-left: 0;
  margin-right: 0;
}

/* La section "change" est centrée, OK. Mais on vérifie l'alignement texte */
.change-claim,
.contact-title,
.legal-title,
.section-title {
  text-align: inherit;
}

/* La section "Pourquoi moi" eyebrow + titre : alignement à droite (naturel RTL) */
.pourquoi .section-eyebrow,
.pourquoi .section-title {
  text-align: right;
}