@charset "utf-8";
/*CSS Document */

/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://elementor.com/hello-theme/
 Description:  Thème enfant pour Hello Elementor
 Author:       Emilie JOLY
 Author URI:   ---
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* ----- UNIVERSEL ----- */
*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	scroll-behavior: smooth;
  	font-optical-sizing: auto;
	font-weight: 300; /* 100 - 900 | L 300 | M 450 | B 600  */
  	font-style: normal;
	transition: all 0.3s ease-in-out;
}

/* ----- GOOGLE FONT ----- */
body {
	/*background-image: linear-gradient(red 0%, red 100%) !important;*/
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 450; /* 100 - 900 | L 300 | M 450 | B 600  */
  	font-style: normal;
	letter-spacing: 0.01em;
	font-size: 1em;
	line-height: 1.2em;
	color: rgba(255, 255, 255, 1);
	background-attachment: fixed;
	overflow-x: hidden;
}

/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

----> GENERALE

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/


.pointer-cur {
	cursor: pointer;
}

.page-header {
	display: none;
}



/*===============================================
----> LOADING SCREEN
===============================================*/
/* 
#tattoo-loader {
  position: fixed;
  inset: 0;
  background: #0f0f0f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity 0.6s ease;
}
#tattoo-loader.hide {
  opacity: 0;
  pointer-events: none;
}
.loader-shape {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(57, 138, 136, 1);
  box-shadow: 0 0 10px rgba(57, 138, 136, 0.5);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

/*  1  */

/* .variant1::before, .variant1::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border: 6px solid rgba(57,138,136,0.6);
  border-radius: 50% 35% 50% 60% / 40% 60% 40% 60%;
  animation: swirl 3s ease-in-out infinite alternate;
}
.variant1::after {
  width: 120px;
  height: 120px;
  border-color: #fff;
  animation-delay: 1s;
}
@keyframes swirl {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(180deg) scale(1.1); }
} */

/*  2  */

/* #tattoo-loader {
  position: fixed;
  inset: 0;
  background: #0f0f0f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity 0.6s ease;
}
#tattoo-loader.hide {
  opacity: 0;
  pointer-events: none;
}
.loader-shape {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(57, 138, 136, 1);
  box-shadow: 0 0 10px rgba(57, 138, 136, 0.5);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.6; }
} */


/*  3  */

/* .variant3::before {
  content: "";
  position: absolute;
  inset: -20px;
  border: 8px solid rgba(57,138,136,0.8);
  border-radius: 30% 70% 40% 60% / 60% 40% 70% 30%;
  animation: tattooFlow 4s ease-in-out infinite alternate;
}
@keyframes tattooFlow {
  0% { border-radius: 30% 70% 40% 60%; }
  100% { border-radius: 70% 30% 60% 40%; }
}

/*  4  */

/* #tattoo-loader { 
  position: fixed;
  inset: 0;
  background: #0f0f0f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity 0.6s ease;
}
#tattoo-loader.hide {
  opacity: 0;
  pointer-events: none;
}
.loader-shape {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(57, 138, 136, 1);
  box-shadow: 0 0 10px rgba(57, 138, 136, 0.5);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.6; }
} */

 /* 5  */

/* .variant5::before, .variant5::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(57,138,136,0.5);
  animation: bubbles 3s ease-in-out infinite;
}
.variant5::before { width: 100px; height: 100px; bottom: -20px; left: 30px; }
.variant5::after { width: 60px; height: 60px; top: -20px; right: 30px; background: #fff; animation-delay: 1.5s; }
@keyframes bubbles {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
} */


/*  6  */

/* .variant6::before, .variant6::after {
  content: "";
  position: absolute;
  border: 8px solid rgba(57,138,136,0.8);
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid #fff;
  animation: spinTri 4s linear infinite;
}
.variant6::after {
  transform: rotate(180deg);
  border-bottom-color: rgba(57,138,136,0.6);
}
@keyframes spinTri {
  to { transform: rotate(360deg); }
} */


/*  7  */

/* .variant7::before, .variant7::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  border: 6px solid #fff;
  border-radius: 45% 55% 50% 50% / 50% 45% 55% 50%;
  animation: waveForm 3.5s ease-in-out infinite alternate;
}
.variant7::after {
  border-color: rgba(57,138,136,0.7);
  transform: scale(0.8);
}
@keyframes waveForm {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(180deg) scale(1.2); }
} */


/*  8  */

/* .variant8::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 6px solid rgba(57,138,136,0.8);
  border-radius: 8px;
  animation: borderPulse 1.8s ease-in-out infinite;
}
@keyframes borderPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.6; }
} */


