/* ═══════════════════════════════════════════════════════════════
   ATELIER ANGLE NOIR — la recherche
   Un panneau, un champ, huit résultats au plus.
   ═══════════════════════════════════════════════════════════════ */

/* ── le déclencheur dans la barre (ordinateur) ───────────────── */
.rc-decl{
  display:flex; align-items:center; gap:.5rem;
  background:none; border:.5px solid rgba(200,169,110,.28);
  padding:.44rem .9rem .44rem .7rem;
  font-family:'Outfit',system-ui,sans-serif;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,242,236,.6);
  cursor:pointer; transition:all .22s;
  -webkit-appearance:none; appearance:none;
}
.rc-decl:hover{ color:#f5f2ec; border-color:rgba(200,169,110,.6); }
.rc-decl svg{ width:13px; height:13px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; }

/* la loupe du téléphone */
.rc-mob{
  display:none;
  background:none; border:0; padding:10px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.rc-mob svg{ width:19px; height:19px; fill:none; stroke:#f5f2ec;
  stroke-width:1.5; stroke-linecap:round; }

@media (max-width:1024px){
  .rc-decl{ display:none !important; }
  .rc-mob{ display:block; min-width:44px; min-height:44px; }
}

/* ── le panneau ──────────────────────────────────────────────── */
#aan-rech{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:flex-start; justify-content:center;
  visibility:hidden; opacity:0;
  transition:opacity .2s ease, visibility .2s ease;
}
html.rech-open #aan-rech{ visibility:visible; opacity:1; }
html.rech-open{ overflow:hidden; }

#aan-rech .rc-voile{
  position:absolute; inset:0;
  background:rgba(6,6,5,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

#aan-rech .rc-boite{
  position:relative;
  width:min(620px,calc(100% - 32px));
  margin-top:min(14vh,110px);
  background:#12120f;
  border:.5px solid rgba(200,169,110,.3);
  box-shadow:0 30px 90px rgba(0,0,0,.66);
  font-family:'Outfit',system-ui,sans-serif;
  -webkit-transform:translateY(-12px) scale(.985);
          transform:translateY(-12px) scale(.985);
  transition:-webkit-transform .3s cubic-bezier(.16,1,.3,1),
                     transform .3s cubic-bezier(.16,1,.3,1);
}
html.rech-open #aan-rech .rc-boite{
  -webkit-transform:translateY(0) scale(1); transform:translateY(0) scale(1);
}

#aan-rech .rc-haut{
  display:flex; align-items:center; gap:.85rem;
  padding:0 16px; border-bottom:.5px solid rgba(200,169,110,.18);
}
#aan-rech .rc-loupe{ width:17px; height:17px; flex:0 0 17px; fill:none;
  stroke:#c8a96e; stroke-width:1.5; stroke-linecap:round; }
#aan-rech .rc-champ{
  flex:1; min-width:0;
  background:none; border:0; outline:0;
  padding:19px 0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.32rem; font-weight:300; color:#f5f2ec;
  -webkit-appearance:none; appearance:none;
}
#aan-rech .rc-champ::placeholder{ color:rgba(245,242,236,.34); }
#aan-rech .rc-champ::-webkit-search-cancel-button{ -webkit-appearance:none; }
#aan-rech .rc-esc{
  flex:0 0 auto;
  background:none; border:.5px solid rgba(200,169,110,.22);
  padding:.3rem .55rem; cursor:pointer;
  font-family:'Outfit',system-ui,sans-serif;
  font-size:.5rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(245,242,236,.45);
  -webkit-appearance:none; appearance:none;
}
#aan-rech .rc-esc:hover{ color:#f5f2ec; }

#aan-rech .rc-liste{ max-height:min(52vh,430px); overflow-y:auto;
  -webkit-overflow-scrolling:touch; }
#aan-rech .rc-sec{
  padding:14px 18px 7px;
  font-size:.5rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(200,169,110,.75);
}
#aan-rech .rc-item{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:.9rem;
  padding:13px 18px;
  min-height:52px;
  text-decoration:none;
  border-bottom:.5px solid rgba(200,169,110,.09);
  transition:background .16s;
}
#aan-rech .rc-item:hover,#aan-rech .rc-item.rc-on{ background:rgba(200,169,110,.09); }
#aan-rech .rc-g{
  font-size:.48rem; letter-spacing:.15em; text-transform:uppercase;
  color:#0e0e0c; background:rgba(200,169,110,.82);
  padding:.28rem .5rem; white-space:nowrap;
}
#aan-rech .rc-t{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.02rem; font-weight:400; color:#f5f2ec; line-height:1.3;
}
#aan-rech .rc-fl{ color:rgba(200,169,110,.5); font-size:.9rem; }
#aan-rech .rc-item:hover .rc-fl,#aan-rech .rc-item.rc-on .rc-fl{ color:#c8a96e; }
#aan-rech .rc-vide{
  padding:26px 18px; font-size:.86rem; color:rgba(245,242,236,.5); line-height:1.7;
}
#aan-rech .rc-pied{
  padding:11px 18px; border-top:.5px solid rgba(200,169,110,.15);
  font-size:.58rem; letter-spacing:.06em; color:rgba(245,242,236,.34);
}
#aan-rech .rc-pied b{ color:rgba(200,169,110,.85); font-weight:400; }

@media (max-width:900px){
  #aan-rech .rc-boite{ margin-top:0; width:100%;
    height:100%; border:0; display:flex; flex-direction:column; }
  #aan-rech .rc-liste{ max-height:none; flex:1; }
  #aan-rech .rc-haut{ padding-top:env(safe-area-inset-top,0px); }
  #aan-rech .rc-champ{ font-size:1.16rem; }
}

@media (prefers-reduced-motion:reduce){
  #aan-rech,#aan-rech .rc-boite{
    transition:none !important;
    -webkit-transform:none !important; transform:none !important;
  }
}