/* =============================================
   Inscription / New Member Form Styles
   Uses GAS Design Tokens (--gas-*)
   ============================================= */

.aph-registration-container {
    --gas-registration-input-height: var(--gas-input-height);
    --gas-registration-input-padding: var(--gas-input-padding);
    --gas-registration-input-font-size: var(--gas-input-font-size);
    animation: none !important;
    transition: none !important;
}

.aph-registration-container *,
.aph-registration-container *::before,
.aph-registration-container *::after {
    animation: none !important;
    transition: none !important;
}

.gas-react-select__trigger,
.gas-react-select__trigger *,
.gas-react-select__content,
.gas-react-select__content *,
.gas-react-date-field__trigger,
.gas-react-date-field__trigger *,
.gas-react-date-field__content,
.gas-react-date-field__content *,
.gas-react-phone-field,
.gas-react-phone-field *,
.gas-react-phone-field *::before,
.gas-react-phone-field *::after {
    animation: none !important;
    transition: none !important;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
}

.gas-react-select__content,
.gas-react-date-field__content {
    transform-origin: center center !important;
}

[data-radix-popper-content-wrapper] {
    animation: none !important;
    transition: none !important;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}

.aph-registration-loading {
    padding: var(--gas-space-3xl);
    text-align: center;
}

.aph-registration-header {
    text-align: center;
    margin-bottom: var(--gas-space-3xl);
}

.aph-registration-header h1,
.aph-registration-success h1 {
    margin: 0;
    color: var(--gas-color-text-strong);
    font-size: var(--gas-text-xl);
    font-weight: var(--gas-weight-bold);
    line-height: var(--gas-leading-tight);
}

.aph-subtitle {
    color: var(--gas-secondary);
    margin-top: var(--gas-space-m);
    font-size: var(--gas-text-l);
}

.aph-registration-process {
    margin-bottom: var(--gas-space-xl);
    padding: var(--gas-space-l);
    background: var(--gas-bg-surface);
    color: var(--gas-color-text);
    border: var(--gas-border-width) solid var(--gas-color-border);
    border-radius: var(--gas-radius-l);
}

.aph-registration-process > h2 {
    margin: 0 0 var(--gas-space-s);
    font-size: var(--gas-text-l);
    color: var(--gas-color-text-strong);
}

.aph-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Colonnes espacées (space-l) ; lignes resserrées : le row-gap était cumulé
       avec le margin-bottom de .aph-form-field (space-m) → vertical trop large. */
    column-gap: var(--gas-space-l);
    row-gap: 0;
    margin-bottom: var(--gas-space-xl);
}

.aph-form-submit {
    text-align: center;
}

.aph-success-message {
    background: var(--gas-secondary);
    color: var(--gas-white);
    padding: var(--gas-space-l);
    border-radius: var(--gas-radius-m);
    margin: var(--gas-space-xl) 0;
    text-align: center;
    font-size: var(--gas-text-m);
    font-weight: var(--gas-weight-semi);
}

.aph-error-messages {
    background: var(--gas-danger-light);
    color: var(--gas-danger-dark);
    padding: var(--gas-space-m);
    border-radius: var(--gas-radius-m);
    border-left: var(--gas-border-width-thick) solid var(--gas-danger);
    margin-bottom: var(--gas-space-xl);
}

.error-message {
    color: var(--gas-danger);
    font-size: var(--gas-text-xs);
    margin-top: var(--gas-space-xs);
    font-weight: var(--gas-weight-semi);
}

.logo-aph-container {
    text-align: center;
    margin-bottom: var(--gas-space-xl);
}

.logo-aph {
    display: block;
    inline-size: min(25rem, 100%);
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: 650 / 163;
    margin-inline: auto;
    object-fit: contain;
}

.aph-registration-success {
    padding: var(--gas-space-xl);
    text-align: center;
}

/* =============================================
   Form Fields
   ============================================= */

.aph-form-field {
    margin-bottom: var(--gas-space-m);
}