/*===============================================
----> SECTION HERO
===============================================*/

	/*iddle*/
	[class*="elementor"] .hero {
			color: rgba(14, 14, 14, 1);
			background-color: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(5px);
			box-shadow: 0 0 0 4px rgba(57, 138, 136, 1);
			filter: opacity(0.98);
			transition: all 0.5s ease-in;
			margin: 50px auto ;
			padding: 150px 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		/* Au survol */
		[class*="elementor"] .hero:hover {
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0 0 0 8px rgba(57, 138, 136, 1);
			filter: opacity(1);
		}
		
		[class*="elementor"] .hero-wrapper {
			width: 1400px;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding: 0;
			margin: 0;
		}

		[class*="elementor"] .hero-content {
			color: rgba(14, 14, 14, 1);
			background-color: rgba(255, 255, 255, 0.80);
			backdrop-filter: blur(10px);
			box-shadow: 0 0 0 4px rgba(57, 138, 136, 1);
			filter: opacity(0.98);
			transition: all 0.5s ease-in;
			margin: 150px auto;
			width: 600px;
			display: flex;
			flex-direction: column;
			gap: 0;
			margin: 0;
			padding: 0;


		}

		[class*="elementor"] .hero-content:hover {
			background-color: rgba(255, 255, 255, 0.90);
		}

.phone-hero {
	display: none;

	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	margin: 0;
	padding:  100px 40px 0;
  }

.phone-hero .hero-content{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

/*decoration*/
.deco-bg {
	z-index: -1;
	padding: 0;
	margin: -300px auto;
	width: 100%;
}

.deco-bg img {
	height: 300px;
	width: auto;
}

/*===============================================
----> SECTION 
===============================================*/

	/*iddle*/
	[class*="elementor"] .section {
		color: rgba(14, 14, 14, 1);
		background-color: rgba(255, 255, 255, 1);
		/*backdrop-filter: blur(30px);*/
		box-shadow: 0 0 0 4px rgba(57, 138, 136, 1);
		filter: opacity(10);
		transition: all 0.5s ease-in;
		margin: 150px auto;
	}

	/* Au survol */
	[class*="elementor"] .section:hover {
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0 0 0 8px rgba(57, 138, 136, 1);
		filter: opacity(1);
	}

	/* Sections impaires */
	[class*="elementor"] .section.full {
		width: 100%;
	}

	/* Sections paires */
	[class*="elementor"] .section.smal {
		width: 1400px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 50px;
	}

/* Style bulle sur image */
	/*iddle*/


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

----> TEXTE

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/



[class*="elementor"] h1 {
	font-family: "Merriweather", serif;
  	font-optical-sizing: auto;
  	font-weight: 700; /* 300 - 900 | L 300 | M 500 | B 700 */
  	font-style: normal; /* normal - italic  */
  	font-variation-settings: 
    	"wdth" 110;	 /* width 87 - 112 | 100*/
	font-size: 1.8em !important;
	line-height: 2em ;
	letter-spacing: 0.01em ;
	text-transform: capitalize ;
}

[class*="elementor"] .hero h1,
.phone-hero h1 {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600; /* 100 - 900 | L 300 | M 450 | B 600  */
  	font-style: normal;
	letter-spacing: 0.01em ;
	font-size: 30px !important;
	line-height: 35px ;
	text-transform: uppercase ;
	padding: 5px 40px ;
	
}

[class*="elementor"] h2{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600; /* 100 - 900 | L 300 | M 450 | B 600  */
  	font-style: normal;
	letter-spacing: 0.01em ;
	font-size: 1.5em !important;
	line-height: 1.6em ;
	text-transform: uppercase ;
}

[class*="elementor"] h3{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600; /* 100 - 900 | L 300 | M 450 | B 600  */
  	font-style: normal;
	letter-spacing: 0.01em ;
	font-size: 1.2em !important;
	line-height: 1.3em ;
	text-transform: capitalize ;
}

[class*="elementor"] .hero h3,
.phone-hero h3 {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300; /* 100 - 900 | L 300 | M 450 | B 600  */
  	font-style: normal;
	letter-spacing: 0.01em ;
	font-size: 27px !important;
	line-height: 30px ;
	text-transform: uppercase ;
	padding: 5px 40px ;
	
}

[class*="elementor"] .hero h4,
.phone-hero h4  {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600; /* 100 - 900 | L 300 | M 450 | B 600  */
  	font-style: normal;
	letter-spacing: 0.01em;
	font-size: 18px;
	line-height: 24px;
	text-transform: none;
	padding: 5px 40px ;
}

.hero p,
.phone-hero p{
	padding: 5px 40px ;
	font-size: 15px;
	line-height: 20px;

}

p{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300; /* 100 - 900 | L 300 | M 450 | B 600  */
  	font-style: normal;
	letter-spacing: 0.01em;
	font-size: 0.9em;
	line-height: 1.8em;
	text-transform: none;
}

em{
	font-family:inherit;
	font-optical-sizing: auto;
	font-weight: inherit; /* 100 - 900 | L 300 | M 450 | B 600  */
  	font-style: italic;
	letter-spacing: inherit;
	font-size: inherit;
	line-height: inherit;
	text-transform: inherit;
	color: rgba(57, 138, 136, 1);
}

[class*="elementor-kit"] p a {
	box-shadow: 0 0 0 0 rgba(57, 138, 136, 1);
	font-family: inherit;
	font-optical-sizing: auto;
	font-weight: 500; /* 100 - 900 | L 300 | M 450 | B 600  */
  	font-style: normal;
	letter-spacing: 0.01em;
	font-size: inherit;
	line-height: inherit;
	text-transform: none;
}

[class*="elementor-kit"] p a:hover {
	transform: translate(0px, 2px);
	box-shadow: 0 2px 0 0 rgba(57, 138, 136, 1);
	font-family: inherit;
	font-optical-sizing: auto;
	font-weight: 600; /* 100 - 900 | L 300 | M 450 | B 600  */
  	font-style: normal;
	letter-spacing: 0em;
	font-size: inherit;
	line-height: inherit;
	text-transform: none;
}


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

----> MENU

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/


/*===============================================
----> MENU BURGER NAVIGATION
===============================================*/

#headerTEL{
	display: none;
}
[class*="elementor-kit"] .burger {
	display: flex;
	width: 100%;
	position: sticky;
	top: 0px;
	z-index: 99;
	height: 0px;

	margin: 0px 0 -100px 0;
	padding: 0px 0 0 0;
	pointer-events: none;
	/*border: solid 1px blue;*/
}

[class*="elementor-kit"] .burger div{
	display: grid;
	grid-template-columns: 1fr 100px; /* logo 200, menu espace reste */
	grid-template-rows: 100px;
	align-items: center;
	gap: 0;

	width: 100%;
	height: 100px;

	margin: 0px;
	padding: 0px;
	pointer-events: none;
	/*border: solid 1px red;*/
}

[class*="elementor-kit"] .burger div .burger-wrapper{
	display: flex;
	grid-row: 1 / span 1;
	grid-column: 2 / span 1;
	margin: 0px;
	padding: 0;
	/*border: solid 1px violet;*/
	width: 102px;
	height: 102px;

	align-items: flex-start;
	justify-content: flex-end;
	flex-direction: row;
	pointer-events: all;
	cursor: pointer;
}


#burgerIcon{
	padding: 20px 20px;
	width: 80px;
	height: 80px;
	/*border: solid 1px green ;*/
	transition: all 0.2s ease ;
	pointer-events: all;
	
} 

