/*
 
==================================
Ratchet v1.0.0
Placé sous la licence du MIT
http://opensource.org/licenses/MIT
==================================
 
 */

@font-face {
  font-family: "Avenir";
  src: local("☺"), url("../polices/AvenirLTStd-Light.otf") format("otf");
}

/* Empêche la taille du texte iOS ajuster après un changement d'orientation , sans désactiver */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Styles de base
-------------------------------------------------- */

/* Wrapper pour être utilisé dans tous les contenus pas dans .bar - titre et .bar - onglet */
.content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*background-color: #F0F0F0;*/

  background: #c5ae87;
  background-color: #f7e7ce;
  background-image: -webkit-radial-gradient(circle, #f7e7ce, #c5ae87);
  background-image: -o-radial-gradient(circle, #f7e7ce, #c5ae87);
  background-image: -ms-radial-gradient(circle, #f7e7ce, #c5ae87);
  background-image: -moz-radial-gradient(circle, #f7e7ce, #c5ae87);
  background-image: radial-gradient(circle, #f7e7ce, #c5ae87);

  /*  cursor: url("cursor.png"), pointer;*/

  overflow: auto;
  -webkit-transition-property: top, bottom;
  transition-property: top, bottom;
  -webkit-transition-duration: 0.2s, 0.2s;
  transition-duration: 0.2s, 0.2s;
  -webkit-transition-timing-function: linear, linear;
  transition-timing-function: linear, linear;
  -webkit-overflow-scrolling: touch;
}

/* Hack pour forcer tous les éléments relativement et absolument positionnés encore fonctionnels pendant le défilement
  Note: Ceci est un bug pour "-webkit-overflow-scrolling: touch" */
.content > * {
  -webkit-transform: translateZ(0px);
  transform: translateZ(0px);
}

/* Styles de la barre générales
-------------------------------------------------- */

[class*="bar-"] {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  height: 44px;
  padding: 5px;
  box-sizing: border-box;
}

/* Title bar
-------------------------------------------------- */

/* Bar fixé au haut de la fenêtre pour montrer le titre de la page et les actions*/
.bar-title {
  top: 0;
  display: -webkit-box;
  display: block;
  background: #181818;
  border-bottom: 1px solid #181818;
  box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, 0.8);
  -webkit-box-orient: horizontal;
  box-orient: horizontal;
  opacity: 0.75;
  /*cursor: url("cursor2.png"), pointer;*/
  box-shadow: -1px 2px 7px 1px rgba(0, 0, 0, 0.7);
  height: 55px;
  box-shadow: -1px 2px 7px 1px rgba(0, 0, 0, 0.7);
}

@media (max-width: 1920px) {
  /* Texte centré dans la .bar-title */
  .title {
    display: block;
    height: 42px;
    width: auto;
    opacity: 0.9;
    text-align: center;
    margin: auto;
    margin-top: 2px;
  }

  .slogan {
    position: absolute;
    top: 0px;
    font-family: "Times";
    opacity: 0.6;
    font-size: 0px;
    left: 80px;
  }

  .barre {
    position: absolute;
    top: 0px;
    left: 57px;
    font-family: "Lucida Console";
    font-size: 0px;
    opacity: 0.2;
  }
}

@media (min-width: 1080px) {
  .shake {
    -webkit-animation: shake 8s linear infinite;
    animation: shake 4s linear infinite;
  }

  @keyframes shake {
    14% {
      transform: translateX(0);
    }
    14.5% {
      transform: translateX(4px);
    }
    15% {
      transform: translateX(0);
    }
    15.5% {
      transform: translateX(4px);
    }
    16% {
      transform: translateX(0);
    }
    16.5% {
      transform: translateX(6px);
    }
    17% {
      transform: translateX(0);
    }
    17.5% {
      transform: translateX(8px);
    }
    18% {
      transform: translateX(0);
    }
    18.5% {
      transform: translateX(6px);
    }
    19% {
      transform: translateX(0);
    }
    19.5% {
      transform: translateX(4px);
    }
    20% {
      transform: translateX(0);
    }
  }

  @-webkit-keyframes shake {
    14% {
      -webkit-transform: translateX(0);
    }
    14.5% {
      -webkit-transform: translateX(3px);
    }
    15% {
      -webkit-transform: translateX(0);
    }
    15.5% {
      -webkit-transform: translateX(4px);
    }
    16% {
      -webkit-transform: translateX(0);
    }
    16.5% {
      -webkit-transform: translateX(6px);
    }
    17% {
      -webkit-transform: translateX(0);
    }
    17.5% {
      -webkit-transform: translateX(8px);
    }
    18% {
      -webkit-transform: translateX(0);
    }
    18.5% {
      -webkit-transform: translateX(6px);
    }
    19% {
      -webkit-transform: translateX(0);
    }
    19.5% {
      -webkit-transform: translateX(4px);
    }
    20% {
      -webkit-transform: translateX(0);
    }
  }

  [class*="bar-"] {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 10;
    height: 56px;
    padding: 5px;
    box-sizing: border-box;
  }

  .title {
    position: absolute;
    display: block;
    height: 45px;
    width: auto;
    opacity: 0.8;
    top: 3px;
    left: 20px;
  }
  .title:hover {
    position: absolute;
    display: block;
    height: 45px;
    width: auto;
    opacity: 1;
    top: 3px;
    left: 20px;
  }

  .slogan {
    width: 300px;
    height: 45px;
    margin-left: 28px;
    margin-top: 5px;
    opacity: 0.6;
    font-size: 20px;
    left: 65px;
    text-shadow: 0 -1px 3px rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    border: 0px solid #000;
    color: #fff;
    font-family: "Times";
    font-style: italic;
  }

  .slogan i {
    position: absolute;
    left: 5px;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    transform: translateX(100%);
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);

    animation: droite 10s ease infinite;
    -moz-animation: droite 10s ease infinite;
    -webkit-animation: droite 10s ease infinite;
  }

  /* ==================================
     Bouger le Marquee vers la droite
     ================================== */

  /* Keyframes Mozilla Firefox */

  @-moz-keyframes droite {
    0% {
      -moz-transform: translateX(-100%);
    }
    25% {
      -moz-transform: translateX(5px);
    }
    50% {
      -moz-transform: translateX(5px);
    }
    75% {
      -moz-transform: translateX(5px);
    }
    100% {
      -moz-transform: translateX(-100%);
    }
  }

  /* Keyframes Webkit */

  @-webkit-keyframes droite {
    0% {
      -webkit-transform: translateX(-100%);
    }

    25% {
      -webkit-transform: translateX(5px);
    }
    50% {
      -webkit-transform: translateX(5px);
    }
    75% {
      -webkit-transform: translateX(5px);
    }
    100% {
      -webkit-transform: translateX(-100%);
    }
  }

  .barre {
    position: absolute;
    top: 10px;
    left: 80px;
    font-family: "Lucida Console";
    font-size: 40px;
    color: #fff;
    opacity: 0.2;
    white-space: nowrap;
    text-shadow: 0 -1px 3px rgba(255, 255, 255, 0.5);
    overflow: hidden;
  }

  .barre {
    transform: translateY(0%);
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
  }
  .barre {
    animation: bas 2s 1;
    -moz-animation: bas 2s 1;
    -webkit-animation: bas 2s 1;
  }

  /*================================
     Bouger le Marquee vers le bas
     ==================================*/

  /** Keyframes Mozilla Firefox **/
  @-moz-keyframes bas {
    0% {
      -moz-transform: translateY(-200%);
    }
    25% {
      -moz-transform: translateY(0%);
    }
    50% {
      -moz-transform: translateY(0%);
    }
    75% {
      -moz-transform: translateY(0%);
    }
    100% {
      -moz-transform: translateY(0%);
    }
  }

  /** Keyframes Webkit **/
  @-webkit-keyframes bas {
    0% {
      -webkit-transform: translateY(-200%);
    }
    25% {
      -webkit-transform: translateY(0%);
    }
    50% {
      -webkit-transform: translateY(0%);
    }
    75% {
      -webkit-transform: translateY(0%);
    }
    100% {
      -webkit-transform: translateY(0%);
    }
  }
}