/* ============================================================================
   QZR vNext — Search results
   Scoped by [data-qz-skin="search"] (the search modal panel built in search.js).
   "Spotlight" treatment: light vNext surface cards that pop on the existing dark
   search backdrop. Only vNext --qz-* tokens are used.
   ============================================================================ */

[data-qz-skin="search"] {
  font-family: var(--qz-font, inherit);
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 14px 40px;
  /* max-height: 92vh; */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
[data-qz-skin="search"] *,
[data-qz-skin="search"] *::before,
[data-qz-skin="search"] *::after { box-sizing: border-box; }

/* ── Search input → clean light pill ─────────────────────────────────────── */
[data-qz-skin="search"] .qz-sr-searchbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-pill);
  padding: 4px 8px 4px 18px;
  box-shadow: 0 10px 28px rgba(6, 20, 16, .30);
  margin: 6px 0 22px;
}
[data-qz-skin="search"] .qz-sr-searchbar__icon {
  color: var(--qz-accent-ink);
  font-size: 1.05rem;
  flex: 0 0 auto;
}
[data-qz-skin="search"] #searchInputTrigger {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--qz-text) !important;
  font-size: var(--qz-fs-h3);
  font-weight: var(--qz-fw);
  padding: 14px 0;
}
[data-qz-skin="search"] #searchInputTrigger::placeholder { color: var(--qz-muted); opacity: 1; }
[data-qz-skin="search"] .reset-search {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--qz-muted);
  font-size: 1.05rem;
  padding: 8px 10px;
  cursor: pointer;
  line-height: 1;
}
[data-qz-skin="search"] .reset-search:hover { color: var(--qz-text); }

/* Close button — dialog2 injects `.btn-close fas fa-times text-white`. It sits on
   the dark search backdrop, so drop the fixed Bootstrap SVG and the global
   dark-mode invert (which flips the white FA glyph to black → invisible) and keep
   a plain white times glyph, visible in both light and dark. */
.modal-search-box .btn-close {
  background-image: none !important;
  filter: none !important;
  opacity: 1 !important;
  color: #fff !important;
  font-size: 1.05rem;
  line-height: 1;
}
.modal-search-box .btn-close:hover { opacity: .8 !important; }

/* ── Section label (sits on the dark backdrop) ───────────────────────────── */
[data-qz-skin="search"] .qz-sr-section {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 24px 4px 10px;
  font-size: 12px;
  font-weight: var(--qz-fw-strong);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
[data-qz-skin="search"] .search-box-results > .qz-sr-section:first-child { margin-top: 4px; }
[data-qz-skin="search"] .qz-sr-section__count {
  font-size: 11px;
  font-weight: var(--qz-fw-strong);
  letter-spacing: 0;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .16);
  border-radius: var(--qz-r-pill);
  padding: 1px 9px;
}

/* "+N autres" hint shown when a section is capped */
[data-qz-skin="search"] .qz-sr-more {
  margin: 6px 4px 2px;
  padding: 4px 2px;
  font-size: var(--qz-fs-sm);
  color: rgba(255, 255, 255, .66);
  text-align: center;
}

/* ── Results stack ───────────────────────────────────────────────────────── */
[data-qz-skin="search"] .search-box-results {
  display: flex;
  flex-direction: column;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
[data-qz-skin="search"] .qz-sr-card {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: var(--qz-surface);
  color: var(--qz-text);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  padding: 17px 18px;
  margin: 7px 0;
  box-shadow: 0 6px 18px rgba(6, 20, 16, .16);
  transition: transform var(--qz-dur-press) var(--qz-ease),
              box-shadow var(--qz-dur-press) var(--qz-ease),
              border-color var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="search"] .qz-sr-card:hover,
[data-qz-skin="search"] .qz-sr-card:focus-visible {
  border-color: var(--qz-accent-mid);
  box-shadow: 0 12px 28px rgba(6, 20, 16, .24);
  transform: translateY(-1px);
  outline: none;
}
[data-qz-skin="search"] .qz-sr-card:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(6, 20, 16, .18); }