[class*="elementor-kit"] .burger div .phone-menu-wrapper{
	display: flex;
	grid-row: 1 / span 1;
	grid-column: 1 / span 1;
	margin: 0px;
	padding: 10px ;
	/*border: solid 1px violet;*/
	width: auto;
	height: auto;
	gap: 50px;

	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	height: 0px;

	position: relative;
	pointer-events: none;
}

.menuFlotant {
  	display: flex;
  	align-items: flex-start;   /* aligne sur la gauche */
  	justify-content: flex-start; /* aligne en haut */
  	flex-direction: column;

  	padding: 0px;
  	margin: 0;
	pointer-events: none;

  	/*border: solid 1px violet;*/
  	position: relative;
  	max-height: 90vh;     /* limite la hauteur */
  	overflow-y: visible;     /* scroll uniquement vers le bas */
}

.menuFlotant ul {
	position: absolute;
  	top: 0;
  	left: 0;
  
	margin: 0;
  	padding: 0px;

  	display: flex;
  	flex-direction: column;
	flex-wrap: nowrap;
  	gap: 0px;
  	align-items: flex-start;   /* fer li à gauche */
  	justify-content: flex-start; /* commence en haut */

  	max-width: 400px;

  	background-color: rgba(255, 255, 255, 0.9);
  	box-shadow: 0 0 0 4px rgba(57, 138, 136, 1), 0 0px 40px 0px rgba(14, 14, 14, 0.5);
  	backdrop-filter: blur(10px);
	pointer-events: all;
}

.menuFlotant a {
	padding: 20px 40px;
	width: 100%;
	height: 80px;

	box-shadow: 0px 31px 0 -30px rgba(14, 14, 14, 1);

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.menuFlotant a span{
	color: rgba(14, 14, 14, 1);
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.01em;
}
.menuFlotant a:hover span{
	color: rgba(14, 14, 14, 1);
	font-weight: 600; 
}


.menuFlotant a:last-child {
	background-color: rgba(57, 138, 136, 1);
	box-shadow: none;
}
.menuFlotant a:last-child span{
	color: rgba(255, 255, 255, 0.80);
	font-weight: 500; 
}

.menuFlotant a:last-child:hover span{
	color: rgba(255, 255, 255, 0.80);
	font-weight: 700;
	letter-spacing: 0.00em; 
}



/*===============================================
----> MENU NAVIGATION PC
===============================================*/

#headerPC {
	display: grid;
}

[class*="elementor-kit"] .header {
	/*border: solid red 1px;*/
	grid-template-columns: 200px 1fr; /* logo 200, menu espace reste */
	grid-template-rows: 60px 0px;
	align-items: center;
	gap: 0;

	position: sticky;
	top: 10px;
	z-index: 99;
	height: 70px;

	width: 1400px;
	margin: 40px auto 0 auto;
	padding-top: 0px;
}

/* Reset des wrappers Elementor */
[class*="elementor-kit"] .header .e-flex,
[class*="elementor-kit"] .header .e-con,
[class*="elementor-kit"] .header .e-con-inner {
	all: unset;         /* ✨ reset complet */
	display: contents;  /* ✨ ne perturbent plus le layout */
}

/*burger zone*/ 

