/* ══════════════════════════════════════════════════════════════════════════
   Liste de la recherche en direct (C026, sous-tâche 11, 20/10/2026).
   Commune aux deux coques : .np-suggest (Notion'Perso, templates/layouts/base.html) reprend le « verre » de
   .search-suggest de Gestion (vendor/gestion_assets/assets/gestion.css) ; les lignes .rd-* servent aux deux, rendues par
   templates/workspace/_suggestions.html et pilotées par static/np/recherche-directe.js.
   Charte (DESIGN.md) : papier, encre, rouge rare, Inter 400 et 500 ; survol et ligne choisie par le fond seulement,
   aucun cadre ajouté ; le verre de la barre et de sa liste est la seule transparence admise. Jetons --np-* de
   static/np/menu.css (valeur de repli donnée, la coque de Gestion peut les charger après nous).
   ══════════════════════════════════════════════════════════════════════════ */

.np-suggest[hidden] { display: none !important; }
.np-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 63; /* dans le contexte de la barre (62), sous le voile (65) et le tiroir (70) */
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(60vh, 560px);
  padding: 6px;
  scroll-padding: 6px;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 16px;
  border: 1px solid rgba(30, 42, 74, 0.22);
  background: rgba(250, 246, 240, 0.9);
  color: var(--np-ink, #1e2a4a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 18px 40px -22px rgba(30, 42, 74, 0.55);
  font-family: var(--np-font, "Inter", ui-sans-serif, system-ui, sans-serif);
  font-weight: 400;
  letter-spacing: 0.003em;
  text-align: left;
}
/* Verre : flou discret quand le navigateur sait le faire ; sinon le fond papier ci-dessous reste lisible. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .np-suggest { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .np-suggest { background: var(--np-paper, #faf6f0); }
}
@media (prefers-reduced-transparency: reduce) {
  .np-suggest { background: var(--np-paper, #faf6f0); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .np-suggest { background: Canvas; border-color: CanvasText; }
}

/* ── Groupes : Clients, Commandes, Devis (un espace entre eux, pas de filet) ─────────────────────────────── */
.rd-groupe { display: flex; flex-direction: column; gap: 2px; }
.rd-groupe + .rd-groupe { margin-top: 6px; }
.rd-groupe__titre {
  padding: 8px 12px 4px;
  font: 500 11px/16px var(--np-font, "Inter", ui-sans-serif, system-ui, sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--np-ink-70, rgba(30, 42, 74, 0.72));
}

/* ── Lignes : nom en 500, détail en 400 plus petit, 44 px au moins (doigt) ──────────────────────────────── */
.rd-option {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 6px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--np-ink, #1e2a4a);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.rd-option:hover, .rd-option:focus { color: var(--np-ink, #1e2a4a); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .rd-option:hover { background: var(--np-paper-deep, #f0ebe3); }
}
/* Ligne choisie aux flèches : fond un peu plus marqué que le survol (deux lignes ne se confondent pas quand la
   souris repose sur l'une et que le clavier en choisit une autre) ; aria-selected la porte aussi aux lecteurs d'écran. */
.rd-option.is-active, .rd-option.is-active:hover { background: rgba(30, 42, 74, 0.1); }
.rd-option__titre,
.rd-option__detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.rd-option__titre { font: 500 14px/1.3 var(--np-font, "Inter", ui-sans-serif, system-ui, sans-serif); }
.rd-option__detail {
  font: 400 13px/1.3 var(--np-font, "Inter", ui-sans-serif, system-ui, sans-serif);
  color: var(--np-ink-70, rgba(30, 42, 74, 0.72));
}

