/* ======================================================
   WPZ – Moteur de recherche interne (v2)
   - Champ plein largeur, design épuré
   - Suggestions image + titre + type
   - Modale cohérente avec header WPZ
   ====================================================== */

/* ===== Base ===== */
.wpz-search {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  z-index:9999;
}

/* Champ principal */
.wpz-search__box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.03);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wpz-search__box:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(92,161,116,.15);
}

.wpz-search__input {
  flex: 1;
  width: 100%;
  border: 0;
  outline: 0;
  font-size: 16px;
  background: transparent;
  color: var(--ink);
}

.wpz-search__input::placeholder {
  color: #94a3b8;
}

.wpz-search__clear {
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  transition: color .2s ease;
}

.wpz-search__clear:hover {
  color: var(--accent);
}

/* ===== Panneau des suggestions ===== */
.wpz-search__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  padding: 6px;
  margin: 0;
  list-style: none;
  display: none;
  max-height: 60vh;
  overflow: auto;
  z-index: 9999;
}

.wpz-search__panel.is-open {
  display: block;
}

/* ===== Suggestions ===== */
.wpz-sugg {
  border-radius: 10px;
  overflow: hidden;
  transition: background .15s ease;
}

.wpz-sugg.is-active,
.wpz-sugg:hover {
  background: #f7faf8;
}

.wpz-sugg__link {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  color: var(--ink);
}

.wpz-sugg__thumb {
  width: 65px;
  height: 65px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: #f0f2f5;
  flex: 0 0 46px;
}

.wpz-sugg__thumb--ph {
  background-image: none;
}

.wpz-sugg__meta {
  flex: 1;
  min-width: 0;
}

.wpz-sugg__title {
  display: block;
  font-weight: 700;
  line-height: 1.25;
  font-size: 15px;
  color: var(--ink);
  margin: 0;
  text-decoration: none; /* ✅ supprime le soulignement */
}

.wpz-sugg__badge {
  display: inline-block;
  font-size: 12px;
  color: #fff;
  background: var(--brand);
  border-radius: 999px;
  padding: 2px 8px;
  margin: 0 0 4px 0;
}

.wpz-sugg__excerpt {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-top: 3px;
  line-height: 1.3;
  text-decoration: none; /* ✅ supprime le soulignement aussi ici */
}


.wpz-sugg--empty {
  padding: 12px;
  color: #64748b;
  text-align: center;
  font-size: 14px;
}

/* ===== Modale ===== */
.wpz-search-modal[aria-hidden="true"] {
  display: none;
}

.wpz-search-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
}

.wpz-search-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
}

.wpz-search-modal__dialog {
  position: relative;
  max-width: 900px;
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 16px;
  padding: 22px 22px 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  z-index: 2;
}