/* Logo zone */
[class*="elementor-kit"] .header .logo-menu {
	grid-column: 1 / span 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

[class*="elementor-kit"] .header .logo-menu img {
	height: auto;
	width: 200px;
	/*background-color:rgba(14, 14, 14, 0.5) ;
	box-shadow: 0 0 20px 20px rgba(14, 14, 14, 0.5);*/
	filter:  drop-shadow(0 0 40px rgba(14, 14, 14, 1)) drop-shadow(0px 0px 20px rgba(14, 14, 14, 1)) ;
}

[class*="elementor-kit"] .header .logo-menu:hover img {
	/*background-color:rgba(14, 14, 14, 0.5) ;
	box-shadow: 0 0 20px 20px rgba(14, 14, 14, 0.5);*/
	transform: translate(-1px , -2px);
	filter: drop-shadow(5px 8px 30px rgba(14, 14, 14, 1)) drop-shadow(2px 4px 15px rgba(14, 14, 14, 1)) !important;
}

/* Menu zone */
[class*="elementor-kit"] .header .menu-wrapper {
	grid-column: 2 / span 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

[class*="elementor-kit"] .menu {
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0px;
	height: 40px;
	backdrop-filter: blur(10px);

	background-color: rgba(255, 255, 255, 0.90);
	box-shadow: 0 0 0 4px rgba(57, 138, 136, 1) , 0 0px 40px 0px rgba(14, 14, 14, 0.5);
	position: relative;
	z-index: 99;
}

[class*="elementor-kit"] .menu:hover {
	background-color: rgba(255, 255, 255, 1);
}

/* Déco zone */

[class*="elementor"] .header .deco-wrapper{
	grid-row: 2 / span 1 !important;
	grid-column: 2 / span 1 !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: flex-end !important;
	align-items: flex-start !important;
	overflow: visible !important;
	padding: 0 !important;
	margin: 0 !important;
}

[class*="elementor"] .header .deco-wrapper img{
	display: flex;
	z-index: 98;
	height: 80px ;
	margin: -40px -100px 0 50px;
	filter:  drop-shadow(0 0 40px rgba(14, 14, 14, 1)) drop-shadow(0px 0px 20px rgba(14, 14, 14, 1)) ;
}

/*element du menu*/

[class*="elementor-kit"] .menu .elementor-widget-container{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;

}

[class*="elementor-kit"] .menu ul{
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 0px;
	height: 40px;
}

[class*="elementor-kit"] .menu ul li{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 15px;
	height: 40px;
	box-shadow: 11px 0px 0 -10px rgba(14, 14, 14, 1);

}

[class*="elementor-kit"] .menu ul li a{
	margin: 0;
	padding: 0;
}

[class*="elementor-kit"] .menu ul li a span{
	font-family: montserrat;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	color: rgba(14, 14, 14, 1);
	font-weight: 400;
	letter-spacing: 0.01em;
}

[class*="elementor-kit"] .menu ul li:hover a span{
	font-weight: 600 ; 
	letter-spacing: -0.01em;
}



[class*="elementor-kit"] .menu ul li:last-child {
	box-shadow: 0 0 0 0 rgba(14, 14, 14, 0);
	background-color: rgba(57, 138, 136, 1);
}

[class*="elementor-kit"] .menu ul li:last-child a span{
	color: rgba(255, 255, 255, 1);
}



/*===============================================
----> FOOTER
===============================================*/

.footer {
 color: white;
}

.footer a {
 color: white;
 box-shadow: 0 0px 0 0 white;
}

.footer a:hover{
 color: white;
 box-shadow: 0 2px 0 0 white !important;
}

/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

----> BOUTON

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

/*===============================================
----> BOUTON 
===============================================*/

	/*iddle*/

	[class*="elementor-kit"] .bouton{
		background-color: rgba(255, 255, 255, 0.95);
		box-shadow: 0 0px 0 2px rgba(57, 138, 136, 1);
		border-radius: 0;

		overflow: hidden;
		border:none;

		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		gap:20px;
		align-items: center;
		justify-content: flex-start;

		height: 40px;
		padding: 0;
		width: 100%;
		cursor: pointer;

	}

	[class*="elementor-kit"] .bouton p{
		display: flex;
		padding-left: 20px;
		color: rgba(57, 138, 136, 1);
		

		font-weight: 450; /* 100 - 900 | L 300 | M 450 | B 600  */
		letter-spacing: 0.01em;
		font-size: 1.1em;
		line-height: inherit;
		text-transform: capitalize;
	}

	[class*="elementor-kit"] .bouton img{
		width: auto;
		display: flex;
		flex-shrink: 0 !important;
		
	}

	[class*="elementor-kit"] .bouton .arrow {
		height: 30px;
		flex-shrink: 0 !important;
	}

	[class*="elementor-kit"] .bouton .arrow img{
		height: 30px;
		aspect-ratio: 22 / 48 !important ;
		transition: transform 0.5s cubic-bezier(0.2, -0.5, 0, 2);
		flex-shrink: 0 !important;
	}

	[class*="elementor-kit"] .bouton .bg-deco-btn{
		height: 41px;
		flex-shrink: 0 !important;
	}

	[class*="elementor-kit"] .bouton .bg-deco-btn img{
		height: 41px;
		aspect-ratio: 325 / 81 !important ;
		padding-left: 20px;
		flex-shrink: 0 !important;
	}

	/*survol*/
	[class*="elementor-kit"] .bouton:hover{
		background-color: rgba(57, 138, 136, 1);
		box-shadow: 0 0px 0 2px rgba(57, 138, 136, 1);
	}

	[class*="elementor-kit"] .bouton:hover p{
		color: rgba(255, 255, 255, 1);
	}

	[class*="elementor-kit"] .bouton:hover .arrow img{
		transform: translate(10px, 0);
		filter: brightness(400%) saturate(0%);
	}

	[class*="elementor-kit"] .bouton:hover .bg-deco-btn img{
	filter: blur(20px);
	}

/*===============================================
----> BOUTON CTA
===============================================*/

	/*iddle*/

		[class*="elementor-kit"] .CTA{
			background-color: rgba(57, 138, 136, 1);
			box-shadow: 0 0px 0 2px rgba(57, 138, 136, 1);
			border-radius: 0;

			overflow: hidden;
			border:none;

			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			gap:20px;
			align-items: center;
			justify-content: flex-start;;

			height: 40px;
			padding: 0;
			width: 100%;
			cursor: pointer;
		}

		[class*="elementor-kit"] .CTA p{
			display: flex;
			padding-left: 20px;
			color: rgba(255, 255, 255, 1);

			font-weight: 600; /* 100 - 900 | L 300 | M 450 | B 600  */
			letter-spacing: 0.01em;
			font-size: 1.1em;
			line-height: inherit;
			text-transform: uppercase;
		}

		[class*="elementor-kit"] .CTA img{
			width: auto;
			display: flex;
		}

		[class*="elementor-kit"] .CTA .arrow img{
			height: 30px;
			transition: transform 0.5s cubic-bezier(0.2, -0.5, 0, 2);
		}

		[class*="elementor-kit"] .CTA .bg-deco-btn {
			margin-left: auto;
		}

		[class*="elementor-kit"] .CTA .bg-deco-btn img{
			transition: transform 0.5s cubic-bezier(0.2, -0.5, 0, 2); 
			height: 41px;
			padding-right: 20px;
			justify-self: flex-end;
		}

	/*survol*/
		[class*="elementor-kit"] .CTA:hover{
			color: rgba(255, 255, 255, 0.95);
		}

		[class*="elementor-kit"] .CTA:hover p{
			font-weight: 600; /* 100 - 900 | L 300 | M 450 | B 600  */
			letter-spacing: 0.05em;
		}

		[class*="elementor-kit"] .CTA:hover .arrow img{
			transform: translate(10px, 0);
		}

		[class*="elementor-kit"] .CTA:hover .bg-deco-btn img{
			transform: scale(1.08) translate(3px,0);
		}

/*CTA icone*/

	.CTA-wrapper{
    	position: relative;
    	display: inline-block; /* auto adapte taille du bouton */
		overflow: visible;
		margin: 0 0;
		padding: 0 0;
	}

	[class*="elementor-kit"] .icon-CTA{
		position: absolute ;
    	top: 20%; /* Centré verticalement */
    	right: -10px; 
    	transform: translateY(-50%); /* centrage parfait */
    	z-index: 10;
    	width: 80px ; 
    	height: auto;
    	pointer-events: none; /* !conflits clic */
	}

		[class*="elementor-kit"] .icon-CTA img {
		filter: none;
		transition: transform 0.5s cubic-bezier(0.2, -0.5, 0, 2); 
	}

	[class*="elementor-kit"] .CTA:hover ~ .icon-CTA img {
		filter: none;
		transform: translate(2px, -5px) scale(1.1);
	}


	img{
		transition: all 0.5s ease-in-out !important;
	}

	img:hover{
		filter: brightness(0.98) contrast(1.05) !important;
	}



/*===============================================
----> FORMULAIRE
===============================================*/

/*--------------organisation----------------*/

/*#FormContact,
#FormContact * {
	/*all: unset;         /* reset TOUT (héritage, box model, typo, etc.) */
	/*display: revert;    /* remet les comportements de base (block, inline, etc.) */
	/*box-sizing: border-box;
}*/

#FormContact form{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	grid-gap: 20px;

	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	margin-top: -25px;

	align-items: center;
	justify-content: center;
	/*border: solid 1px red;*/
}

#FormContact form .formTitre{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	grid-column: 1 / span 2 ;
	grid-row: auto / span 1 ;

	width: 100%;
	height: auto;
	padding: 10px 0 0 0;
	margin: 0;

	/*border: solid 1px forestgreen;*/
}

