/*
Theme Name: Hello Child
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-child
*/

html {
  overflow-x: hidden;
}
body {
  position: relative;
  overflow-x: hidden;  
}
h1, h2, h3, h4, h5, h6{
	text-wrap: pretty!important;
}
.elementor-counter-number-suffix{
	display: block;
	font-size: 12px;
	color: #0B0D11;
	font-weight: bold;
	margin-left: 16px;
}

.truncate-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2; /* Nombre de lignes max */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 3em; /* Ajustez selon la hauteur de ligne */
	line-height: 1.5em; /* Ajustez selon votre design */
	white-space: normal;
}
.truncate-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3; /* Nombre de lignes max */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 5em; /* Ajustez selon la hauteur de ligne */
	line-height: 1.5em; /* Ajustez selon votre design */
	white-space: normal;
}
.ue-grid-item-category a.regarder{
	color: var(--e-global-color-a01ae04)!important;
	background-color: var(--e-global-color-accent)!important;
	border: 1px solid var(--e-global-color-a01ae04)!important;
}
.ue-grid-item-category a.lire{
	color: var(--e-global-color-a01ae04)!important;
	background-color: var(--e-global-color-secondary)!important;
	border: 1px solid var(--e-global-color-a01ae04)!important;
}
.ue-grid-item-category a.ecouter{
	color: var(--e-global-color-text)!important;
	background-color: var(--e-global-color-f5263f9)!important;
	border: 1px solid var(--e-global-color-a01ae04)!important;	
}
@keyframes fadeInUpSmooth {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.99);
	}
	60% {
		opacity: 1;
		transform: translateY(-1px) scale(1.01);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes fadeInDownSmooth {
	from {
		opacity: 0;
		transform: translateY(-12px) scale(0.99);
	}
	60% {
		opacity: 1;
		transform: translateY(1px) scale(1.01);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes fadeInLeftSmooth {
	from {
		opacity: 0;
		transform: translateX(-12px) scale(0.99);
	}
	60% {
		opacity: 1;
		transform: translateX(1px) scale(1.01);
	}
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes fadeInRightSmooth {
	from {
		opacity: 0;
		transform: translateX(12px) scale(0.99);
	}
	60% {
		opacity: 1;
		transform: translateX(-1px) scale(1.01);
	}
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

/* Vitesse et easing plus rapide */
.fadeInUp.animated,
.fadeInDown.animated,
.fadeInLeft.animated,
.fadeInRight.animated {
	animation-duration: 0.6s;
	animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.fadeInUp.animated { animation-name: fadeInUpSmooth; }
.fadeInDown.animated { animation-name: fadeInDownSmooth; }
.fadeInLeft.animated { animation-name: fadeInLeftSmooth; }
.fadeInRight.animated { animation-name: fadeInRightSmooth; }

/* Pour Elementor */
.elementor-editor-active .fadeInUp,
.elementor-editor-active .fadeInDown,
.elementor-editor-active .fadeInLeft,
.elementor-editor-active .fadeInRight {
	opacity: 1 !important;
	animation: none !important;
	transform: none !important;
}




.background-blur {
  backdrop-filter: blur(32px)!important; /* Applique un flou de 3px */
  -webkit-backdrop-filter: blur(32px)!important; /* Pour la compatibilité avec Safari */ 
}
.e-con-inner>.elementor-element{
	height: 100%;
}

strong{
	font-weight: 700;
}

/* Lien actif : garder la bordure visible */
.elementor-2 .elementor-element.elementor-element-53167d8 > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title.e-current::before {
	width: 70%;
	background-color: #2F0437;
}
.heart-icon {
	color: #000; /* Ou la couleur exacte de ta police */
	font-size: inherit; /* Garde la taille de la police du texte */
}


/* Texte bien à gauche */
.elementor-button-text {
	text-align: left;
}

/* Icône animée à droite */
.elementor-button-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}


.ue-grad-btn-wrapper:hover .ue-gradient-border-icon {
	transform: translateX(10px); /* Décale l'icône de 15px vers la droite */
	transition: transform 0.3s ease; /* Transition fluide sur 0.3 secondes */
}

.ue-gradient-border-icon {
	transition: transform 0.3s ease; /* Assure une transition fluide même sans survol */
}

/* Effet au survol de l'icône lorsque l'accordéon est fermé */
.e-n-accordion-item-title:hover .e-closed {
	transform: translateX(10px); /* Décale l'icône de 15px vers la droite */
	transition: transform 0.3s ease; /* Transition fluide */
}

/* Effet au survol de l'icône lorsque l'accordéon est ouvert */
.e-n-accordion-item-title:hover .e-opened {
	transform: translateX(10px); /* Décale l'icône de 15px vers la droite */
	transition: transform 0.3s ease; /* Transition fluide */
}

/* Transition initiale pour l'état de base de l'icône fermée */
.e-closed {
	transition: transform 0.3s ease; /* Assure une transition fluide même sans survol */
}

/* Transition initiale pour l'état de base de l'icône ouverte */
.e-opened {
	transition: transform 0.3s ease; /* Assure une transition fluide même sans survol */
}
.inner-wrap{
	height: 100%!important;
}
.elementor-element.elementor-element-5c8a659:not(.elementor-motion-effects-element-type-background){
	background-color: transparent!important;
}
.ue-carousel-item.reveal-item:hover .inner-wrap{
	box-shadow: none!important;
}

@keyframes fadeInUpSearch {
	from {
		opacity: 0;
		transform: translateY(15px) scale(0.99);
	}
	60% {
		opacity: 1;
		transform: translateY(-2px) scale(1.01);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes fadeOutDownSearch {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	to {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}
}

.search-div {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.search-div.revealed {
	animation: fadeInUpSearch 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	visibility: visible;
	pointer-events: auto;
}

.search-div.hideout {
	animation: fadeOutDownSearch 0.5s ease forwards;
}

.elementor-editor-active .search-div {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	animation: none !important;
	pointer-events: auto !important;
}
.elementor-button {
  position: relative;
  display: inline-block;
  border-radius: 50px; /* arrondi du bouton */
  padding: 12px 24px;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(135deg, #1eb6a7, #b98eff); /* ton fond actuel */
  z-index: 1;
  overflow: hidden; /* évite les débordements du ::before */
}

.elementor-button {
  position: relative;
  display: inline-block;
  border-radius: 50px; /* arrondi du bouton */
  padding: 12px 24px;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(135deg, #1eb6a7, #b98eff); /* fond */
  z-index: 1;
  overflow: hidden; /* évite débordement du ::before */
}

/* Bordure animée */
.elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 2px; /* épaisseur de la bordure */
  background: linear-gradient(270deg, #ffffff21, #ffffff80, #ffffff21);
  background-size: 200% 200%; /* important pour l’animation visible */
  background-position: 0% 50%;
  animation: borderflow 4s linear infinite;
  -webkit-mask: 
	linear-gradient(#fff 0 0) content-box, 
	linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
		  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

@keyframes borderflow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ===== Slide Bounce — drop-in pour WOW/Elementor =================== */
.slideInUp.animated,
.slideInDown.animated,
.slideInLeft.animated,
.slideInRight.animated{
  --dist: 24px;          /* distance d'entrée */
  --bounce: 10px;        /* amplitude du rebond */
  --zoom: 1.08;          /* zoom au pic */
  --blur: 6px;
  --dur: .85s;
  animation-duration: var(--dur);
  animation-timing-function: cubic-bezier(.22,1,.36,1); /* ease-out punchy */
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

/* mapping */
.slideInUp.animated    { animation-name: slideInUpBounce; }
.slideInDown.animated  { animation-name: slideInDownBounce; }
.slideInLeft.animated  { animation-name: slideInLeftBounce; }
.slideInRight.animated { animation-name: slideInRightBounce; }

/* keyframes — zoom > overshoot > settle */
@keyframes slideInUpBounce{
  0%   { opacity:0; transform: translateY(var(--dist)) scale(.96); filter: blur(var(--blur)); }
  55%  { opacity:1; transform: translateY(calc(var(--bounce)*-1)) scale(var(--zoom)); filter: blur(0); }
  75%  {            transform: translateY(calc(var(--bounce)* .35)) scale(.997); }
  90%  {            transform: translateY(calc(var(--bounce)*-.15)) scale(1.003); }
  100% {            transform: translateY(0) scale(1); }
}
@keyframes slideInDownBounce{
  0%   { opacity:0; transform: translateY(calc(var(--dist)*-1)) scale(.96); filter: blur(var(--blur)); }
  55%  { opacity:1; transform: translateY(var(--bounce))        scale(var(--zoom)); filter: blur(0); }
  75%  {            transform: translateY(calc(var(--bounce)*-.35)) scale(.997); }
  90%  {            transform: translateY(calc(var(--bounce)* .15))  scale(1.003); }
  100% {            transform: translateY(0) scale(1); }
}
@keyframes slideInLeftBounce{
  0%   { opacity:0; transform: translateX(calc(var(--dist)*-1)) scale(.96); filter: blur(var(--blur)); }
  55%  { opacity:1; transform: translateX(var(--bounce))        scale(var(--zoom)); filter: blur(0); }
  75%  {            transform: translateX(calc(var(--bounce)*-.35)) scale(.997); }
  90%  {            transform: translateX(calc(var(--bounce)* .15))  scale(1.003); }
  100% {            transform: translateX(0) scale(1); }
}
@keyframes slideInRightBounce{
  0%   { opacity:0; transform: translateX(var(--dist)) scale(.96); filter: blur(var(--blur)); }
  55%  { opacity:1; transform: translateX(calc(var(--bounce)*-1)) scale(var(--zoom)); filter: blur(0); }
  75%  {            transform: translateX(calc(var(--bounce)* .35)) scale(.997); }
  90%  {            transform: translateX(calc(var(--bounce)*-.15))  scale(1.003); }
  100% {            transform: translateX(0) scale(1); }
}

/* options rapides */
.bounce-soft  .animated{ --zoom:1.04; --bounce:6px;  --dur:.7s; }
.bounce-strong.animated,
.bounce-strong .animated{ --zoom:1.12; --bounce:14px; --dur:1s; }

/* Elementor éditeur = pas d'anim */
.elementor-editor-active .slideInUp,
.elementor-editor-active .slideInDown,
.elementor-editor-active .slideInLeft,
.elementor-editor-active .slideInRight{
  opacity:1 !important; animation:none !important; transform:none !important; filter:none !important;
}
.masonryPostGridItemContent{
	opacity: 1!important;
}
/* ===== Anneau dégradé statique + input blanc ===== */
.elementor-form .elementor-field-group:has(> input[type="text"]),
.elementor-form .elementor-field-group:has(> input[type="email"]),
.elementor-form .elementor-field-group:has(> input[type="tel"]),
.elementor-form .elementor-field-group:has(> input[type="url"]),
.elementor-form .elementor-field-group:has(> input[type="number"]),
.elementor-form .elementor-field-group:has(> input[type="search"]),
.elementor-form .elementor-field-group:has(> input[type="password"]),
.elementor-form .elementor-field-group:has(> textarea),
.elementor-form .elementor-field-group:has(> select){
  --radius: 2rem;
  --ring: 2px;
  position: relative;
  border-radius: var(--radius) !important;
  padding: var(--ring) !important;
  background: linear-gradient(90deg, #7a5cff, #22c1b7) !important;
}

.elementor-form .elementor-field-group input[type="text"],
.elementor-form .elementor-field-group input[type="email"],
.elementor-form .elementor-field-group input[type="tel"],
.elementor-form .elementor-field-group input[type="url"],
.elementor-form .elementor-field-group input[type="number"],
.elementor-form .elementor-field-group input[type="search"],
.elementor-form .elementor-field-group input[type="password"],
.elementor-form .elementor-field-group textarea,
.elementor-form .elementor-field-group select{
  display:block; width:100%;
  background:#fff !important;
  padding:1rem !important;
  border:0 !important; outline:none !important; box-shadow:none !important;
  border-radius:calc(var(--radius) - var(--ring)) !important;
}

.elementor-form .elementor-field-group *:focus{ outline:none !important; box-shadow:none !important; }

/* ===== Focus subtil : anneau conique doux + léger glow ===== */
.elementor-form .elementor-field-group::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  pointer-events:none;
  opacity:0;
  /* conic-gradient doux (alpha) qui tourne au focus */
  background: conic-gradient(from var(--magma-angle,0deg),
			  rgba(122,92,255,.7), rgba(34,193,183,.7), rgba(122,92,255,.7));
  padding: calc(var(--ring) + 1px);
  -webkit-mask:
	linear-gradient(#000 0 0) content-box,
	linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .18s ease;
}

.elementor-form .elementor-field-group:focus-within{
  --ring: 3px; /* un peu plus présent */
}

.elementor-form .elementor-field-group:focus-within::after{
  opacity:.9;
  animation: magma-spin 1.6s linear infinite;   /* vitesse douce */
  filter: drop-shadow(0 0 5px rgba(122,92,255,.18))
		  drop-shadow(0 0 6px rgba(34,193,183,.16)); /* glow discret */
}
.category-regarder .header-art::before {
	background-image: linear-gradient(109deg, #AD8EEC 29%, #AD8EEC00 100%) !important;
}

.category-lire .header-art::before {
	background-image: linear-gradient(109deg, #1EB6A7 29%, #AD8EEC00 100%) !important;
}
.elementor-button{
	text-transform: lowercase!important;
}
/* angle animable */
@property --magma-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
@keyframes magma-spin{ to { --magma-angle:360deg; } }

/* Respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .elementor-form .elementor-field-group:focus-within::after{ animation:none; }
}

/* A11y */
@media (prefers-reduced-motion: reduce){
  .slideInUp.animated, .slideInDown.animated, .slideInLeft.animated, .slideInRight.animated{
	animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
}