/* Groupes : mes groupes, création, page publique, gestion, candidat·es, audition, charte.
   Feuille de page (non « layered ») : elle complète app.css sans !important. Mobile d'abord. */

.bands-h2,
.band-h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-xl);
  line-height: 1;
  letter-spacing: 0.01em;
}
.band-h3 {
  font-size: var(--fs-md);
  font-weight: 800;
}

/* ─── Mes groupes ─────────────────────────────────────────────────────────── */
.band-tile {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}
.band-tile .band-card {
  height: auto;
}
.band-tile__links {
  --cluster: var(--s-1);
}
/* « On recrute » : les places à prendre d'un de mes groupes, chacune vers ses candidat·es suggéré·es. */
.band-tile__recruit {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 2px solid var(--line-strong);
  background: var(--surface);
}
.band-tile__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--accent-text);
}
.band-tile__slots {
  display: grid;
  gap: var(--s-1);
}
.band-tile__slots li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  min-width: 0;
}
.bands-none {
  display: grid;
  gap: var(--s-2);
}

/* ─── Page publique : l'affiche ───────────────────────────────────────────── */
.band-hero {
  --h: 20;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fbf3e2;
  padding-block: clamp(2.5rem, 1.5rem + 6vw, 6rem) var(--s-6);
  background:
    radial-gradient(circle at 80% 15%, hsl(var(--h) 85% 58% / 0.55), transparent 55%),
    radial-gradient(circle at 5% 120%, hsl(calc(var(--h) + 50) 80% 50% / 0.4), transparent 50%),
    linear-gradient(135deg, hsl(var(--h) 40% 18%), hsl(calc(var(--h) + 30) 35% 8%));
}
.band-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.25;
  mix-blend-mode: overlay;
  z-index: -1;
}
.band-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.band-hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(10 8 6 / 0.88), rgb(10 8 6 / 0.35) 70%, rgb(10 8 6 / 0.2));
  z-index: -1;
}
.band-hero__inner {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}
.band-hero__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-3xl);
  line-height: 0.92;
  max-width: 16ch;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-shadow: 0 3px 18px rgb(0 0 0 / 0.45);
}
.band-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-weight: 650;
  color: rgb(251 243 226 / 0.9);
}
.band-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.band-hero__meta .icon {
  width: 1em;
  height: 1em;
}
.band-hero__actions {
  margin-top: var(--s-2);
}

/* ─── Page publique : contenu ─────────────────────────────────────────────── */
.band-layout {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 960px) {
  .band-layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: start;
  }
}
.band-section {
  scroll-margin-top: calc(var(--topbar-h) + var(--s-4));
}
/* Le même souffle entre toutes les sections (une section « stack-md » redéfinit --stack pour elle-même :
   sans ça, « On recrute » et « Le line-up » se collaient à la section d'avant). */
.band-main > * + * {
  margin-block-start: clamp(var(--s-6), 1rem + 4vw, var(--s-8));
}
.band-bio {
  max-width: 60ch;
}

/* Le son, puis « En bref » (où, envie, répertoire, répètes, âges) : juste sous le pitch, en mots simples
   et en texte lisible (docs/research/test-persona-40-50-ans.md : la page doit se comprendre en 10 secondes). */
.band-about {
  display: grid;
  gap: var(--s-4);
}
.band-genres {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  color: var(--text);
}
.band-artists {
  display: grid;
  gap: var(--s-2);
}
.band-artists__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
}
.band-about .artist-list li {
  font-size: var(--fs-sm);
}
.band-facts {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.band-about > h2 + .band-facts {
  padding-top: 0;
  border-top: 0;
}
.band-facts > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: baseline;
}
.band-facts dt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
}
.band-facts dt .icon {
  flex: none;
  width: 1em;
  height: 1em;
}
.band-facts dd {
  margin: 0;
  font-weight: 650;
  color: var(--text);
  overflow-wrap: anywhere;
}
.band-facts__more {
  font-weight: 400;
  color: var(--text-muted);
}
/* Les jours de répète, sous le rythme (« Chaque semaine » / « Le mardi et le jeudi soir »). */
.band-facts__line {
  display: block;
  font-weight: 400;
}
/* Très petit écran (320 px) : l'étiquette au-dessus de la valeur. */
@media (max-width: 359px) {
  .band-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }
}
.band-places__intro {
  color: var(--text-muted);
  max-width: 60ch;
}