#FormContact form .formHalfL{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	grid-column: 1 / span 1 ;
	grid-row: auto / span 1 ;

	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;

	/*border: solid 1px violet;*/
}

#FormContact form .formHalfR{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	
	grid-column: 2 / span 1 ;
	grid-row: auto / span 1 ;

	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;

	/*border: solid 1px indigo;*/
}

#FormContact form .formFull{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	
	grid-column: 1 / span 2 ;
	grid-row: auto / span 1 ;

	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;

	/*border: solid 1px blue;*/
}


#FormContact form button{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	
	grid-column: 1 / span 2 ;
	grid-row: auto / span 1 ;

	width: 100%;
	margin: 0;
	padding: 10px 20px;
	border-radius: 0;

	background-color: rgba(57, 138, 136, 1);
	box-shadow: 0 0px 0 2px rgba(57, 138, 136, 1);

	color: rgba(255, 255, 255, 1);
	font-weight: 600; /* 100 - 900 | L 300 | M 450 | B 600  */
	letter-spacing: 0.01em;
	font-size: 1.1em;
	line-height: inherit;
	text-transform: uppercase;

	transition: all 0.3s ease !important;
}

#FormContact form button:hover{
	background: none;
	filter: none;
	background-color: rgba(255, 255, 255, 1) !important;
	box-shadow: 0 0px 0 2px rgba(57, 138, 136, 1);

	color: rgba(57, 138, 136, 1);
}

