/* =========================
   Palette et intensités
   ========================= */
:root{
  /* Teinte de base (proche de ton fond) */
  --kuz-base: 22 118 209;      /* rgb(22,118,209) */
  --kuz-alpha: 0.35;           /* transparence carte (0.5–0.9) */
  --kuz-input-alpha: 0.35;     /* transparence des champs */

  /* Néon blanc */
  --kuz-neon: 255 255 255;     /* blanc */
  --kuz-neon-soft: .35;        /* glow de base */
  --kuz-neon-strong: .65;      /* glow hover/focus */
}

/* =========================
   Carte de recherche
   ========================= */
.kuz-search-card{
  width: clamp(320px, 33vw, 1250px);
  margin: 1.5rem auto;

  /* fond bleu translucide + léger blur */
  background: rgb(var(--kuz-base) / var(--kuz-alpha));
  color: #fff;
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);

  border-radius: 14px;
  padding: 14px;

  /* bordure + glow néon blanc */
  border: 1px solid rgb(var(--kuz-neon) / .70);
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .25) inset,
    0 0 16px  rgb(var(--kuz-neon) / var(--kuz-neon-soft)),
    0 0 36px  rgb(var(--kuz-neon) / calc(var(--kuz-neon-soft) - .10));
}

.kuz-search-card:hover{
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .30) inset,
    0 0 18px  rgb(var(--kuz-neon) / var(--kuz-neon-strong)),
    0 0 44px  rgb(var(--kuz-neon) / calc(var(--kuz-neon-strong) - .20));
}

/* champs */
.kuz-field{ margin-bottom: 10px; }

.kuz-search-card input[type="text"],
.kuz-search-card input[type="number"],
.kuz-search-card select{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;

  background: rgb(var(--kuz-base) / var(--kuz-input-alpha));
  color: #fff;

  border: 1px solid rgb(var(--kuz-neon) / .25);
  box-shadow: 0 0 0 1px rgb(var(--kuz-neon) / .12) inset;
  outline: none;
}

.kuz-search-card input::placeholder{ color: rgb(255 255 255 / .75); }

.kuz-search-card input:focus,
.kuz-search-card select:focus{
  border-color: rgb(var(--kuz-neon));
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .85) inset,
    0 0 14px  rgb(var(--kuz-neon) / .50),
    0 0 28px  rgb(var(--kuz-neon) / .30);
}

/* bouton */
.kuz-btn{
  display: inline-block;
  background: #1890ff;
  color: #fff;
  border: 1px solid rgb(var(--kuz-neon) / .70);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .25) inset,
    0 0 10px rgb(var(--kuz-neon) / .35);
}
.kuz-btn:hover{
  background:#3aa2ff;
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .35) inset,
    0 0 14px rgb(var(--kuz-neon) / .55),
    0 0 26px rgb(var(--kuz-neon) / .35);
}
.kuz-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* mobile full width */
@media (max-width:640px){
  .kuz-search-card{ width: 92vw; }
}

/* =========================
   Modale résultats
   ========================= */
.kuz-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.kuz-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); }

.kuz-card{
  position: relative;
  margin: 50px auto 2vh !important;  /* top = 5px, horizontale centrée, bas = 2vh */
  width: min(92vw, 860px);
  max-height: 92vh;
  overflow: auto;

  /* même famille de couleur + légère transparence */
  background: rgb(var(--kuz-base) / 0.86);
  color: #fff;
  backdrop-filter: blur(4px) saturate(110%);
  -webkit-backdrop-filter: blur(4px) saturate(110%);

  border-radius: 16px;
  padding: 20px;

  /* bordure + glow néon blanc */
  border: 1px solid rgb(var(--kuz-neon) / .70);
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .25) inset,
    0 0 18px rgb(var(--kuz-neon) / .35),
    0 0 42px rgb(var(--kuz-neon) / .22);

  /* scroll contenu seulement */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* lock du scroll de page quand modale ouverte */
body.kuz-modal-open{ overflow: hidden; }

/* contenu de liste */
.kuz-close{
  position:absolute; top:10px; right:12px;
  font-size:22px; background:transparent; border:0; cursor:pointer;
  color:#fff; opacity:.9;
}
.kuz-close:hover,.kuz-close:focus{ opacity:1; }

