/* =========================================================================
   Bocklip — Grille projets & filtres
   Reproduction du design WP Grid Builder (grid-6), sans dépendance.
   ========================================================================= */

.bkp{
  --bkp-font-serif: "Playfair Display", Georgia, serif;
  --bkp-font-sans:  sofia-pro, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bkp-color-term:     #444;
  --bkp-color-title:    #000;
  --bkp-color-text:     #020202;
  --bkp-color-btn-bg:   #020202;
  --bkp-color-btn-bg-h: #444;
  --bkp-color-btn-txt:  #fff;
  --bkp-color-border:   #000;

  --bkp-columns-desktop: 3;
  --bkp-columns: var(--bkp-columns-desktop, 3);
  --bkp-gutter: 20px;

  --bkp-media-ratio: 4 / 3;
  --bkp-term-pad: 20px;
  --bkp-title-pad-y: 20px;
  --bkp-excerpt-pad-x: 30px;
  --bkp-btn-inset: 105px;
  --bkp-btn-pad-y: 15px;

  --bkp-transition: .25s ease;

  /* Barre de filtres — tout est personnalisable ici */
  --bkp-filters-bg: #f7f7f7;
  --bkp-filters-pad-y: 28px;
  --bkp-filters-pad-x: 20px;
  --bkp-filters-max: 1120px;
  --bkp-filters-gap: 12px 16px;
  --bkp-filters-margin-bottom: 40px;
  --bkp-filters-border: 0;
}

.bkp *,
.bkp *::before,
.bkp *::after{ box-sizing: border-box; }

.bkp p{ margin: 0; }

/* --- Barre de filtres --------------------------------------------------- */
/* Bande pleine largeur : déborde du conteneur Elementor des deux côtés.
   --bkp-scrollbar est posée par le JS pour compenser la largeur de la barre de
   défilement, que 100vw inclut — sans quoi la page gagne un défilement latéral.
   Personnalisation : .bkp-filters-bar (fond, bordures, padding vertical).
   Pour revenir à une bande contenue : mettre les deux marges à 0. */
.bkp-filters-bar{
  margin-bottom: var(--bkp-filters-margin-bottom);
  padding: var(--bkp-filters-pad-y) var(--bkp-filters-pad-x);
  background: var(--bkp-filters-bg);
  border: var(--bkp-filters-border);
}

/* Conteneur interne centré : .bkp-filters */
.bkp-filters{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--bkp-filters-gap);
  max-width: var(--bkp-filters-max);
  margin: 0 auto;
  padding: 0;
}

.bkp-filter{
  position: relative;
  flex: 0 1 249px;
  min-width: 200px;
  transition: opacity var(--bkp-transition);
}

.bkp-sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bkp-filter select{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  padding: 6px 48px 6px 8px;
  border: 1px solid var(--bkp-color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--bkp-color-border);
  font-family: var(--bkp-font-sans);
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
  text-overflow: ellipsis;
}
.bkp-filter select:focus-visible{
  outline: 2px solid var(--bkp-color-border);
  outline-offset: 2px;
}

/* Select inactif tant qu'aucun type n'est choisi : .bkp-filter--disabled */
.bkp-filter--disabled{ opacity: .45; }
.bkp-filter--disabled select{ cursor: not-allowed; }

.bkp-filter::after{
  content: "";
  position: absolute;
  top: 50%; right: 16px;
  width: 9px; height: 9px;
  margin-top: -7px;
  border-right: 1.5px solid var(--bkp-color-border);
  border-bottom: 1.5px solid var(--bkp-color-border);
  transform: rotate(45deg);
  pointer-events: none;
}
.bkp-filter::before{
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; right: 38px;
  width: 1px;
  background: var(--bkp-color-border);
  opacity: .5;
  pointer-events: none;
}

.bkp-reset{
  border: 0;
  background: none;
  padding: 6px 4px;
  font-family: var(--bkp-font-sans);
  font-size: 14px;
  color: var(--bkp-color-term);
  text-decoration: underline;
  cursor: pointer;
}
.bkp-reset:hover{ color: var(--bkp-color-title); }

/* --- Résultats ---------------------------------------------------------- */
.bkp-results{ transition: opacity var(--bkp-transition); }
.bkp-results[aria-busy="true"]{ opacity: .35; pointer-events: none; }

.bkp-grid{
  display: grid;
  grid-template-columns: repeat(var(--bkp-columns), minmax(0, 1fr));
  gap: var(--bkp-gutter);
}