.aph-form-field label {
    display: block;
    margin-bottom: var(--gas-space-xs);
    font-size: var(--gas-label-font-size);
    font-weight: var(--gas-label-font-weight);
    color: var(--gas-label-color);
}

.aph-form-field input[type="text"],
.aph-form-field input[type="email"],
.aph-form-field input[type="tel"],
.aph-form-field input[type="number"],
.aph-form-field input[type="date"],
.aph-form-field select,
.aph-form-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--gas-registration-input-height);
    padding: var(--gas-registration-input-padding);
    border: var(--gas-border-width) solid var(--gas-input-border);
    border-radius: var(--gas-input-radius);
    font-size: var(--gas-registration-input-font-size);
    font-family: var(--gas-font-family);
    line-height: 1.35;
    color: var(--gas-input-color);
    background-color: var(--gas-input-bg);
    transition: none;
}

.aph-form-field textarea {
    min-height: var(--gas-textarea-min-height);
}

.aph-form-field--compact {
    max-width: 24rem;
}

.aph-form-field--compact input[type="number"] {
    max-width: 7rem;
    text-align: center;
}

.aph-form-field input:focus,
.aph-form-field select:focus,
.aph-form-field textarea:focus {
    outline: none;
    border-color: var(--gas-input-focus-border);
    box-shadow: var(--gas-input-focus-shadow);
}

.aph-form-field.has-error input,
.aph-form-field.has-error select,
.aph-form-field.has-error textarea {
    border-color: var(--gas-danger);
}

.aph-form-field.has-error .gas-react-select__trigger {
    border-color: var(--gas-danger);
}

.aph-form-field.has-error .gas-react-phone-field__number {
    border-color: var(--gas-danger);
}

.aph-form-field .required {
    color: var(--gas-danger);
}

/* =============================================
   React Select (Radix)
   ============================================= */

.gas-react-select__trigger {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--gas-registration-input-height);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gas-space-s);
    padding: var(--gas-registration-input-padding);
    border: var(--gas-border-width) solid var(--gas-input-border);
    border-radius: var(--gas-input-radius);
    background: var(--gas-input-bg);
    color: var(--gas-input-color);
    font-family: var(--gas-font-family);
    font-size: var(--gas-registration-input-font-size);
    line-height: 1.35;
    cursor: pointer;
    transition: none;
}

.gas-react-select__trigger:hover {
    border-color: var(--gas-primary);
    background: var(--gas-bg-surface);
}

.gas-react-select__trigger:focus,
.gas-react-select__trigger:focus-visible,
.gas-react-select__trigger[data-state="open"] {
    outline: none;
    border-color: var(--gas-input-focus-border);
    box-shadow: var(--gas-input-focus-shadow);
}

.gas-react-select__trigger[data-placeholder] {
    color: var(--gas-neutral-500);
}

.gas-react-select__trigger[data-disabled] {
    cursor: not-allowed;
    opacity: 0.65;
    background: var(--gas-neutral-100);
}

.gas-react-select__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--gas-neutral-500);
}

.gas-react-select__chevron {
    width: 0.55rem;
    height: 0.55rem;
    border-right: var(--gas-input-inner-offset) solid currentColor;
    border-bottom: var(--gas-input-inner-offset) solid currentColor;
    transform: rotate(45deg) translateY(calc(-1 * var(--gas-input-inner-offset)));
}

.gas-react-select__content {
    width: var(--radix-select-trigger-width);
    max-height: var(--radix-select-content-available-height);
    overflow: hidden;
    background: var(--gas-bg-surface);
    border: var(--gas-border-width) solid var(--gas-border-color);
    border-radius: var(--gas-radius-m);
    box-shadow: var(--gas-shadow-m);
    z-index: 10020;
    animation: none !important;
    transition: none !important;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
    transform-origin: unset !important;
}

.gas-react-select__viewport {
    padding: var(--gas-space-xs);
}

