/* Audience — vivre-orleans.fr : bandeau en biais, coin haut gauche, sur toutes les pages. */
.vo-ruban {
  position: absolute; top: 0; left: 0; width: 170px; height: 170px; overflow: hidden;
  z-index: 99990; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.vo-ruban.is-on  { opacity: 1; }
.vo-ruban.is-off { display: none; }
.vo-ruban__bande {
  position: absolute; top: 38px; left: -56px; width: 240px; padding: 8px 0 9px;
  transform: rotate(-45deg); transform-origin: center;
  background: #bf0a37; color: #fff; text-align: center; line-height: 1.05;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  pointer-events: auto; cursor: default;
}
.vo-ruban__n { display: block; font: 500 24px/1 Oswald, sans-serif; letter-spacing: .02em; }
.vo-ruban__t { display: block; margin-top: 3px; font: 600 10px/1.2 "Open Sans", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 600px) {
  .vo-ruban { width: 124px; height: 124px; }
  .vo-ruban__bande { top: 27px; left: -44px; width: 180px; padding: 6px 0 7px; }
  .vo-ruban__n { font-size: 18px; }
  .vo-ruban__t { font-size: 8px; }
}
@media (max-width: 420px) {   /* le titre « VIVRE ORLÉANS » commence à ~90 px à 320 px de large : le bandeau doit rester en deçà */
  .vo-ruban { width: 100px; height: 100px; }
  .vo-ruban__bande { top: 17px; left: -38px; width: 150px; padding: 4px 0 5px; }
  .vo-ruban__n { font-size: 15px; }
  .vo-ruban__t { font-size: 7px; letter-spacing: .05em; }
}
@media (prefers-reduced-motion: reduce) { .vo-ruban { transition: none; } }