/* Media (icon / avatar) */
[data-qz-skin="search"] .qz-sr-card__media {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: 1.3rem;
  overflow: hidden;
}
[data-qz-skin="search"] .qz-sr-card__media img { width: 100%; height: 100%; object-fit: cover; }
[data-qz-skin="search"] .qz-sr-card--player .qz-sr-card__media {
  background: color-mix(in srgb, var(--qz-accent) 15%, #fff);
  color: var(--qz-accent-ink);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
}
[data-qz-skin="search"] .qz-sr-card--quizz .qz-sr-card__media {
  background: color-mix(in srgb, var(--qz-energy) 22%, #fff);
  color: var(--qz-energy-deep);
}

/* Body */
[data-qz-skin="search"] .qz-sr-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
[data-qz-skin="search"] .qz-sr-card__type {
  font-size: 11px;
  font-weight: var(--qz-fw-strong);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--qz-accent-ink);
}
[data-qz-skin="search"] .qz-sr-card--quizz .qz-sr-card__type { color: var(--qz-energy-deep); }
[data-qz-skin="search"] .qz-sr-card__title {
  font-size: var(--qz-fs-h3);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-qz-skin="search"] .qz-sr-card__meta {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
[data-qz-skin="search"] .qz-sr-card__meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--qz-muted); opacity: .55; flex: 0 0 auto;
}
[data-qz-skin="search"] .qz-sr-card__badge {
  font-size: 11px;
  font-weight: var(--qz-fw-strong);
  padding: 2px 9px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}
[data-qz-skin="search"] .qz-sr-card__badge .fas { font-size: 9px; margin-right: 3px; }
[data-qz-skin="search"] .qz-sr-card__badge--lock { background: var(--qz-warning-bg); color: var(--qz-warning-ink); }
[data-qz-skin="search"] .qz-sr-card__badge--online { background: var(--qz-success-bg); color: var(--qz-success-ink); }

/* Chevron */
[data-qz-skin="search"] .qz-sr-card__chev {
  flex: 0 0 auto;
  color: var(--qz-line-strong);
  font-size: .9rem;
  margin-left: 2px;
  transition: color var(--qz-dur-press) var(--qz-ease), transform var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="search"] .qz-sr-card:hover .qz-sr-card__chev { color: var(--qz-accent); transform: translateX(2px); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
[data-qz-skin="search"] .qz-sr-empty {
  text-align: center;
  color: rgba(255, 255, 255, .88);
  padding: 52px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
[data-qz-skin="search"] .qz-sr-empty .qz-sr-empty__icon {
  width: 64px; height: 64px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .6);
  font-size: 1.7rem;
  margin-bottom: 4px;
}
[data-qz-skin="search"] .qz-sr-empty strong { font-size: var(--qz-fs-h3); font-weight: var(--qz-fw-strong); }
[data-qz-skin="search"] .qz-sr-empty small { font-size: var(--qz-fs-sm); color: rgba(255, 255, 255, .68); }

/* Hide the legacy pagination stub within search */
[data-qz-skin="search"] .pagination { display: none; }

/* ── Champ de recherche de l'en-tête (#searchInputTriggerOrigine) ────────────
   Ce champ vit HORS de [data-qz-skin="search"] : c'est le déclencheur dans
   l'en-tête, pas le champ du panneau. Il n'était donc couvert par rien de
   vNext, et deux choses en découlaient — mesurées, pas supposées :

     placeholder   il n'y en avait aucun. Pas "peu lisible" : absent du HTML,
                   donc rien à afficher. Ajouté dans index.html.
     texte saisi   couleur héritée noire pure, soit 1.22:1 sur le fond sombre
                   en thème dark. Ce que l'utilisateur tapait était illisible.

   La base passe par les tokens, donc les deux thèmes suivent automatiquement.
   ────────────────────────────────────────────────────────────────────────── */
input.search-input-origine,
#searchInputTriggerOrigine {
  color: var(--qz-text);
  background: transparent;
}

/* !important pour battre la règle globale `input::placeholder` de
   ui-visual-language.css, elle-même !important.
   Et --qz-muted assombri de 15 % vers le texte, parce que ce champ est posé sur
   une pastille TEINTÉE et non sur du blanc : mesuré, --qz-muted seul y tombe à
   4.29:1 en clair (4.9 sur du blanc, d'où le fait que ça passe partout
   ailleurs). Le mélange remonte à 5.20 en clair / 8.73 en sombre tout en
   restant nettement plus pâle que le texte saisi — un indice, pas une valeur. */
input.search-input-origine::placeholder,
#searchInputTriggerOrigine::placeholder {
  color: color-mix(in srgb, var(--qz-muted) 85%, var(--qz-text)) !important;
  opacity: 1;                 /* Firefox assombrit le placeholder par défaut */
}

/* Le champ est `disabled` tant que le panneau n'est pas ouvert (search.js le
   réactive au clic) ; sans cela le navigateur le grise et le placeholder
   redevient illisible. */
input.search-input-origine:disabled,
#searchInputTriggerOrigine:disabled {
  color: var(--qz-text);
  -webkit-text-fill-color: var(--qz-text);
  opacity: 1;
}
input.search-input-origine:disabled::placeholder,
#searchInputTriggerOrigine:disabled::placeholder {
  color: var(--qz-muted);
  -webkit-text-fill-color: var(--qz-muted);
  opacity: 1;
}