/* règles */
    @font-face {
         font-family: "NUM";
         src: url("/fonts/STENCIL.TTF") format("truetype");
        }
    @font-face {
         font-family: "Material Icons";
         src: url("/fonts/MaterialIcons-Regular.ttf") format("truetype");
        }
        @keyframes tourne {
            0%, 100% {
            -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
            }
            50% {
            -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
            }
        }
        @keyframes defile {
            0% {
            -webkit-transform: translate(-15px);
            transform: translate(-15px);
            }
            100% {
            -webkit-transform: translate(-1500px);
            transform: translate(-1500px);
            }
        }


    /* Texte défilant */
    .messagedefilant {
        display: block;
        margin:0;
        overflow: hidden;
        position: relative;
        height:40px;
        font-family: "NUM";
        background-color: royalblue;
        color: white;
        padding: 3px;
        border-radius: 10px;
        border-style: solid;
        border-color: blue;
        border-width: 5px;
        overflow: hidden;
        vertical-align: middle;
        white-space: nowrap;
        text-align: left;
    }

    .num {
        font-family: "NUM";
        background: #FFE500;
        padding: 50px;
        border-radius: 3px 0px 0px 0px;
        border-style: solid;
        border-color: black;
        border-width: 5px;
        text-align: center;
        overflow: hidden;
        vertical-align: middle;
        white-space: nowrap;
   }


    .messagedefilant div {
      position: absolute;
      min-width: 100%; /* au minimum la largeur du conteneur */
    }
     
    .messagedefilant div span {
      position: relative;
      top:0; left:0;
      display: inline-block;
      white-space: nowrap;
    }
     
    .messagedefilant div span:first-child {
      animation: defilement 15s infinite linear;
    }
     
    .messagedefilant div span:last-child {
      position: absolute;
      animation: defilement2 15s infinite linear;
    }
 
    @keyframes defilement {
      0% { margin-left: 0; }
      100% { margin-left: -100%; }
    }
     
    @keyframes defilement2 {
      0% { margin-left: 100%; }
      100% { margin-left: 0%; }
    }



    .centree {
          display: block;
          margin-left: auto;
          margin-right: auto;
          width: 100%;
          /*max-width:400px;*/
          text-align:center;
          }
    .haut {
          display: block;
          margin-left: auto;
          margin-right: auto;
          width: 70%;
          max-width: 280px;
          }
    .logos {
        width: 95%;
        height: auto;
     }
    .div-image {
        display: inline-block;
        width: 15%;
        max-width:60px;
        height: auto;
    }

    /* effets */
    .pendule {
        margin-top:-50px;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        transform-origin: center top;
        animation: tourne  3s infinite;
    }

    .texte {
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        animation: defile  15s infinite;
    }



    

}