@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
:root{
	--main-black: rgba(0,0,0, 1);
	--main-white: rgba(255,255,255,1);
	--primary-color: rgba(170, 215, 220, 1);
	--active-hover: rgba(255, 153, 0,1)
}
.tickercontainer {
	position: absolute;
	width: 590px;
	height: 25px;
	line-height: 25px;
	top: 0px;
	left: 313px;
	overflow: hidden;
}

.tickercontainer .mask {
	/* that serves as a mask. so you get a sort of padding both left and right */
	margin-right: 0px;
	width: 718px;
	overflow: hidden;
}

ul.newsticker {
	/* that's your list */
	position: relative;
	left: 750px;
	font: bold 10px "Lato";
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul.newsticker li {
	float: left;
	/* important: display inline gives incorrect results when you check for elem's width */
	margin: 0;
	padding: 0;
	/*background: #fff;*/
	font-size: 15px;
}
ul.newsticker a {
	text-decoration: underline;
	white-space: nowrap;
	padding: 0;
	color: #735073;
	margin: 0 50px 0 0;
	font-size: 15px;
	font-style: italic;
}

ul.newsticker span {
	margin: 0 10px 0 0;
	color: #005FA7;
}
/* Container pour l'effet de défilement */
.tickercontainer {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
/* Le texte dans le conteneur doit défiler */
.mask {
    display: inline-block;
    animation: scroll 3s linear infinite;  /* Animation pour faire défiler */
}
/* Conteneur pour le texte défilant */
.tickercontainer {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

/* Le texte défilant */
.mask {
    display: inline-block;
    animation: scroll-text 10s linear infinite;
}

/* Animation du texte défilant */
@keyframes scroll-text {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
/* Animation de défilement de droite à gauche */
@keyframes scroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}