.gas-react-select__item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--gas-select-item-min-height);
    padding: var(--gas-space-xs) calc(var(--gas-space-l) + var(--gas-space-s)) var(--gas-space-xs) var(--gas-space-m);
    border-radius: var(--gas-radius-s);
    color: var(--gas-neutral-800);
    font-size: var(--gas-text-s);
    line-height: var(--gas-leading-normal);
    cursor: pointer;
    user-select: none;
    transition: none;
}

.gas-react-select__item[data-highlighted] {
    outline: none;
    background: var(--gas-primary-ultra-light);
    color: var(--gas-primary-dark);
}

.gas-react-select__item[data-state="checked"] {
    color: var(--gas-primary-dark);
    font-weight: var(--gas-weight-semi);
}

.gas-react-select__item[data-disabled] {
    color: var(--gas-neutral-400);
    cursor: not-allowed;
}

.gas-react-select__item-indicator {
    position: absolute;
    right: var(--gas-space-m);
    width: 0.45rem;
    height: 0.75rem;
    border-right: var(--gas-input-inner-offset) solid var(--gas-primary);
    border-bottom: var(--gas-input-inner-offset) solid var(--gas-primary);
    transform: rotate(45deg) translateY(calc(-0.5 * var(--gas-input-inner-offset)));
}

/* =============================================
   React Date Field (Radix Popover)
   ============================================= */

.gas-react-date-field__trigger {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--gas-registration-input-height);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gas-space-s);
    padding: var(--gas-registration-input-padding);
    border: var(--gas-border-width) solid var(--gas-input-border);
    border-radius: var(--gas-input-radius);
    background: var(--gas-input-bg);
    color: var(--gas-input-color);
    font-family: var(--gas-font-family);
    font-size: var(--gas-registration-input-font-size);
    line-height: 1.35;
    cursor: pointer;
    transition: none;
}

.gas-react-date-field__trigger:hover {
    border-color: var(--gas-primary);
}

.gas-react-date-field__trigger:focus,
.gas-react-date-field__trigger:focus-visible,
.gas-react-date-field__trigger[data-state="open"] {
    outline: none;
    border-color: var(--gas-input-focus-border);
    box-shadow: var(--gas-input-focus-shadow);
}

.gas-react-date-field__placeholder {
    color: var(--gas-neutral-500);
}

.gas-react-date-field__icon {
    position: relative;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: var(--gas-neutral-500);
}

.gas-react-date-field__icon::before,
.gas-react-date-field__icon::after {
    content: "";
    position: absolute;
    left: calc(0.5 * var(--gas-input-inner-offset));
    right: calc(0.5 * var(--gas-input-inner-offset));
    border: 0.15rem solid currentColor;
    border-radius: var(--gas-input-inner-offset);
}

.gas-react-date-field__icon::before {
    top: var(--gas-input-inner-offset);
    height: var(--gas-space-2xs);
    border-bottom: 0;
}

.gas-react-date-field__icon::after {
    top: 0.5rem;
    bottom: calc(0.5 * var(--gas-input-inner-offset));
}

.gas-react-date-field__content {
    width: var(--gas-datepicker-width);
    padding: var(--gas-space-s);
    background: var(--gas-bg-surface);
    border: var(--gas-border-width) solid var(--gas-border-color);
    border-radius: var(--gas-radius-m);
    box-shadow: var(--gas-shadow-m);
    z-index: 10020;
    animation: none !important;
    transition: none !important;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
    transform-origin: unset !important;
}

.gas-react-date-field__header {
    display: grid;
    grid-template-columns: var(--gas-datepicker-nav-size) 1fr var(--gas-datepicker-nav-size);
    align-items: center;
    gap: var(--gas-space-xs);
    margin-bottom: var(--gas-space-s);
}

.gas-react-date-field__header strong {
    text-align: center;
    color: var(--gas-neutral-900);
    font-size: var(--gas-text-s);
    text-transform: capitalize;
}

.gas-react-date-field__selects {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gas-space-xs);
}

