/* JB Portfolio Boost v2.1.0
   Palette et effet verre réglables via les variables ci-dessous
   (ex. dans Elementor > Réglages du site > CSS personnalisé, sur .jb-portfolio). */

.jb-portfolio {
  --jb-bg: #eeeeee;                 /* fond de la page */
  --jb-text: #1d1d1f;               /* texte des menus */
  --jb-accent: #ff1e00;             /* accent : état actif, focus */
  --jb-on-accent: #ffffff;          /* texte posé sur l'accent */
  --jb-glass: linear-gradient(135deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .38) 100%);
  --jb-glass-blur: blur(28px) saturate(180%);
  --jb-glass-border: rgba(255, 255, 255, .8);
  --jb-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(0, 0, 0, .04),
    0 1px 2px rgba(0, 0, 0, .06),
    0 16px 40px rgba(0, 0, 0, .12);
  --jb-line: color-mix(in srgb, currentColor 18%, transparent);
  --jb-muted: color-mix(in srgb, currentColor 55%, transparent);
  --jb-ui-top: 110px;               /* distance du sélecteur au haut du mur (sous l'en-tête Harington) */
  --jb-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Page portfolio : titre Harington masqué visuellement (reste un <h1> accessible) ---------- */

body.jb-pf-page #hero,
body:has(.jb-portfolio) #hero {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* ---------- Sélecteur (vues + catégories) : centré, verre façon Apple ---------- */

.jb-portfolio { position: relative; }

.jb-pf-ui {
  display: grid;
  gap: 12px;
  justify-items: center;
  width: fit-content;
  max-width: calc(100% - 24px);
  position: absolute;
  z-index: 5;
  top: var(--jb-ui-top);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 14px 52px;
  max-height: calc(100svh - var(--jb-ui-top) - 100px);
  overflow: auto;
  transition: opacity .3s var(--jb-ease), transform .3s var(--jb-ease), visibility .3s;
  text-align: center;
  color: var(--jb-text);
  background: var(--jb-glass);
  -webkit-backdrop-filter: var(--jb-glass-blur);
  backdrop-filter: var(--jb-glass-blur);
  border: 1px solid var(--jb-glass-border);
  border-radius: 24px;
  box-shadow: var(--jb-glass-shadow);
}

.jb-pf-views,
.jb-pf-parents,
.jb-pf-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.jb-pf-chip,
.jb-pf-reset,
.jb-wall-controls button {
  font: inherit;
  font-size: .875em;
  font-weight: 500;
  line-height: 1.2;
  color: var(--jb-text);
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 999px;
  padding: .55em 1.1em;
  cursor: pointer;
  transition: background-color .2s var(--jb-ease), color .2s var(--jb-ease), border-color .2s var(--jb-ease), box-shadow .2s var(--jb-ease);
}

.jb-pf-chip:hover,
.jb-wall-controls button:hover {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(0, 0, 0, .12);
}

.jb-pf-chip[aria-pressed="true"] {
  background: var(--jb-accent);
  border-color: var(--jb-accent);
  color: var(--jb-on-accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--jb-accent) 35%, transparent);
}

/* Vues : texte seul ; la vue active passe en couleur d'accent, soulignée */
.jb-pf-view {
  background: transparent;
  border-color: transparent;
  padding-inline: .2em;
  margin: 0 .4em;
  border-radius: 0;
  color: color-mix(in srgb, var(--jb-text) 60%, transparent);
}
.jb-pf-view:hover {
  background: transparent;
  border-color: transparent;
  color: var(--jb-text);
}
.jb-pf-view[aria-pressed="true"] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--jb-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}

.jb-pf-reset {
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: .2em;
  padding-inline: 0;
}
.jb-pf-reset:hover { background: transparent; border-color: transparent; color: var(--jb-accent); }
.jb-pf-reset[hidden] { display: none; }

.jb-pf-children { display: grid; gap: 10px; justify-items: center; }
.jb-pf-children:not(.is-open) { display: none; }

.jb-pf-group-label {
  color: color-mix(in srgb, var(--jb-text) 55%, transparent);
  font-size: .8125em;
  margin-right: 4px;
}

.jb-pf-chip--sub { font-size: .8125em; padding: .45em .95em; }

.jb-pf-empty { padding: 48px 0; text-align: center; }
.jb-pf-empty[hidden] { display: none; }
.jb-pf-empty p { margin: 0 0 8px; }

