/*
Theme Name: Hello Elementor Enfant
Description: Theme enfant de Hello Elementor.
Author: Pierrick Pralong
Author URI: http://panierdepixels.fr/
Template: hello-elementor
Version: 1.0
*/

/* ======================================================
   ANIMATION BOUTONS ELEMENTOR (effet slide gauche → droite)
   ====================================================== */

/* ======================================================
   --e-global-color-primary
   ====================================================== */


/* Bouton */
.p9-btn-hover-prim a.elementor-button {
  position: relative;
  overflow: hidden;
  background: transparent;
  z-index: 1;
  transition: color 0.3s ease;
}

/* Couche animée */
.p9-btn-hover-prim a.elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--e-global-color-primary);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);

  z-index: -1;
  border-radius: inherit;
}

/* Animation */
.p9-btn-hover-prim a.elementor-button:hover::before {
  transform: scaleX(1);
}

/* Texte blanc */
.p9-btn-hover-prim a.elementor-button:hover {
  color: #fff !important;
}

/* ======================================================
   --e-global-color-sec
   ====================================================== */
/* Bouton */
.p9-btn-hover-sec a.elementor-button {
  position: relative;
  overflow: hidden;
  background: transparent;
  z-index: 1;
  transition: color 0.3s ease;
}

/* Couche animée */
.p9-btn-hover-sec a.elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--e-global-color-secondary);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);

  z-index: -1;
  border-radius: inherit;
}

/* Animation */
.p9-btn-hover-sec a.elementor-button:hover::before {
  transform: scaleX(1);
}

/* Texte blanc */
.p9-btn-hover-sec a.elementor-button:hover {
  color: #fff !important;
}

/*-- Animation Hover pour les boutons de formulaire Elementor --*/
/* 1. Bouton de base (on cible le bouton dans le groupe de champ "submit") */
.elementor-field-type-submit button.elementor-button {
 position: relative; overflow: hidden; background: transparent;
  z-index: 1; transition: color 0.3s ease; border: 1px solid;
}

/* 2. La couche de couleur animée (le pseudo-élément) */
.elementor-field-type-submit button.elementor-button::before {
    content: ""; 
    position: absolute; 
    inset: 0; 
    background: var(--e-global-color-primary);
    transform: scaleX(0); 
    transform-origin: left; 
    transition: transform 0.4s ease;  
    z-index: -1; /* Placé derrière le texte */
}

/* 3. On s'assure que le contenu du bouton reste au-dessus */
.elementor-field-type-submit button.elementor-button .elementor-button-content-wrapper {
    position: relative; 
    z-index: 2;
}

/* 4. Animation au survol (Scale) */
.elementor-field-type-submit button.elementor-button:hover::before {
    transform: scaleX(1);
}

/* 5. Changement de couleur du texte au survol */
.elementor-field-type-submit button.elementor-button:hover {
    color: #fff !important;
}

/*-- Fin Animation Hover Formulaire --*/

/* ======================================================
   FIN BOUTONS ANIMATION GAUCHE → DROITE 
   ====================================================== */

/*-- Fond pour les menus déroulants --*/
/* Menu déroulant desktop */
.elementor-nav-menu .sub-menu {
 background: #FDF9FA;
}

/* Menu mobile */
.elementor-nav-menu--dropdown {
 background: #FDF9FA;
 background-size: cover;
 background-position: center;
}
/*-- Fin fond pour les menus déroulants --*/