/* ───────────────────────────────────────────────────────────────────────────
   Familles de rubriques : rubriques de la même famille (pages rubrique et
   famille), en-tête des trois listes (famille, « Tous les pros », rubrique) et
   grille filtres + résultats. Chargé après section.css et rubrique.css.
   ─────────────────────────────────────────────────────────────────────────── */

/* Le fil d'Ariane est un composant transverse : ses styles sont dans
   front-extra.css, chargée sur toutes les pages. Il était ici par accident,
   et restait donc sans mise en forme sur les pages qui ne chargent pas
   cette feuille (la page de contact, par exemple). */

/* ── Puces de rubriques (page famille, « Dans la même famille ») ─────────── */
.familySiblings {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.familySiblingsTitle {
    margin: 0;
    font-size: 15px;
    color: #434343;
}

.familyChips {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.familyChip {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background-color: #fff;
    border: 1px solid #DADADA;
    border-radius: 999px;
    color: #000;
    font-size: 15px;
    text-decoration: none;
    transition: 0.25s ease;
}

.familyChip:hover {
    color: #4d3dff;
    border-color: #B3C4FF;
    transform: translateY(-1px);
}

.familyChip:focus-visible {
    outline: 2px solid #4d3dff;
    outline-offset: 2px;
}

.familyChipAll {
    background-color: #B3C4FF;
    border-color: #B3C4FF;
}

.familyChipAll:hover {
    color: #000;
    background-color: #c7d3ff;
}

/* ── En-tête des listes ───────────────────────────────────────────────────
   Pages famille, « Tous les pros » et rubrique : titre (seul h1 de la page),
   présentation et puces, au-dessus de la ligne filtres + résultats. */
main.familyMain {
    flex-direction: column;
}

.familyIntro {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 40px 36px 40px;
}

/* Lignes équilibrées : « Make up artist près de chez / vous » laissait un mot
   seul sur la dernière ligne (titres des rubriques, de 320 à 1 000 px). */
.familyTitle {
    margin: 0;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    color: #000;
    text-wrap: balance;
}

.familyDescription {
    max-width: 820px;
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #434343;
}

/* Le filet gris de cette ligne est déclaré dans section.css. La grille qui suit
   sert aux trois pages de liste : la page rubrique charge donc cette feuille même
   sans famille affichable. */

/* Ligne « filtres + résultats ». Grille et non flex, pour une raison de hauteur.

   Au bureau, la colonne de résultats fait défiler ses fiches sur place (voulu
   par le propriétaire du site, voir .containerResults dans section.css). En
   grille, elle peut ne PAS peser sur la hauteur de la ligne (height: 0) tout en
   la remplissant (min-height: 100%) : la ligne reste à la hauteur des filtres,
   et les fiches se coupent au bas de la section. En flex ce couple ne
   fonctionne pas, la hauteur du parent n'y étant pas définie.

   La largeur des deux colonnes se décide ICI et nulle part ailleurs. */
.familyLayout {
    display: grid;
    grid-template-columns: 33% 1fr;
    flex: 1;
}

@media (max-width: 1000px) {
    .familyLayout {
        grid-template-columns: 40% 1fr;
    }
}

/* minmax(0, 1fr) et non 1fr : le minimum automatique d'une piste 1fr vaut la
   largeur minimale de son contenu (la carte de filtres), et la colonne unique
   débordait de l'écran sous 291 px. */
@media (max-width: 834px) {
    .familyLayout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 576px) {
    .familyIntro {
        padding: 0 16px 28px 16px;
    }

    .familyTitle {
        font-size: 30px;
    }

    .familyDescription {
        font-size: 16px;
    }
}