.jb-portfolio :focus-visible { outline: 2px solid var(--jb-accent); outline-offset: 2px; }

/* ---------- Éléments filtrés ---------- */

.jb-portfolio .e-loop-item.jb-out { display: none !important; }

/* ---------- Vue Liste ---------- */

.jb-portfolio[data-jb-view="liste"] .elementor-loop-container {
  display: block !important;
  columns: auto !important;
}
.jb-portfolio[data-jb-view="liste"] .e-loop-item {
  border-top: 1px solid var(--jb-line);
  padding: 14px 0;
  margin: 0 !important;
}
.jb-portfolio[data-jb-view="liste"] .e-loop-item:last-child { border-bottom: 1px solid var(--jb-line); }
.jb-portfolio[data-jb-view="liste"] .jb-thumb { display: none !important; }

.jb-pf-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s var(--jb-ease, ease);
}
.jb-pf-preview.is-on { opacity: 1; }
.jb-pf-preview img { display: block; width: 100%; height: auto; }

@media (hover: none) { .jb-pf-preview { display: none; } }

/* ---------- Vue Galerie ---------- */

.jb-portfolio[data-jb-view="galerie"] .elementor-loop-container {
  display: block !important;
  columns: 4;
  column-gap: 24px;
}
.jb-portfolio[data-jb-view="galerie"] .e-loop-item {
  break-inside: avoid;
  margin: 0 0 24px !important;
}
/* Titre et catégories centrés sur la photo au survol (comme sur le Mur) */
.jb-portfolio[data-jb-view="galerie"] .e-loop-item .e-con { position: relative; }
.jb-portfolio[data-jb-view="galerie"] .jb-thumb img {
  display: block;
  width: 100% !important;
  height: auto !important;
  transition: filter .3s var(--jb-ease);
}
.jb-portfolio[data-jb-view="galerie"] .e-loop-item .jb-title,
.jb-portfolio[data-jb-view="galerie"] .e-loop-item .jb-terms {
  position: absolute !important;
  left: 0;
  top: 50%;
  z-index: 2;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 16px !important;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--jb-ease);
}
.jb-portfolio[data-jb-view="galerie"] .e-loop-item .jb-title { transform: translateY(-80%); }
.jb-portfolio[data-jb-view="galerie"] .e-loop-item .jb-terms { transform: translateY(70%); }
.jb-portfolio[data-jb-view="galerie"] .jb-title .elementor-heading-title {
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.jb-portfolio[data-jb-view="galerie"] .jb-terms,
.jb-portfolio[data-jb-view="galerie"] .jb-terms * {
  font-size: 12px !important;
  color: rgba(255, 255, 255, .85) !important;
}
.jb-portfolio[data-jb-view="galerie"] .jb-terms .elementor-icon-list-items { justify-content: center !important; }
.jb-portfolio[data-jb-view="galerie"] .e-loop-item:hover .jb-thumb img,
.jb-portfolio[data-jb-view="galerie"] .e-loop-item:focus-within .jb-thumb img { filter: brightness(.45); }
.jb-portfolio[data-jb-view="galerie"] .e-loop-item:hover .jb-title,
.jb-portfolio[data-jb-view="galerie"] .e-loop-item:hover .jb-terms,
.jb-portfolio[data-jb-view="galerie"] .e-loop-item:focus-within .jb-title,
.jb-portfolio[data-jb-view="galerie"] .e-loop-item:focus-within .jb-terms { opacity: 1; }

/* 4 colonnes sur ordinateur, 3 sur tablette, 2 sur mobile (seuils Elementor) */
@media (max-width: 1024px) {
  .jb-portfolio[data-jb-view="galerie"] .elementor-loop-container { columns: 3; column-gap: 16px; }
  .jb-portfolio[data-jb-view="galerie"] .e-loop-item { margin-bottom: 16px !important; }
  .jb-portfolio[data-jb-view="galerie"] .jb-title .elementor-heading-title { font-size: 16px !important; }
}
@media (max-width: 767px) {
  .jb-portfolio[data-jb-view="galerie"] .elementor-loop-container { columns: 2; column-gap: 10px; }
  .jb-portfolio[data-jb-view="galerie"] .e-loop-item { margin-bottom: 10px !important; }
  .jb-portfolio[data-jb-view="galerie"] .jb-title .elementor-heading-title { font-size: 14px !important; }
  .jb-portfolio[data-jb-view="galerie"] .e-loop-item .jb-title,
  .jb-portfolio[data-jb-view="galerie"] .e-loop-item .jb-terms { padding: 0 8px !important; }
}

/* Écrans tactiles (pas de survol) : titre et catégories affichés en permanence sous chaque projet */
@media (hover: none) {
  .jb-portfolio[data-jb-view="galerie"] .e-loop-item { margin-bottom: 22px !important; }
  .jb-portfolio[data-jb-view="galerie"] .e-loop-item .jb-title,
  .jb-portfolio[data-jb-view="galerie"] .e-loop-item .jb-terms {
    position: static !important;
    transform: none;
    opacity: 1;
    padding: 0 !important;
    text-align: left;
  }
  .jb-portfolio[data-jb-view="galerie"] .e-loop-item .jb-terms { margin-top: -6px !important; }
  .jb-portfolio[data-jb-view="galerie"] .jb-title .elementor-heading-title {
    font-size: 13px !important;
    color: inherit !important;
    text-shadow: none;
  }
  .jb-portfolio[data-jb-view="galerie"] .jb-terms,
  .jb-portfolio[data-jb-view="galerie"] .jb-terms * {
    font-size: 11px !important;
    color: var(--jb-muted) !important;
  }
  .jb-portfolio[data-jb-view="galerie"] .jb-terms .elementor-icon-list-items { justify-content: flex-start !important; }
  .jb-portfolio[data-jb-view="galerie"] .e-loop-item:hover .jb-thumb img,
  .jb-portfolio[data-jb-view="galerie"] .e-loop-item:focus-within .jb-thumb img { filter: none; }
}

/* ---------- Vue Mur (nuage infini) ---------- */

.jb-portfolio[data-jb-view="mur"] { position: relative; }

.jb-portfolio .jb-wall {
  position: relative;
  display: block !important;
  height: 100vh;
  height: 100svh;
  max-width: none !important;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.jb-portfolio .jb-wall.is-dragging { cursor: grabbing; }
.jb-portfolio .jb-wall:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.jb-wall-stage { position: absolute; inset: 0; }

.jb-portfolio .jb-wall .e-loop-item {
  position: absolute !important;
  left: 0;
  top: 0;
  margin: 0 !important;
  transform-origin: 0 0;
  will-change: transform;
  transition: opacity .35s var(--jb-ease), filter .35s var(--jb-ease);
}

/* Garde-fou si une carte hérite encore des réglages Harington (pleine largeur, wrapper sombre) */
.jb-portfolio .jb-wall .e-loop-item .dark-section-wrapper,
.jb-portfolio .jb-wall .e-loop-item .e-con,
.jb-portfolio .jb-wall .e-loop-item .elementor-widget {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}

.jb-portfolio .jb-wall img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: filter .3s var(--jb-ease);
}

/* Titre et catégories centrés sur la photo, révélés au survol */
.jb-portfolio .jb-wall .e-loop-item .jb-title,
.jb-portfolio .jb-wall .e-loop-item .jb-terms {
  position: absolute !important;
  left: 0;
  top: 50%;
  z-index: 2;
  width: 100% !important;
  padding: 0 12px !important;
  text-align: center;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--jb-ease);
}
.jb-portfolio .jb-wall .e-loop-item .jb-title { transform: translateY(-80%); }
.jb-portfolio .jb-wall .e-loop-item .jb-terms { transform: translateY(70%); }
.jb-portfolio .jb-wall .jb-title .elementor-heading-title {
  font-size: 15px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.jb-portfolio .jb-wall .jb-terms,
.jb-portfolio .jb-wall .jb-terms * {
  font-size: 11px !important;
  color: rgba(255, 255, 255, .85) !important;
}
.jb-portfolio .jb-wall .jb-terms .elementor-icon-list-items { justify-content: center !important; }
.jb-portfolio .jb-wall .e-loop-item:hover img,
.jb-portfolio .jb-wall .e-loop-item:focus-within img { filter: brightness(.45); }
.jb-portfolio .jb-wall .e-loop-item:hover .jb-title,
.jb-portfolio .jb-wall .e-loop-item:hover .jb-terms,
.jb-portfolio .jb-wall .e-loop-item:focus-within .jb-title,
.jb-portfolio .jb-wall .e-loop-item:focus-within .jb-terms { opacity: 1; }

/* Filtrage : les projets exclus restent en place mais s'effacent */
.jb-portfolio .jb-wall .e-loop-item.jb-out {
  display: block !important;
  opacity: .08;
  filter: grayscale(1);
  pointer-events: none;
}

/* Apparition : un seul moment orchestré à l'ouverture du mur */
.jb-portfolio .jb-wall.is-intro .e-loop-item { animation: jb-in .9s var(--jb-ease) both; animation-delay: var(--jb-d, 0ms); }
@keyframes jb-in { from { opacity: 0; } to { opacity: 1; } }

/* Liste et Galerie : le contenu démarre sous le menu (même position que sur le Nuage) */
.jb-portfolio[data-jb-view="liste"] .elementor-loop-container,
.jb-portfolio[data-jb-view="galerie"] .elementor-loop-container {
  padding-top: calc(var(--jb-ui-top) + var(--jb-ui-h, 140px) + 32px) !important;
  transition: padding-top .3s var(--jb-ease);
}

/* ---------- Menu repliable : bouton fermer (X) et pastille filtre ---------- */

.jb-pf-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--jb-accent);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s var(--jb-ease), color .2s var(--jb-ease);
}
.jb-pf-close:hover { background: var(--jb-accent); color: var(--jb-on-accent); }
.jb-pf-close svg { width: 13px; height: 13px; }

