/**
 * @file
 * Zone 5 : fil « Dernière minute ».
 *
 * Le texte défile SOUS l'étiquette : celle-ci reste opaque au premier plan.
 * Deux précautions indispensables, démontrées sur la maquette :
 *  1. l'étiquette est en z-index 2 avec un fond plein ;
 *  2. son fond est prolongé jusqu'au bord de l'écran par un ::before —
 *     sans quoi le texte ressort dans la gouttière à gauche de l'étiquette.
 */

.ticker {
  overflow: hidden; /* coupe le défilé aux bords de l'écran */
  background: var(--ccd-red);
  color: #fff;
}

.ticker .wrap {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--ccd-ticker-h);
}

.ticker__label {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  align-self: stretch;
  align-items: center;
  padding: 0 16px;
  background: var(--ccd-black);
  box-shadow: 10px 0 16px rgba(14, 14, 16, 0.55);
  font-family: var(--ccd-font-display);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.ticker__label::before {
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 100vw;
  background: var(--ccd-black);
  content: "";
}

/* Conteneur volontairement NON clippant : le texte glisse derrière
   l'étiquette. C'est .ticker qui coupe. */
.ticker__viewport {
  z-index: 1;
  display: flex;
  flex: 1;
  align-self: stretch;
  align-items: center;
  min-width: 0;
}

.ticker__track {
  display: flex;
  gap: 44px;
  padding-left: 22px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  animation: ccd-slide 38s linear infinite;
}

.ticker__track:hover,
.ticker__track:focus-within {
  animation-play-state: paused;
}

/*
 * Aplatit les conteneurs que Views interpose entre la piste et la liste —
 * bloc, enveloppe de vue, conteneur de résultats — pour que le <ul> devienne
 * l'élément de flux direct de la piste. Visé par la structure et non par des
 * noms de classes : stable9 produit un balisage sans classes. Même raison
 * que la mosaïque de la zone 9.
 */
.ticker__track :where(div) {
  display: contents;
}

/* Le fil accepte aussi bien une liste de vue qu'une suite de liens. */
.ticker__track ul {
  display: flex;
  gap: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticker__track li::before,
.ticker__track > span::before {
  margin-right: 12px;
  font-size: 9px;
  vertical-align: 2px;
  opacity: 0.6;
  content: "\25C6";
}

.ticker__track a:hover {
  color: #fff;
  text-decoration: underline;
}

@keyframes ccd-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}