/* ============================================================================
   BUTTON FILL HOVER — Effet générique réutilisable
   ----------------------------------------------------------------------------
   Logique : un pseudo-element `::before` est placé en superposition sur le
   bouton, à `scaleX(0)` au repos (donc invisible). Au hover/focus, il passe
   à `scaleX(1)` avec son `transform-origin: left`, donnant l'illusion d'un
   "remplissage horizontal" qui se déploie de gauche à droite.

   Pourquoi `transform` et pas `width` ?
     - `transform` est animé sur le compositeur GPU → animation à 60 fps,
       aucun reflow/repaint sur la mise en page environnante.
     - Le bouton ne « grandit » jamais : seul le pseudo-element change.

   Couleurs : AUCUNE n'est définie ici. Le `background` du `::before` doit
   être appliqué via un sélecteur côté projet, par exemple :
       .btn-fill::before          { background-color: #000; }
       .btn-fill.btn-fill--dark::before { background: #111; }
       .btn-fill.tj-primary-btn::before { background-color: var(--primary); }

   Classe dédiée (`.btn-fill`) pour cohabiter sans conflit avec Bootstrap
   `.btn`, le theme Bexon (`.tj-primary-btn`, `.text-btn`) et Elementor.
   Utilisation : ajouter `class="… btn-fill"` aux boutons qui doivent recevoir
   l'effet.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. BASE — conteneur du bouton
   ----------------------------------------------------------------------------
   - position: relative   → ancrage pour le `::before` en absolute
   - overflow: hidden     → masque le `::before` quand il dépasse aux coins
                            arrondis (border-radius) et avant l'animation
   - inline-flex          → aligne proprement texte + icône
   ---------------------------------------------------------------------------- */
.btn-fill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ----------------------------------------------------------------------------
   2. LAYER ANIMÉ — pseudo-element `::before`
   ----------------------------------------------------------------------------
   - inset: 0                  → étire le layer aux 4 coins du bouton
   - transform: scaleX(0)      → état initial : largeur 0 sur l'axe X (invisible)
   - transform-origin: left    → l'agrandissement démarre de la gauche
                                 (sens du fill : left → right)
   - transition                → animation fluide de scaleX(0) à scaleX(1)
   - will-change: transform    → indique au navigateur d'optimiser pour GPU
   ---------------------------------------------------------------------------- */
.btn-fill::before {
  content: "";
  position: absolute;
  inset: 0;

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.35s ease;
  will-change: transform;
}


/* ----------------------------------------------------------------------------
   3. HOVER / FOCUS — déclenchement
   ----------------------------------------------------------------------------
   Inclut `:focus-visible` pour activer aussi l'effet au focus clavier
   (accessibilité — navigation au Tab).
   ---------------------------------------------------------------------------- */
.btn-fill:hover::before,
.btn-fill:focus-visible::before {
  transform: scaleX(1);
}


/* ----------------------------------------------------------------------------
   4. CONTENU AU-DESSUS — garder texte et icônes visibles
   ----------------------------------------------------------------------------
   Le `::before` est en `position: absolute`, donc il prend automatiquement le
   dessus des enfants statiques. On force le contenu à se positionner et à
   prendre un `z-index` supérieur pour rester au-dessus du layer.
   ---------------------------------------------------------------------------- */
.btn-fill * {
  position: relative;
  z-index: 2;
}


/* ----------------------------------------------------------------------------
   5. ACCESSIBILITÉ — réduire les animations
   ----------------------------------------------------------------------------
   Respecte la préférence système « réduire les animations ».
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-fill::before {
    transition: none;
  }
}


/* ============================================================================
   6. ADAPTATION ELEMENTOR
   ----------------------------------------------------------------------------
   Cible spécifique pour les boutons Elementor combinés avec `.btn-fill`.
   La spécificité supérieure (`.elementor-button.btn-fill`) évite les conflits
   avec les styles internes d'Elementor sans recourir à `!important`.
   ============================================================================ */
.elementor-button.btn-fill {
  position: relative;
  overflow: hidden;
}

.elementor-button.btn-fill::before {
  content: "";
  position: absolute;
  inset: 0;

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.35s ease;
  will-change: transform;
}

.elementor-button.btn-fill:hover::before,
.elementor-button.btn-fill:focus-visible::before {
  transform: scaleX(1);
}

.elementor-button.btn-fill * {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-button.btn-fill::before {
    transition: none;
  }
}