/* Da Silva Rúben 13.01.2026 Styles que se repetant dans les pages*/
/* ===== NAVIGATION ===== */
nav {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 30px;
}

/* Liens du menu */
.menu {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 20px;
  transition: 0.3s;
}
/* Effet zoom au hover */
.menu:hover {
  background: rgb(61, 21, 21);
  color: #e9e9ee;
  border-radius: 6px;
}
/* Titres de catégories */
.sec-2 h2 {
  font-size: 30px;
  margin-left: 90px;
  position: relative;
  left: 90px;
  font-size: 30px;
}

/* Images */
.sec-2 img {
  width: 220px;
  transition: transform 0.3s;
}
/* Effet zoom au hover */
.sec-2 img:hover {
  transform: scale(1.1);
}
/* Carousel horizontal */
.suite-logos {
  margin: auto;
  display: flex;
  gap: 80px;
  width: max-content;
  animation: carousel-animation 15s linear infinite;
}

/* ===== RESET DE BASE ===== */
body {
  margin: 100px auto;
  background-color: #111;
  color: antiquewhite;
  font-family: Arial, Helvetica, sans-serif;
}


/* Animation du carousel */
@keyframes carousel-animation {
  from {
    translate: 0;
  }
  to {
    translate: -50%;
  }
}

/* ================= MOBILE ================= */
@media (max-width: 480px) {
  /* Navigation : empiler verticalement */
  nav {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
  }

  /* Liens du menu : réduire la taille et le padding */
  .menu {
    padding: 8px 12px;
    font-size: 14px;
  }

  /* Titres de catégories : centrer et réduire taille */
  .sec-2 h2 {
    font-size: 20px;
    margin-left: 0;
    left: 0;
    text-align: center;
  }

  /* Images : réduire largeur */
  .sec-2 img {
    width: 120px;
  }

  /* Carousel horizontal : réduire gap */
  .suite-logos {
    gap: 20px;
    animation: carousel-animation 15s linear infinite;
  }

  /* Body margin : réduire pour mobile */
  body {
    margin: 20px auto;
  }
}