/* Texte défilant */

.messagedefilant {
    display: block;
   /* margin: 40px auto; */
    padding: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    max-width: 700px;
    height: 60px;
  }
   
  .messagedefilant div {
    position: absolute;
    min-width: 100%; /* au minimum la largeur du conteneur */
  }
   
  .messagedefilant div span, 
  .messagedefilant div:after {
    position: relative;
    display: inline-block;
    font-size: 1.2rem;
    white-space: nowrap;
    top:0;
    background-color: transparent;
  }
   
  .messagedefilant div span {
    position: absolute;
    animation: defilement 20s infinite linear;
    background: rgb(255, 255, 255);
    background-color: transparent;
  }
   
  .messagedefilant div:after {

    top:0; left:0;
    content:attr(data-text);
    animation: defilement2 20s infinite linear;
    background-color: transparent;
  }
   
  
  .messagedefilant_g {
    display: block;
   /* margin: 40px auto; */
    margin-left: 20px;
    padding: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    max-width: 890px;
    height: 60px;
  }
   
  .messagedefilant_g div {
    position: absolute;
    min-width: 100%; /* au minimum la largeur du conteneur */
  }
   
  .messagedefilant_g div span, 
  .messagedefilant_g div:after {
    position: relative;
    display: inline-block;
    font-size: 1.2rem;
    white-space: nowrap;
    top:0;
    background-color: transparent;
  }
   
  .messagedefilant_g div span {
    position: absolute;
    animation: defilement 20s infinite linear;
    background: rgb(255, 255, 255);
    background-color: transparent;
  }
   
  .messagedefilant_g div:after {

    top:0; left:0;
    content:attr(data-text);
    animation: defilement2 20s infinite linear;
    background-color: transparent;
  }



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


  /* le block conteneur */
  .marquee-rtl {
    max-width: 28em;                      /* largeur de la fenêtre */
   /* margin: 1em auto 2em;*/
    border: none;
    overflow: hidden;                     /* masque tout ce qui dépasse */
   /* box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;*/
  }

  /* le bloc défilant */
  .marquee-rtl > :first-child {
    display: inline-block;                /* modèle de boîte en ligne */
    padding-right: 2em;                   /* un peu d'espace pour la transition */
    padding-left: 100%;                   /* placement à droite du conteneur */
    white-space: nowrap;                  /* pas de passage à la ligne */
    animation: defilement-rtl 20s infinite linear;
  }

  @keyframes defilement-rtl {
    0% {
      transform: translate3d(0,0,0);      /* position initiale à droite */
    }
    100% {
      transform: translate3d(-100%,0,0);  /* position finale à gauche */
    }
  }