.wpz-search-modal__close {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.wpz-search-modal__close:hover {
  color: var(--accent);
}

.wpz-search-modal__hint {
  font-size: 12px;
  color: #64748b;
  padding: 10px 2px 2px;
  text-align: center;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .wpz-sugg__thumb { width: 40px; height: 40px; }
  .wpz-sugg__title { font-size: 14px; }
  .wpz-sugg__excerpt { font-size: 11px; }
}






/* ===== Top sheet mobile/tablette : modale collée en haut ===== */
@media (max-width: 1100px){
  /* Le panneau s’ouvre depuis le haut, pleine largeur */
  .wpz-search-modal__dialog{
    position: fixed;
    inset: 0 0 auto 0;              /* top:0; left:0; right:0 */
    max-width: none;
    width: 100%;
    margin: 0;                      /* collé en haut */
    border-radius: 0 0 16px 16px;   /* angles arrondis uniquement en bas */
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    z-index: 100001;                /* au-dessus de l’overlay */
  }

  /* Overlay un peu plus léger pour un effet “feuille” */
  .wpz-search-modal__overlay{
    background: rgba(15,23,42,.35);
    backdrop-filter: blur(2px);
  }

  /* Champ 100% + panneau qui peut scroller long sans déborder */
  .wpz-search__box{ width: 100%; }
  .wpz-search__panel{
    max-height: calc(100vh - 180px);  /* ajuste si besoin */
  }

  /* Bouton fermer accessible sous l’encoche iOS */
  .wpz-search-modal__close{
    top: calc(6px + env(safe-area-inset-top));
    right: 10px;
  }
}


/* Masquer l'icône native de reset des champs type=search (WebKit/Edge) */
.wpz-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.wpz-search__input::-ms-clear, 
.wpz-search__input::-ms-reveal { display: none; width: 0; height: 0; }



/* ========= DEFAULT (INLINE) : CHAMP NU, RIEN DERRIÈRE ========= */
.wpz-search:not(.wpz-search--modal) .wpz-search__box{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.wpz-search:not(.wpz-search--modal) .wpz-search__input{
  background: transparent;
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 16px;
  color: var(--ink);
  padding: 0;                  /* pas d’“épaisseur” autour */
}

/* Option : un simple liseré en bas (si tu veux VRAIMENT rien, supprime) */
.wpz-search:not(.wpz-search--modal) .wpz-search__input{
  border-bottom: 1px solid #e5e7eb;
}
.wpz-search:not(.wpz-search--modal) .wpz-search__input:focus{
  border-bottom-color: var(--brand);
}

/* Le bouton clear reste discret */
.wpz-search:not(.wpz-search--modal) .wpz-search__clear{
  display: none; /* ou leave it, selon préférence */
}

/* Le panneau de suggestions conserve son style (utile pour la lisibilité) */
.wpz-search__panel{
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  padding: 6px;
  margin: 0;
  list-style: none;
  display: none;
  max-height: 60vh;
  overflow: auto;
  z-index: 9999;
}
.wpz-search__panel.is-open{ display:block; }

/* ========= MODAL ONLY : STYLE HABILLÉ ========= */
/* Scope tout l’habillage au contexte modale via la classe */
.wpz-search--modal .wpz-search__box{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.03);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wpz-search--modal .wpz-search__box:focus-within{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(92,161,116,.15);
}
.wpz-search--modal .wpz-search__clear{
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  transition: color .2s ease;
}
.wpz-search--modal .wpz-search__clear:hover{ color: var(--accent); }

/* La modale elle-même reste inchangée (overlay + dialog) */


/* === WPZ – Search INLINE clean === */
.wpz-search:not(.wpz-search--modal) .wpz-search__box{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  background:#fff;                 /* champ blanc */
  border:1px solid #e5e7eb;        /* fin liseré gris clair */
  border-radius:10px;              /* radius demandé */
  padding:10px 14px;
  box-shadow:none;                 /* pas d’ombre */
  transition:border-color .2s ease;
}

.wpz-search:not(.wpz-search--modal) .wpz-search__box:focus-within{
  border-color:#cbd5e1;            /* focus doux, pas de glow */
  box-shadow:none;
}

.wpz-search:not(.wpz-search--modal) .wpz-search__input{
  flex:1;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:16px;
  color:#6b7280;                   /* gris clair (texte) */
}

.wpz-search:not(.wpz-search--modal) .wpz-search__input::placeholder{
  color:#9ca3af;                   /* placeholder un peu plus clair */
}

.wpz-search:not(.wpz-search--modal) .wpz-search__clear{
  border:0;
  background:transparent;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  color:#94a3b8;
}
.wpz-search:not(.wpz-search--modal) .wpz-search__clear:hover{ color:#64748b; }



/* ====== Inline (champ simple) ====== */
.wpz-search:not(.wpz-search--modal) .wpz-search__box{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px 14px;
  box-shadow:none;
  transition:border-color .2s ease;
}

.wpz-search:not(.wpz-search--modal) .wpz-search__box:focus-within{
  border-color:var(--brand,#5CA174);
}

.wpz-search:not(.wpz-search--modal) .wpz-search__input{
  flex:1;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:16px;
  color:#6b7280;
}

.wpz-search:not(.wpz-search--modal) .wpz-search__input::placeholder{
  color:#9ca3af;
}

.wpz-search:not(.wpz-search--modal) .wpz-search__clear{
  border:0;
  background:transparent;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  color:#94a3b8;
  display:inline;
  transition:color .2s ease;
}

.wpz-search:not(.wpz-search--modal) .wpz-search__clear:hover{
  color:#64748b;
}


/* ==== FORCER LES SUGGESTIONS AU-DESSUS DE TOUT ==== */
.wpz-search,
.wpz-search__panel,
.wpz-search-modal,
.wpz-search-modal__dialog{
  z-index: 2147483647 !important; /* z-index maxi */
}

.wpz-search__panel{
  position: absolute;  /* conserve l’ancrage sous le champ */
  isolation: isolate;  /* crée un contexte propre */
  contain: paint;      /* évite les interférences de parents transformés */
}












/* ================== WPZ Search — Badges différenciés Produits vs Articles ================== */

/* Badge par défaut (base neutre) */
.wpz-sugg__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 8px;
  line-height: 1.3;
  transition: all .2s ease;
}

/* PRODUITS – fond vert Iliade, texte blanc */
.wpz-sugg[data-type="catalogue"] .wpz-sugg__badge,
.wpz-sugg--catalogue .wpz-sugg__badge {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
}

/* ARTICLES – fond blanc, bordure verte, texte vert */
.wpz-sugg[data-type="post"] .wpz-sugg__badge,
.wpz-sugg--post .wpz-sugg__badge {
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--brand);
}

/* Hover doux (on fonce légèrement la bordure pour les articles) */
.wpz-sugg[data-type="post"]:hover .wpz-sugg__badge,
.wpz-sugg--post:hover .wpz-sugg__badge {
  border-color: color-mix(in oklab, var(--brand) 80%, #000);
}

/* Le reste des cartes reste blanc */
.wpz-sugg {
  background: #fff !important;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.wpz-sugg:hover {
  background: #f8faf9 !important;
}
















/* Tokens (fallbacks si non définies) */
:root{
  --brand: #5CA174;              /* Vert Iliade */
  --brand-ink: #5CA174;          /* Texte */
  --brand-bg-soft: #EAF5EE;      /* Vert très clair */
  --chip-radius: 9999px;
}

/* Bloc sous le champ */
.wpz-search__extra{ margin-top:1rem; margin-bottom:1rem; }
.wpz-search-extra__title{
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink, #0f172a);
  margin-bottom:0.45rem;
  margin-top:1rem;
}
.wpz-search-extra__chips{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;              /* espacées */
}

/* Vignette ronde cliquable */
.wpz-chip.wpz-chip--term{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .38rem .7rem;
  border-radius: var(--chip-radius);
  background: var(--brand-bg-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  color: var(--brand-ink);
  font-size: 12px;               /* demandé */
  line-height: 1;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  will-change: transform;
}
.wpz-chip.wpz-chip--term:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  border-color: var(--brand);
}
.wpz-chip.wpz-chip--term:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.wpz-chip.wpz-chip--term:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand) 60%, white);
  outline-offset: 2px;
}