/* EHTYMODEL — Barre de recherche flottante, CSS autonome */

#ehty-searchbar, #ehty-searchbar *{box-sizing:border-box;}
#ehty-searchbar{
  position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:99999;
  font-family:'DM Sans', sans-serif;
}

.ehty-sb-toggle{
  width:48px; height:48px; border:none; cursor:pointer;
  background:#CDAFAF; color:#000; font-size:16px;
  border-radius:4px 0 0 4px;
  box-shadow:-4px 4px 20px rgba(0,0,0,.25);
  transition:background .2s, width .2s;
}
.ehty-sb-toggle:hover{background:#b89090;}

.ehty-sb-panel{
  position:absolute; top:0; right:48px;
  width:0; overflow:hidden; height:48px;
  background:#0d0d0d; border:1px solid rgba(205,175,175,.25); border-right:none;
  border-radius:4px 0 0 4px;
  transition:width .25s ease;
}
#ehty-searchbar.is-open .ehty-sb-panel{width:280px;}

.ehty-sb-panel form{display:flex; align-items:center; height:100%; padding:0 6px 0 16px;}
.ehty-sb-panel input{
  flex:1; background:transparent; border:none; outline:none;
  color:#fff; font-family:'DM Sans', sans-serif; font-size:13px; height:100%;
}
.ehty-sb-panel input::placeholder{color:rgba(255,255,255,.4);}
.ehty-sb-panel button[type="submit"]{
  background:none; border:none; color:#CDAFAF; font-size:16px; cursor:pointer; padding:8px 10px;
}

@media (max-width:600px){
  #ehty-searchbar{display:none;}
}