/* Recherche fixe et autocomplétion dans le champ. */
.portfolio-page .main-container {
  padding-top: var(--home-header-offset, 46px);
}

.portfolio-floating-search {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(530px, calc(100% - 32px));
  z-index: 19;
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 450ms ease, visibility 550ms;
}

.portfolio-floating-search.has-visual-viewport {
  top: calc(var(--search-viewport-bottom) - 60px - 16px - env(safe-area-inset-bottom, 0px));
  bottom: auto;
}

.portfolio-floating-search.is-awaiting-scroll {
  transform: translate(-50%, calc(100% + 24px + env(safe-area-inset-bottom, 0px)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-floating-search {
    transition: none;
  }
}

.portfolio-floating-search .search-wrapper {
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Version 1 conservée : verre blanc et ombre du popup d'accueil. */
.portfolio-floating-search .search-bar {
  height: 60px;
  line-height: 22px;
  padding: 18px 58px 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.07);
}

/* Version 2 : contour lisible sur blanc, avec transparence sur les images.
   Pour revenir à la version 1, remplacer data-search-version="2" par "1"
   sur la section de recherche dans Eco-portfolio.html. */
.portfolio-floating-search[data-search-version="2"] .search-bar {
  background: rgba(242, 242, 245, 0.88);
  border-color: rgba(29, 29, 31, 0.12);
  box-shadow: 0 8px 28px rgba(17, 17, 17, 0.12),
              0 2px 6px rgba(17, 17, 17, 0.06);
}

/* Version 3 : même verre que la V1 sur les images, teinté sur le blanc.
   data-search-version="1" réactive la V1 sans adaptation au défilement. */
.portfolio-floating-search[data-search-version="3"] .search-bar {
  background: rgba(235, 235, 238, 0.9);
  transition: background-color 280ms ease;
}

.portfolio-floating-search[data-search-version="3"][data-over-image="true"] .search-bar {
  background: rgba(255, 255, 255, 0.68);
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-floating-search[data-search-version="3"] .search-bar {
    transition: none;
  }
}

.portfolio-floating-search .search-bar:focus,
.portfolio-floating-search .search-bar:focus-visible {
  outline: none;
}

.portfolio-floating-search .reset-search {
  width: 48px;
  height: 48px;
  right: 8px;
  padding: 0;
  touch-action: manipulation;
}

.portfolio-floating-search .reset-search:focus-visible {
  outline: 1px solid #808080;
  outline-offset: 2px;
}

.portfolio-floating-search .search-completion {
  position: absolute;
  inset: 1px 58px 1px 21px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: pre;
  pointer-events: none;
  font-family: 'proxima-nova', arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

#search-completion-prefix {
  color: transparent;
  flex-shrink: 0;
}

#search-completion-suffix {
  color: #a6a6a6;
}

/* Compteur discret, toujours gris, placé avant le cœur. */
.project-like {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 4px 0;
  margin: -4px 0;
  background: transparent;
  color: #ccc;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  touch-action: manipulation;
}
.pictogram-container .project-like img { margin-left: 0; }
.like-count { font-variant-numeric: tabular-nums; }
.project-like:focus-visible { outline: 2px solid #0d4dff; outline-offset: 3px; }
.project-like:disabled { cursor: wait; }
.grid-container .text-content { padding-right: 112px; }

/* La recherche est inactive pendant la saisie du mot de passe privé. */
.private-overlay-open .portfolio-floating-search {
  visibility: hidden;
  pointer-events: none;
}