/* =========================================================
   PF — BANDEAU TAGS
   VERSION FINALE GELÉE (SANS TAG ACTIF)
   - CSS only
   - Stable desktop / mobile
   ========================================================= */


/* =========================================================
   CONTENEUR GLOBAL
   ========================================================= */

.pf-tags-bar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #f4f4f2;
  border-bottom: 1px solid #e2e2e2;
}


/* =========================================================
   STRUCTURE INTERNE
   ========================================================= */

.pf-tags-inner{
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem;
}


/* =========================================================
   FLÈCHES DE DÉFILEMENT
   ========================================================= */

.pf-tags-arrow{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #d0d0d0;
  background: #fff;
  color: #444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-tags-arrow svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}


/* =========================================================
   ZONE SCROLLABLE
   ========================================================= */

.pf-tags-scroll{
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
}

.pf-tags-scroll::-webkit-scrollbar{
  display: none;
}


/* =========================================================
   PILLS GÉNÉRIQUES
   ========================================================= */

.pf-tag-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: .45rem .9rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #000;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  opacity: .7;
  transition: opacity .2s ease, background .2s ease;
}

.pf-tag-pill:hover{
  opacity: .9;
}


/* =========================================================
   TAGS ICÔNES — HOME / PF
   (repères de navigation, apparence fixe)
   ========================================================= */

/* HOME */
.pf-nav-accueil{
  width: 42px;
  min-width: 42px;
  padding: 0;
  background-image: url("/assets/images/icon-home.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  color: transparent;
  opacity: 1;
}

/* PF */
.pf-nav-pf{
  width: 42px;
  min-width: 42px;
  padding: 0;
  background-image: url("/assets/images/icon-pf.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px auto;
  color: transparent;
  opacity: 1;
}


/* =========================================================
   NEUTRALISATION TOTALE — ANCIEN BANDEAU TAGS (SOURCE)
   ========================================================= */

.tags-banner,
.tags-scroll,
.tags-arrow,
.tags-banner-list,
.tags-banner-link{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   ISOLATION DU BANDEAU PF
   (ne subit pas les contextes éditoriaux sombres)
   ========================================================= */

body.tag-template.tag-videos .pf-tags-bar {
  background: #f4f4f2;
}

body.tag-template.tag-videos .pf-tag-pill {
  background: #fff;
  color: #000;
  opacity: .7;
  filter: none;
}

body.tag-template.tag-videos .pf-tag-pill:hover {
  opacity: .9;
}

/* Icônes HOME & PF : ne jamais inverser */
body.tag-template.tag-videos .pf-nav-accueil,
body.tag-template.tag-videos .pf-nav-pf {
  background-color: #fff;
  filter: none;
}