#FormContact form button:active{
	background: none;
	filter: none;
	box-shadow: 0 0px 0 4px rgba(57, 138, 136, 1);

	color: rgba(57, 138, 136, 1);
}

#FormContact label{
	display: none;
	background-color: #e1dbd1;
}

#FormContact textarea,
#FormContact select,
#FormContact input{
	border: none;
	border-radius: 0px;
	outline: none;

	box-shadow: 0 -1px 0 0 rgba(14, 14, 14, 1), 0 1px 0 0 rgba(14, 14, 14, 1);
	background-color: #e1dbd1;

	transition: all 0.3s ease !important;

	color: rgba(14, 14, 14, 1);
	font-weight: 450;
}

#FormContact textarea:hover,
#FormContact select:hover,
#FormContact input:hover{
	border: none;
	border-radius: 0px;
	outline: none;
	
	box-shadow: 0 -2px 0 0 rgba(14, 14, 14, 1), 0 2px 0 0 rgba(14, 14, 14, 1);
	background-color: rgba(255, 255, 255, 1);
}

#FormContact textarea:focus,
#FormContact select:focus,
#FormContact input:focus{
	border: none;
	border-radius: 0px;
	outline: none;

	box-shadow: 0 0px 0 4px rgba(57, 138, 136, 1), 0 0px 0 4px rgba(57, 138, 136, 1);
	background-color:  rgba(255, 255, 255, 1);
}


#FormContact textarea::placeholder,
#FormContact input::placeholder,
#FormContact input::placeholder{
	color: rgba(14, 14, 14, 1) !important;
	font-weight: 400 !important;
}

.wpforms-confirmation-container-full p {
	font-weight: 300 !important;
	color: rgba(255, 255, 255, 1) !important;
}
.wpforms-confirmation-container-full h3 {
	font-family: "Merriweather", serif !important;
	font-weight: 700 !important;
	color: rgba(255, 255, 255, 1) !important;
}

.wpforms-confirmation-container-full {
    background: rgba(14, 14, 14, 1) !important;
    border: none !important;
    box-sizing: border-box;	
	box-shadow: 0 -0px 0 0 rgba(14, 14, 14, 1), 0 px 0 0 rgba(14, 14, 14, 1) !important;
}

.wpforms-confirmation-container-full:hover {
	box-shadow: 0 -2px 0 0 rgba(14, 14, 14, 1), 0 2px 0 0 rgba(14, 14, 14, 1) !important;
}

.square{
	aspect-ratio: 1 / 1;
}

/*===============================================
----> archives
===============================================*/
	 .archive .post {
		padding: 50px;
		margin: 25px;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0 0 0 4px rgba(57, 138, 136, 1);
		display: grid;
		grid-template-columns: 2fr 1fr;
		align-items: flex-start;
		grid-gap: 20px;
	}

	.archive .post:hover {
		box-shadow: 0 0 0 8px rgba(57, 138, 136, 1);
	}

	.archive .post h2 {
		grid-column: 1 / span 2;
		grid-row: 1 / span 1;
		margin: 0;
		padding: 0;
		display: flex;
	}

	.archive .post h2 a {
		color: rgba(14, 14, 14, 1);
	
	}


	.archive .post a{
		overflow: hidden;
	}

	.archive .post a img {   
		display: flex;
		align-items: center;
		justify-self: center;       /* occupe toute la largeur dispo */
		width: 100%;
		aspect-ratio: 1 / 1;      /* carré parfait */
		overflow: hidden;         /* cache ce qui dépasse */
		padding: 0;
		margin: 0;
		grid-column: 1 / span 1;
		grid-row: 2/ span 1;
		object-fit: cover;
		transition: all 0.3s ease !important;
	}
	.archive .post a img:hover{
		transform: scale(1.1);
		filter: grayscale(50%) !important;
	}

	.archive .post p {
		grid-column: 2 / span 1;
		grid-row: 2/ span 1;
		
	}



.toUP-wrapper {
    width: 5vh;
    aspect-ratio: 1 / 1;

	position :fixed;
  	bottom: 2vh;
  	right: 2vh;
  	cursor: pointer;
   	z-index: 99;

	margin: 0;
	padding: 15px;

    display: flex;
    align-items: center;     
    justify-content: center; 

    /*border: solid 1px red;*/
	filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.1)) drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
	transition: all 0.3s ease !important;
	backdrop-filter: blur(3px);
	box-shadow: 0 0 0 4px rgba(57, 138, 136, 1)/*,
	0 1px 0 0 rgba(255, 255, 255, 0.2), inset 0 -5px 5px -5px rgba(255, 255, 255, 0.2),
		1px 0px 0 0 rgba(255, 255, 255, 0.4), inset -5px 0px 5px -5px rgba(255, 255, 255, 0.4) ,
		0 -1px 0 0 rgba(255, 255, 255, 0.8), inset 0 5px 5px -5px rgba(255, 255, 255, 0.4),
		 -1px 0px 0 0 rgba(255, 255, 255, 0.4), inset 5px 0px 5px -5px rgba(255, 255, 255, 0.8)*/;
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 50%;
}

