/* « Ta fiche en 2 minutes » (/commencer), « Mon groupe recrute » (/commencer/groupe) + pages de connexion.
   Non « layered » : prime sur app.css. Mobile d'abord : un écran = une question, la barre « Retour / Suivant »
   reste collée en bas. Ton posé (docs/PRODUCT.md §0.4) : questions en phrase normale, taille modérée,
   pas de capitales d'affiche dans les formulaires. */

/* ─── Coquille de l'onboarding (page « bare » : sans barre du haut ni pied) ─── */
.page-onboarding {
  min-height: 100dvh;
}
.ob {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.ob__top {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: 0.6rem 0.75rem;
  background: linear-gradient(var(--bg) 78%, color-mix(in srgb, var(--bg) 0%, transparent));
}
.ob__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 2.75rem;
}
.ob__links {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.ob__links a.small {
  color: var(--text-muted);
  font-weight: 650;
}
.ob__progress {
  margin-top: 0.35rem;
}
.ob__screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-block: var(--s-4) 0;
}

/* ─── Un écran ─── */
.ob-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
@media (prefers-reduced-motion: no-preference) {
  .ob-form--enter .ob-form__head,
  .ob-form--enter .ob-form__body {
    animation: ob-in 0.38s var(--ease) both;
  }
  .ob-form--enter .ob-form__body {
    animation-delay: 0.06s;
  }
}
@keyframes ob-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.ob-form__head {
  display: grid;
  gap: var(--s-3);
}
.ob-form__kicker {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
/* Écran facultatif (« Ton son ») : « Facultatif » bien visible, et de quoi passer tout de suite. */
.ob-optional {
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--vu) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--vu) 45%, var(--line));
  font-size: var(--fs-md);
}
.ob-optional a {
  font-weight: 750;
  color: var(--accent-text);
}
/* « Ta photo » : l'aperçu à côté du champ. */
.ob-photo__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
}
/* « Un extrait audio » : le fichier, puis ce que c'est. */
.ob-clip {
  display: grid;
  gap: var(--s-3);
}
.ob-form__title {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 1.25rem + 1.7vw, 2.25rem);
  line-height: 1.12;
}
.ob-form__lead {
  color: var(--text-muted);
  font-size: var(--fs-md);
  max-width: 38rem;
}
.ob-form__body {
  flex: 1;
}

/* Grands contrôles : on vise le pouce. */
.ob-form .pill__label {
  min-height: 2.9rem;
  font-size: 0.98rem;
}
.ob-form .pill--sm .pill__label {
  min-height: 2.5rem;
  font-size: 0.9rem;
}
.ob-form .radio-card__body {
  padding-block: 1.1rem;
}
.ob-form .radio-card__title {
  font-size: 1.15rem;
}

/* Barre du bas : Retour · (Passer) · Suivant */
.ob-nav {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 26%);
}
.ob-nav__go {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  min-width: 0;
}
.ob-nav__skip {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* Petits écrans : « Retour », « Passer » et « Suivant » tiennent sur une ligne. */
@media (max-width: 379px) {
  .ob-nav .btn {
    padding-inline: 0.8em;
  }
}
@media (min-width: 720px) {
  .ob-nav {
    position: static;
    margin-inline: 0;
    padding-inline: 0;
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    background: none;
  }
  .ob__screen {
    padding-bottom: var(--s-7);
  }
}

/* « Pré-rempli d'après ton annonce » */
.ob-from-ad {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--signal-text);
  font-weight: 650;
}

