/* ==========================================================================
   HUNGRY JAZZ — INSCRIPTION ET CONFIRMATION
   --------------------------------------------------------------------------
   Le formulaire reprend celui de la page Contact — mêmes champs soulignés,
   mêmes états d'erreur, même résumé. Il ne reste ici que ce qui lui est
   propre : les paires de champs, les formules en boutons radio, et la
   référence sur la page de confirmation.

   Aucune valeur nouvelle : uniquement des jetons de `tokens.css`.
   ========================================================================== */

.inscription { max-width: 46rem; }

/* Deux champs par ligne au-delà du mobile : prénom/nom et e-mail/téléphone
   vont par paires dans la tête de celui qui remplit. Les séparer sur deux
   lignes allongerait le formulaire sans rien clarifier. */
.form__paire { display: grid; gap: var(--sp-2xs); }
@media (min-width: 40em) {
  .form__paire { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-m); }
}

.form__groupe {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-l);
}

.form__legende {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  padding: 0;
  margin-bottom: var(--sp-s);
}

.field__aide {
  display: block;
  margin-top: var(--sp-2xs);
  font-size: var(--fs-label);
  color: var(--c-on-paper-muted);
}
/* LA ZONE TOUCHABLE DÉPASSE LE TEXTE, sans que rien ne bouge. À 14 px, ce lien
   ne fait que 16 px de haut : au pouce, on le rate. Un remplissage vertical sur
   un élément en ligne agrandit la cible SANS écarter les lignes — la page est
   identique, le lien se touche.

   WCAG 2.2 exempte les liens au fil d'une phrase du minimum de 24 px. On n'a
   donc rien à corriger ici : on a quelque chose à améliorer. */
.field__aide a {
  text-decoration: underline;
  text-underline-offset: .25em;
  padding-block: .35em;
}

/* « facultatif » À CÔTÉ DE L'ÉTIQUETTE, et non une étoile sur tous les autres.
   Les champs obligatoires portent déjà leur astérisque : marquer l'exception
   est plus court à lire que marquer la règle. */
.field__option {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-label);
  text-transform: none;
  color: var(--c-on-paper-muted);
}
.field__option::before { content: "— "; }

/* ==========================================================================
   LA NOTE DU TARIF SOLIDAIRE
   --------------------------------------------------------------------------
   Elle apparaît au moment du choix, pas après l'envoi. Un filet épais à
   gauche plutôt qu'un fond teinté : elle se distingue sans dépendre de la
   couleur (brief §25), et elle ne ressemble pas à une erreur.
   ========================================================================== */
.field__note {
  display: block;
  margin-top: var(--sp-2xs);
  border-left: 4px solid var(--c-solo-jazz);
  padding-left: var(--sp-2xs);
  font-size: var(--fs-label);
  line-height: 1.5;
  max-width: 60ch;
}

/* MÊME PIÈGE QUE LES FORMULES : `display: block` passe devant la règle du
   navigateur `[hidden] { display: none }`. Sans cette ligne, la note serait
   visible en permanence — y compris pour quelqu'un qui n'a rien choisi. */
.field__note[hidden] { display: none; }

/* Le bouton pendant l'envoi : il ne bouge pas, il dit seulement qu'il a
   compris. Sans cela, un bouton qui ne répond plus donne envie de recliquer. */
.form__actions .btn[aria-busy="true"] { opacity: .6; cursor: progress; }

/* ==========================================================================
   LES FORMULES
   --------------------------------------------------------------------------
   Des boutons radio et non une liste déroulante : elles portent un PRIX, et
   un prix se compare. Une liste fermée obligerait à l'ouvrir pour décider.
   ========================================================================== */
.formules {
  display: grid;
  gap: var(--sp-3xs);
  margin-top: var(--sp-2xs);
}

/* `display: grid` L'EMPORTE SUR L'ATTRIBUT `hidden`, et c'est le piège.
   La feuille du navigateur pose `[hidden] { display: none }`, mais une règle
   d'auteur passe devant : le jeu de formules masqué restait affiché, et la
   page montrait les prix Solo Jazz ET les prix Danse Afro l'un sous l'autre.
   Le planning avait exactement le même défaut (`.schedule__list[hidden]`). */
.formules[hidden] { display: none; }

.formule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2xs);
  padding: var(--sp-2xs) var(--sp-s) var(--sp-2xs) var(--sp-2xs);
  border: var(--bd-rule) solid var(--c-ink);
  /* La cible tactile du site : une ligne de formule se touche au pouce. */
  min-block-size: var(--tap-min);
  cursor: pointer;
}

.formule input {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  accent-color: var(--c-ink);
}

/* L'état choisi ne tient PAS qu'à la couleur : le fond s'inverse, et le point
   du bouton radio reste visible. Une personne qui ne distingue pas les teintes
   voit quand même lequel est coché (brief §25). */
.formule:has(input:checked) {
  background: var(--c-ink);
  color: var(--c-paper);
}
.formule:has(input:checked) input { accent-color: var(--c-paper); }

.formule:has(input:focus-visible) {
  outline: 3px solid var(--c-solo-jazz);
  outline-offset: 2px;
}

.formule__nom {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.formule__prix {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
}

/* ==========================================================================
   LA RÉFÉRENCE
   --------------------------------------------------------------------------
   C'est le sujet de la page de confirmation : elle relie l'inscription au
   paiement, on la cite dans un virement et on la redonne au téléphone. Elle
   est donc composée en grand, pas glissée dans un remerciement.
   ========================================================================== */
.reference {
  border: var(--bd-rule) solid var(--c-ink);
  padding: var(--sp-m);
  margin-bottom: var(--sp-l);
}

.reference__label {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-paper-muted);
}

