/* ================================================================
   pagefind-custom.css - v1.6 (14/07/2026)
   Intégration visuelle de Pagefind UI à la charte Topas/Granuloshop.
   Valeurs relevées dans topas-*.css (14/07/2026) :
     jaune #FFED00 (texte #000, hover inversé noir/jaune),
     police Lato (héritée de la page), AUCUN arrondi (radius 0),
     boutons majuscules 'Lato Bold' 0.938rem 10px/20px,
     liens noirs, soulignés au survol,
     surlignage du site = fond jaune + texte noir.
   Chargé uniquement par search.html : ne touche pas au CSS global.
   Encodage : UTF-8 sans BOM, fins de ligne LF.
   ================================================================ */

#pagefind-search {
  --gs-jaune: #FFED00;                     /* .btn.yellow du site */
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: #000000;
  --pagefind-ui-text: #000000;
  --pagefind-ui-background: #ffffff;
  --pagefind-ui-border: #ced4da;
  --pagefind-ui-tag: #f1f3f5;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0;          /* charte : aucun arrondi */
  --pagefind-ui-image-border-radius: 0;
  --pagefind-ui-font: inherit;             /* Lato via la page */
  max-width: 960px;
}

/* --- Champ de recherche : anguleux, focus jaune charte ----------- */
#pagefind-search .pagefind-ui__search-input {
  border-radius: 0;
  border: 1px solid #ced4da;
  font-weight: 400;
}
#pagefind-search .pagefind-ui__search-input:focus {
  border-color: #000;
  box-shadow: 0 0 0 3px var(--gs-jaune);
  outline: none;
}
#pagefind-search .pagefind-ui__search-clear {
  color: #000;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* --- Résultats ---------------------------------------------------- */
#pagefind-search .pagefind-ui__result {
  padding: 1.1rem 0;
  border-top: 1px solid #e9ecef;
}
#pagefind-search .pagefind-ui__result-title {
  font-size: 1.15rem;
}
#pagefind-search .pagefind-ui__result-link {
  color: #000;
  font-weight: 700;                        /* esprit Lato Bold */
  text-decoration: none;
}
#pagefind-search .pagefind-ui__result-link:hover {
  color: #000;
  text-decoration: underline;              /* motif de lien du site */
}
#pagefind-search .pagefind-ui__result-excerpt {
  font-size: 0.95rem;
  color: #333;
}
#pagefind-search .pagefind-ui__result-excerpt mark {
  background: var(--gs-jaune);             /* surlignage = charte */
  color: #000;
  padding: 0 2px;
}

/* --- Métadonnées (product-code) ------------------------------------ */
#pagefind-search .pagefind-ui__result-tags {
  margin-top: 0.4rem;
}
#pagefind-search .pagefind-ui__result-tag {
  font-size: 0.78rem;
  background: #f1f3f5;
  color: #000;
  border-radius: 0;
  padding: 2px 8px;
  text-transform: uppercase;
}

/* --- Ordre des panneaux de filtres : Type AVANT Categorie ------------
   L'UI classe les panneaux alphabétiquement et n'offre pas d'option
   d'ordre ; on réordonne en flex. Si un 3e filtre apparaît un jour,
   ajuster les valeurs order ci-dessous. */
#pagefind-search .pagefind-ui__filter-panel {
  display: flex;
  flex-direction: column;
}
#pagefind-search .pagefind-ui__filter-panel-label { order: 0; }
#pagefind-search .pagefind-ui__filter-block { order: 2; }      /* Categorie */
#pagefind-search .pagefind-ui__filter-block:last-of-type { order: 1; }  /* Type */

/* --- Panneaux de filtres (Categorie / Type) ------------------------- */
#pagefind-search .pagefind-ui__filter-name {
  font-weight: 700;
  text-transform: uppercase;               /* titres du site */
  font-size: 0.9rem;
  color: #000;
}
#pagefind-search .pagefind-ui__filter-group {
  border: none;
  border-top: 1px solid #e9ecef;
  border-radius: 0;
}
#pagefind-search .pagefind-ui__filter-label {
  color: #000;
  font-size: 0.9rem;
}

/* --- Bouton « Plus de résultats » : .btn yellow du site -------------- */
#pagefind-search .pagefind-ui__button {
  background: var(--gs-jaune);
  color: #000;
  border: none;
  border-radius: 0;
  font-weight: 700;                        /* Lato Bold */
  font-size: 0.938rem;
  text-transform: uppercase;
  padding: 10px 20px;
}
#pagefind-search .pagefind-ui__button:hover {
  background: #000;                        /* hover inversé du site */
  color: var(--gs-jaune);
}

/* --- Mode bouton : barre de recherche propre au site ----------------- */
#pagefind-search .pf-cache { display: none !important; }
/* le champ interne etant masque, son pictogramme loupe flottait */
#pagefind-search .pagefind-ui__form::before { display: none !important; }
#pagefind-search .pf-champ {
  position: relative;
  flex: 1;
  display: flex;
}
#pagefind-search .pf-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: #6c757d;
  font-size: 1.4rem;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
  display: none;
}
#pagefind-search .pf-clear:hover { color: #000; }
#pagefind-search .pf-marque {
  font-size: 0.45em;
  font-weight: 400;
  vertical-align: super;
  margin-left: 2px;
}
#pagefind-search .pf-btn-rechercher svg {
  vertical-align: -2px;
  margin-right: 6px;
}
#pagefind-search .pf-barre {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 1.2rem;
}
#pagefind-search .pf-input {
  flex: 1;
  padding-right: 40px;         /* place pour le bouton Effacer */
  border: 1px solid #ced4da;
  border-radius: 0;
  padding: 12px 14px;
  font: inherit;
  color: #000;
  background: #fff;
}
#pagefind-search .pf-input:focus {
  border-color: #000;
  box-shadow: 0 0 0 3px var(--gs-jaune);
  outline: none;
}

/* --- Sélecteur de langue compact (FR/NL/EN/DE) ------------------------ */
#pagefind-search .pf-lang {
  border: 1px solid #ced4da;
  border-radius: 0;
  background: #fff;
  color: #000;
  font: inherit;
  font-weight: 700;
  padding: 0 8px;
  cursor: pointer;
  text-transform: uppercase;
}
#pagefind-search .pf-lang:focus {
  border-color: #000;
  box-shadow: 0 0 0 3px var(--gs-jaune);
  outline: none;
}

/* --- Bouton « Rechercher » (mode bouton, ajouté par le script) ------- */
#pagefind-search .pf-btn-rechercher {
  display: inline-block;
  background: var(--gs-jaune);
  color: #000;
  border: none;
  border-radius: 0;
  font-weight: 700;
  font-size: 0.938rem;
  text-transform: uppercase;
  padding: 10px 20px;
  cursor: pointer;
}
#pagefind-search .pf-btn-rechercher:hover {
  background: #000;
  color: var(--gs-jaune);
}

/* --- Message « x résultats pour ... » -------------------------------- */
#pagefind-search .pagefind-ui__message {
  font-weight: 700;
  color: #000;
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 576px) {
  #pagefind-search { --pagefind-ui-scale: 0.92; }
}