/* ─── Annonce ─── */
/* Le raccourci du premier écran (« Colle-la, on remplit pour toi ») : une ligne discrète, pas un passage obligé. */
.ob-shortcut {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  max-width: 38rem;
  color: var(--text-muted);
}
.ob-shortcut a {
  font-weight: 700;
}
.ob-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  list-style: none;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.ob-perks li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* « On a détecté : … » */
.ob-detected {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid color-mix(in srgb, var(--signal) 55%, var(--line));
  background: var(--signal-soft);
}
.ob-detected__title {
  font-weight: 780;
}
.ob-detected__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.25;
}
.ob-detected__list > div {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.ob-detected__list dt {
  flex: none;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ob-detected__list dd {
  margin: 0;
  font-weight: 650;
  min-width: 0;
}

/* ─── Niveaux par instrument ─── */
.ob-levels {
  display: grid;
  gap: var(--s-3);
}
.ob-levels__title {
  font-weight: 780;
}
/* Ce que veut dire chaque niveau (une fois pour toutes les lignes). */
.ob-levels__legend {
  display: grid;
  gap: 0.15rem 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
}
@media (min-width: 560px) {
  .ob-levels__legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ob-levels__legend strong {
  color: var(--text);
  font-weight: 700;
}
.ob-level {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-3) var(--s-4) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.ob-level.is-missing {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.ob-level__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.25rem;
  font-weight: 780;
  font-size: var(--fs-md);
}
.ob-level__emoji {
  font-size: 1.25em;
}
.ob-level__choices {
  gap: 0.4rem;
}
.ob-level__main {
  justify-self: start;
}
.ob-levels .field__error {
  margin: 0;
}

/* Case « 16 ans et CGU » : les liens sont sous la case, hors du libellé (cliquer la phrase coche, ne quitte jamais l'écran). */
.ob-cgu__links {
  margin: 0.35rem 0 0;
  padding-left: 1.9rem; /* aligné sur le texte de la case (.check : 1,25rem + 0,65rem) */
  color: var(--text-muted);
}

/* Écran « Où et quand » : les dispos sous la ville, séparées d'un filet. */
.ob-dispos {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
/* Écran « Ta musique » : « Tu cherches quoi ? » sous les artistes. */
.ob-goals {
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* ─── Ce que tu cherches : la liste « il te manque qui ? » suit « Monter un projet » ─── */
.js [data-goals]:not([data-monter]) .ob-looking {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-goals][data-monter] .ob-looking {
    animation: ob-in 0.3s var(--ease) both;
  }
}

/* Styles facultatifs (artistes) */
.ob-more {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-3) var(--s-4);
}
.ob-more > summary {
  cursor: pointer;
  font-weight: 700;
}
.ob-more[open] > summary {
  margin-bottom: var(--s-3);
}

/* ─── Dernier écran : récap de la fiche ─── */
.ob-recap {
  display: grid;
  gap: var(--s-3);
  --card-pad: 1rem;
}
.ob-recap__who {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.ob-recap__name {
  font-weight: 800;
  font-size: var(--fs-lg);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.ob-recap__list {
  display: grid;
  gap: 0.3rem;
  list-style: none;
  padding: 0;
  font-size: var(--fs-sm);
}
.ob-recap__list li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: baseline;
  padding-block: 0.3rem;
  border-top: 1px solid var(--line);
}
.ob-recap__list li > span {
  color: var(--text-muted);
  font-weight: 650;
}
.ob-recap__list strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ob-recap__list a {
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* ─── Les deux portes : « Je cherche un groupe » / « Mon groupe recrute » (premier écran) ─── */
.ob-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.ob-doors__door {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  border: 2.5px solid var(--line-strong);
  border-radius: var(--radius-btn, 0);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.ob-doors__door:hover {
  border-color: var(--text);
}
/* La porte choisie : comme une pastille cochée (orange, coche devant le titre), pour qu'on voie tout de suite
   laquelle est sélectionnée ; l'autre reste discrète (noir et blanc ne disaient pas laquelle était la bonne). */
.ob-doors__door[aria-current='page'] {
  border-color: var(--ink);
  background: var(--accent);
  color: var(--on-accent);
}
.ob-doors__title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 800;
  line-height: 1.15;
}
.ob-doors__door[aria-current='page'] .ob-doors__title::before {
  content: '';
  flex: none;
  width: 0.95em;
  height: 0.95em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ob-doors__door:not([aria-current='page']) {
  border-width: 1.5px;
  background: transparent;
}
.ob-doors__door:not([aria-current='page']) .ob-doors__title {
  font-weight: 750;
}
/* Dans un écran (« Pour moi / Pour mon groupe ») : sans la marge du haut de parcours. */
.ob-doors--compact {
  margin-bottom: 0;
}
.ob-doors__hint {
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--text-muted);
}
.ob-doors__door[aria-current='page'] .ob-doors__hint {
  color: inherit;
  opacity: 0.85;
}

/* ─── « Mon groupe recrute » : qui on cherche ─── */
.ob-places {
  display: grid;
  gap: var(--s-3);
}
.ob-place__note {
  margin: 0;
}
.ob-band-recap__places {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* ─── Connexion, mot de passe oublié, réinitialisation ─── */
.auth {
  display: grid;
  gap: var(--s-6);
  align-items: center;
  padding-block: clamp(1.5rem, 1rem + 4vw, 4.5rem) var(--s-8);
}
.auth__card {
  width: 100%;
  max-width: 30rem;
  justify-self: center;
}
.auth__title {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
  line-height: 1.12;
}
.auth__emoji {
  font-size: 2.6rem;
  line-height: 1;
}
.auth__form {
  gap: var(--s-4);
}
.auth__forgot {
  margin-top: calc(-1 * var(--s-2));
  text-align: right;
}
.auth__alt {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}
.auth__aside {
  display: none;
}
@media (min-width: 900px) {
  .auth:not(.auth--single) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  }
  .auth__aside {
    display: grid;
    gap: var(--s-4);
    justify-items: start;
  }
  .auth__card {
    justify-self: end;
  }
  .auth--single .auth__card {
    justify-self: center;
  }
}
.auth__poster {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 2px var(--text);
  paint-order: stroke fill;
}
.auth__dot {
  color: var(--accent-strong);
  -webkit-text-stroke: 0;
}
@media (forced-colors: active) {
  .auth__poster {
    color: CanvasText;
    -webkit-text-stroke: 0;
  }
}