/* ═══════════════════════════════════════════════════════════════════════
   Cosmélyse — cosmelyse_hub.css
   Hub catalogue /produits (produits.php)
   ═══════════════════════════════════════════════════════════════════════

   Feuille dédiée au hub, chargée par produits.php seul. Tout le reste de
   la page réutilise des composants existants :
     - .cosm-page / .cosm-card / .cosm-page-header  → cosmelyse2.css
     - .cosm-barlink-grid (grille de catégories)    → cosmelyse2.css
     - .search-grid / .catalogue-pager              → cosmelyse_search.css
     - .product-card                                → cosmelyse_product_card.css

   On n'ajoute ici que ce qu'aucun composant existant ne couvre.

   ─── Pourquoi .hub-siblings et pas .cosm-card__more ──────────────────

   Le bloc « Dans la même famille » a d'abord réutilisé .cosm-card__more.
   C'était un détournement : ce composant est un PIED DE CARD conçu pour UN
   lien de sortie (« voir tout »), d'où son justify-content: flex-end, son
   filet supérieur, et surtout son absence de gap et de flex-wrap. Avec dix
   pilules, elles se collent les unes aux autres et se tassent à droite.

   Élargir .cosm-card__more aurait modifié le pied de card de la home, des
   fiches ingrédient et du bloc « mieux notés » de result.php pour un
   besoin qui n'est pas le leur. On crée donc le composant manquant.
   ═══════════════════════════════════════════════════════════════════════ */


/* ============================================
   LISTE DE PILULES (.hub-siblings)
   ============================================
   Rangée de liens .cosm-linkpill qui s'enroule sur plusieurs lignes.
   Alignée à gauche : c'est une liste de navigation qu'on parcourt, pas
   une action de sortie qu'on cherche du regard en fin de bloc.

   Le gap vertical est plus généreux que l'horizontal : deux pilules de
   lignes voisines se touchent visuellement plus vite que deux pilules
   côte à côte, leurs bords arrondis ne créant pas de séparation nette. */

.hub-siblings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 0.6rem;
}


/* ============================================
   RESPIRATION APRÈS LA PAGINATION
   ============================================
   .catalogue-pager porte déjà margin-top: 2rem et un filet supérieur, mais
   rien en dessous : le bloc suivant venait se coller à « Suivante ».
   La règle vise le bloc QUI SUIT, pas le pager lui-même — modifier
   .catalogue-pager déplacerait aussi le pied des deux onglets de
   /recherche.php, qui n'ont rien après eux et n'ont donc pas ce besoin. */

.hub-after-pager {
    margin-top: 2.5rem;
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* Sur mobile les pilules occupent presque toute la largeur : le gap
       vertical devient l'essentiel de la lisibilité du bloc. */
    .hub-siblings {
        gap: 0.65rem 0.5rem;
    }

    .hub-after-pager {
        margin-top: 2rem;
    }
}