/* ============================================================
   Archives & Recherche — filtres, résultats, pagination, viewer
   ============================================================ */

/* Results page layout */
.results-wrap { padding: 32px 0 64px; }
.results-grid {
  display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start;
}

/* === SEARCH BOX (in hero) === */
.search-box {
  max-width: 720px; margin: 24px auto 0;
  background: white; border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
  display: flex; align-items: center; padding: 6px; gap: 4px;
}
.search-box svg { margin-left: 14px; flex-shrink: 0; color: var(--gray-400); }
.search-box input {
  flex: 1; border: none; outline: none;
  padding: 16px 12px; font-family: inherit; font-size: 16px;
  color: var(--gray-900); background: transparent;
}
.search-box input::placeholder { color: var(--gray-400); }
.search-box .kbd {
  padding: 4px 10px; background: var(--gray-100);
  border-radius: 6px; font-size: 12px; color: var(--gray-500);
  font-weight: 600; letter-spacing: .3px; margin-right: 6px;
}

/* === FILTERS SIDEBAR === */
aside.filters {
  background: white; border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 24px;
  position: sticky; top: 90px;
  max-height: calc(100vh - 110px); overflow-y: auto;
}
.filters-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 2px solid var(--gray-100);
}
.filters-head h3 {
  font-size: 16px; margin: 0; color: var(--blue-900);
  font-weight: 700; letter-spacing: -0.2px;
}
.filters-head button.reset {
  background: none; border: none; color: var(--blue-700);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.filters-head button.reset:hover { background: var(--blue-50); }

.filter-group { margin-bottom: 24px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group h4 {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: var(--gray-500); text-transform: uppercase;
  margin: 0 0 12px;
}
.filter-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; margin: 0 -10px; border-radius: 6px;
  cursor: pointer; transition: background .12s ease;
}
.filter-option:hover { background: var(--blue-50); }
.filter-option label {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 14px; color: var(--gray-700);
  flex: 1;
}
.filter-option input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--blue-700);
  cursor: pointer; margin: 0;
}
.filter-option .count {
  font-size: 12px; color: var(--gray-500); font-weight: 500;
  background: var(--gray-100); padding: 2px 8px; border-radius: 10px;
}

