/* ============================================================
   usp-bar.css — bandeau d'arguments de réassurance (accueil)

   L'essentiel de la mise en page vient des utilitaires Bootstrap 5.3
   (row-cols-*, d-flex, gap-*, border-top/bottom, py-*). Ce fichier ne
   couvre que ce que Bootstrap ne fait pas : la largeur de contenu,
   la taille des icônes et la typographie des libellés.
   ============================================================ */

.usp-bar {
  /* Même gabarit que le bandeau promotionnel — voir --hero-slider-max dans
     hero-slider.css. La valeur est redéfinie ici pour que ce bloc reste
     autonome : hero-slider.css n'est chargé que si le carrousel a des slides. */
  --uprt-content-max: 1110px;
  --usp-accent: #511298;   /* violet Uprinter */

  margin-block: 1.5rem 2rem;
}

.usp-bar__inner {
  max-width: var(--uprt-content-max);
  margin-inline: auto;
}

/* ---------- Icône ---------- */

.usp-icon {
  flex: 0 0 auto;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--usp-accent);
}

/* ---------- Libellés ---------- */

.usp-title {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: #1a1a1a;
}

.usp-text {
  margin-top: .125rem;
  font-size: .75rem;
  line-height: 1.3;
  color: #6c757d;
}

/* ---------- Séparateurs verticaux ---------- */
/* Uniquement au palier où les six colonnes tiennent sur une ligne : en dessous,
   la grille passe à 2 ou 3 colonnes et des traits verticaux seraient faux. */

@media (min-width: 992px) {
  .usp-bar .col + .col .usp-item {
    border-left: 1px solid #e6e2ec;
    padding-left: .75rem;
  }

  .usp-icon {
    font-size: 1.5rem;
  }
}

/* ---------- Confort de lecture sous 992 px ---------- */

@media (max-width: 991.98px) {
  .usp-item {
    justify-content: flex-start;
  }
}