/* ============================================
   PLANCHE-BROYEURS.CSS
   Styles spécifiques à la page catalogue.
   Les variables, boutons, nav, footer sont
   déjà définis dans style.css — on ne les
   redéfinit pas ici.
   ============================================
   Sommaire :
   0. Dégradation gracieuse (sans JS)
   1. En-tête de page
   2. Filtres par profil
   3. Statut (compteur + bouton "voir tout")
   4. Grille de cartes
   5. Carte produit
   6. Responsive (tablette + mobile)
   ============================================ */


/* ============================================
   0. DÉGRADATION GRACIEUSE
   Les éléments .js-only sont masqués par
   défaut en CSS. Le JS les rend visibles dès
   qu'il s'exécute (via style.display = '').
   Sans JS, filtres et compteur restent cachés
   et la grille statique est seule affichée.
   ============================================ */
.js-only {
  visibility: hidden;
  pointer-events: none;
}
.js-ready .js-only {
  visibility: visible;
  pointer-events: auto;
}


/* ============================================
   1. EN-TÊTE DE PAGE
   ============================================ */
.pb-intro {
  background: var(--color-green-tint);
  border-bottom: 1px solid var(--color-border);
}

.pb-intro-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px var(--container-padding);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.pb-intro-text {
  flex: 1;
  min-width: 260px;
}

.pb-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--color-green-darker);
  line-height: 1.2;
  margin-top: 8px;
}

.pb-subtitle {
  font-size: 15px;
  color: #41603A;
  margin-top: 12px;
  max-width: 520px;
  line-height: 1.65;
}

.pb-intro-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.pb-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #DFF0D6;
  color: #1F5A0D;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.pb-badge i {
  font-size: 14px;
}


/* ============================================
   2. FILTRES PAR PROFIL
   ============================================ */
.pb-filters-section {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky;
  top: 67px; /* hauteur de la navbar sticky */
  z-index: 50;
}

.pb-filters-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px var(--container-padding);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pb-filter-label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.pb-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pb-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.pb-filter:hover {
  border-color: var(--color-green-accent);
  color: var(--color-green-dark);
}
.pb-filter.active {
  background: var(--color-green-accent);
  color: #fff;
  border-color: var(--color-green-accent);
  font-weight: 500;
}
/* Indicateur visuel sous le filtre actif */
.pb-filter.active::after {
  content: "▾";
  margin-left: 2px;
  font-size: 11px;
}


/* ============================================
   3. STATUT
   ============================================ */
.pb-catalogue {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px var(--container-padding) 56px;
}

.pb-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 8px;
}

.pb-count {
  font-size: 13px;
  color: var(--color-text-muted);
}
.pb-count strong {
  color: var(--color-text);
}

.pb-see-all {
  display: none; /* affiché en JS quand un filtre est actif */
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-green-accent);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  padding: 0;
}
.pb-see-all:hover {
  color: var(--color-green-dark);
}


/* ============================================
   4. GRILLE DE CARTES
   ============================================ */
.pb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}


/* ============================================
   5. CARTE PRODUIT
   ============================================ */
.pb-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pb-card:hover {
  border-color: var(--color-green-accent);
  transform: translateY(-2px);
}

/* -- Zone image -- */
.pb-card-media {
  position: relative;
  height: 200px;
  background: var(--color-green-light);
  overflow: hidden;
}

/* Photo réelle du broyeur */
.pb-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Emplacement vide quand pas de photo :
   À SUPPRIMER pour chaque carte une fois la photo intégrée */
.pb-card-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-card-media-placeholder i {
  font-size: 52px;
  color: #8FC474;
}

/* Tag profil superposé sur l'image (visible uniquement quand un filtre est actif) */
.pb-profil-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(22, 56, 10, 0.82);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
}

/* -- Corps de la carte -- */
.pb-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

/* Tags en haut de corps (diamètre + motorisation) */
.pb-card-pretags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.pb-tag-diam {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--color-green-accent);
  color: #fff;
  font-weight: 500;
}

.pb-tag-moto {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--color-green-light);
  color: var(--color-green-dark);
  font-weight: 500;
}

/* Nom du modèle */
.pb-card-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.2;
}

/* Description courte */
.pb-card-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.55;
  flex-grow: 1;
}

/* Bloc motorisations (vue générique et collectivité) */
.pb-moteurs-wrap {
  margin-top: 2px;
}
.pb-moteurs-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.pb-card-moteurs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Badge motorisation cliquable (vue par défaut, 280/450/600) */
.pb-moto-link {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--color-green-light);
  color: var(--color-green-dark);
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.pb-moto-link:hover {
  background: var(--color-green-dark);
  color: #fff;
}

/* Badge motorisation non cliquable (vue collectivité) */
.pb-moto {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--color-green-light);
  color: var(--color-green-dark);
  font-weight: 500;
}

/* -- Pied de carte : actions -- */
.pb-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.pb-btn-fiche {
  font-size: 13px;
  color: var(--color-green-accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  transition: color 0.15s ease;
}
.pb-btn-fiche:hover {
  color: var(--color-green-dark);
}

.pb-card-sep {
  color: var(--color-border);
  font-size: 13px;
  user-select: none;
}

.pb-btn-video {
  font-size: 13px;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  transition: color 0.15s ease;
}
.pb-btn-video:hover {
  color: var(--color-text);
}


/* ============================================
   6. RESPONSIVE
   ============================================ */

/* -- Tablette (≤ 1024px) -- */
@media (max-width: 1024px) {
  .pb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pb-intro-inner {
    flex-direction: column;
    gap: 20px;
  }
  .pb-intro-badges {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* -- Mobile (≤ 640px) -- */
@media (max-width: 640px) {
  .pb-title {
    font-size: 24px;
  }
  .pb-filters-section {
    top: 60px;
  }
  .pb-filters-inner {
    padding: 12px var(--container-padding);
    gap: 8px;
  }
  .pb-filter-label {
    width: 100%;
  }
  .pb-filter {
    font-size: 12px;
    padding: 6px 14px;
  }
  .pb-grid {
    grid-template-columns: 1fr;
  }
  .pb-catalogue {
    padding-top: 24px;
  }
}