/**
 * FILAIRPHONE · Bandeau rouge + bannières sceau blanc
 * Rouge = accent boutons (#a81024)
 * Sceaux entièrement contenus dans la hauteur de bannière
 */

:root {
  --fp-red-banner-color: var(--color-accent, #a81024);
  --fp-red-seal-banner: url("/assets/images/fp-red-seal-banner-tile.png?v=20260825f");
}

/* Bande passante — rouge uni */
.ticker {
  background: var(--fp-red-banner-color) !important;
  background-image: none !important;
  border-top-color: rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.ticker span {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: none;
}

.ticker span b {
  color: #fff !important;
}

/* Bannières rouge premium — sceau blanc (hauteur ×0,5, logo entier) */
.fp-red-banner {
  display: block;
  width: 100%;
  height: clamp(50px, 7vw, 74px);
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background-color: var(--fp-red-banner-color);
  background-image: var(--fp-red-seal-banner);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.fp-red-banner--compact {
  height: clamp(42px, 5.5vw, 60px);
}

@media (max-width: 720px) {
  .fp-red-banner {
    height: clamp(44px, 8vw, 60px);
  }

  .fp-red-banner--compact {
    height: clamp(36px, 6vw, 50px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-red-banner {
    background-size: auto 100%;
  }
}