/* ── Dernière ligne : « Voir tous les résultats », séparée par un espace ─────────────────────────────────── */
.rd-tout {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.rd-kbd {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid var(--np-ink-15, rgba(30, 42, 74, 0.15));
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
  color: var(--np-ink-70, rgba(30, 42, 74, 0.72));
  font: 400 11px/1.4 var(--np-font, "Inter", ui-sans-serif, system-ui, sans-serif);
}

/* ── Notes : liste vide, source muette, recherche qui ne répond pas ──────────────────────────────────────── */
.rd-note {
  padding: 10px 12px;
  font: 400 13px/1.45 var(--np-font, "Inter", ui-sans-serif, system-ui, sans-serif);
  color: var(--np-ink-70, rgba(30, 42, 74, 0.72));
  overflow-wrap: anywhere;
}

/* ── Grand écran : le nom et son détail sur une seule rangée, en deux colonnes alignées. ─────────────────────── */
@media (min-width: 1100px) {
  .rd-option__haut {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: baseline;
    column-gap: 16px;
  }
  .rd-option__haut .rd-option__titre,
  .rd-option__haut .rd-option__detail {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/* Tablette et téléphone : la liste prend la largeur de la barre (left et right à 0) ; nom au-dessus du détail. */
@media (max-width: 768px) {
  .np-suggest { max-height: min(70vh, 560px); }
}
/* Doigt : pas d'indication « Entrée » (aucun clavier). Les lignes font 44 px au moins dans tous les cas. */
@media (pointer: coarse) {
  .rd-kbd { display: none; }
  .rd-note { font-size: 14px; }
}

/* ── Coque de Gestion : gestion.css (copie vendorisée, intouchable) pose « body * { font-weight: 400 !important } »,
   puis donne le 500 à sa propre liste de sélecteurs. Les noms de lignes et les titres de groupe gardent leur 500 comme
   dans Notion'Perso (DESIGN.md : 400 pour tout, 500 pour titres et libellés). Sans effet dans la coque de Notion'Perso. */
.rd-option__titre, .rd-groupe__titre, .rd-portee, .rd-asap, .rd-pastillon, .rd-etat, .rd-statut { font-weight: 500 !important; }

@media (forced-colors: active) {
  .rd-option.is-active { background: Highlight; color: HighlightText; }
  .rd-option.is-active .rd-option__detail { color: HighlightText; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-option { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Portée et lignes visuelles (retour de Thomas du 20/10/2026 au soir) : la barre dit ce qu'elle cherche (pastille
   « Commandes », « Partout » après « / ») ; une commande montre sa frise d'étapes, son BAT, sa date client ; un client
   son pastillon d'initiales. Couleurs d'état : celles de la fiche client (static/np/fiche.css, .etat-*), point coloré,
   texte calme sauf retard et attente.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Pastille de portée dans la barre (visible quand le champ a le focus, à la place de ⌘F) ─────────────────── */
.rd-portee {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(30, 42, 74, 0.08);
  color: var(--np-ink, #1e2a4a);
  font: 500 12px/1.4 var(--np-font, "Inter", ui-sans-serif, system-ui, sans-serif);
  letter-spacing: 0.01em;
  pointer-events: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.rd-a-portee:focus-within .rd-portee { display: inline-block; }
.rd-portee.is-partout { background: var(--np-ink, #1e2a4a); color: var(--np-paper, #faf6f0); }
.rd-a-portee:focus-within input[type="search"] { padding-right: 112px; }

/* ── Indice en tête de liste : « Commandes seulement. Tapez / … » ──────────────────────────────────────────── */
.rd-indice {
  padding: 6px 12px 2px;
  font: 400 12px/1.5 var(--np-font, "Inter", ui-sans-serif, system-ui, sans-serif);
  color: var(--np-ink-70, rgba(30, 42, 74, 0.72));
}
.rd-indice .rd-kbd { display: inline; padding: 0 5px; } /* gardée au doigt aussi : c'est la touche à taper */

/* ── Commande : nom et client en haut, puis frise, statut, BAT, ASAP, date client ──────────────────────────── */
.rd-commande { gap: 4px; padding-top: 8px; padding-bottom: 8px; }
.rd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font: 400 12px/1.4 var(--np-font, "Inter", ui-sans-serif, system-ui, sans-serif);
  color: var(--np-ink-70, rgba(30, 42, 74, 0.72));
}
.rd-frise { display: inline-flex; gap: 3px; }
.rd-frise__pas { width: 16px; height: 4px; border-radius: 2px; background: rgba(30, 42, 74, 0.14); }
.rd-frise__pas.is-fait { background: var(--np-ink, #1e2a4a); }
.rd-statut { color: var(--np-ink, #1e2a4a); font-weight: 500; }
.rd-etat { display: inline-flex; align-items: center; gap: 6px; color: var(--np-ink, #1e2a4a); white-space: nowrap; }
.rd-etat::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--etat, rgba(30, 42, 74, 0.45)); }
.rd-etat--ok { --etat: var(--ok, #2d5a3d); }
.rd-etat--warn { --etat: var(--warn, #8a5a14); color: var(--warn, #8a5a14); }
.rd-etat--retard { --etat: var(--np-rouge, #c8302a); color: var(--rouge-ink, #a8261f); }
.rd-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-date--retard { color: var(--rouge-ink, #a8261f); font-weight: 500; }
.rd-asap {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(200, 48, 42, 0.1);
  color: var(--rouge-ink, #a8261f);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ── Client : pastillon d'initiales, nom et détail, dernière activité à droite ─────────────────────────────── */
.rd-client {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 176px; /* colonne d'activité fixe : les détails restent alignés */
  align-items: center;
  column-gap: 12px;
}
.rd-pastillon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--np-paper-deep, #f0ebe3);
  color: var(--np-ink, #1e2a4a);
  font: 500 12px/1 var(--np-font, "Inter", ui-sans-serif, system-ui, sans-serif);
  letter-spacing: 0.04em;
}
.rd-option.is-active .rd-pastillon, .rd-option:hover .rd-pastillon { background: rgba(255, 255, 255, 0.7); }
.rd-pastillon--prospect { background: transparent; box-shadow: inset 0 0 0 1px rgba(30, 42, 74, 0.25); }
.rd-activite {
  text-align: right;
  font: 400 12px/1.4 var(--np-font, "Inter", ui-sans-serif, system-ui, sans-serif);
  color: var(--np-ink-70, rgba(30, 42, 74, 0.72));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
  .rd-client { grid-template-columns: 32px minmax(0, 1fr); }
  .rd-activite { display: none; }
}

/* ── Devis : n° et client en haut, état en dessous ─────────────────────────────────────────────────────────── */
.rd-devis { gap: 4px; }

/* Grand écran : une commande (ou un devis) tient sur une rangée : n°, client et ville, puis l'état aligné à droite. */
@media (min-width: 1100px) {
  .rd-commande, .rd-devis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
  }
  .rd-commande .rd-option__haut, .rd-devis .rd-option__haut { grid-template-columns: 96px minmax(0, 1fr); }
  .rd-commande .rd-meta, .rd-devis .rd-meta { flex-wrap: nowrap; justify-content: flex-end; }
}

@media (forced-colors: active) {
  .rd-frise__pas { background: GrayText; }
  .rd-frise__pas.is-fait { background: CanvasText; }
  .rd-portee { border: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-portee { transition: none !important; }
}