/* ==========================================================================
   Page Exposants — filtres + grille de fiches
   ========================================================================== */

/* ---------------------------------------------------------- Recherche -- */
.recherche {
  position: relative; margin-top: 28px; max-width: 420px;
  display: flex; align-items: center;
}
.recherche svg {
  position: absolute; left: 16px; width: 18px; height: 18px;
  fill: var(--text-faint); pointer-events: none;
}
.recherche input {
  width: 100%; font-family: var(--sans); font-size: 15.5px;
  padding: 14px 44px 14px 44px; border-radius: var(--radius-pill);
  border: 2px solid var(--border-strong); background: var(--surface-2);
  color: var(--text);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.recherche input::placeholder { color: var(--text-faint); }
.recherche input:focus { background: var(--surface); }
.recherche input::-webkit-search-cancel-button { display: none; }
.recherche button {
  position: absolute; right: 8px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.recherche button:hover { background: var(--surface-3); color: var(--text); }
.recherche button[hidden] { display: none; }

.filtres { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.filtre-chip {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  padding: 10px 18px; border-radius: var(--radius-pill);
  border: 2px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.filtre-chip:hover { background: var(--surface-3); }
.filtre-chip[aria-pressed="true"] { background: var(--btn-fill-bg); color: var(--btn-fill-text); }

.resultats {
  font-size: 15px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 26px;
}

.expo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.expo-card {
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  scroll-margin-top: 110px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) ease;
}
.expo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.expo-card[hidden] { display: none; }

.expo-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-3); position: relative; }
.expo-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.expo-card:hover .expo-photo img { transform: scale(1.05); }

/* Substitut quand la photo n'est pas encore fournie */
.expo-photo-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-photo);
  position: relative;
}
.expo-photo-fallback span {
  font-family: var(--display); font-weight: 900;
  font-variation-settings: var(--wonk);
  font-size: 3.4rem; letter-spacing: -.04em;
  color: var(--on-cta); text-shadow: var(--shadow-title);
}

.expo-body { padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.expo-cat {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-text); margin-bottom: 8px;
}
.expo-card h2 { font-size: 1.35rem; line-height: 1.05; margin-bottom: 3px; }
.expo-metier { font-size: 14.5px; color: var(--text-muted); font-weight: 500; margin-bottom: 12px; }
.expo-bio { font-size: 15px; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }

.expo-footer {
  margin-top: auto; padding-top: 14px; border-top: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.expo-conf-link { font-size: 14.5px; font-weight: 600; }
.expo-liens { display: flex; gap: 8px; }
.expo-liens a {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--border); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}
.expo-liens a:hover { color: var(--brand-text); border-color: var(--brand-text); text-decoration: none; }
.expo-liens svg { width: 18px; height: 18px; fill: currentColor; }

.aucun-resultat {
  padding: 60px 0; text-align: center; color: var(--text-muted); font-size: 18px;
}
.aucun-resultat[hidden] { display: none; }

@media (max-width: 760px) {
  .expo-grid { grid-template-columns: 1fr; }
}