.gas-react-date-field__select {
    appearance: auto;
    -webkit-appearance: auto;
    background: var(--gas-surface, #fff);
    color: var(--gas-neutral-900);
    border: 1px solid var(--gas-border-color, var(--gas-neutral-300));
    border-radius: var(--gas-radius-s);
    padding: var(--gas-input-inner-offset) var(--gas-space-xs);
    font: inherit;
    font-size: var(--gas-text-s);
    line-height: 1.2;
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
}

.gas-react-date-field__select:focus,
.gas-react-date-field__select:focus-visible {
    outline: 2px solid var(--gas-primary);
    outline-offset: 1px;
}

.gas-react-date-field__select--month {
    text-transform: capitalize;
}

.gas-react-date-field__nav,
.gas-react-date-field__day,
.gas-react-date-field__footer button {
    border: 0;
    background: transparent;
    color: var(--gas-neutral-800);
    font-family: var(--gas-font-family);
    cursor: pointer;
    transition: none;
}

.gas-react-date-field__nav {
    width: var(--gas-datepicker-nav-size);
    height: var(--gas-datepicker-day-size);
    border-radius: var(--gas-radius-s);
    font-size: var(--gas-text-l);
    line-height: 1;
}

.gas-react-date-field__nav:hover,
.gas-react-date-field__day:hover,
.gas-react-date-field__footer button:hover {
    background: var(--gas-primary-ultra-light);
    color: var(--gas-primary-dark);
}

.gas-react-date-field__weekdays,
.gas-react-date-field__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--gas-input-inner-offset);
}

.gas-react-date-field__weekdays {
    margin-bottom: var(--gas-space-xs);
}

.gas-react-date-field__weekdays span {
    text-align: center;
    color: var(--gas-neutral-500);
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-semi);
}

.gas-react-date-field__day {
    min-width: 0;
    height: var(--gas-datepicker-day-size);
    border-radius: var(--gas-radius-s);
    font-size: var(--gas-text-s);
}

.gas-react-date-field__day--outside {
    color: var(--gas-neutral-400);
}

.gas-react-date-field__day--selected {
    background: var(--gas-primary);
    color: var(--gas-text-color-inverse);
    font-weight: var(--gas-weight-semi);
}

.gas-react-date-field__day--selected:hover {
    background: var(--gas-primary-dark);
    color: var(--gas-text-color-inverse);
}

.gas-react-date-field__footer {
    display: flex;
    justify-content: space-between;
    gap: var(--gas-space-s);
    margin-top: var(--gas-space-s);
    padding-top: var(--gas-space-s);
    border-top: var(--gas-border-width) solid var(--gas-border-color);
}

.gas-react-date-field__footer button {
    min-height: var(--gas-datepicker-footer-button-height);
    padding: 0 var(--gas-space-s);
    border-radius: var(--gas-radius-s);
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-semi);
}

/* =============================================
   React Phone Field
   ============================================= */

.gas-react-phone-field {
    display: grid;
    grid-template-columns: minmax(15rem, 0.42fr) minmax(0, 1fr);
    gap: var(--gas-space-s);
    align-items: stretch;
}

.gas-react-phone-field__country .gas-react-select__trigger,
.gas-react-phone-field__number {
    min-height: var(--gas-registration-input-height);
}

.gas-react-phone-field__country-trigger {
    white-space: nowrap;
}

.gas-react-phone-field__country-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--gas-space-s);
    width: 100%;
}

.gas-react-phone-field__number {
    display: flex;
    align-items: center;
    gap: var(--gas-space-s);
    width: 100%;
    padding: 0 var(--gas-space-s);
    border: var(--gas-border-width) solid var(--gas-input-border);
    border-radius: var(--gas-input-radius);
    background: var(--gas-input-bg);
}

.gas-react-phone-field__number:focus-within {
    border-color: var(--gas-input-focus-border);
    box-shadow: var(--gas-input-focus-shadow);
}

.gas-react-phone-field__dial-code {
    flex: 0 0 auto;
    color: var(--gas-neutral-700);
    font-size: var(--gas-registration-input-font-size);
    font-weight: var(--gas-weight-semi);
}

