/* Bannières promo diagonales, sans fond derrière, deux barres visibles puis défilement */

/* Fond de section aligné sur Use Cases (#f8fafc) et plus proche de la section précédente */
#promotion-banner-section {
  background: #f8fafc;
  padding: 8px 0 22px;       /* section un peu plus compacte */
  position: relative;
  overflow: hidden;
  margin-top: -20px;          /* colle davantage à la fin de Use Cases */
}

/* Conteneur générique (transparent) */
.scrolling-banner-container {
  overflow: hidden;
  position: relative;
  width: 160vw;               /* encore plus large */
  left: 50%;
  transform-origin: center;
  color: #fff;
  padding: 28px 0;            /* barres plus hautes */
  background: transparent;
}

/* Bandeau et animation */
.scrolling-banner {
  display: inline-flex;
  align-items: center;
  width: max-content;
  gap: 40px;                 /* réduction de l'espace pour plus de densité */
  animation: scroll-left 250s linear infinite; /* un peu plus lent */
  will-change: transform;
}

.scrolling-banner.reverse {
  animation: scroll-right 250s linear infinite; /* un peu plus lent aussi */
}

.scrolling-banner-item {
  white-space: nowrap;
  font-weight: 800;
  font-size: 2.25rem;         /* texte encore plus grand pour plus d'impact */
}

/* 1) Première barre (noire/gris très foncé) DROITE */
.promo-banner-top {
  background-color: #1f2937;
  transform: translateX(-50%) rotate(0deg);
  margin: 10px 0 16px;       /* respiration ajustée */
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* 2) Seconde barre (orange) OBLIQUE qui chevauche la première */
.promo-banner-bottom {
  background-color: #f26531;
  transform: translateX(-50%) rotate(-6deg); /* obliquité légèrement augmentée */
  margin-top: -20px;
  margin-bottom: 18px;
  z-index: 3;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

/* Animations: démarrent à 0 pour voir le début du contenu, sens opposé pour la deuxième */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Responsif */
@media (max-width: 768px) {
  .scrolling-banner-item { font-size: 1.65rem; }
  .scrolling-banner { gap: 32px; }
  .scrolling-banner-container { padding: 18px 0; }
  .promo-banner-bottom { margin-top: -16px; }
}