/* ══════════════════════════════════════════════════════════
   Aurore Énergies · Gabarit C (hub des guides, /guides)
   Mobile-first, paliers 768 et 1024 px. Spécification :
   design_handoff_site_aurore/Page guides.dc.html. Classes : hub-….
   Cartes (.carte-guide, .cartes-grid 1 / 2 / 3 colonnes) : style.css.
   ══════════════════════════════════════════════════════════ */

/* ── En-tête : fil d'Ariane, H1, chapô, filtres ── */
.hub-head {
  display: flex; flex-direction: column; gap: 20px;
  padding-top: 8px; padding-bottom: 40px;
}
.hub-head__title { max-width: 820px; }
.hub-head__lead { max-width: 640px; }

/* Filtres : de simples liens, qui passent à la ligne (jamais de défilement caché). */
.hub-filtres { padding-top: 8px; }
.hub-filtres__list { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-filtre {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--pill);
  font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.hub-filtre:hover { border-color: var(--ink); color: var(--ink); }
.hub-filtre[aria-current] { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.hub-filtre[aria-current]:hover { color: var(--yellow); }
.hub-filtre__count { font-size: 13px; font-weight: 600; opacity: .8; }

/* ── Guide à la une (vue « Tous ») ── */
.hub-une { padding-top: 0; padding-bottom: 48px; }
/* Méta (interligne 1,2) et disque réduit sous 768 px : règles du socle
   (style.css, .carte-guide--une). */

/* ── Liste ── */
.hub-liste { display: flex; flex-direction: column; gap: 24px; padding-top: 0; }
.hub-liste__title { font-size: 24px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }

/* ── État vide d'un thème ── */
.hub-vide {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  max-width: 720px; padding: 40px 28px;
  background: var(--white); border: 2px dashed var(--ring); border-radius: 28px;
}
.hub-vide__icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink);
}
.hub-vide__text { font-size: 18px; line-height: 1.5; font-weight: 600; text-wrap: pretty; }
/* Libellé long (« Découvrir l’autoconsommation collective → ») : il passe à
   la ligne sur un téléphone de 360 px au lieu de déborder. En bloc (et non en
   flex), la flèche suit le texte au lieu d'être rejetée au bord droit ;
   15 + 20 + 15 + 4 (bordure) = 54 px sur une ligne, comme .btn--md. */
.hub-vide__btn { display: block; height: auto; padding: 15px 26px; line-height: 1.25; text-align: left; white-space: normal; }

/* ══════════════════════════════════════════════════════════
   Tablette : ≥ 768 px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .hub-liste__title { font-size: 28px; }
}

/* ══════════════════════════════════════════════════════════
   Desktop : ≥ 1024 px (28 → 34 px de 1024 à 1440)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .hub-liste__title { font-size: clamp(28px, 1.442vw + 13.23px, 34px); }
}