.gas-react-phone-field__number input[type="tel"] {
    width: 100%;
    min-height: calc(var(--gas-registration-input-height) - var(--gas-input-inner-offset));
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    font-size: var(--gas-registration-input-font-size);
    line-height: 1.35;
}

.gas-react-phone-field__number input[type="tel"]:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}

.gas-explication-partie-formulaire {
    font-size: var(--gas-help-font-size);
    color: var(--gas-help-color);
    margin-top: var(--gas-space-xs);
    line-height: var(--gas-leading-normal);
}

.aph-field-info-message {
    margin-top: var(--gas-space-s);
    padding: var(--gas-space-s) var(--gas-space-m);
    background-color: var(--gas-info-light);
    border-left: var(--gas-border-width-medium) solid var(--gas-info);
    border-radius: var(--gas-radius-s);
}

.aph-field-info-message p {
    margin: 0;
    font-size: var(--gas-text-s);
    color: var(--gas-info-text);
    line-height: var(--gas-leading-normal);
}

/* =============================================
   Already Logged In Section
   ============================================= */

.aph-already-logged {
    background-color: var(--gas-bg-surface);
    border-radius: var(--gas-radius-m);
    box-shadow: var(--gas-shadow-s);
    padding: var(--gas-space-l);
    margin: var(--gas-space-l) 0;
    font-size: var(--gas-text-m);
}

.aph-user-info {
    background-color: var(--gas-primary-ultra-light);
    border: var(--gas-border-width) solid var(--gas-neutral-200);
    border-radius: var(--gas-radius-m);
    padding: var(--gas-space-l);
    margin-bottom: var(--gas-space-l);
}

.aph-user-info h2 {
    color: var(--gas-neutral-900);
    margin-bottom: var(--gas-space-s);
    font-size: var(--gas-text-l);
    font-weight: var(--gas-weight-semi);
}

.aph-user-info p {
    margin: var(--gas-space-s) 0;
    color: var(--gas-neutral-600);
    font-size: var(--gas-text-m);
    line-height: var(--gas-leading-normal);
}

.aph-verification-message {
    background-color: var(--gas-info-light);
    border: var(--gas-border-width) solid var(--gas-info-lighter);
    border-radius: var(--gas-radius-m);
    padding: var(--gas-space-l);
    margin-bottom: var(--gas-space-l);
}

.aph-verification-message p {
    color: var(--gas-info-dark);
    margin-bottom: var(--gas-space-s);
    font-size: var(--gas-text-m);
    line-height: var(--gas-leading-normal);
}

.aph-verification-message label {
    display: block;
    margin-bottom: var(--gas-space-xs);
    font-weight: var(--gas-weight-semi);
    color: var(--gas-neutral-800);
}

.aph-verification-message select {
    width: 100%;
    padding: var(--gas-input-padding);
    border: var(--gas-border-width) solid var(--gas-input-border);
    border-radius: var(--gas-input-radius);
    font-size: var(--gas-input-font-size);
    background-color: var(--gas-input-bg);
}

.aph-verification-message select:focus {
    outline: none;
    border-color: var(--gas-input-focus-border);
    box-shadow: var(--gas-input-focus-shadow);
}

.aph-logout-section {
    background-color: var(--gas-warning-light);
    border: var(--gas-border-width) solid var(--gas-warning-lighter);
    border-radius: var(--gas-radius-m);
    padding: var(--gas-space-l);
    text-align: center;
}

.aph-logout-section p {
    color: var(--gas-warning-text-strong);
    margin-bottom: var(--gas-space-s);
    font-size: var(--gas-text-m);
    line-height: var(--gas-leading-normal);
}

/* =============================================
   Steps / Process
   ============================================= */