.bkp-empty{
  padding: 60px 20px;
  text-align: center;
  font-family: var(--bkp-font-sans);
  font-size: 16px;
  color: var(--bkp-color-text);
}

/* --- Card --------------------------------------------------------------- */
.bkp-card{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}

.bkp-card__header{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  pointer-events: none; /* le clic traverse vers le lien plein-card */
}
.bkp-card__header a.bkp-card__term{ pointer-events: auto; }
.bkp-card__term{
  padding: var(--bkp-term-pad) 0 var(--bkp-term-pad) var(--bkp-term-pad);
  font-family: var(--bkp-font-serif);
  font-size: 14.4px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--bkp-color-term);
  text-decoration: none;
  transition: color var(--bkp-transition);
}
a.bkp-card__term:hover{ color: var(--bkp-color-title); }

.bkp-card__media{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--bkp-media-ratio);
  overflow: hidden;
  background: #efeae4;
}

/* Repli pour les navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 4 / 3){
  .bkp-card__media{ height: 0; padding-bottom: 75%; }
}

/* Les thèmes et Elementor imposent souvent `img { height: auto }` :
   on repositionne l'image en absolu et on verrouille les 3 propriétés
   indispensables au recadrage. */
.bkp .bkp-card .bkp-card__media > .bkp-card__img,
.bkp .bkp-card .bkp-card__media > img{
  position: absolute !important;
  top: 0; left: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  min-height: 0;
  object-fit: cover !important;
  object-position: center center;
  border-radius: 0;
  transition: transform .5s ease;
}
.bkp-card:hover .bkp-card__img{ transform: scale(1.04); }

.bkp-card__content{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.bkp-card__body{ flex: 0 0 auto; }

.bkp-card__title{
  margin: 0;
  padding: var(--bkp-title-pad-y) 0;
  font-family: var(--bkp-font-serif);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--bkp-color-title);
}
.bkp-card__title a{ color: inherit; text-decoration: none; }

.bkp-card__excerpt{
  padding: 0 var(--bkp-excerpt-pad-x);
  font-family: var(--bkp-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: var(--bkp-color-text);
}

.bkp-card__footer{
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.bkp-card__btn{
  display: block;
  margin: 20px var(--bkp-btn-inset);
  padding: var(--bkp-btn-pad-y) 0;
  background: var(--bkp-color-btn-bg);
  color: var(--bkp-color-btn-txt);
  font-family: var(--bkp-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background var(--bkp-transition);
}
.bkp-card__btn:hover,
.bkp-card__btn:focus-visible{ background: var(--bkp-color-btn-bg-h); color: #fff; }

/* Lien plein-card, sous le header et le footer */
.bkp-card__layer{
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
}

/* --- Charger plus ------------------------------------------------------- */
.bkp-loadmore-wrap{
  display: flex;
  justify-content: center;
  padding-top: 48px;
}
.bkp-loadmore-wrap[hidden]{ display: none; }

.bkp-loadmore{
  padding: 15px 36px;
  border: 1px solid var(--bkp-color-border);
  background: transparent;
  color: var(--bkp-color-border);
  font-family: var(--bkp-font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--bkp-transition), color var(--bkp-transition);
}
.bkp-loadmore:hover{ background: var(--bkp-color-btn-bg); color: #fff; }
.bkp-loadmore[disabled]{ opacity: .5; cursor: default; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px){
  .bkp{ --bkp-columns: 2; --bkp-btn-inset: 80px; }
}
@media (max-width: 640px){
  .bkp{ --bkp-columns: 1; --bkp-btn-inset: 90px; }
  .bkp-filter{ flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce){
  .bkp *{ transition: none !important; animation: none !important; }
  .bkp-card:hover .bkp-card__img{ transform: none; }
}

/* --- Panneau de diagnostic (administrateurs) ---------------------------- */
.bkp-debug{
  margin-top: 40px;
  padding: 16px 20px;
  border: 1px solid #d7d2ca;
  background: #faf8f5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #333;
}
.bkp-debug summary{ cursor: pointer; font-size: 13px; }
.bkp-debug table{ width: 100%; border-collapse: collapse; margin-top: 12px; }
.bkp-debug th,
.bkp-debug td{
  padding: 6px 8px;
  border-bottom: 1px solid #e5e0d8;
  text-align: left;
  vertical-align: top;
}
.bkp-debug th{ font-weight: 600; white-space: nowrap; }
.bkp-debug code{ background: #efeae2; padding: 1px 4px; word-break: break-word; }


button.bkp-reset:hover {
    background-color: black;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
}

button.bkp-reset {
    text-decoration: none;
    border: 1px solid;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
}