.toUP-arrow { 
	transform: rotate(-90deg) translateX(4px); 
    width: 100%;             
    height: 100%;             
    padding: 0;               
    margin: 0;
}

.toUP-wrapper:hover { 
	box-shadow: 0 0 0 8px rgba(57, 138, 136, 1);
    transform: translateY(-4px); 
    filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.2)) drop-shadow(4px 8px 10px rgba(0, 0, 0, 0.3));
}

.toUP-wrapper:active { 
	box-shadow: 0 0 0 6px rgba(57, 138, 136, 1);
    transform: translateY(-2px); 
    filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.15)) drop-shadow(3px 6px 8px rgba(0, 0, 0, 0.3));
}

/* La section agit comme une "fenêtre" */
.hero {
  position: relative;
  overflow: hidden; /* masque ce qui dépasse */
}

/* La vidéo est fixée en arrière-plan */
.hero video {
  position: fixed;   /* clé pour l'effet parallaxe */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;       /* passe derrière le contenu */
}

/* Contenu par-dessus la vidéo */
.hero-content {
  position: relative;
  z-index: 1;
  color: white; /* exemple */
  padding: 3rem;
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

----> BREAKPOINT 

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

/*===============================================
----> BREAKPOINT 1400px
===============================================*/

@media (max-width: 1400px) {
  #headerPC {
    display: none;   /* cacher menu desktop */
  }

  #headerTEL {
    display: flex;   /* cacher menu desktop */
  }

  .hero{
	min-height: 600px ;
	margin: 150px auto 50px;
  }

  .hero .hero-content{
	display: none;
  }

  .phone-hero {
	display: flex;
	margin: 0 ;
  }

  .section{
	background-color: rgba(255, 255, 255, 1);
  }

  .section.full{
	width: 100%;
	padding: 20px;
	margin-left: 0 ;
	margin-right: 0 ;
  }

  .section.smal{
	max-width: 98%;
	padding: 20px;
	margin-left: auto ;
	margin-right: auto;
  }

  .deco-bg{
	max-width: 90% !important;
	margin-left: au;
	margin-left: auto;
  }

    /*===============================================
----> archives
===============================================*/
	 .archive .post {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		grid-gap: 20px;
	}

	.archive .post h2 {
		width: 100%;
		height: auto;
		display: flex;
	}

	.archive .post a img {   
		display: flex;
		align-items: center;
		justify-self: center;       /* occupe toute la largeur dispo */
		width: 100%;
		aspect-ratio: 1 / 1;      /* carré parfait */
		overflow: hidden;         /* cache ce qui dépasse */
		padding: 0;
		margin: 0;
		object-fit: cover;
		transition: all 0.3s ease !important;
	}
	.archive .post a img:hover{
		transform: scale(1.1);
		filter: grayscale(50%) !important;
	}
}

/*===============================================
----> BREAKPOINT 1000px
===============================================*/

@media (max-width: 1000px) {

  .hero {
    aspect-ratio: 1 / 1;
    min-height: auto;
    width: 100%;
  }

  .toUP-wrapper {
    width: 7vh;
    aspect-ratio: 1 / 1;

	position :fixed;
  	bottom: 2vh;
  	right: 2vh;
  }

  /*FORMULAIRE*/

#FormContact form .formHalfL{
	grid-column: 1 / span 2 ;

}

