/* =========================================================
   Wizard d'inscription — barre d'actions fixe en bas
   (Précédent / Suivant / Valider l'inscription).
   Scopé à .register-wizard pour ne pas toucher les autres
   usages du composant Button:ButtonsRow. Tokens : tokens.css
   ========================================================= */

.register-wizard {
    /* Réserve l'espace sous le contenu pour la barre fixe. */
    padding-bottom: 6rem;
}

.register-wizard .buttons-row {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;
    width: 100%;
    margin: 0;
    padding: 0.85rem clamp(1rem, 4vw, 2rem);
    align-items: center;
    background: rgba(6, 32, 44, 0.9);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

/* =========================================================
   Disciplines (offres) — sélection multiple façon POC.
   Voir twig:Form:Offer. Sélection pilotée en CSS via :has().
   ========================================================= */

/* =========================================================
   Carte adhérent épinglée — rappelle en tête de chaque étape
   qui est inscrit (identité, âge, statut mineur/majeur). Rendu
   statique dès que le membre est connu ; sur l'étape Adhérent,
   le controller Stimulus register-subject la met à jour en direct.
   ========================================================= */
.subject {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.3rem;
    padding: 0.7rem 0.9rem;
    background: linear-gradient(180deg, rgba(230, 201, 138, 0.07), rgba(230, 201, 138, 0.02));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.subject.hidden {
    display: none;
}

.subject .avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #2a1d05;
    background: linear-gradient(135deg, var(--gold-strong), var(--gold));
}

.subject .s-main {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.subject .s-name {
    font-weight: 600;
}

.subject .s-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.subject .s-tag {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    white-space: nowrap;
}

.subject .s-tag.minor {
    color: var(--warning);
    border-color: rgba(224, 171, 51, 0.35);
    background: var(--warning-soft);
}

.subject .s-tag.adult {
    color: var(--success);
    border-color: rgba(79, 174, 139, 0.35);
    background: var(--success-soft);
}

/* =========================================================
   « Pour qui ? » (étape prefill) — choix unique du lien avec
   la personne à inscrire. Mêmes cartes sobres que .offer mais
   indicateur radio (rond) car la sélection est exclusive.
   État piloté en CSS via :has(); l'exclusivité réelle est
   imposée par le controller Stimulus register-connected.
   ========================================================= */
.choice-list {
    margin: 0.5rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.choice-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.choice-card:hover {
    border-color: var(--border-strong);
}

.choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-card:has(input:checked) {
    border-color: var(--gold);
    background: var(--gold-soft);
}

.choice-card .dot {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.choice-card .dot::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    transform: scale(0);
    transition: transform 0.12s ease;
}

.choice-card:has(input:checked) .dot {
    border-color: var(--gold);
}

.choice-card:has(input:checked) .dot::after {
    transform: scale(1);
}

.choice-card input:focus-visible ~ .dot {
    outline: 2px solid var(--gold-strong);
    outline-offset: 2px;
}

.choice-card .c-main {
    flex: 1 1 auto;
    min-width: 0;
}

.choice-card .c-title {
    font-weight: 600;
}

.choice-card .c-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* =========================================================
   Disciplines (offres) — sélection multiple façon POC.
   Voir twig:Form:Offer. Sélection pilotée en CSS via :has().
   ========================================================= */
.offers {
    margin: 0.5rem 0 1rem;
}

.offer {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    margin-bottom: 0.7rem;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.offer:hover {
    border-color: var(--border-strong);
}

.offer input {
    display: none;
}

.offer:has(input:checked) {
    border-color: var(--gold);
    background: var(--gold-soft);
}

.offer .check {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    line-height: 1;
    color: transparent;
}

.offer:has(input:checked) .check {
    background: var(--gold);
    border-color: var(--gold);
    color: #2a1d05;
}

.offer .o-main {
    flex: 1 1 auto;
}

.offer .o-title {
    font-weight: 600;
}

.offer .o-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.offer .o-sessions {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.offer .o-price {
    font-weight: 700;
    color: var(--gold-strong);
    white-space: nowrap;
}

.offer-hint {
    font-size: 0.82rem;
    color: var(--text-faint);
}

/* Encart « ce que la licence apporte » sous la liste des offres :
   accès à tous les clubs du groupement, passerelle Taïso, contenu du tarif. */
.offer-perks {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0.85rem 1rem;
    display: grid;
    gap: 0.6rem;
    background: linear-gradient(180deg, rgba(230, 201, 138, 0.07), rgba(230, 201, 138, 0.02));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}

.offer-perks li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.offer-perks .ui-ic {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 0.15rem;
    color: var(--gold);
}

.offer-perks strong {
    color: var(--text);
    font-weight: 600;
}

/* =========================================================
   Consentements — façon POC. On conserve les champs
   « qui remplit » (nom / qualité), l'explication, et la
   possibilité de laisser le choix non renseigné (none).
   Les cases gardent le rendu Symfony natif (.form-check)
   pour éviter tout label en double / imbriqué.
   ========================================================= */
.consent-block {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.2rem;
}

.consent-block p {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.consent-block p:last-child {
    margin-bottom: 0;
}

/* La phrase « Je soussigné(e) … en qualité de … » avec champs inline. */
.consent-block .who {
    color: var(--text);
    line-height: 2.4;
}

/* Signature pré-remplie (droit à l'image / consentement médical) : l'identité connue
   est affichée en clair, éditable à la demande via un <details> « Modifier » (sans JS). */
.prefill-pill {
    display: inline-block;
    font-size: 0.64rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold-strong);
    background: var(--gold-soft);
    border: 1px solid rgba(230, 201, 138, 0.3);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    vertical-align: middle;
}

.signature-static {
    color: var(--text);
    line-height: 1.9;
    margin-bottom: 0.3rem;
}

.signature-static .who {
    color: var(--gold-strong);
}

.signature-edit {
    margin: 0.3rem 0 0.7rem;
}

.signature-edit summary {
    width: max-content;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.signature-edit summary:hover {
    color: var(--gold);
}

.signature-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.signature-fields .form-control,
.signature-fields .form-select {
    width: auto;
    max-width: 12rem;
}

.consent-block .who .form-control,
.consent-block .who .form-select {
    display: inline-block;
    width: auto;
    min-width: 7rem;
    margin: 0 0.15rem;
    vertical-align: middle;
}

/* Lignes à cocher / radios (rendu Symfony .form-check).
   On neutralise le float Bootstrap (padding-left + margin-left négatif, qui fait
   déborder la case à gauche d'une box sans padding gauche) au profit d'un flex :
   la case s'aligne au bord du contenu, le libellé suit. .form-check.flat applique
   le même traitement à une case isolée (ex. « certificat médical transmis »). */
.consent-block .form-check,
.form-check.flat {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    padding: 0.55rem 0;
}

.consent-block .form-check {
    border-bottom: 1px solid var(--border);
}

.consent-block .form-check:last-of-type {
    border-bottom: none;
}

.consent-block .form-check .form-check-input,
.form-check.flat .form-check-input {
    float: none;
    flex: 0 0 auto;
    margin: 0.15rem 0 0 0;
}

.consent-block .form-check .form-check-label,
.form-check.flat .form-check-label {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text);
}

/* =========================================================
   Groupe « au moins un moyen de contact » (email ou téléphone).
   État live (neutre / valide / erreur) piloté par le controller
   Stimulus contact-required. Enforcement serveur : AtLeastOneContact.
   ========================================================= */
.contact-group {
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-3);
    padding: 0.9rem 1rem 1rem;
    margin: 0.4rem 0 0.6rem;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.contact-group .cg-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.contact-group .cg-title {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

.contact-group .cg-status {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    white-space: nowrap;
}

.contact-group .cg-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.15rem 0 0.5rem;
}

.contact-group.valid {
    border-left-color: var(--success);
}

.contact-group.valid .cg-status {
    color: var(--success);
    border-color: rgba(79, 174, 139, 0.4);
    background: var(--success-soft);
}

.contact-group.error {
    border-color: var(--danger-line);
    border-left-color: var(--danger);
    background: rgba(226, 98, 91, 0.05);
}

.contact-group.error .cg-status {
    color: var(--danger);
    border-color: var(--danger-line);
    background: var(--danger-soft);
}

/* =========================================================
   En-tête de section avec action alignée à droite (ex.
   « Représentant légal (1) » + « Utiliser comme contact
   d'urgence »). L'action reste discrète (lien texte doré au
   survol), front seulement. Ne modifie pas le .subhead global.
   ========================================================= */
.subhead--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.section-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gold);
    background: none;
    border: 1px solid rgba(230, 201, 138, 0.35);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.section-action:hover {
    color: var(--gold-strong);
    background: var(--gold-soft);
    border-color: var(--gold);
}

.section-action:focus-visible {
    outline: 2px solid var(--gold-strong);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =========================================================
   Récapitulatif — lignes clé/valeur, puces, total façon POC.
   ========================================================= */
.recap-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.recap-row .k {
    color: var(--text-muted);
}

.recap-row .v {
    font-weight: 600;
    text-align: right;
}

/* Décompte de la cotisation — carte dégradé doré façon POC :
   licence (discipline la plus chère) → réductions → total à régler. */
.recap-total {
    margin-top: 0.5rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, rgba(230, 201, 138, 0.08), rgba(230, 201, 138, 0.02));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}

.recap-total .bd-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.25rem 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.recap-total .bd-row .minus {
    color: var(--success);
    font-weight: 600;
    white-space: nowrap;
}

.recap-total .cotis-sub {
    color: var(--text-faint);
    font-size: 0.82rem;
}

.recap-total .bd-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.6rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-strong);
}

.recap-total .t-label {
    font-weight: 600;
    color: var(--text);
}

.recap-total .t-amount {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold-strong);
    white-space: nowrap;
}

.payment-note {
    margin-top: 0.9rem;
    margin-bottom: 0;
    padding: 0.75rem 0.9rem;
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    background: var(--gold-soft);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.recap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.chip {
    font-size: 0.76rem;
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.12rem 0.6rem;
}