/* Base titres */
.values__title{   color: var(--unsa-official);
  letter-spacing: .5px;
  margin: 0 0 .75rem;
  text-transform: uppercase;
  font-size: 3.2rem;
}

.values__subtitle{   
  color: var(--unsa-dark);
  margin: 20px ;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Carte */
.values__card { 
  background:var(--bg,#0b214a); 
  color:var(--unsa-light); 
  min-height:250px; 
  padding:32px; display:flex; 
  flex-direction: row; 
  align-items:center; 
  justify-content:center; 
  border: #fff solid 1px;
}

.values__text{ 
  font-weight:500; 
  font-size:1.25rem; 
  line-height:1.35; 
  margin:0; 
}

/* ----- Slider façon CodePen ----- */
.values-slider{
  --speed: 35s;                 /* durée d’un cycle complet */
  --fade-color: #fff;           /* couleur du fond pour les dégradés */
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}


/* Piste animée */
.values-track{
  display: flex;
  gap: 0;
  animation: values-scroll var(--speed) linear infinite;
  will-change: transform;
}
@keyframes values-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--w) * var(--n))); }
}

/* Slide = largeur fixe par breakpoint (collé) */
.values-slide{ flex: 0 0 var(--w); width: var(--w); }

/* Responsif : 1 / 2 / 3 / 5 visibles */
@media (min-width:576px){ .values-slider{ --w: 50vw; } }        /* sm: 2 */
@media (min-width:768px){ .values-slider{ --w: 33.333vw; } }    /* md: 3 */
@media (min-width:992px){ .values-slider{ --w: 20vw; } }        /* lg+: 5 */

/* Accessibilité : pause au survol + respect PRM */
.values-slider:hover .values-track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .values-track{ animation: none; transform:none; }
}