/* ===== Équipements (mise en page de blog de catégorie) ===== */
.fx-equipements { --fx: #5b9dd9; }
.fx-intro { font-size: 1.1rem; max-width: 60rem; margin-bottom: 1.5rem; }

/* Filtres */
.fx-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.fx-filter { border: 1px solid rgba(0,0,0,.15); border-radius: 999px; background: #fff; padding: .35rem .9rem; font-size: .9rem; cursor: pointer; }
.fx-filter .fas { color: var(--fx); }
.fx-filter > span:last-child { opacity: .6; margin-left: .2rem; }
.fx-filter.is-active { background: var(--fx); border-color: var(--fx); color: #fff; }
.fx-filter.is-active .fas { color: #fff; }

/* Composants d'un dispositif */
.fx-parts-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin: .2rem 0 .3rem; }
.fx-parts { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.fx-parts li { font-size: .82rem; padding: .2rem .6rem; border-radius: 6px; background: rgba(0,0,0,.05); }
.fx-parts a { text-decoration: none; font-weight: 600; }
.fx-parts a::after { content: " \2197"; font-size: .75em; opacity: .6; }

/* Plusieurs branches (page Facilities) */
.fx-filters.is-multi { flex-direction: column; align-items: flex-start; }
.fx-filters.is-multi > .fx-filter { align-self: flex-start; }
.fx-filter-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fx-filter-branch { font-weight: 700; background: #333; color: #fff; border-color: #333; }
.fx-filter-branch.is-active { background: #000; border-color: #000; }
.fx-branch-title { margin: 2.5rem 0 .5rem; font-size: 1.9rem; }
.fx-branch .fx-cat { font-size: 1.35rem; }

/* Groupes */
.fx-cat { margin: 2rem 0 1rem; padding-bottom: .4rem; border-bottom: 3px solid var(--fx); scroll-margin-top: 110px; }
.fx-cat .fas { color: var(--fx); margin-right: .35rem; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }

/* Cartes */
.fx-card { display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,.08); border-top: 5px solid var(--fx);
  border-radius: 8px; overflow: hidden; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.fx-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.fx-card.is-unpublished { opacity: .55; }
.fx-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.fx-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.fx-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem;
  color: #fff; background: var(--fx); opacity: .85; }
.fx-body { padding: 1rem 1.1rem; flex: 1; }
.fx-title { font-size: 1.15rem; margin: 0 0 .15rem; }
.fx-title a { color: inherit; text-decoration: none; }
.fx-title a:hover { color: var(--fx); }
.fx-ext { font-size: .62em; margin-left: .4em; opacity: .45; vertical-align: .15em; }
.fx-title a:hover .fx-ext { opacity: 1; }
.fx-type { color: var(--fx); font-weight: 600; font-size: .88rem; margin-bottom: .6rem; }
.fx-text { font-size: .93rem; }
.fx-text p:last-child { margin-bottom: .6rem; }
.fx-specs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.fx-specs li { font-size: .78rem; padding: .18rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--fx) 14%, transparent); border: 1px solid color-mix(in srgb, var(--fx) 40%, transparent); }
.fx-foot { padding: .7rem 1.1rem; border-top: 1px solid rgba(0,0,0,.06); background: rgba(0,0,0,.025); font-size: .85rem; }
.fx-manual { text-decoration: none; }
.fx-private { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; margin: .5rem 0 0; padding: .5rem .6rem;
  border: 1px dashed #c9a227; border-radius: 6px; background: #fffbea; }
.fx-private dt { font-weight: 600; } .fx-private dd { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .fx-card { transition: none; } .fx-card:hover { transform: none; }
}

/* Utilisé dans : dispositifs du site et publications */
.fx-usage { margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed rgba(0,0,0,.12); }
.fx-usage-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin: 0 0 .35rem; }
.fx-uses { list-style: none; padding: 0; margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.fx-uses a, .fx-uses .fx-use { display: inline-block; font-size: .82rem; padding: .2rem .6rem; border-radius: 6px; text-decoration: none; font-weight: 600;
  background: color-mix(in srgb, var(--fx, #5b9dd9) 14%, transparent); color: inherit; }
.fx-uses a:hover { background: var(--fx, #5b9dd9); color: #fff; }
.fx-refs { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.fx-refs li { margin-bottom: .25rem; padding-left: 1.3em; text-indent: -1.3em; }
.fx-refs .fas { width: 1.3em; text-indent: 0; opacity: .6; }
.fx-card:target { outline: 3px solid var(--fx, #5b9dd9); outline-offset: 3px; }
.fx-card { scroll-margin-top: 110px; }