.kuz-title{ font-weight:600; margin-bottom:4px; color:#fff; }
.kuz-desc{
  color:#ccc;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.kuz-meta{ color:#aaa; font-size:12px; margin-top:6px; }

.kuz-item{
  display:block; padding:12px 0;
  border-bottom:1px solid #333;
  text-decoration:none; color:#fff;
}
.kuz-item:last-child{ border-bottom:0; }
.kuz-item:hover{ background:#111; }

/* =========================
   Fallback sans backdrop-filter
   ========================= */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .kuz-search-card{ background: rgb(var(--kuz-base) / calc(var(--kuz-alpha) + 0.10)); }
  .kuz-card{ background: rgb(var(--kuz-base) / 0.92); }
}

/* ================================
   1) Bouton SEARCH : bord néon blanc
   actif & inactif (fond transparent)
   ================================ */
.kuz-btn{
  background: transparent !important;
  color: #fff;
  border: 1px solid rgb(var(--kuz-neon) / .80);
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .25) inset,
    0 0 8px  rgb(var(--kuz-neon) / .25);
  transition: box-shadow .15s ease, background-color .12s ease, border-color .15s ease;
}
.kuz-btn:hover{
  background: rgb(var(--kuz-base) / 0.14);
  border-color: rgb(var(--kuz-neon) / .75);
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .28) inset,
    0 0 10px rgb(var(--kuz-neon) / .28);
}
.kuz-btn:disabled,
.kuz-btn[disabled],
.kuz-btn[aria-disabled="true"]{
  opacity: .85;                /* lisible mais “inactif” */
  cursor: not-allowed;
  background: transparent !important;
  border-color: rgb(var(--kuz-neon) / .60) !important;
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .22) inset,
    0 0 6px  rgb(var(--kuz-neon) / .18) !important;
}

/* ==========================================
   2) Modale : chaque résultat encadré en néon
   ========================================== */
.kuz-item{
  display:block;
  padding:12px 14px;
  margin:10px 0;
  border-radius:12px;
  text-decoration:none; color:#fff;

  /* bord néon blanc simple */
  border:1px solid rgb(var(--kuz-neon) / .55);
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .18) inset,
    0 0 8px  rgb(var(--kuz-neon) / .20);

  /* on supprime l’ancien soulignement de séparation */
  border-bottom:none !important;
  background: transparent;
}
.kuz-item:hover,
.kuz-item:focus,
.kuz-item:focus-visible{
  background: rgb(var(--kuz-base) / 0.25) !important; /* bleu foncé au hover */
  outline: none;
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .24) inset,
    0 0 10px rgb(var(--kuz-neon) / .26);
}
.kuz-item:last-child{ margin-bottom:0; }

/* ==============================================
   3) Icône de menu (chevron) dans les <select>
   (Relevance et Descending/Ascending)
   ============================================== */
.kuz-search-card select{
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;

  /* chevron blanc à droite */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;

  /* espace pour l’icône */
  padding-right: 36px;
}

/* optionnel : un léger liseré interne au focus pour les selects */
.kuz-search-card select:focus{
  border-color: rgb(var(--kuz-neon));
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .85) inset,
    0 0 12px rgb(var(--kuz-neon) / .32);
}

/* === SEARCH button (neon white border, transparent background) === */
.kuz-btn{
  background: transparent !important;
  color: #fff;
  border: 1px solid rgb(var(--kuz-neon) / .80);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .25) inset,
    0 0 8px  rgb(var(--kuz-neon) / .25);
  transition: box-shadow .15s ease, background-color .12s ease, border-color .15s ease;
}

.kuz-btn:hover{
  background: rgb(var(--kuz-base) / 0.14);
  border-color: rgb(var(--kuz-neon) / .75);
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .28) inset,
    0 0 10px rgb(var(--kuz-neon) / .28);
}

/* Keep neon frame even when disabled */
.kuz-btn:disabled,
.kuz-btn[disabled],
.kuz-btn[aria-disabled="true"]{
  opacity: .85;
  cursor: not-allowed;
  background: transparent !important;
  border-color: rgb(var(--kuz-neon) / .60) !important;
  box-shadow:
    0 0 0 1px rgb(var(--kuz-neon) / .22) inset,
    0 0 6px  rgb(var(--kuz-neon) / .18) !important;
}


/* FORCE un cadre blanc quand le bouton est désactivé */
#kuz-gh-form button.kuz-btn:disabled,
#kuz-gh-form .kuz-btn[disabled],
#kuz-gh-form .kuz-btn[aria-disabled="true"],
#kuz-gh-form .kuz-btn.is-disabled{
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;     /* bord blanc franc */
  box-shadow: none !important;            /* pas de glow si tu veux un cadre "sec" */
  opacity: 1 !important;                  /* évite le grisé forcé par certains thèmes */
  cursor: not-allowed;
}

/* --- FORCE white border on disabled SEARCH button --- */
html body form#kuz-gh-form button.kuz-btn:disabled,
html body form#kuz-gh-form .kuz-btn[disabled],
html body form#kuz-gh-form .kuz-btn[aria-disabled="true"],
html body form#kuz-gh-form .kuz-btn.is-disabled{
  background: transparent !important;
  color: #fff !important;

  border-style: solid !important;
  border-width: 2px !important;
  border-color: #ffffff !important;

  box-shadow: none !important;   /* ou un léger glow si tu veux */
  opacity: 1 !important;         /* empêche le grisé forcé par certains thèmes */
  cursor: not-allowed;
}

/* Bouton SEARCH plus compact (moins d’espace interne) */
#kuz-gh-form .kuz-btn{
  padding: 6px 10px;     /* haut/bas 6px, gauche/droite 10px */
  line-height: 1.1;      /* texte un peu plus serré */
  letter-spacing: .01em; /* moins d’espacement entre lettres */
}

/* (optionnel) garder un bouton un peu plus grand sur mobile pour l’accessibilité */
@media (max-width:640px){
  #kuz-gh-form .kuz-btn{ padding: 8px 12px; }
}