/* ==========================================================================
   HE-RTL.CSS — Overrides hébreu (RTL)
   Kératopigmentation FLAAK — Dr Yoni Gozlan
   --------------------------------------------------------------------------
   Chargé APRÈS main.css sur toutes les pages /he/*
   Gère le rendu miroir horizontal du hero (droite ↔ gauche) :
     • Image de fond retournée (hero-bg-he.jpg)
     • Dégradé inversé (de droite vers gauche)
     • Textes alignés à droite dans la colonne hero
     • Séparateurs des stats adaptés à l'ordre RTL du flex
     • Image mobile adaptée
   NB : !important nécessaire pour surcharger main.css
   ========================================================================== */


/* --------------------------------------------------------------------------
   HERO — image miroir
   -------------------------------------------------------------------------- */
#hero {
  background-image: image-set(url("/images/hero-bg-he.webp") type('image/webp'), url("/images/hero-bg-he.jpg") type('image/jpeg')) !important;
  background-position: left center !important;
}

/* Dégradé de droite (sombre) vers gauche (transparent) */
#hero::before {
  background: linear-gradient(to left,
    #0a0805 0%, #0a0805 18%,
    rgba(10,8,5,0.88) 34%,
    rgba(10,8,5,0.45) 52%,
    rgba(10,8,5,0.10) 70%,
    transparent 100%) !important;
}


/* --------------------------------------------------------------------------
   HERO INNER — colonne de texte alignée à droite
   -------------------------------------------------------------------------- */
.hero-inner {
  padding: calc(72px + 28px) 7% 32px 44px !important;  /* swap padding L/R */
  margin-left: auto !important;                          /* pousse le bloc à droite */
  align-items: flex-start !important;                    /* flex-start = droite en RTL */
  text-align: right !important;
}

/* Tous les éléments texte du hero : alignés à droite */
.hero-inner h1,
.hero-inner p,
.hero-inner .hero-badge,
.hero-inner .hero-sub { text-align: right !important; }

/* Boutons et stats — justifiés à droite */
.hero-btns  { justify-content: flex-end !important; }
.hero-stats { justify-content: flex-end !important; }


/* --------------------------------------------------------------------------
   STATS — séparateurs adaptés à l'ordre RTL
   En RTL flex-row, le DOM est affiché en ordre inverse (gauche ↔ droite).
   On remplace border-right par border-left, et on retire la bordure du
   dernier enfant DOM (= premier visuellement, côté droit en RTL).
   -------------------------------------------------------------------------- */
.stat            { border-right: none !important; border-left: 1px solid var(--gold-border) !important; }
.stat:last-child { border-left: none !important; }



/* --------------------------------------------------------------------------
   MOBILE — overrides RTL spécifiques
   En mobile le hero est en colonne (image en haut, texte en bas).
   Le padding et l'alignement de .hero-inner doivent rester cohérents
   avec main.css, en conservant text-align: right.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero-inner {
    padding: 28px 24px 36px !important;  /* reset du padding desktop RTL */
    margin-left: 0 !important;
    text-align: right !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE — image miroir sur la version portrait
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero-mobile-img {
    background-image: image-set(url("/images/hero-bg-he.webp") type('image/webp'), url("/images/hero-bg-he.jpg") type('image/jpeg')) !important;
    background-position: 32% top !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE — iPhone fix: annuler le background-image du #hero
   Le background-image global (avec !important) écrasait le background:none
   de main.css sur mobile. Sur mobile, l'image est portée par .hero-mobile-img
   — le #hero lui-même doit rester fond plein #0a0805.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #hero {
    background-image: none !important;
    background-color: #0a0805 !important;
  }
}