/*
Theme Name: Hello Elementor Child
Theme URI: https://hugomervaux.wayhappy.fr/
Description: Thème enfant pour Hello Elementor
Author: Pierre MERVAUX
Author URI: https://wayhappy.fr/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*//* Ajoutez votre CSS personnalisé ici */
   * 
h1.entry-title {
  display: none;
}
a {
  text-decoration: none !important;
}
html, 
body, 
main, 
section,
div{
	margin : 0px;
	padding : 0px;
}
/* Effet scale au hover pour les boutons Elementor */
.elementor-button:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}

/*-------------------Le nav-------------------------------------------------*/
	.nav {
	  transform: translateX(-50%);
	  background-color: var(--e-global-color-primary, #2121219C);
	  backdrop-filter: blur(10px);
	  -webkit-backdrop-filter: blur(10px);
	  z-index: 50;
	}
	.hfe-nav-menu__layout-horizontal hfe-nav-menu__submenu-arrow hfe-dropdown menu-is-active {
		  backdrop-filter: blur(10px);
		  -webkit-backdrop-filter: blur(10px);
		  z-index: 50;
	}

/*-----------------la timeline de la page d'accueil et apropos (/!\ Id specifique pour gérer le container scolarité/!\----------*/
	.timeline {
	  position: relative;
	}

	.timeline::before,
	#timelinescolarite::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;       /* ajuste selon ton design */
	  width: 3px;    /* largeur de la timeline */
	  height: 100%;
	  background: linear-gradient(
		to bottom,
		 var(--e-global-color-accent) 0%,
		 var(--e-global-color-accent) var(--progress, 0%),
		var(--e-global-color-text) var(--progress, 0%),
		var(--e-global-color-text) 100%
	  );
	  z-index: 1; /* s'assurer qu'il est visible */
	}
	/* Etat par défaut */
	.timeline .elementor-icon,
	#timelinecolarite .elementor-icon{
	  background-color:var(--e-global-color-primary);
	  border-color : var(--e-global-color-text);
	  fill:var(--e-global-color-text);
	  transition: background-color 0.3s ease, fill 0.3s ease;
	  border-radius: 50%;
	}

	/* Etat atteint */
	.timeline .elementor-icon.active,
	#timelinescolarite .elementor-icon.active{
	  background-color: var(--e-global-color-accent);
	  border-color : var(--e-global-color-accent);
	  fill : var(--e-global-color-primary);
	}

	/* changement de la couleur de fond des containers entre les icônes*/
		.timeline-box {
		  --box-progress: 0; /* valeur par défaut */
		  background-color: color-mix(in srgb, var(--e-global-color-text), transparent calc(100% - (var(--box-progress) * 100%)));
		  transform: scale(calc(0.7 + (0.3 * var(--box-progress))));
		  transition: transform 0.3s linear; /* fluide, mais réversible */
		  padding: 1rem;
		  border-radius: 10px; 
		}

		.timeline-box h3  {
		  color: color-mix(in srgb, var(--e-global-color-primary) calc(var(--box-progress) * 100%), currentColor calc(100% - (var(--box-progress) * 100%)));
		  transition: color 0.3s linear;
		}

		.timeline-box h4,
		.timeline-box h5  {
		  color: color-mix(in srgb, var(--e-global-color-accent) calc(var(--box-progress) * 100%), currentColor calc(100% - (var(--box-progress) * 100%)));
		  transition: color 0.3s linear;
		}

		.timeline-box p  {
		  color: color-mix(in srgb, var(--e-global-color-primary) calc(var(--box-progress) * 100%), currentColor calc(100% - (var(--box-progress) * 100%)));
		  transition: color 0.3s linear;
		}


