/******************************************************/
/***********   ATO LOGOS - sans Flickity   ************/
/******************************************************/

/* Bandeau de logos sur 3 lignes, rempli colonne par colonne
   (ordre du glisser-deposer en admin) :
   position 1 en haut a gauche, 2 au milieu, 3 en bas,
   4 en haut de la colonne suivante, etc.
   Carrousel horizontal avec fleches + defilement auto, en JS vanilla. */

.ato-logos {
  position: relative;
  width: 100%;
  padding: 0 48px; /* place pour les fleches */
  box-sizing: border-box;
}

.ato-logos__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}
.ato-logos__viewport::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.ato-logos__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

/* Une colonne = 3 logos empiles verticalement (les 3 lignes) */
.ato-logos__col {
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: repeat(3, minmax(90px, 1fr));
  gap: 28px;
  width: clamp(180px, 20vw, 250px);
  padding: 0 32px;
  box-sizing: border-box;
  align-content: center;
}

.ato-logos__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 90px;
}

.ato-logos__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ato-logos__item img {
  display: block;
  max-width: 100%;
  max-height: 80px;
  width: auto;
  object-fit: contain;
  transition: transform 0.4s ease;
}

a.ato-logos__link:hover img {
  transform: scale(1.06);
}

/* ---- Etiquette "X projets" ---- */
.ato-logos__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #1f1f1f, #4a4a4a);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

/* ---- Fleches de navigation ---- */
.ato-logos__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: #333;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s ease;
}

.ato-logos__nav:hover { background: rgba(0, 0, 0, 0.15); }
.ato-logos__nav:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
.ato-logos__nav--prev { left: 0; }
.ato-logos__nav--next { right: 0; }

/* Pas de defilement anime si l'utilisateur le refuse */
@media (prefers-reduced-motion: reduce) {
  .ato-logos__viewport { scroll-behavior: auto; }
}

@media screen and (max-width: 768px) {
  .ato-logos { padding: 0 38px; }
  .ato-logos__col {
    width: clamp(130px, 46vw, 190px);
    padding: 0 20px;
    gap: 20px;
  }
  .ato-logos__item { min-height: 64px; }
  .ato-logos__item img { max-height: 64px; }
  .ato-logos__badge { font-size: 10px; padding: 4px 9px; }
  .ato-logos__nav { width: 34px; height: 34px; font-size: 20px; }
}