.place {
  display: grid;
  gap: var(--s-3);
  padding-top: 1.8rem;
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 45%),
    var(--surface);
  scroll-margin-top: calc(var(--topbar-h) + var(--s-4));
}
.place--urgent {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
}
.place:target {
  box-shadow: 0 0 0 2px var(--accent-strong), var(--shadow-2);
}
.place__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.place__role {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1;
  min-width: 0;
}
.place__actions {
  --cluster: var(--s-3);
  margin-top: var(--s-1);
}
.place__urgent {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  color: var(--danger-text);
}

.band-members {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.band-member {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-width: 0;
}
.band-member__who {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}
.band-member__name {
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.band-member__name:hover {
  text-decoration: underline;
}
.band-member__role {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.band-member--open {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line));
}
.band-member--open .band-member__name {
  color: var(--accent-text);
}
.band-member__seat {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  font-size: 1.5rem;
}

.band-gig {
  display: grid;
  gap: var(--s-1);
  background:
    linear-gradient(135deg, var(--vu-soft), transparent 60%),
    var(--surface);
}
.band-gig__date {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-xl);
  line-height: 1;
  /* ~23 px sur mobile : sous les 24 px de --accent-strong (docs/UI.md §4), donc l'orange « texte ». */
  color: var(--accent-text);
}
.band-vibe {
  font-size: var(--fs-sm);
}
.band-cta {
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 60%),
    var(--surface);
}

.charter-list {
  display: grid;
  gap: var(--s-4);
}
.charter-list dt {
  font-weight: 800;
}
.charter-list dd {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
}

/* ─── Formulaires de groupe ───────────────────────────────────────────────── */
.band-form {
  gap: var(--s-6);
}
.band-form__group {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
}
.band-form__group + .band-form__group {
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
/* Candidat·es suggéré·es : « Chercher jusqu'à 50 km » sous la liste, et le retour au rayon du groupe. */
.cand-widen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

/* « Toi dans le groupe » : l'instrument de sa fiche en une phrase, toute la liste dans le repli « Changer ». */
.band-me {
  display: grid;
  gap: var(--s-4);
}
.band-me__summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-md);
}
.band-me__summary::-webkit-details-marker {
  display: none;
}
.band-me__change {
  margin-left: 0.35rem;
  font-weight: 750;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.band-me[open] .band-me__change {
  display: none;
}
.band-form__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-lg);
  line-height: 1;
}
.band-form__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 0.85rem;
  line-height: 1;
}
.band-form__group--missing {
  padding: var(--s-5) var(--s-4);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}
.band-form__group + .band-form__group--missing {
  border-top: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line));
}
.band-form__submit {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}

