/* =========================================================
   RE.css — Recherche Événements (v1)
   Toutes les classes sont préfixées RE-
   ========================================================= */

/* ---------- Cartouche de recherche ---------- */
.RE-card{
  --bd:#d7e0ea; --ring:rgba(47,111,237,.18);
  --txt:#1f2a44; --muted:#64748b;
  --bg:#ffffff; --bg2:#f7fafc; --shadow:0 14px 30px rgba(16,24,40,.12);
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  border:1px solid var(--bd);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:16px;
  max-width:720px;
  margin:10px auto 18px;
}

.RE-title{
  display:flex; align-items:center; gap:10px;
  margin:0 0 12px; color:var(--text);
}
.RE-badge{
  font-size:.8rem; color:#2c3e50;
  background:#eef3f9; border:1px solid #dbe6f7;
  padding:2px 8px; border-radius:999px;
}

/* Grille des champs */
.RE-row{
  display:grid; grid-template-columns:1fr;
  gap:12px; align-items:end;
}
@media (min-width:600px){
  .RE-row{ grid-template-columns:1.2fr .8fr; }
}

.RE-field{ position:relative; }
.RE-field > label{
  display:block; font-weight:600; color:var(--text); margin-bottom:6px;
}

.RE-input,
.RE-select{
  width:100%; box-sizing:border-box; padding:10px 12px;
  border:1px solid #c9d4e0; border-radius:10px; background:#fff;
  outline:none; transition:border-color .18s, box-shadow .18s;
}
.RE-input:focus,
.RE-select:focus{
  border-color:#2f6fed; box-shadow:0 0 0 4px rgba(47,111,237,.18);
}

/* Actions du formulaire */
.RE-actions{
  display:flex; gap:10px; align-items:center; margin-top:6px;
}
.RE-btn{
  appearance:none; border:1px solid #c9d4e0; background:#fff;
  padding:10px 14px; border-radius:10px; cursor:pointer;
}
.RE-btn:hover{ background:#f8fafc; }
.RE-submit{
  background:#2f6fed; color:#fff; border:1px solid #2a62d4;
  width:100%; padding:12px 16px; border-radius:12px; font-weight:600;
}
.RE-submit:hover{ filter:brightness(.98); }

/* Suggestions ville */
.RE-suggestions{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
  max-height:260px; overflow:auto; z-index:4000;
  background:#fff; border:1px solid #d7e0ea; border-radius:12px;
  box-shadow:0 14px 30px rgba(16,24,40,.14);
}
.RE-suggestions .RE-item{
  padding:10px 12px; cursor:pointer; border-bottom:1px solid #eff3f8;
}
.RE-suggestions .RE-item:last-child{ border-bottom:none; }
.RE-suggestions .RE-item:hover{ background:#f3f7ff; }

/* ---------- Résultats ---------- */
.RE-results{ margin-top:16px; }

.RE-cardResult{
  transition: transform .15s ease, box-shadow .15s ease;
}
.RE-cardResult:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.RE-cardTitle{
  margin-bottom:6px; color:var(--brand);
}
.RE-localisation,
.RE-distance,
.RE-desc{
  color:var(--muted);
  font-size:.95rem;
}
.RE-desc{ margin-bottom:10px; }

/* ---------- Boutons des résultats ---------- */
/* Demande: largeur divisée par 2 (et full en mobile) */
.RE-half{ display:flex; width:50%; }
@media (max-width:479px){
  .RE-half{ width:100%; }
}

/* Sécurité: texte bien lisible sur bouton primaire (au cas où un lien générique réécrit la couleur) */
.RE-fgOnPrimary,
.RE-fgOnPrimary:link,
.RE-fgOnPrimary:visited{ color:#fff; }

/* ---------- Divers ---------- */
.RE-hr{
  border:0; height:1px; background:var(--bd); margin:16px 0;
}
/* État de validation du champ ville */
.RE-field.RE-valid   input#ville { border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.15); }
.RE-field.RE-invalid input#ville { border-color:#e11d48; box-shadow:0 0 0 3px rgba(225,29,72,.12); }

/* Boutons en chargement */
.is-loading { position:relative; pointer-events:none; opacity:.85; }
.is-loading::after{
  content:""; position:absolute; right:12px; top:50%; width:14px; height:14px;
  transform:translateY(-50%); border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation: REspin .8s linear infinite;
}
@keyframes REspin { to { transform: translateY(-50%) rotate(360deg); } }