/*-----------------la timeline de la page d'accueil et apropos (/!\ Id specifique pour gérer le container parcours pro/!\----------*/
	.timeline {
	  position: relative;
	}

	.timeline::before,
	#timelinespro::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;       /* ajuste selon ton design */
	  width: 3px;    /* largeur de la timeline */
	  height: 100%;
	  background: linear-gradient(
		to bottom,
		 var(--e-global-color-accent) 0%,
		 var(--e-global-color-accent) var(--progress, 0%),
		var(--e-global-color-text) var(--progress, 0%),
		var(--e-global-color-text) 100%
	  );
	  z-index: 1; /* s'assurer qu'il est visible */
	}
	/* Etat par défaut */
	.timeline .elementor-icon,
	#timelinespro .elementor-icon{
	  background-color:var(--e-global-color-primary);
	  border-color : var(--e-global-color-text);
	  fill:var(--e-global-color-text);
	  transition: background-color 0.3s ease, fill 0.3s ease;
	  border-radius: 50%;
	}

	/* Etat atteint */
	.timeline .elementor-icon.active,
	#timelinespro .elementor-icon.active{
	  background-color: var(--e-global-color-accent);
	  border-color : var(--e-global-color-accent);
	  fill : var(--e-global-color-primary);
	}

	/* changement de la couleur de fond des containers entre les icônes*/
		.timeline-box {
		  --box-progress: 0; /* valeur par défaut */
		  background-color: color-mix(in srgb, var(--e-global-color-text), transparent calc(100% - (var(--box-progress) * 100%)));
		  transform: scale(calc(0.7 + (0.3 * var(--box-progress))));
		  transition: transform 0.3s linear; /* fluide, mais réversible */
		  padding: 1rem;
		  border-radius: 10px; 
		}

		.timeline-box h3  {
		  color: color-mix(in srgb, var(--e-global-color-primary) calc(var(--box-progress) * 100%), currentColor calc(100% - (var(--box-progress) * 100%)));
		  transition: color 0.3s linear;
		}

		.timeline-box h4,
		.timeline-box h5  {
		  color: color-mix(in srgb, var(--e-global-color-accent) calc(var(--box-progress) * 100%), currentColor calc(100% - (var(--box-progress) * 100%)));
		  transition: color 0.3s linear;
		}

		.timeline-box p  {
		  color: color-mix(in srgb, var(--e-global-color-primary) calc(var(--box-progress) * 100%), currentColor calc(100% - (var(--box-progress) * 100%)));
		  transition: color 0.3s linear;
		}

/*---------------------- Gestion du grayscale des div avec la classe galerie------------------------*/
.galerie article img {
    filter: grayscale(100%); /* Noir et blanc par défaut */
    transition: filter 0.3s ease; /* Animation fluide */
}

.galerie article:hover img {
    filter: grayscale(0%); /* Couleur au survol */
}



/*-----------------------------------------------------------------------------------------
------------ Customisation widget post grid avec id accueil-custom-post-grid--------------------
-------------------------------------------------------------------------------------------*/
#accueil-custom-post-grid article img{
  filter: grayscale(100%);
  transition: filter 0.3s ease-in-out;	
}
#accueil-custom-post-grid article:hover img{
  filter: grayscale(0%);
}
#accueil-custom-post-grid article .eael-entry-wrapper a{
		color : var(--e-global-color-primary);
}
#accueil-custom-post-grid article:hover .eael-entry-wrapper a{
		color : var(--e-global-color-text);
}

#accueil-custom-post-grid article:hover .eael-entry-thumbnail,
#accueil-custom-post-grid article:hover .eael-entry-wrapper{
	background-color: var(--e-global-color-primary);
}

/* #accueil-custom-post-grid h4 a {
display: inline-block; 
	color : var(--e-global-color-accent);
	transform:translateY(-200px);
} */
/*-----------------------------------------------------------------------------------------
----------------------- Formulaire de contact  ----------------------------------------------
-------------------------------------------------------------------------------------------*/
	.form-group {
		margin: 5px;
	}
	.formEmail{
		width : 100%;
	}
	.input-field {
		width: 100%;
		padding: 10px;
		border-radius: 10px;
		font-size: 1rem;
	}

	.contact label{
		color: var(--e-global-color-text);
		display: block;
		line-height :2; /*espacement entre le titre et la boite de dialogue*/
	}
	.contact label span input{
		border-radius : 10px;
	}
	.contact textarea {
		height: 80px; 
		min-height: 80px; 
		max-height: 200px; 
		resize: vertical; 
		border-radius : 10px;
	}
	.contact label span input,
	.contact textarea {
		border: 2px solid var(--e-global-color-accent);
		background-color:var(--e-global-color-text);
		color :var(--e-global-color-text);
		transition: transform 0.3s ease-in-out;
	}

	.contact label span input:focus,
	.contact label span input:hover,
	.contact textarea:hover,
	.contact textarea:focus {
		border: 6px solid var(--e-global-color-accent);
		color :var(--e-global-color-primary);
	}
	.contact .privacy-label label{
		font-size:0.9rem;
		line-height :1.2;
		margin: -20px 0 0 0;
	}

	.contact .privacy-text {
		font-size: 0.8rem;
		color: var(--e-global-color-text);
		margin: -20px 0 20px 10px;
	}
	.contact p input[type="submit"]{
			display: block;
			margin: 0 auto;
			text-align:center;
			margin-top : 10px;
		}
	.contact p input[type="submit"]:hover{
		transform : scale(1.1);
	}

	.honeypot-container, .wpcf7-spinner{
		display: block !important;
		width: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
		visibility: hidden !important;
		position: absolute !important;
	}

	.wpcf7-response-output{
		border: 1px solid #ff0000 !important; 
		color: var(--e-global-color-text); !important;
		padding: 10px; 
		border-radius: 10px; 
	}