/* ═══════════════════════════════════════════════════════════════════════════
   IMOVI+ — Barre de recherche intelligente (site public + administration)
   ───────────────────────────────────────────────────────────────────────────
   Un seul composant pour les deux mondes : le préfixe `.rch-` ne croise rien.
   Les couleurs passent par des jetons locaux repliés sur des valeurs en dur —
   la feuille fonctionne donc même si imovi-theme.css n'est pas chargé, et se
   met d'elle-même à l'habillage de l'administration avec `.rch--admin`.

   Deux formes :
     · inline  — le champ vit dans la page (accueil, catalogue) ;
     · palette — une fenêtre au centre de l'écran, ouverte par la loupe,
                 par « / » ou par Ctrl+K (barres de navigation).
   ═══════════════════════════════════════════════════════════════════════════ */

.rch{
  --rch-fond:var(--surface,#fff);
  --rch-page:var(--ivoire,#faf6f0);
  --rch-encre:var(--encre,#2b2620);
  --rch-doux:var(--texte-2,#635d55);
  --rch-ligne:var(--ligne,#e8e0d4);
  --rch-accent:var(--orange,#f97316);
  --rch-accent-txt:var(--orange-texte,#8a5d2c);
  --rch-rayon:10px;
  --rch-ombre:0 24px 60px -24px rgba(43,38,32,.34), 0 2px 10px rgba(43,38,32,.06);
  position:relative;
  font-family:var(--sans,'Instrument Sans',system-ui,sans-serif);
}
.rch *,.rch *::before,.rch *::after{box-sizing:border-box}
.rch--admin{
  --rch-fond:var(--ad-surface,#fff);
  --rch-page:var(--ad-ivoire,#faf6f0);
  --rch-encre:var(--ad-encre,#2b2620);
  --rch-doux:var(--ad-texte-2,#5e5850);
  --rch-ligne:var(--ad-ligne,#e8e0d4);
  --rch-accent:var(--ad-orange,#f97316);
  --rch-accent-txt:#a4471a;
  font-family:var(--ad-sans,'Instrument Sans',system-ui,sans-serif);
}

/* ── Le champ ──────────────────────────────────────────────────────────── */
.rch-champ{
  display:flex;align-items:center;gap:10px;
  background:var(--rch-fond);
  border:1px solid var(--rch-ligne);
  border-radius:var(--rch-rayon);
  padding:0 12px;height:46px;width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.rch-champ:focus-within{
  border-color:var(--rch-accent);
  box-shadow:0 0 0 3px rgba(249,115,22,.14);
}
.rch-champ i{color:var(--rch-doux);font-size:.95rem;flex:0 0 auto}
.rch-saisie{
  flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:.95rem;color:var(--rch-encre);height:100%;
}
.rch-saisie::placeholder{color:var(--rch-doux);opacity:.85}
.rch-saisie::-webkit-search-cancel-button{display:none}
.rch-raccourci{
  flex:0 0 auto;font-size:.68rem;font-weight:600;letter-spacing:.04em;
  color:var(--rch-doux);border:1px solid var(--rch-ligne);border-radius:4px;
  padding:2px 6px;background:var(--rch-page);white-space:nowrap;
}
.rch-vider{
  flex:0 0 auto;border:0;background:transparent;cursor:pointer;color:var(--rch-doux);
  padding:4px 6px;border-radius:4px;line-height:1;
}
.rch-vider:hover{color:var(--rch-encre);background:var(--rch-page)}
.rch-vider[hidden]{display:none}

/* ── Le panneau de résultats ───────────────────────────────────────────── */
.rch-panneau{
  /* Le champ peut être étroit (colonne d'un formulaire de catalogue) : le
     panneau, lui, doit rester lisible — d'où une largeur plancher, bornée pour
     ne jamais déborder de l'écran sur téléphone. */
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:1200;
  min-width:min(380px,calc(100vw - 32px));max-width:calc(100vw - 32px);
  background:var(--rch-fond);
  border:1px solid var(--rch-ligne);
  border-radius:var(--rch-rayon);
  box-shadow:var(--rch-ombre);
  max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;
  padding:6px;
}
.rch-panneau[hidden]{display:none}

.rch-lecture{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:9px 10px 10px;border-bottom:1px solid var(--rch-ligne);margin-bottom:4px;
}
.rch-lecture-titre{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--rch-doux);margin-right:2px;
}
.rch-jeton{
  font-size:.75rem;font-weight:600;color:var(--rch-accent-txt);
  background:rgba(249,115,22,.09);border:1px solid rgba(249,115,22,.22);
  border-radius:999px;padding:2px 9px;white-space:nowrap;
}

.rch-groupe-titre{
  display:flex;align-items:center;gap:7px;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--rch-doux);padding:10px 10px 5px;
}
.rch-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 10px;border-radius:8px;text-decoration:none;color:inherit;
  border:0;background:transparent;text-align:left;cursor:pointer;
}
.rch-item:hover,.rch-item.on{background:var(--rch-page);text-decoration:none}
.rch-item.on{box-shadow:inset 2px 0 0 var(--rch-accent)}
.rch-item-ico{
  flex:0 0 auto;width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--rch-page);color:var(--rch-accent-txt);font-size:.9rem;
  border:1px solid var(--rch-ligne);
}
/* Les libellés sont des <span> : sans `display:block`, le titre et la ligne de
   contexte se suivent sur la même ligne, collés l'un à l'autre. */
.rch-item-txt{flex:1 1 auto;min-width:0;display:block}
.rch-item-titre{
  display:block;font-size:.92rem;font-weight:600;color:var(--rch-encre);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rch-item-sous{
  display:block;font-size:.76rem;color:var(--rch-doux);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rch-item-montant{
  flex:0 0 auto;font-size:.82rem;font-weight:700;color:var(--rch-accent-txt);white-space:nowrap;
}
.rch-item mark{background:rgba(249,115,22,.22);color:inherit;padding:0 1px;border-radius:2px}

.rch-etat{padding:18px 12px;text-align:center;color:var(--rch-doux);font-size:.86rem}
.rch-etat strong{color:var(--rch-encre)}
.rch-astuces{padding:4px 12px 12px;color:var(--rch-doux);font-size:.78rem;line-height:1.7}
.rch-astuces code{
  background:var(--rch-page);border:1px solid var(--rch-ligne);border-radius:4px;
  padding:1px 5px;font-size:.74rem;color:var(--rch-encre);
}
.rch-pied{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-top:1px solid var(--rch-ligne);margin-top:4px;padding:8px 10px 4px;
  font-size:.74rem;color:var(--rch-doux);
}
.rch-pied kbd{
  font-family:inherit;border:1px solid var(--rch-ligne);border-radius:3px;
  padding:0 4px;background:var(--rch-page);font-size:.7rem;
}

/* ── Forme « palette » : ouverte par la loupe, par / ou par Ctrl+K ─────── */
.rch-declencheur{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--rch-ligne);background:var(--rch-fond);
  color:var(--rch-doux);border-radius:999px;padding:8px 14px;
  font:inherit;font-size:.85rem;line-height:1;transition:all .2s ease;
}
.rch-declencheur:hover{border-color:var(--rch-accent);color:var(--rch-encre)}
.rch-declencheur .rch-declencheur-txt{display:inline}
@media(max-width:860px){
  .rch-declencheur{padding:9px;border-radius:50%}
  .rch-declencheur .rch-declencheur-txt,.rch-declencheur .rch-raccourci{display:none}
}

.rch-voile{
  position:fixed;inset:0;z-index:2000;
  background:rgba(34,29,23,.44);backdrop-filter:blur(3px);
  display:flex;justify-content:center;align-items:flex-start;
  padding:min(12vh,110px) 16px 24px;
}
.rch-voile[hidden]{display:none}
.rch--palette{width:min(680px,100%);max-width:100%}
.rch--palette .rch-champ{height:54px;border-radius:12px;box-shadow:var(--rch-ombre)}
.rch--palette .rch-panneau{position:static;margin-top:10px;max-height:min(62vh,520px)}

@media(max-width:560px){
  .rch-voile{padding:0}
  .rch--palette{width:100%;height:100%;display:flex;flex-direction:column}
  .rch--palette .rch-champ{border-radius:0;border-left:0;border-right:0;border-top:0;box-shadow:none}
  .rch--palette .rch-panneau{border:0;border-radius:0;flex:1 1 auto;max-height:none;box-shadow:none}
}

@media(prefers-reduced-motion:reduce){
  .rch-champ,.rch-declencheur{transition:none}
}