/* Snacky — page rubrique (et archives génériques) */

.snk-rub__head { padding-top: 38px; padding-bottom: 30px; }
.snk-rub__headin { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.snk-rub__title {
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: -.035em;
  text-transform: uppercase;
  padding: 10px 18px;
  margin: 0;
  line-height: 1;
}
.snk-rub__base { font-size: 15px; opacity: .6; max-width: 420px; }

.snk-rub__hero { padding-bottom: 48px; }
.snk-rub__herogrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 52px;
  align-items: center;
  padding-bottom: 44px;
}
.snk-rub__herotext { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.snk-rub__herotitle {
  font-size: clamp(30px, 5.6vw, 50px);
  line-height: .94;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.snk-rub__herodek {
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}

/* Colonnes fixes, jamais auto-fit : auto-fit replie les pistes vides, si bien
   qu'un article seul sur sa rangée s'étirait sur toute la largeur. */
.snk-rub__wides {
  padding-bottom: 44px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
  align-items: start;
}
.snk-rub__wide {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: center;
}
.snk-rub__widetext { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.snk-rub__widetitle {
  letter-spacing: -.03em;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
  overflow-wrap: anywhere;
}

/* Rangs de quatre, puis deux, puis une : plus de rangée à trois, qui laissait
   une carte orpheline. */
.snk-rub__grid {
  padding-bottom: 44px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 38px 32px;
}

/* Seuils repris de l'ancien auto-fit : quatre cartes tant qu'elles font
   168 px, deux blocs horizontaux tant qu'ils en font 260. */
@media (max-width: 834px) {
  .snk-rub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 613px) {
  .snk-rub__wides { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 399px) {
  .snk-rub__grid { grid-template-columns: minmax(0, 1fr); }
}

.snk-rub__empty { padding-bottom: 60px; font-size: 17px; opacity: .7; }

/* Pagination */
.snk-pag {
  padding-top: 20px;
  padding-bottom: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.snk-pag .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 2px solid var(--snk-ink);
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: 16px;
  transition: background 120ms, color 120ms;
}
.snk-pag .page-numbers:hover,
.snk-pag .page-numbers:focus-visible { background: var(--snk-ink); color: var(--snk-white); }
.snk-pag .page-numbers.current {
  background: var(--snk-rub, var(--snk-violet));
  color: var(--snk-white);
  border-color: var(--snk-rub, var(--snk-violet));
}
.snk-pag .page-numbers.dots { border: 0; opacity: .4; }
.snk-pag .page-numbers.dots:hover { background: none; color: inherit; }
.snk-pag .next,
.snk-pag .prev {
  background: var(--snk-ink);
  color: var(--snk-white);
  border-color: var(--snk-ink);
  font-family: var(--snk-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 18px;
}
.snk-pag .next:hover, .snk-pag .prev:hover,
.snk-pag .next:focus-visible, .snk-pag .prev:focus-visible { background: var(--snk-violet); border-color: var(--snk-violet); }

/* Recherche : même grille que les rangs de 4 */
.snk-search__head { padding-top: 38px; padding-bottom: 26px; }
.snk-search__head h1 {
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0 0 16px;
  text-wrap: balance;
}
.snk-search__count { font-size: 15px; opacity: .6; }
.snk-search__form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 560px; margin-top: 22px; }