.menu-nav img {
    font-size: 50% !important;
}

.wrapper{
  display: flex;
  
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
}

.img-box{
    justify-content: center;
    align-items: center;
    margin: auto;
    display: flex;
}

.image1{
    position: relative;
    transition: 0.5s ease-in-out;
}

.image2{
    position: absolute;
    transition: 0.5s ease-in-out;
    opacity: 0;
}

.img-box:hover .image1{
  opacity: 0;
}

.img-box:hover .image2{
   opacity: 100%;
}

.watermark{
    position: absolute;
    margin-top: 25rem;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

/*  pour controler le logo  */

.logo-acc {
    /* LOGO PRINCIPAL */
    max-width: 30%; /* Largeur maximale logo 100% */
    width: 300px; /* Fixer Largeur du logo - Hauteur automatique */
    display: block; /* Affichage en bloc */
    margin: 0 auto; /* Centrage horizontal */
}

.logo-acc-mob {
    /* LOGO MENU MOBILE */
    max-width: 30%; /* Largeur maximale logo 100% */
    width: 150px; height: auto; /* Fixer Largeur du logo - Hauteur automatique */
    margin-right: 0px; /* Espace à droite de 15px */
    display: inline-block; /* Affichage en ligne bloc */
    margin: 0; /* Aucun espace supplémentaire */
}


.menu-nav a {
    font-size: 80% !important;
}

.logo {
    width: 200px; !important
}

/*  IMAGES WEAVER COMPARATEUR  */


#overlay:hover{
	cursor: ew-resize;
}

#overlay-image {
    width: 50%;
    height: 100%;
    background-repeat: no-repeat;
    background: none;
    background-image: url('https://raw.githubusercontent.com/numerimondes/branding/main/Produits/weaver/showcase/presenter/weaver-before.png');
    background-size: cover;
    border-right: 1px solid gray;
}

#overlay {
    aspect-ratio: 16/9;
    height: 90%;
    border: 1px solid blue;
    border-radius: 20px;
    overflow: hidden;
    background: none;
    background-image: url('https://raw.githubusercontent.com/numerimondes/branding/main/Produits/weaver/showcase/presenter/weaver-after.png');
    background-size: cover;
}


/*	CURRENT MAX WIDTH IS JUST FOR DEMO PURPOSES */
.tag-scrollers {
	width: 100%;
	max-width: 1200px;
	overflow: hidden;
}

/*	POSSIBLY UPDATE COLORS IN THE GRADIENT
		TO MATCH THE PROJECTS DESIGN SYSTEM
*/
.tag-scroller {
	display: grid;
	gap: 1.5rem;
	mask: linear-gradient(90deg, #0000, var(--background) 15%, var(--background) 85%, #0000);
}

.tag-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	/*	IF THE GAP IS CHANGED, DON'T FORGET TO CHANGE 
			THE TRANSFORM VALUE IN THE SCROLL ANIMATION
			AT THE END OF THE STYLING
	*/
	gap: 1.5rem;
}

/*	IF THE USERS PREFERS REDUCED MOTION
		PRESENT THEM WITH A HOROZONTAL LIST
		OF ALL ELEMENTS AND GIVE THEM THE
		OPTION TO MANUALLY SCROLL BY SWIPING
*/
@media (prefers-reduced-motion) {
	.tag-list {
		flex-flow: row nowrap;
		overflow: auto;
		scrollbar-width: none;
		scrollbar-color: transparent transparent;
	}
	.tag-list::-webkit-scrollbar-track {
		background: transparent;
	}
	.tag-list::-webkit-scrollbar-thumb {
		background: transparent;
	}
	.tag-list::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
}

/*	BASIC STYLING OF THE LIST ITEMS
		FOR DEMO PURPOSES. MOST PROPERTIES
		SHOULD BE KEPT AS IS BUT PROBABLY
		UPDATE THE VALUE FOR font-family
		AND border
*/
.tag-list li {
	font-family: system-ui;
	font-size: 1.125rem;
	line-height: 1;
	padding: 0.625rem 1.375rem;
	border: 2px solid black;
	border-radius: 10ch;
	white-space: nowrap;
}

/*	THE DURATION IS SET FROM A CUSTOM PROPERTY
		CALCULATED IN THE SCRIPT AS IT'S ONLY NEEDED
		IF THE ANIMATION SHOULD RUN, WHICH IS ALSO
		CHECKED BY THE SCRIPT

		THE DIRECTION IS SET TO normal AS DEFULT
		AND THEN SET TO reverse	FOR EVERY OTHER SCROLLER
*/
.tag-scroller.scrolling .tag-list {
	width: max-content;
	flex-wrap: nowrap;
	animation: horizontal-scroll var(--duration) var(--direction, normal) linear infinite;
}

.tag-scroller.scrolling .tag-list:nth-child(even) {
	--direction: reverse;
}

/* PAUSING THE ANIMATION ON HOVER */
.tag-scroller:hover .tag-list {
	animation-play-state: paused;
}

@keyframes horizontal-scroll {
	to {
		/*	0.75rem FOR HALF THE GAP
				OF THE .tag-scroller
		*/
		transform: translateX(calc(-50% - .75rem));
	}
}
:root {
	--dark: #252A2E;
	--light: #F5F5F5;
	--background: var(--light);
	--text: var(--dark);
	--border: var(--dark);
}