.jb-pf-open {
  position: absolute;
  z-index: 5;
  top: var(--jb-ui-top);
  left: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  color: var(--jb-text);
  background: var(--jb-glass);
  -webkit-backdrop-filter: var(--jb-glass-blur);
  backdrop-filter: var(--jb-glass-blur);
  border: 1px solid var(--jb-glass-border);
  border-radius: 50%;
  box-shadow: var(--jb-glass-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) scale(.85);
  transition: opacity .3s var(--jb-ease), transform .3s var(--jb-ease), visibility .3s, color .2s var(--jb-ease);
}
.jb-pf-open svg { width: 24px; height: 24px; }
.jb-pf-open:hover { color: var(--jb-accent); }
.jb-pf-open.has-active::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--jb-accent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

.jb-portfolio.jb-ui-closed .jb-pf-ui {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px) scale(.97);
}
.jb-portfolio.jb-ui-closed .jb-pf-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}
.jb-portfolio.jb-ui-closed .jb-pf-open:hover { transform: translateX(-50%) scale(1.06); }
.jb-portfolio[data-jb-view="mur"] .jb-pf-empty { display: none; }

.jb-wall-controls {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 5px;
  color: var(--jb-text);
  background: var(--jb-glass);
  -webkit-backdrop-filter: var(--jb-glass-blur);
  backdrop-filter: var(--jb-glass-blur);
  border: 1px solid var(--jb-glass-border);
  border-radius: 999px;
  box-shadow: var(--jb-glass-shadow);
}
.jb-wall-controls button {
  min-width: 2.6em;
  background: transparent;
  border-color: transparent;
}
.jb-wall-controls button:hover {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(0, 0, 0, .06);
}

