/* =========================================================
   dpsearch.css — style "barre intégrée" + bouton loupe
   ========================================================= */




.dp-search{
  width:100%;
  position:relative;

  /* Ajuste ces valeurs si besoin */
  --dp-height: 56px;
  --dp-radius: 18px;
  --dp-border: #e6e6e6;
  --dp-bg: #ffffff;

  --dp-btn-bg: #e0621b;   /* orange du site */
  --dp-btn-radius: 16px;

  --dp-text: #111;
  --dp-placeholder: #7b7b7b;
}

/* label accessible */
.dp-search__label{
  position:absolute;
  left:-9999px;
}

/* Le wrapper devient la "pillule" */
.dp-search__control{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;

  height: var(--dp-height);
  background: var(--dp-bg);

  border: 2px solid var(--dp-border);
  border-radius: var(--dp-radius);

  box-sizing:border-box;
  overflow:hidden;
}

/* Input prend toute la place, en laissant la place au bouton */
.dp-search__input{
  flex:1;
  min-width:0;

  height:100%;
  padding-right: calc(var(--dp-height) + 20px) !important;
padding-left: 22px !important;

  border:0;
  outline:none;
  background:transparent;
  color: var(--dp-text);

  font-size: 18px;
  box-sizing:border-box;

  -webkit-appearance:none;
  appearance:none;
}

.dp-search__input::placeholder{
  color: var(--dp-placeholder);
}

/* Focus: on met un ring sur le container */
.dp-search__control:focus-within{
  border-color:#cfcfcf;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

/* Bouton loupe, à droite, intégré */
.dp-search__btn{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);

  width: calc(var(--dp-height) - 16px);
  height: calc(var(--dp-height) - 16px);

  border:0;
  border-radius: var(--dp-btn-radius);
  background: var(--dp-btn-bg);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  padding:0;
}

/* SVG loupe */
.dp-search__btn-icon svg{
  width:22px;
  height:22px;
  fill:#fff;
}

/* Hover/active */
.dp-search__btn:hover{ opacity:.95; }
.dp-search__btn:active{ transform:translateY(-50%) scale(.98); }
.dp-search__btn:focus{ outline:none; }

/* Suggestions (step 2) */
.dp-search__suggestions{
  display:block;
  position:absolute;
  left:0;
  right:0;
  top: calc(var(--dp-height) + 10px);

  background:#fff;
  border:1px solid #ddd;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  z-index:999;
}

/* Mobile: on garde la même UI (barre + bouton intégré)
   => pas d’empilement, c’est exactement ton exemple */
@media (max-width: 640px){
  .dp-search{
    --dp-height: 58px;
    --dp-radius: 18px;
    --dp-btn-radius: 16px;
  }

  .dp-search__input{
    font-size: 16px;
    padding-left:18px;
  }

  .dp-search__btn{
    right:8px;
  }
}

.dp-search__label{
  position:absolute !important;
  left:-9999px !important;
}
/* Le slot dans le header : ne pas casser la ligne */
.dpsearch-header-slot{
  flex: 1 1 450px;   /* prend l'espace dispo, base 450px */
  max-width: 450px;  /* même logique qu'avant */
  min-width: 280px;  /* évite de trop écraser */
  margin: 0 16px;    /* espace entre logo et icônes */
}

/* Important en flex: permettre le shrink */
.dpsearch-header-slot *{
  min-width: 0;
}


/* =========================================================
   FIX THEME OVERRIDES (PS 1.6 themes often style forms/inputs)
   ========================================================= */

/* Enlève les lignes/traits ajoutés par le thème sous les formulaires */
.dp-search,
.dp-search *{
  box-sizing: border-box;
}

/* Le form ne doit JAMAIS avoir de bordure / ombre / background parasite */
.dp-search{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Le container "pillule" : c’est lui qui dessine le cadre */
.dp-search__control{
  border: 2px solid var(--dp-border) !important;
  background: var(--dp-bg) !important;
  box-shadow: none !important;
}

/* Neutralise les styles du thème sur input (souvent border-bottom, bg, shadow) */
.dp-search__input{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;

  /* Empêche l’effet “ligne” en dessous (border-bottom) */
  border-bottom: 0 !important;

  /* Évite les hauteurs cheloues imposées par le thème */
  line-height: normal !important;
}

/* S'assure que l'input épouse bien la hauteur de la pillule */
.dp-search__input{
  height: 100% !important;
}

/* Bouton bien centré, sans être perturbé par styles de thème */
.dp-search__btn{
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;

  box-shadow: none !important;
  border: 0 !important;
  background: var(--dp-btn-bg) !important;
}

/* Si le thème met des pseudo-elements sur form (ligne) */
.dp-search:before,
.dp-search:after,
.dp-search__control:before,
.dp-search__control:after{
  content: none !important;
}

/* ===========================
   PATCH MARTEAU (THEME SAFE)
   =========================== */

/* Le slot du header ne doit JAMAIS dessiner une ligne */
.dpsearch-header-slot{
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
.dpsearch-header-slot:before,
.dpsearch-header-slot:after{
  content: none !important;
  display: none !important;
}

/* Supprime toute déco "underline" potentielle sur les éléments internes */
.dpsearch-header-slot .dp-search,
.dpsearch-header-slot .dp-search *{
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* La pillule doit être la seule à dessiner le cadre */
.dpsearch-header-slot .dp-search__control{
  position: relative !important;
  height: var(--dp-height) !important;
  overflow: visible !important; /* important pour que le bouton se place proprement */
  border: 2px solid var(--dp-border) !important;
  border-radius: var(--dp-radius) !important;
  background: var(--dp-bg) !important;
}

/* Input : aucun border / underline / bg / shadow */
.dpsearch-header-slot .dp-search__input{
  height: 100% !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  background-image: none !important;
  line-height: var(--dp-height) !important;
}

/* Bouton : on force un carré stable, parfaitement centré */
.dpsearch-header-slot .dp-search__btn{
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;

  width: 44px !important;
  height: 44px !important;

  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  line-height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 22px !important;
  background: var(--dp-btn-bg) !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Réserve à droite pour que le texte ne passe pas sous le bouton */
.dpsearch-header-slot .dp-search__input{
  padding-right: 70px !important;
}

.dp-search__input{
  font-size: 14px;
}
@media (max-width: 640px){
  .dp-search__input{
    font-size: 16px;
  }
}

/* ============ DPSEARCH — bouton fusionné au cadre ============ */

/* La pillule garde le radius global */
.dpsearch-header-slot .dp-search__control{
  border-radius: 18px !important;
  overflow: hidden !important; /* important pour que tout fasse un seul bloc */
  position: relative !important;
}

/* Le bouton devient une "tranche" collée à droite */
.dpsearch-header-slot button.dp-search__btn{
  top: 0 !important;
  right: 0 !important;
  transform: none !important;

  height: 100% !important;
  width: 64px !important;              /* ajuste si tu veux plus/moins large */
  border-radius: 0 18px 18px 0 !important; /* arrondi seulement à droite */

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* On laisse la place du bouton dans l'input */
.dpsearch-header-slot input.dp-search__input{
  padding-right: 70px !important; /* = width du bouton + un peu d’air */
}