/* @deprecated 2026-06-21 — le stepper est désormais le composant kit partagé
   `GasMembershipSteps` (classes `gas-membership-steps__*`), réutilisé par
   l'inscription ET l'éditeur de profil. Ces règles `.aph-steps`/`.aph-step`/
   `.step-*` ne ciblent plus aucun élément (mortes) et peuvent être supprimées
   lors d'un nettoyage CSS dédié. La carte `.aph-registration-process` ci-dessus
   reste utilisée comme conteneur côté inscription. */
.aph-steps {
    display: flex;
    gap: var(--gas-space-s);
    margin-top: var(--gas-space-m);
    color: var(--gas-color-text);
}

.aph-step {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: none;
    box-shadow: none;
    padding: 0;
}

/* Connecteur entre les cercles (derrière, masqué par le cercle opaque). */
.aph-step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--gas-color-border);
    z-index: 0;
}

.step-header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gas-space-xs);
    background: none;
    padding: 0;
    margin-bottom: var(--gas-space-xs);
}

.step-header h3 {
    margin: 0;
    font-size: var(--gas-text-s);
    font-weight: var(--gas-weight-semi);
    color: var(--gas-color-text-strong);
}

.step-number {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border-radius: var(--gas-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--gas-weight-bold);
    font-size: var(--gas-text-s);
    flex-shrink: 0;
    background: var(--gas-color-primary);
    color: var(--gas-color-on-primary);
}

.step-description {
    color: var(--gas-color-text-muted);
    line-height: 1.4;
    font-size: var(--gas-text-xs);
    padding: 0;
}

.step-additional-info {
    margin-top: var(--gas-space-xs);
    color: var(--gas-color-primary);
    line-height: 1.4;
    font-size: var(--gas-text-xs);
    font-style: italic;
    padding: 0;
}

/* États : fait (vert ✓) / en cours (anneau) / à venir (atténué). */
.step-header.completed .step-number {
    background: var(--gas-color-success);
    color: var(--gas-color-on-primary);
}
.step-header.completed h3::after {
    content: " ✓";
    color: var(--gas-color-success);
    margin-left: var(--gas-space-xs);
}

.step-header:not(.completed):not(.current) .step-number {
    background: var(--gas-bg-surface-alt);
    color: var(--gas-color-text-muted);
    box-shadow: inset 0 0 0 var(--gas-border-width) var(--gas-color-border);
}
.step-header:not(.completed):not(.current) h3 {
    color: var(--gas-color-text-muted);
}

.step-header.current .step-number {
    background: var(--gas-color-primary);
    color: var(--gas-color-on-primary);
    box-shadow: 0 0 0 3px var(--gas-color-primary-soft);
}
.step-header.current h3 {
    color: var(--gas-color-primary);
    font-weight: var(--gas-weight-bold);
}

/* Success state entrance */
.aph-registration-success .aph-next-steps {
    animation: none !important;
}

/* Mobile : empilement vertical compact (cercle à gauche, texte à droite). */
@media (max-width: 768px) {
    .aph-steps {
        flex-direction: column;
        gap: var(--gas-space-m);
    }
    .aph-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: var(--gas-space-s);
    }
    .aph-step:not(:first-child)::before {
        display: none;
    }
    .step-header {
        margin-bottom: 0;
        flex-shrink: 0;
    }
}

/* =============================================
   Intro Text
   ============================================= */

/* Lead : phrase d'accroche centrée et contrainte en largeur (au lieu d'un mur de
   texte justifié pleine largeur). */
.gas-explication-nouveau-membre-intro {
    max-width: 640px;
    margin: 0 auto var(--gas-space-m);
    text-align: center;
    line-height: 1.6;
    color: var(--gas-color-text);
    font-size: var(--gas-text-l);
}

/* Highlights : « chips » pilules scannables (durée, formats, guidé). */
.aph-registration-highlights {
    list-style: none;
    margin: 0 auto var(--gas-space-xl);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gas-space-s);
}