@media (max-width: 767px) {
  .jb-portfolio { --jb-ui-top: 80px; }
  .jb-pf-ui { padding: 12px 44px; }
  .jb-wall-controls { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jb-portfolio *,
  .jb-pf-preview { transition: none !important; animation: none !important; }
}

/* ---------- Menu sticky : calque fixe au-dessus de la page ----------
   Harington fait défiler le contenu par transformation CSS : sticky/fixed n'y
   fonctionnent pas. Le menu vit donc dans un calque fixe placé sous <body>. */

.jb-portfolio.jb-pf-portal {
  position: fixed !important;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.jb-pf-portal .jb-pf-ui,
.jb-pf-portal .jb-pf-open { pointer-events: auto; }
.jb-pf-portal.is-away .jb-pf-ui,
.jb-pf-portal.is-away .jb-pf-open {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Mobile : menu en bas d'écran, centré, au-dessus de la barre système */
@media (max-width: 767px) {
  .jb-pf-portal .jb-pf-ui,
  .jb-pf-portal .jb-pf-open {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .jb-pf-portal .jb-pf-ui { max-height: 60svh; }
  .jb-portfolio.jb-ui-closed .jb-pf-ui { transform: translateX(-50%) translateY(8px) scale(.97); }
  .jb-portfolio[data-jb-view="liste"] .elementor-loop-container,
  .jb-portfolio[data-jb-view="galerie"] .elementor-loop-container {
    padding-top: calc(var(--jb-ui-top) + 16px) !important;
    padding-bottom: calc(var(--jb-ui-h, 140px) + 40px) !important;
  }
}