.background-light-gray  { background: #efefef; } 
	.background-gradiant-white-gray  {     background-image: linear-gradient(40deg, #ffffff 25%, #efefef 50%);} 
	.background-cool-gray   { background: #444444; } 
	.background-warm-gray   { background: #dedcbd; }
	.background-black       { background: #000000; } 
	.background-bronze      { background: #ce6c42; }
	.background-emerald      { background-color: #E8E1DB; }
	.hero .hero__thumbs .thumb {
		width: 20px;
		height: 5px;
		background: rgb(255 255 255);
		border: none !important;
	}
	.hero .hero__thumbs .thumb.is-active {
		background: #ce6c42;
	}
	.hero .hero__thumbs .thumb img {
		display: none;
	}
	html {
	  scroll-behavior: smooth;              /* smooth natif */
	  scroll-padding-top: 80px;             /* hauteur du header fixe si tu en as un */
	}

	header.main_header {
		transition: all 0.6s 	ease;
	}
	.main-nav-slide {
		transition: inherit;
	}
	header.main_header.sticky {
		background: rgb(0 0 0 / 88%) !important;
	}
	header.main_header.sticky  .main-nav .menu > li > a {
		color: #fff !important;
	}
	header.main_header.sticky  .social_media__wrapper svg path {
		fill: #fff !important;
	}
	header.main_header.sticky .brand__wrapper svg path {
		fill: #fff !important;
	}
	@media (min-width: 961px) {
		.nav-panel {
			display: none;
		}
	}
	@media (max-width: 1024px) {
		.hero .hero__heading .hero__title {
			opacity: 1 !important;
		}
	}
	@media (max-width: 960px) {
		.main-nav-slide {
			background: none;
			width: 34px;
			height: 28px;
			opacity: 1;
			top: 20px;
			left: 20px;
			transform: inherit;
			pointer-events: inherit;
		}
		.main_header {
			backdrop-filter: blur(0);
			background: rgb(0 0 0 / 88%) !important;
		}
	}
	.hero {
		  position: relative;
		  overflow: hidden;
		}

		.slide_x {
		  position: absolute;
		  inset: 0;
		  background-size: cover;
		  background-position: center;
		  opacity: 0;

		  transform: scale(1);
		  transition:
			opacity var(--slide-transition, 800ms) ease-in-out,
			transform 6000ms ease-in-out;
		}

		/* Active slide → zoom in */
		.slide_x.is-active {
		  opacity: 1;
		  transform: scale(1.1);
		}

		/* Keep outgoing slide zoomed until fade finishes */
		.slide_x.is-leaving {
		  transform: scale(1.1);
		}

		/* Smooth zoom animation */
		@keyframes heroZoom {
		  from { transform: scale(1); }
		  to   { transform: scale(1.1); }
		}