.reference__valeur {
  font-family: var(--f-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: var(--fw-black);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-block: var(--sp-3xs) var(--sp-2xs);
  /* Elle se lit au téléphone et se recopie dans un virement : on l'autorise à
     être sélectionnée d'un geste, et on l'empêche de se couper n'importe où. */
  user-select: all;
  overflow-wrap: anywhere;
}

.reference__note {
  font-size: var(--fs-label);
  color: var(--c-on-paper-muted);
  max-width: 48ch;
}

/* ==========================================================================
   LE DROIT À L'IMAGE
   --------------------------------------------------------------------------
   Deux réponses de même poids, posées côte à côte. Celle qui refuse n'est ni
   plus petite, ni plus pâle, ni plus bas : le document de l'association dit
   que le refus ne change rien, et la mise en page doit le dire aussi.
   ========================================================================== */

.droit__intro {
  max-width: 60ch;
  margin-block-end: var(--sp-s);
}

.droit__choix {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2xs);
  padding: var(--sp-2xs);
  /* La cible tactile du site : un choix de ce poids se touche au pouce. */
  min-block-size: var(--tap-min);
  cursor: pointer;
}

.droit__choix + .droit__choix { margin-block-start: var(--sp-4xs); }

.droit__choix input {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  accent-color: var(--c-ink);
  /* Aligné sur la première ligne de texte, et non sur le bloc entier. */
  margin-block-start: .1em;
}

/* LE CHOIX RETENU S'INVERSE, comme les formules : c'est la grammaire déjà
   posée sur cette page, et elle ne tient pas qu'à la couleur (brief §25). Les
   deux réponses s'inversent de la même façon — refuser n'est pas un second
   choix, c'est un choix. */
.droit__choix:has(input:checked) {
  background: var(--c-ink);
  color: var(--c-paper);
}
.droit__choix:has(input:checked) input { accent-color: var(--c-paper); }

.droit__choix:has(input:focus-visible) {
  outline: 3px solid var(--c-solo-jazz);
  outline-offset: 2px;
}

.droit__libre { margin-block-start: var(--sp-2xs); }

/* ---- « En savoir plus » -------------------------------------------------
   Un bouton de texte, pas un bouton d'action : il ouvre une lecture, il
   n'engage rien. */
.droit__plus-titre {
  display: inline-block;
  margin-block-start: var(--sp-2xs);
  padding: var(--sp-4xs) 0;
  border: 0;
  background: none;
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: .25em;
  color: inherit;
  cursor: pointer;
}

.droit__plus-titre:focus-visible {
  outline: 3px solid var(--c-solo-jazz);
  outline-offset: 2px;
}

.droit__texte { max-width: 62ch; }
.droit__plus .droit__texte { margin-block-start: var(--sp-2xs); }

/* ---- La fenêtre ---------------------------------------------------------
   `dialog` apporte le piège de focus, la fermeture par Échap et le retour
   du focus. On n'ajoute que l'apparence. */
.modal {
  max-inline-size: min(44rem, 92vw);
  max-block-size: 85vh;
  padding: var(--sp-l);
  border: var(--bd-rule) solid var(--c-ink);
  background: var(--c-paper);
  color: var(--c-ink);
  overflow: auto;
}

.modal::backdrop { background: rgb(0 0 0 / .6); }

.modal__fermer {
  float: right;
  margin: calc(var(--sp-m) * -1) calc(var(--sp-m) * -1) 0 var(--sp-s);
  /* 44 px : la même cible que partout ailleurs, et jamais moins. */
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  border: 0;
  background: none;
  font-size: 1.75rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

.modal__fermer:focus-visible {
  outline: 3px solid var(--c-solo-jazz);
  outline-offset: 2px;
}

.modal__titre {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin-block-end: var(--sp-s);
}

/* ==========================================================================
   LE JUSTIFICATIF
   --------------------------------------------------------------------------
   Dans la note du tarif solidaire, sous son explication : c'est là qu'on
   apprend qu'il en faut un. Le champ garde l'apparence du navigateur — le
   bouton « Parcourir » est le seul que tout le monde reconnaît, et le
   redessiner coûterait son accessibilité pour un gain de style.
   ========================================================================== */
.justif { display: grid; gap: var(--sp-3xs); }
.justif[hidden] { display: none; }

.justif__texte { margin: 0; }

.justif__label {
  margin-top: var(--sp-2xs);
  font-family: var(--f-cond);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.justif__fichier {
  max-width: 100%;
  min-block-size: var(--tap-min);
  font: inherit;
}
.justif__fichier:focus-visible {
  outline: 3px solid var(--c-solo-jazz);
  outline-offset: 2px;
}

.justif__aide { color: var(--c-on-paper-muted); }
.justif .field__erreur[hidden] { display: none; }

/* Le bouton du navigateur, gardé, mais à la taille d'un pouce et aux bords
   francs du site. `::file-selector-button` le stylise sans le remplacer : il
   reste le vrai bouton, annoncé et utilisable au clavier comme partout. */
.justif__fichier::file-selector-button {
  min-block-size: var(--tap-min);
  margin-inline-end: var(--sp-2xs);
  padding-inline: var(--sp-s);
  border: var(--bd-rule) solid var(--c-ink);
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-cond);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
}
.justif__fichier::file-selector-button:hover { background: var(--c-ink); color: var(--c-paper); }