.year-range {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.year-chip {
  padding: 5px 10px; background: var(--gray-100);
  border: 1px solid transparent; border-radius: 6px;
  font-size: 12.5px; color: var(--gray-700); font-weight: 600;
  cursor: pointer; transition: all .12s ease; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.year-chip:hover { background: var(--blue-50); color: var(--blue-800); }
.year-chip.active {
  background: var(--blue-700); color: white; border-color: var(--blue-700);
}
.year-chip .y-count {
  font-size: 10.5px; opacity: .7; font-weight: 500;
  background: rgba(0,0,0,.08); padding: 1px 5px; border-radius: 8px;
}
.year-chip.active .y-count { background: rgba(255,255,255,.22); opacity: .95; }

/* === RESULTS === */
.results-main { min-width: 0; }
.results-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; flex-wrap: wrap; gap: 12px;
}
.results-count { font-size: 15px; color: var(--gray-700); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.results-count strong { color: var(--blue-900); font-weight: 700; }
.results-count .query { color: var(--blue-800); font-weight: 600; font-style: italic; }

/* Indicateur "recherche dans le contenu en cours" */
.results-loader {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--blue-100, #dce5f1);
  border-top-color: var(--blue-800, #1d4b8f);
  border-radius: 50%;
  animation: synep-spin 0.7s linear infinite;
  flex: none;
}
.results-loader-label {
  color: var(--gray-500, #6b7280);
  font-style: italic;
  font-size: 13px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@keyframes synep-spin {
  to { transform: rotate(360deg); }
}

.sort-wrap { display: flex; align-items: center; gap: 10px; }
.sort-wrap label { font-size: 13px; color: var(--gray-500); font-weight: 500; }
.sort-wrap select {
  padding: 8px 32px 8px 12px; border: 1px solid var(--gray-300);
  border-radius: 7px; background: white; font-family: inherit; font-size: 14px;
  font-weight: 500; color: var(--gray-900); cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  appearance: none;
}
.sort-wrap select:focus { outline: 2px solid var(--blue-100); border-color: var(--blue-700); }

.active-filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.active-filters:empty { margin-bottom: 0; }
.active-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-100); color: var(--blue-800);
  padding: 5px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 600;
}
.active-pill button {
  background: none; border: none; padding: 0;
  color: var(--blue-700); font-size: 16px; line-height: 1;
  cursor: pointer; margin-left: 2px;
}
.active-pill button:hover { color: var(--blue-900); }

/* Result cards */
article.result {
  background: white; border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 18px 22px;
  margin-bottom: 10px; transition: all .15s ease;
}
article.result:hover {
  border-color: var(--blue-600); box-shadow: var(--shadow-md);
}
.result-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 8px;
}
.result-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.result-date {
  font-size: 12px; color: var(--gray-500); font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
article.result h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px; font-weight: 700; margin: 0 0 10px;
  line-height: 1.35; letter-spacing: -0.1px;
}
article.result h3 a { color: var(--gray-900); }
article.result h3 a:hover { color: var(--blue-800); cursor: pointer; }
/* Pas de surlignage "ctrl+F" jaune : on laisse le <b> de ts_headline neutre */
article.result mark,
article.result .result-snippet b {
  background: transparent; color: inherit;
  font-weight: 600; padding: 0;
}
/* Extrait retourné par la recherche plein texte (ts_headline) */
.result-snippet {
  font-size: 13.5px; color: var(--gray-600);
  line-height: 1.55; margin: -4px 0 10px;
  border-left: 2px solid var(--gray-200);
  padding-left: 10px;
  max-height: 3.5em; overflow: hidden;
}
article.result .actions {
  display: flex; gap: 16px; font-size: 13px; align-items: center; flex-wrap: wrap;
}
article.result .actions a {
  color: var(--blue-700); font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer;
}
article.result .actions a:hover { color: var(--blue-900); }
article.result .file-meta {
  color: var(--gray-500); font-size: 12px;
  margin-left: auto; font-family: ui-monospace, monospace;
}

/* Empty state */
.empty-state {
  text-align: center; padding: 60px 24px;
  background: white; border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.empty-state .icon {
  width: 64px; height: 64px; margin: 0 auto 20px;
  background: var(--blue-50); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-700);
}
.empty-state h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 22px; margin: 0 0 10px; color: var(--blue-900);
}
.empty-state p { color: var(--gray-500); margin: 0 auto 10px; max-width: 420px; }

/* Pagination */
.pagination {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 28px; flex-wrap: wrap;
}
.pagination button, .pagination .ellipsis {
  padding: 8px 14px; border: 1px solid var(--gray-200);
  border-radius: 7px; font-size: 14px; font-weight: 600;
  color: var(--gray-700); background: white; cursor: pointer;
  font-family: inherit; transition: all .12s ease;
}
.pagination button:hover:not([disabled]):not(.active) {
  border-color: var(--blue-700); color: var(--blue-800);
}
.pagination .active { background: var(--blue-700); color: white; border-color: var(--blue-700); }
.pagination [disabled] { color: var(--gray-400); cursor: not-allowed; background: var(--gray-50); border-color: var(--gray-100); }
.pagination .ellipsis { background: transparent; border: none; padding: 8px 4px; color: var(--gray-400); cursor: default; }

/* === PDF VIEWER MODAL === */
.pdf-modal {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.pdf-modal.open { display: flex; }
.pdf-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 38, 77, 0.75);
  backdrop-filter: blur(4px);
}
.pdf-modal-panel {
  position: relative;
  width: min(1100px, 96vw);
  height: min(900px, 92vh);
  background: white;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: modalOpen 0.2s ease-out;
}
@keyframes modalOpen {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.pdf-modal-header {
  background: white;
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 22px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px;
}
.pdf-modal-meta { min-width: 0; flex: 1; }
.pdf-modal-chips { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.pdf-modal-header h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 19px; margin: 0 0 4px;
  color: var(--blue-900); line-height: 1.3;
  font-weight: 700; letter-spacing: -0.2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pdf-modal-sub { font-size: 13px; color: var(--gray-500); }
.pdf-modal-actions { display: flex; gap: 8px; align-items: flex-start; flex-shrink: 0; }
.pdf-modal-actions .btn { padding: 8px 12px; font-size: 13px; }
.pdf-modal-close {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--gray-200); background: white;
  color: var(--gray-500); font-size: 20px; line-height: 1;
  cursor: pointer; transition: all .12s ease;
  display: flex; align-items: center; justify-content: center;
}
.pdf-modal-close:hover {
  background: var(--gray-100); color: var(--gray-900);
  border-color: var(--gray-300);
}
.pdf-modal-body {
  flex: 1 1 auto; position: relative;
  min-height: 480px;
  background: var(--gray-100);
  overflow: hidden;
}

/* L'attribut HTML `hidden` doit toujours gagner contre nos display:flex */
.pdf-modal [hidden],
.pdf-gated-loading[hidden],
.pdf-gated-overlay[hidden],
.pdf-teaser-fade[hidden] { display: none !important; }

/* Scène contenant le wrapper scroll + fade + overlay paywall */
.pdf-viewer-stage {
  position: absolute; inset: 0;
  display: block;
  background: var(--gray-100);
}

/* Wrapper de scroll : absent (hidden) en mode adhérent, actif en mode gated.
   En mode adhérent, l'iframe remplit tout et c'est le viewer PDF natif qui
   gère le scroll entre les pages. En mode gated, on fige la hauteur de
   l'iframe (~une page A4 au format FitH) et c'est le wrapper qui scrolle. */
.pdf-scroll-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--gray-100);
}
.pdf-modal-frame {
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--gray-100);
}

