/*
Theme Name: G-Met
Theme URI: https://perroquet.eu
Template: hello-elementor
Author: Perroquet
Author URI: https://perroquet.eu
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.2.1.1736247449
Updated: 2025-01-07 11:57:29

*/

/* Bouton principal */
.button-vert {
  display: flex; 
  align-items: center; 
  justify-content: flex-start; /* Place le contenu à gauche */
  background: transparent; 
  text-decoration: none; 
  font-size: 20px;
  text-transform: uppercase;
  color: #FFFFFF; /* Couleur initiale du texte */
  font-family: Helvetica, Arial, sans-serif;
  cursor: pointer; 
  padding-left: 0; /* Retire tout espace supplémentaire à gauche */
  margin-left: 0; /* Retire toute marge inutile */
  transition: color 0.3s ease; /* Transition fluide pour le texte */
}

/* Couleur du texte au survol */
.button-vert:hover {
  color: #96E1A0; /* Change uniquement la couleur du texte au survol */
}




/* Hexagone contenant l'icône */
.hexagon-icon-vert {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px; 
  height: 45px; 
  background: #96E1A0; 
  clip-path: polygon(
    50% 0%,   
    100% 25%, 
    100% 75%, 
    50% 100%, 
    0% 75%,   
    0% 25%
  ); 
   
  margin-left: 15px; /* Espacement entre le texte et l'hexagone */
  transition: background-color 0.3s ease; /* Transition fluide pour le changement de couleur */
}

.hexagon-icon-vert .icon-arrow {
  width: 16px!important;   /* Plus petite largeur */
  height: 16px!important;  /* Plus petite hauteur */
  stroke: #00141F!important;
  transform: rotate(-90deg)!important; /* Tourne vers le nord-est */
  transition: transform 0.3s ease, color 0.3s ease; /* Animation douce */
}

/* Couleur de l'hexagone au survol */
.button-vert:hover .hexagon-icon-vert {
  background: #FFFFFF; /* Change la couleur de l'hexagone au survol */
}





/* Changement de la couleur de la flèche au survol */
.button-vert:hover .icon-arrow {
  color: #96E1A0; /* Change la couleur de la flèche au survol */
}

.highlight-text {
  color: #96E1A0; /* Couleur personnalisée pour le texte */
}
/* Style pour le bouton hamburger */
.elementor-menu-toggle {
  position: relative;
  width: 60px; /* Taille du bouton hamburger */
  height: 60px; /* Taille du bouton hamburger */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10; /* Assure que le bouton reste au-dessus */

}

/* Ajouter un hexagone en arrière-plan */
.elementor-menu-toggle:before {
  content: ''; /* Nécessaire pour le pseudo-élément */
  position: absolute;
  width: 60px; /* Taille de l'hexagone */
  height: 60px; /* Taille de l'hexagone */
  background: #F1FEFF; /* Couleur personnalisée pour l'hexagone */
  clip-path: polygon(
    50% 0%,    /* Haut */
    100% 25%,  /* Haut droite */
    100% 75%,  /* Bas droite */
    50% 100%,  /* Bas */
    0% 75%,    /* Bas gauche */
    0% 25%     /* Haut gauche */
  ); /* Forme hexagonale */
  z-index: -1; /* Place l'hexagone derrière le bouton */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ajoute une ombre subtile */
}

/* Icône SVG à l'intérieur */
.elementor-menu-toggle svg {
  width: 24px; /* Taille de l'icône */
  height: 24px;
  fill: #00141F; /* Couleur bleue personnalisée pour le SVG */
  transition: transform 0.3s ease; /* Effet fluide */
}

/* Effet au survol */
.elementor-menu-toggle:hover:before {
  background: rgba(241, 254, 255, 0.9); /* Changement de couleur au survol (plus clair) */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Ombre plus forte */
}

.elementor-menu-toggle:hover svg {
  transform: scale(1.1); /* Agrandissement de l'icône au survol */
}

/*========================================================================*/

.custom-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05); /* Fond semi-transparent */
  border: 0.2px solid rgba(150, 225, 160, 0.1); /* Bordure verte avec opacité réduite */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Ombre légère */
  z-index: 10!important
}