/* -------------------------------------------------
   queriesv2.0.css
   Media queries spécifiques pour rendre ton site responsive
-------------------------------------------------- */

/* Tablettes (≤ 1024px) */
@media (max-width: 1024px) {
  /* Pagination */
  .pagination {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }

  .pages {
    justify-content: center;
    gap: 8px;
  }

  .pages a,
  .pagination > a {
    padding: 0.5em 0.8em;
    min-width: 36px;
    font-size: 0.9em;
  }

  .badge-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .playlist-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* Mobiles (≤ 768px) */
@media (max-width: 768px) {
  .site-header .header-container {
    flex-direction: column;
    align-items: center;
    gap: 1em;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0.5em;
  }

  .intro h2 {
    font-size: 1.5em;
  }

  .search-input-group {
    flex-direction: column;
    gap: 10px;
  }

  .search-input-group input,
  .search-input-group button {
    width: 100%;
  }

  .badge-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .playlist-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .pages a,
  .pagination > a {
    padding: 0.4em 0.7em;
    font-size: 0.85em;
    min-width: 32px;
  }

  .badge-image-container {
    max-width: 100px;
  }

  /*************
	MENU MOBILE
	***********/
  .btn a:link,
  .btn a:visited {
    font-size: 0.8rem;
  }

  .menu-button-container {
    display: flex;
  }

  .menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    margin: 85px 0 0;
  }

  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    font-size: 1rem;
  }

  #menu-toggle:checked ~ .menu li {
    border: 1px solid #333;
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    background-color: #222;
    border-radius: 0px;
  }

  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }
}

/* Petits mobiles (≤ 480px) */
@media (max-width: 480px) {
  .intro h2 {
    font-size: 1.2em;
  }

  .pages {
    gap: 6px;
  }

  .pages a,
  .pagination > a {
    padding: 0.3em 0.5em;
    font-size: 0.8em;
    min-width: 28px;
  }

  .badge-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .playlist-grid {
    grid-template-columns: 1fr;
  }

  .badge-image-container {
    max-width: 80px;
  }
}