#FormContact form .formHalfR{
	grid-column: 1 / span 2 ;
}
  /* CORRECTION SECTIONS SMAL */
  [class*="elementor"] .section.smal {
    max-width: 100% !important;          /* ✅ Au lieu de 98% */
    width: 100% !important;              /* ✅ Force 100% de largeur */
    padding: 10px !important;            /* ✅ Réduit le padding */
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* CORRECTION SPÉCIFIQUE POUR BOUTONS DANS .section.smal */
  [class*="elementor"] .section.smal [class*="elementor-kit"] .bouton {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 10px !important;       /* ✅ Padding réduit */
    margin: 0 !important;
    position: relative !important;       /* ✅ Pour le positionnement de la déco */
  }

  [class*="elementor"] .section.smal [class*="elementor-kit"] .bouton p {
    max-width: calc(100% - 50px) !important; /* ✅ Plus d'espace pour le texte */
    margin-right: 5px !important;        /* ✅ Marge réduite */
    position: relative !important;
    z-index: 2 !important;
  }

  [class*="elementor"] .section.smal [class*="elementor-kit"] .bouton .arrow {
    flex: 0 0 40px !important;           /* ✅ Largeur normale */
    margin-right: 5px !important;        /* ✅ Marge du bord */
    position: relative !important;
    z-index: 2 !important;
  }

  [class*="elementor"] .section.smal [class*="elementor-kit"] .CTA {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 10px !important;       /* ✅ Padding réduit */
    margin: 0 !important;
    position: relative !important;       /* ✅ Pour le positionnement */
  }

  [class*="elementor"] .section.smal [class*="elementor-kit"] .CTA p {
    max-width: calc(100% - 85px) !important; /* ✅ Plus d'espace */
    margin-right: 5px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  [class*="elementor"] .section.smal [class*="elementor-kit"] .CTA .arrow {
    flex: 0 0 40px !important;
    margin-right: 40px !important;       /* ✅ Pour l'icône */
    position: relative !important;
    z-index: 2 !important;
  }

  [class*="elementor"] .section.smal [class*="elementor-kit"] .icon-CTA {
    right: 15px !important;              /* ✅ Plus de marge */
    width: 25px !important;              /* ✅ Plus petit */
  }

  /* Boutons génériques - CORRECTION */
  [class*="elementor-kit"] .bouton {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* ✅ Changé pour flex-start */
    height: auto !important;
    min-height: 55px !important;
    padding: 10px 15px !important;
    gap: 0px !important;                 /* ✅ Pas de gap, on gère manuellement */
    flex-wrap: nowrap !important;
  }

  [class*="elementor-kit"] .bouton p {
    flex: 1 1 auto !important;           /* ✅ Prend l'espace disponible */
    max-width: calc(100% - 45px) !important; /* ✅ 35px flèche + 10px marge */
    font-size: 1em !important;
    line-height: 1.4em !important;
    margin: 0 !important;
    margin-right: 10px !important;       /* ✅ Espace entre texte et flèche */
    padding-left: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  [class*="elementor-kit"] .bouton .arrow {
    flex: 0 0 35px !important;           /* ✅ Largeur réduite à 35px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;        /* ✅ Pousse vers la droite sans sortir */
  }

  [class*="elementor-kit"] .bouton .arrow img {
    max-height: 28px !important;
    height: auto !important;
    width: auto !important;
  }

  /* CTA - CORRECTION */
  [class*="elementor-kit"] .CTA {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* ✅ Changé pour flex-start */
    height: auto !important;
    min-height: 55px !important;
    padding: 10px 15px !important;
    gap: 0px !important;                 /* ✅ Pas de gap */
    flex-wrap: nowrap !important;
    position: relative !important;
  }

  [class*="elementor-kit"] .CTA p {
    flex: 1 1 auto !important;           /* ✅ Prend l'espace disponible */
    max-width: calc(100% - 40px) !important; /* ✅ 35px flèche + 35px icône + 10px marge */
    font-size: 1em !important;
    line-height: 1.4em !important;
    margin: 0 !important;
    margin-right: 10px !important;       /* ✅ Espace entre texte et flèche */
    padding-left: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  [class*="elementor-kit"] .CTA .arrow {
    flex: 0 0 35px !important;           /* ✅ Largeur réduite à 35px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;        /* ✅ Pousse vers la droite */
    margin-right: 35px !important;       /* ✅ Laisse 35px pour l'icône */
  }

  [class*="elementor-kit"] .CTA .arrow img {
    max-height: 28px !important;
    height: auto !important;
    width: auto !important;
  }

    
    /* Le contenu passe devant */
    [class*="elementor-kit"] .bouton > *:not(.bg-deco-btn),
    [class*="elementor-kit"] .CTA > *:not(.bg-deco-btn) {
      position: relative !important;
      z-index: 2 !important;
    }

  /* Décoration EN ARRIÈRE-PLAN sur mobile - VERSION SIMPLIFIÉE */
  [class*="elementor-kit"] .bouton .bg-deco-btn,
  [class*="elementor-kit"] .CTA .bg-deco-btn {
    display: block !important;           /* ✅ Reste visible sur mobile */
    /* Conserve vos styles existants */
    padding: 0 !important;
    margin: 0px !important;
    object-fit: cover !important;
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;
    opacity: 0.1 !important;
    /* Ajouts pour mobile */
    top: 0 !important;
    right: 0 !important;
    z-index: 1 !important;               /* ✅ Derrière le contenu */
    pointer-events: none !important;     /* ✅ N'interfère pas avec les clics */
    overflow: hidden !important;
  }

  [class*="elementor-kit"] .bouton .bg-deco-btn img,
  [class*="elementor-kit"] .CTA .bg-deco-btn img {
    /* Conserve vos styles existants */
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Ajout pour l'alignement à droite */
    object-fit: cover !important;
    object-position: right center !important;
  }

  /* S'assurer que le texte et la flèche passent devant */
  [class*="elementor-kit"] .bouton p,
  [class*="elementor-kit"] .bouton .arrow,
  [class*="elementor-kit"] .CTA p,
  [class*="elementor-kit"] .CTA .arrow {
    position: relative !important;
    z-index: 2 !important;               /* ✅ Devant la décoration */
  }

  /* Icône CTA - CORRECTION POSITIONNEMENT */
  [class*="elementor-kit"] .icon-CTA {
    position: absolute !important;
    right: -20px !important;              /* ✅ 10px du bord au lieu de 5px */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 60px !important;              /* ✅ Encore plus réduit */
    height: auto !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }

  [class*="elementor-kit"] .icon-CTA img {
    width: 100% !important;
    height: auto !important;
  }

  /* Animation flèche au survol - CORRECTION */
  [class*="elementor-kit"] .bouton:hover .arrow img,
  [class*="elementor-kit"] .CTA:hover .arrow img {
    transform: translateX(5px) !important; /* ✅ Animation réduite pour mobile */
  }

}