/* ==================================
   USEFUL LINKS – RESPONSIVE & SAFE
   ================================== */

.link-bar {
  margin: 4px 0;
  padding: 10px 20px;
  border-radius: 4px;

  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 15px;

  box-sizing: border-box;
  overflow-x: hidden; /* sécurité */
}

/* Carte */
.link-item {
  display: flex;
  align-items: center;

  background-color: #ffffff;
  padding: 15px;
  border-radius: 10px;

  box-shadow: 0 4px 8px rgba(11, 11, 11, 0.7);

  width: 100%;
  min-width: 0;           /* 🔴 CRUCIAL */
  box-sizing: border-box;
}

/* Lien */
.link-item a {
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  min-width: 0;           /* 🔴 CRUCIAL */
  text-decoration: none;
  color: inherit;
}

/* Image */
.link-item img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* Label */
.link-item .flabel {
  font-size: 22px;
  color: #2821ed;

  white-space: normal;   /* 🔴 IMPORTANT */
  word-break: break-word;
}

/* Hover desktop */
@media (hover: hover) {
  .link-item a:hover img {
    transform: scale(1.25);
  }
}

/* ================================
   BREAKPOINTS
   ================================ */

@media (max-width: 1200px) {
  .link-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .link-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .link-item img {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 576px) {
  .link-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
    gap: 12px;
  }

  .link-item {
    padding: 12px;
  }

  .link-item img {
    width: 46px;
    height: 46px;
  }

  .link-item .flabel {
    font-size: 18px;
  }
}

@media (max-width: 360px) {
  .link-bar {
    grid-template-columns: 1fr;
  }

  .link-item {
    justify-content: center;
  }

  .link-item .flabel {
    font-size: 16px;
    text-align: center;
  }
}