.aph-registration-highlight {
    display: inline-flex;
    align-items: center;
    gap: var(--gas-space-xs);
    padding: var(--gas-space-xs) var(--gas-space-m);
    background: var(--gas-bg-surface-alt);
    border: var(--gas-border-width) solid var(--gas-color-border);
    border-radius: var(--gas-radius-full);
    font-size: var(--gas-text-s);
    font-weight: var(--gas-weight-semi);
    color: var(--gas-color-text);
}

.aph-registration-highlight__icon {
    font-size: var(--gas-text-m);
    line-height: 1;
}

/* =============================================
   Registration Form
   ============================================= */

.aph-registration-form {
    margin-top: var(--gas-space-xl);
}

.aph-registration-form h2 {
    margin-bottom: var(--gas-space-l);
    color: var(--gas-neutral-900);
    font-size: var(--gas-text-xl);
    font-weight: var(--gas-weight-semi);
}

.aph-form-field--full {
    grid-column: 1 / -1;
}

.gas-registration-address-card {
    background: var(--gas-primary-ultra-light);
    border: var(--gas-border-width) solid var(--gas-primary-light);
    border-radius: var(--gas-radius-m);
    padding: var(--gas-space-m);
}

.gas-registration-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gas-space-m);
    margin-top: var(--gas-space-s);
}

.gas-registration-map-field {
    margin-top: var(--gas-space-s);
}

.gas-registration-map-field #map_registration {
    width: 100%;
    height: 26rem;
    border: var(--gas-border-width) solid var(--gas-border-color);
    border-radius: var(--gas-radius-s);
}

.gas-registration-map-warning {
    color: var(--gas-warning-text-strong);
}

/* =============================================
   Anti-spam
   ============================================= */

.gas-react-anti-spam__honeypot {
    position: absolute;
    left: -999.9rem;
    top: -999.9rem;
    width: var(--gas-border-width);
    height: var(--gas-border-width);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.gas-react-anti-spam {
    align-self: start;
}

.gas-react-anti-spam__challenge {
    display: inline-flex;
    flex-direction: column;
    gap: var(--gas-space-xs);
    width: min(100%, 32rem);
    padding: var(--gas-space-m);
    background: var(--gas-bg-surface);
    border: var(--gas-border-width) solid var(--gas-border-color);
    border-left: var(--gas-border-width-thick) solid var(--gas-info);
    border-radius: var(--gas-radius-m);
}

.gas-react-anti-spam__challenge label {
    margin-bottom: 0;
}

.gas-react-anti-spam__challenge input {
    width: 5.5rem;
    min-height: var(--gas-registration-input-height);
    padding: 0 var(--gas-space-s);
    text-align: center;
    font-size: var(--gas-text-m);
    font-weight: var(--gas-weight-semi);
}

.gas-react-anti-spam.has-error .gas-react-anti-spam__challenge {
    border-color: var(--gas-danger);
    border-left-color: var(--gas-danger);
}

/* =============================================
   Engagement cotisation statuts
   ============================================= */

.gas-registration-engagement__box {
    position: relative;
    background: var(--gas-warning-bg);
    border: var(--gas-border-width) solid var(--gas-warning-border);
    border-left: var(--gas-border-width-thick) solid var(--gas-warning);
    border-radius: var(--gas-radius-m);
    padding: var(--gas-space-m);
}

.gas-registration-engagement__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gas-space-s);
    cursor: pointer;
    line-height: 1.35;
}

.gas-registration-engagement__checkbox {
    margin-top: calc(var(--gas-space-2xs) * 0.66);
    flex-shrink: 0;
    width: var(--gas-checkbox-size);
    height: var(--gas-checkbox-size);
    accent-color: var(--gas-primary);
}

.gas-registration-engagement__text {
    color: var(--gas-warning-text-strong);
    font-size: var(--gas-text-s);
}

.gas-registration-engagement__note {
    margin-top: var(--gas-space-s);
    padding-left: calc(var(--gas-checkbox-size) + var(--gas-space-s));
    color: var(--gas-neutral-700);
    font-size: var(--gas-text-s);
    line-height: 1.4;
}

.gas-registration-math-field {
    align-self: start;
}

