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

   /* récupère une Typographie depuis google font :
https://fonts.google.com/
*/
   /* test du css le 9 mai 2025 sur safari opera google chrome edge firefox */
   /* Site pour choisir une couleur en hexadécimal :
https://htmlcolorcodes.com/fr/selecteur-de-couleur/
*/
   /* Texte défilant */
   .messagedefilant {
       font-family: 'Oswald', sans-serif;
       display: block;
       margin: auto;
       padding: 0;
       overflow: hidden;
       position: relative;
       width: 100%;
       max-width: 100%;
       height: 60px;
       --Couleur_de_fond: rgb(173 181 180 / 17%);
   }

   .messagedefilant div {
       position: absolute;
       min-width: 100%;
       /* au minimum la largeur du conteneur */
       background-color: var(--Couleur_de_fond);
       font-weight: 400;
   }

   .messagedefilant div span,
   .messagedefilant div:after {
       position: relative;
       display: inline-block;
       font-size: 30pt;
       white-space: nowrap;
       top: 0;
   }

   .messagedefilant div span {
       animation: defilement 20s infinite linear;
       /* background: #cde;*/
       font-weight: 400;
   }

   .messagedefilant div span b {
       font-weight: 400;
   }

   .messagedefilant div span i {
       font-size: 30pt;
       font-style: normal;
       /* enlève l'italic de la balise i */
       font-weight: 200;
       color: rgb(233, 135, 7);
   }

   .messagedefilant div:after {
       position: absolute;
       top: 0;
       left: 0;
       content: attr(data-text);
       animation: defilement2 20s infinite linear;
       /*background: #edc;*/
   }

   @keyframes defilement {
       0% {
           margin-left: 0;
       }

       100% {
           margin-left: -100%;
       }
   }

   @keyframes defilement2 {
       0% {
           margin-left: 100%;
       }

       100% {
           margin-left: 0%;
       }
   }