/* ─── Gestion ─────────────────────────────────────────────────────────────── */
.manage__toc {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding: var(--s-1) 0 var(--s-3);
  margin-bottom: var(--s-2);
  scrollbar-width: thin;
}
.manage__toc a {
  flex: none;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.manage__toc a:hover {
  border-color: var(--accent-strong);
  color: var(--accent-text);
}
.manage__section {
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--topbar-h) + var(--s-3));
}
.manage-slot {
  display: grid;
  gap: var(--s-3);
  scroll-margin-top: calc(var(--topbar-h) + var(--s-4));
}
.manage-slot--ouvert {
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 40%),
    var(--surface);
}
.manage-slot--pourvu,
.manage-slot--ferme {
  background: var(--surface-2);
}
.manage-slot__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-lg);
  line-height: 1;
}
.manage-slot__edit {
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}
.manage-slot__edit > summary {
  cursor: pointer;
  font-weight: 750;
  color: var(--accent-text);
  width: max-content;
  max-width: 100%;
}
.manage-slot__edit[open] > summary {
  margin-bottom: var(--s-4);
}
.manage-slot__actions {
  align-items: flex-end;
}
/* « Toujours d’actualité ? » : une note douce, pas une alerte (§0.4). */
.manage-slot__check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  border-left: 3px solid var(--vu);
  background: var(--vu-soft, var(--surface-2));
}
.manage-slot__check p {
  margin: 0;
  flex: 1 1 16rem;
}
.manage-slot__fill {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2);
}
.manage-new-slot {
  gap: var(--s-4);
}
.manage-members {
  display: grid;
}
.manage-member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.manage-member__who {
  flex: 1 1 10rem;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}
.manage-member__actions {
  --cluster: var(--s-1);
}
.manage-cover {
  border-radius: var(--radius);
  overflow: hidden;
}
.manage-danger {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
}

/* ─── Inviter par lien ────────────────────────────────────────────────────── */
.invite-box {
  scroll-margin-top: calc(var(--topbar-h) + var(--s-4));
}
.invite-box__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-md);
  font-weight: 800;
}
.invite-link {
  display: grid;
  gap: 0.4rem;
}
.invite-link__url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
}
.invite-box__preview > summary {
  cursor: pointer;
  color: var(--accent-text);
  font-weight: 650;
}
.invite-box__preview p {
  margin-top: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* ─── Audition ────────────────────────────────────────────────────────────── */
.audition-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-lg);
  line-height: 1;
}
.audition-who {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.recorder__deck {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}
.recorder__rec {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0 1.4rem 0 1rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--danger);
  background: var(--danger-soft);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s var(--ease);
}
.recorder__rec:hover {
  background: color-mix(in srgb, var(--danger) 25%, transparent);
}
.recorder__rec:active {
  transform: scale(0.97);
}
.recorder__rec:disabled {
  opacity: 0.6;
  cursor: progress;
}
.recorder__rec .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--danger-text);
}
.recorder__time {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--accent-text);
  min-width: 3.5ch;
}
.recorder__level {
  --tier: var(--signal);
  color: var(--signal);
}
.recorder.is-recording .recorder__time {
  color: var(--danger-text);
}
.recorder.is-recording [data-rec-stop] {
  animation: rec-pulse 1.4s ease-in-out infinite;
}
@keyframes rec-pulse {
  50% {
    box-shadow: 0 0 0 7px var(--danger-soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  .recorder.is-recording [data-rec-stop] {
    animation: none;
  }
}
.recorder__status {
  min-height: 1.5em;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.recorder__preview {
  padding: var(--s-4);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.audition-answer {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

/* Bouton qui ressemble à un lien */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

/* ─── Charte ──────────────────────────────────────────────────────────────── */
.charter-form {
  gap: var(--s-5);
}
.charter-field {
  display: grid;
  gap: var(--s-1);
  justify-items: start;
}
.charter-field > .field {
  width: 100%;
}
.charter-last .icon {
  vertical-align: -0.15em;
}

/* Les gros boutons d'action ne débordent jamais de leur carte (375 px). */
.place .btn,
.recorder .btn,
.band-hero .btn,
.invite-box .btn {
  max-width: 100%;
}
.recorder .btn--block,
.place__actions .btn--loud {
  white-space: normal;
  text-align: center;
}
/* Pages pratiques du groupe (gérer, poster, places, audition : body.is-calm) : pas de capitales qui crient (§0.4).
   La page publique du groupe garde sa typo d’affiche. */
.is-calm .bands-h2,
.is-calm .band-h2,
.is-calm .band-form__title,
.is-calm .manage-slot__title,
.is-calm .audition-step {
  text-transform: none;
  letter-spacing: -0.01em;
}