/* =============================================
   Next Steps (success page)
   ============================================= */

.aph-next-steps {
    margin-top: var(--gas-space-xl);
    text-align: left;
}

.aph-next-steps h2 {
    margin-bottom: var(--gas-space-m);
    font-size: var(--gas-text-l);
    font-weight: var(--gas-weight-semi);
    color: var(--gas-neutral-900);
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 76.8rem) {
    .aph-registration-container {
        padding: var(--gas-space-s);
    }

    .aph-registration-header {
        margin-bottom: var(--gas-space-l);
    }

    .logo-aph-container {
        margin-bottom: var(--gas-space-m);
    }

    .aph-registration-process {
        margin-bottom: var(--gas-space-l);
        padding: var(--gas-space-s);
    }

    .gas-explication-nouveau-membre-intro {
        margin-bottom: var(--gas-space-m);
        font-size: var(--gas-text-m);
        text-align: center;
    }

    .aph-registration-form {
        margin-top: var(--gas-space-l);
    }

    .aph-registration-form h2 {
        margin-bottom: var(--gas-space-m);
    }

    .aph-form-grid {
        grid-template-columns: 1fr;
        gap: var(--gas-space-s);
        margin-bottom: var(--gas-space-l);
    }

    .aph-form-field {
        margin-bottom: 0;
    }

    .aph-form-field label {
        margin-bottom: var(--gas-space-2xs);
    }

    .gas-explication-partie-formulaire {
        margin-top: var(--gas-space-2xs);
        line-height: 1.35;
    }

    .aph-field-info-message {
        margin-top: var(--gas-space-xs);
        padding: var(--gas-space-xs) var(--gas-space-s);
    }

    .error-message {
        margin-top: var(--gas-space-2xs);
    }

    .aph-steps {
        grid-template-columns: 1fr;
        gap: var(--gas-space-xs);
        margin-top: var(--gas-space-s);
    }

    .aph-step {
        padding: 0;
    }

    .step-header {
        gap: var(--gas-space-s);
        padding: var(--gas-space-xs) var(--gas-space-s);
    }

    .step-description,
    .step-additional-info {
        margin: var(--gas-space-xs) 0;
        padding: 0 var(--gas-space-s);
        line-height: 1.35;
    }

    .aph-step:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: 100%;
    }

    .aph-already-logged {
        padding: var(--gas-space-s);
    }

    .aph-user-info,
    .aph-verification-message,
    .aph-logout-section {
        padding: var(--gas-space-s);
    }

    .aph-registration-container .gas-button {
        width: 100%;
        text-align: center;
    }

    .gas-registration-address-grid {
        grid-template-columns: 1fr;
        gap: var(--gas-space-s);
        margin-top: var(--gas-space-xs);
    }

    .gas-registration-address-card,
    .gas-registration-engagement__box,
    .gas-react-anti-spam__challenge {
        padding: var(--gas-space-s);
    }

    .gas-registration-map-field {
        margin-top: var(--gas-space-xs);
    }

    .gas-registration-map-field #map_registration {
        height: var(--gas-map-mobile-height);
    }

    .aph-form-field--compact,
    .aph-form-field--compact input[type="number"] {
        max-width: 100%;
    }

    .gas-react-phone-field {
        grid-template-columns: 1fr;
        gap: var(--gas-space-xs);
    }
}

/* ── Message d'information geolocalisation ──────── */
.gas-geo-info-message {
    background: var(--gas-primary-ultra-light);
    border-left: var(--gas-border-width-thick) solid var(--gas-primary);
    padding: var(--gas-space-s) var(--gas-space-m);
    margin: 0 0 var(--gas-space-m) 0;
    border-radius: var(--gas-radius-s);
    font-size: var(--gas-text-s);
    color: var(--gas-neutral-700);
}

@media (max-width: 76.8rem) {
    .gas-geo-info-message {
        padding: var(--gas-space-xs) var(--gas-space-s);
        margin-bottom: var(--gas-space-xs);
        line-height: 1.35;
    }
}