/* Mode "gated" (non-adhérent) : le wrapper devient scrollable, l'iframe prend
   une hauteur fixée à ~une page A4 + un peu de marge. L'iframe elle-même ne
   reçoit plus les événements (pointer-events:none) pour que le scroll passe
   au wrapper, pas au viewer PDF natif. */
.pdf-viewer-stage.is-gated .pdf-scroll-wrap {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.pdf-viewer-stage.is-gated .pdf-modal-frame {
  /* Hauteur = ~ratio A4 portrait (1:1.414) appliqué à la largeur du modal,
     borné pour ne pas dépasser une page complète sur grand écran. */
  height: clamp(900px, 140vh, 1400px);
  pointer-events: none;
  user-select: none;
}

/* Fondu progressif du PDF + floutage — activé dès l'ouverture pour les
   non-adhérents. On ne laisse lisible que le tout haut du document
   (entête / début du texte) puis tout le reste est flouté + blanchi. */
.pdf-teaser-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.15) 6%,
    rgba(255,255,255,0.55) 22%,
    rgba(255,255,255,0.85) 45%,
    rgba(255,255,255,0.97) 70%,
    rgba(255,255,255,1) 100%
  );
  /* Flou réel sur le contenu derrière (PDF iframe) — supporté sur
     Chrome/Edge/Safari. Dégradé pour rester subtil en haut, fort en bas. */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

/* Overlay paywall — carte ancrée en bas, révélée en même temps que le fondu. */
.pdf-gated-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 24px 24px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease-out 0.1s;
}
.pdf-gated-overlay > * { pointer-events: auto; }

/* Révélation : quand l'utilisateur a atteint le mur, fondu + carte apparaissent.
   La carte arrive avec un petit décalage + slide-up pour un effet sympa. */
.pdf-viewer-stage.is-blocked .pdf-teaser-fade,
.pdf-viewer-stage.is-blocked .pdf-gated-overlay {
  opacity: 1;
}
.pdf-gated-paywall {
  transform: translateY(14px);
  transition: transform 0.45s ease-out 0.15s;
}
.pdf-viewer-stage.is-blocked .pdf-gated-paywall {
  transform: translateY(0);
}
.pdf-gated-paywall {
  max-width: 580px; width: 100%;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 22px 28px 20px;
  box-shadow:
    0 20px 40px -12px rgba(10,37,64,.35),
    0 4px 14px -4px rgba(10,37,64,.15),
    0 0 0 1px rgba(15,23,42,.04);
  text-align: center;
  font-family: 'Inter', sans-serif;
}
.pdf-gated-lock {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue-50); color: var(--blue-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.pdf-gated-lock svg { width: 22px; height: 22px; }
.pdf-gated-paywall h4 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 19px; color: var(--blue-900);
  margin: 0 0 8px; line-height: 1.3; font-weight: 700;
}
.pdf-gated-paywall p {
  color: var(--gray-700); font-size: 14px; line-height: 1.5;
  margin: 0 0 14px;
}
.pdf-gated-ctas {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 14px;
}
.pdf-gated-ctas .btn-primary {
  background: var(--blue-800); color: white;
  padding: 12px 22px; border-radius: 8px;
  font-weight: 700; font-size: 14.5px;
  transition: background .15s;
  display: inline-block;
}
.pdf-gated-ctas .btn-primary:hover { background: var(--blue-900); }
.pdf-gated-ctas .btn-secondary {
  background: white; color: var(--blue-800);
  padding: 12px 22px; border-radius: 8px;
  font-weight: 600; font-size: 14.5px;
  border: 1px solid var(--gray-300);
  transition: all .15s;
  display: inline-block;
}
.pdf-gated-ctas .btn-secondary:hover {
  border-color: var(--blue-700); color: var(--blue-900);
}
.pdf-gated-note {
  font-size: 13px; color: var(--gray-500) !important;
  margin: 10px 0 0 !important;
}
.pdf-gated-note a { color: var(--blue-700); font-weight: 500; }
.pdf-gated-note a:hover { text-decoration: underline; }

/* Spinner chargement */
.pdf-gated-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 14px;
}
.pdf-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--blue-700);
  border-radius: 50%;
  animation: pdf-spin 0.8s linear infinite;
}
@keyframes pdf-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .results-grid { grid-template-columns: 1fr; }
  aside.filters { position: static; max-height: none; }
  .pdf-modal { padding: 0; }
  .pdf-modal-panel { width: 100vw; height: 100vh; border-radius: 0; }
  .pdf-gated-wrap { padding: 20px 14px; }
  .pdf-gated-paywall { padding: 24px 20px; }
  .pdf-gated-paywall h4 { font-size: 18px; }
}