/* Page « Bonus » : Groupe express & bœufs ouverts (/boeufs, /boeufs/nouveau). Mobile d'abord. */

/* Le rappel discret du parcours principal (Sélection / créer sa fiche), sous le titre. */
.boeufs__main {
  margin-top: calc(-1 * var(--s-2));
  margin-bottom: var(--s-5);
}

/* ─── Groupe express ───────────────────────────────────────────────────── */
.matchee {
  position: relative;
  display: grid;
  gap: var(--s-5);
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
  border-radius: var(--radius-xl, 1.25rem);
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, var(--signal-soft), transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
}
/* Les gros boutons d'affiche passent à la ligne plutôt que de déborder (375 px). */
.matchee .btn,
.boeuf__join .btn,
.boeufs__cta .btn {
  white-space: normal;
  text-align: center;
  height: auto;
}
@media (min-width: 900px) {
  .matchee {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--s-7);
  }
}
.matchee__tape {
  transform: rotate(-3deg);
}
.matchee__title {
  margin-top: var(--s-3);
  font-size: var(--fs-2xl);
  line-height: 0.95;
}
.matchee__lead {
  margin-top: var(--s-3);
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.55;
  max-width: 38rem;
}
.matchee__steps {
  list-style: none;
  padding: 0;
  margin-top: var(--s-5);
  display: grid;
  gap: var(--s-3);
}
.matchee__steps li {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
}
.matchee__num {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--signal);
  color: var(--on-signal);
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1;
}
.matchee__panel {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}
.matchee__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-xl);
  line-height: 1.05;
}
.matchee__ready,
.matchee__in {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}
.matchee__count {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.matchee__number {
  font-weight: 700;
  line-height: 1.3;
}
.matchee__big {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.8rem);
  line-height: 1;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
  margin-right: 0.15em;
}
.matchee__breakdown {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.matchee__breakdown li {
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.matchee__breakdown strong {
  margin-left: 0.2rem;
  font-variant-numeric: tabular-nums;
}

/* ─── Bœufs ouverts ────────────────────────────────────────────────────── */
.boeufs__open {
  display: grid;
  gap: var(--s-4);
}
.boeufs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-3);
}
.boeufs__title {
  font-size: var(--fs-xl);
  margin-top: var(--s-1);
}
.boeufs__filters {
  padding: var(--s-4);
}
.boeufs__filters-grid {
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 720px) {
  .boeufs__filters-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: end;
  }
}
.boeufs__filters-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.boeufs__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.boeuf {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}
.boeuf__foot {
  display: grid;
  gap: var(--s-2);
  padding-inline: var(--s-2);
}
.boeuf__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  color: var(--text-muted);
}
.boeuf__meta > span + span::before {
  content: '·';
  margin-right: 0.6rem;
  color: var(--text-faint);
}
.boeuf__join {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* ─── Appel à organiser ────────────────────────────────────────────────── */
.boeufs__cta {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-4);
  padding: clamp(1.5rem, 1rem + 3vw, 2.75rem);
  border-radius: var(--radius-xl, 1.25rem);
  background: var(--accent);
  color: var(--on-accent);
}
@media (min-width: 900px) {
  .boeufs__cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}
.boeufs__cta-title {
  font-size: var(--fs-2xl);
  line-height: 0.95;
}
.boeufs__cta p {
  margin-top: var(--s-2);
  max-width: 36rem;
  font-weight: 600;
}
.boeufs__cta-link {
  color: inherit;
  font-weight: 800;
}

/* ─── Formulaire « Organiser un bœuf » ─────────────────────────────────── */
.boeuf-form__other {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
/* Avec un lieu référencé choisi, les champs « Autre lieu » se rangent (sans JS, grâce à :has). */
.boeuf-form__venue:has(select option[value='']:checked) .boeuf-form__other,
.boeuf-form__venue:has(select option:checked:not([value='autre']):not([value=''])) .boeuf-form__other {
  display: none;
}
.boeuf-form__venue:has(.boeuf-form__other [aria-invalid='true']) .boeuf-form__other {
  display: grid;
}
.capacity-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
}
.capacity {
  display: grid;
  gap: 0.35rem;
  padding: var(--s-3);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.capacity__label {
  font-weight: 700;
  font-size: var(--fs-sm);
}
.capacity__input {
  max-width: 6rem;
  font-variant-numeric: tabular-nums;
}