:root{
  --hq-primary:#f08b4d;   /* orange boutons */
  --hq-accent:#1fcbdc;    /* bleu clair (mécaniques) */
  --hq-dark:#0f2240;      /* bleu foncé badge âge */
}

/* util */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header / layout */
.hq-header { position: static; top:0; background:#fff; z-index:2; border-bottom:1px solid rgba(0,0,0,.06); background: #1B3662;
background: radial-gradient(circle, rgba(27, 54, 98, 1) 0%, rgba(6, 8, 29, 1) 100%);}
.hq-header__inner { max-width:1100px; margin:0 auto; padding:16px; display:flex; align-items:center; justify-content: center;}
.hq-header .brand { display:flex; gap:10px; align-items:center; }
.hq-header .logo { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background:var(--hq-primary); color:#fff; font-weight:700; }


.hq-search, .hq-filters, .hq-results { max-width:1100px; margin:16px auto; padding:0 16px; }
.input { padding:10px 12px; border:1px solid rgba(0,0,0,.12); border-radius:10px; width:100%; }
.input.sm { width:auto; min-width:160px; }

.chips { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.chip { padding:8px 12px; border:1px solid rgba(0,0,0,.12); border-radius:999px; background:#fff; cursor:pointer; }
.chip[aria-pressed="true"], .chip.is-active { border-color: var(--hq-primary); background: rgba(240,139,77,.08); }

.btn { padding:10px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:#fff; cursor:pointer; }
.btn-primary { background: var(--hq-primary); color:#fff; border-color: var(--hq-primary); }
.btn-ghost { background:#fff; }
.btn.sm, .btn.btn-sm { padding:8px 10px; font-size:13px; }
#submit.is-dirty::after { content:''; margin-left:.25em; font-weight:700; }
.inline { display:flex; gap:10px; align-items:center; }

/* Cards */
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.card { display:flex; flex-direction:column; background:#fff; border:1px solid rgb(0 0 0 / 19%); border-radius:12px; overflow:hidden; color:inherit; }
.card .cover { display:block; color:inherit; text-decoration:none; flex:1; }
.card .thumb { aspect-ratio: 16/10; overflow:hidden; background:#f7f7f7; position:relative; }
.card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* Badge âge (overlay) */
.card .badge-age{
  position:absolute; top:8px; right:8px;
  background: var(--hq-dark);
  color:#fff;
  font-weight:700;
  font-size:12px;
  padding:6px 8px;
  border-radius:8px;
  line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.card .meta { padding:12px; }
.card .title { font-size:16px; margin:0 0 4px; }

/* Ligne mécaniques */
.card .mechanics {
  font-style: italic;
  color: var(--hq-accent);
  font-size: 13px;
  line-height: 1.4;
  margin: 2px 0 8px;
}

/* Tags + icônes */
.tags { display:flex; gap:6px; flex-wrap:wrap; }
.tag {
  font-size:14px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.tag-inline { display:inline-flex; }

.tag .icon {
  width: 1em; height: 1em;
  display:inline-block;
  vertical-align: middle;
  color: #111;
  fill: currentColor;
}
.tag span { line-height:1; display:inline-block; }

/* CTA "Voir les règles" */
.card .cta-rules {
  display:block;
  width:100%;
  text-align:center;
  padding:12px 14px;
  background: var(--hq-primary);
  color: #fff;
  text-decoration:none;
  font-weight: 600;
  border-top: 1px solid rgba(0,0,0,.06);
}
.card .cta-rules:hover { filter: brightness(0.96); }
.card .cta-rules:focus-visible,
.card .cover:focus-visible {
  outline: 2px solid var(--hq-accent);
  outline-offset: -2px;
}

/* Autocomplete */
.hq-search .search-field { position: relative; }
.hq-search .ac { position: absolute; top:100%; left:0; right:0; max-height:320px; overflow:auto; z-index: 10000; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.08); margin-top:6px; padding:6px 0; }
.hq-search .ac .ac-item { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:10px 14px; text-decoration:none; color:inherit; }
.hq-search .ac .ac-item:hover { background:rgba(0,0,0,.04); }
.hq-search .ac .ac-item .t { font-weight:600; }
.hq-search .ac .ac-item .m { opacity:.9; font-size:12px; display:inline-flex; align-items:center; gap:6px; }
.hq-search .ac .ac-item .ok, .hq-search .ac .ac-item .no { font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.12); display:inline-flex; align-items:center; gap:6px; }
.hq-search .ac .ac-item .ok { background:#e7f8ee; } .hq-search .ac .ac-item .no { background:#f7e9ea; }
#hq-search { background: url(https://heavenquest.fr/wp-content/uploads/2025/08/loupe-search.png) center left no-repeat;height: 30px;padding-left: 35px;}

/* Results header */
.results-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }


/*ADD */
.groupe-btn {margin-top:10px;}
.field-group, .search-field {
border: 1px solid white;
    padding: 5px 15px;
    border-radius: 10px;
    margin-bottom: 15px;
	background:white;

}

.app-search {
    background: white;
    max-width: 1100px;
    margin: auto;
	box-shadow:0px 12px 18px -6px rgba(0,0,0,0.1);
}
.search-field p, .subtitle-filter {
    color: black;
    font-size: 15px;
    font-weight: 600;
}