@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

.bandeau {
  --Typo:'Oswald', sans-serif; /* Typographie depuis google font */
  --Typo_Taille_Bold: 12pt; /* Taille de la typographie Bold*/
  --Typo_Taille_Light: 30pt; /* Taille de la typographie Light*/
  --Typo_Couleur : #174d06; /* Couleur de la typographie*/
  --Typo_Bold: 500; /* graisse du Bold */
  --Typo_Light: 200; /* graisse du Light */
  --Vitesse: 20s; /* Vitesse de défillement */
	margin: 20px;
	height:30%;
	width:100%;
  overflow: hidden;
}

.Conteneur{
  /* position: relative; */
	width: 30%;
	height: 100%;
	display:flex;
	flex-direction:column;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

/* Texte défilant */
.messagedefilant {
	margin: auto;
	display: inline-block;
  	width: 100%;
/* Style de texte */
  	font-family: var(--Typo);
  	font-size: var(--Typo_Taille_Bold);
  	color: var(--Typo_Couleur);
}

.bandeauText{ font-weight: var(--Typo_Bold) }

.messagedefilant div {
  position: absolute;
  transform: translateY(-50%);
  min-width: 100%;
}

.messagedefilant div span {
  left:0;
}
	
/* Animation */
.messagedefilant div span:first-child {
  animation: defilement var(--Vitesse) infinite linear; /* Vitesse de défillement !!! les 2 vitesses doivent être identique !!! */
}
 
.messagedefilant div span:last-child {
  position: absolute;
  animation: defilement2 var(--Vitesse) infinite linear; /* Vitesse de défillement !!! les 2 vitesses doivent être identique !!! */
}
 
@keyframes defilement {
  0% { margin-left: 0; }
  100% { margin-left: -100%; }
}
 
@keyframes defilement2 {
  0% { margin-left: 100%; }
  100% { margin-left: 0%; }
}