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

.aph-registration-container {}

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

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

.aph-registration-process {
    background: var(--gas-primary-semi-light);
    color: var(--gas-white);
    margin-bottom: var(--gas-space-3xl);
    border-radius: var(--gas-radius-m);
    box-shadow: var(--gas-shadow-m);
    padding: var(--gas-space-m);
}

.aph-form-grid {
    display: grid;
    gap: var(--gas-space-l);
    margin-bottom: var(--gas-space-xl);
}

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

.aph-button {
    display: inline-block;
    background: var(--gas-accent);
    color: var(--gas-white);
    padding: var(--gas-space-s) var(--gas-space-xl);
    border: none;
    border-radius: var(--gas-radius-s);
    font-size: var(--gas-text-m);
    font-weight: var(--gas-weight-medium);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--gas-transition-normal), transform var(--gas-transition-normal);
}

.aph-button:hover {
    background: var(--gas-accent-dark);
    transform: translateY(-1px);
}

.aph-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.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: 4px 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 {
    max-width: 250px;
    height: auto;
}

.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 {
    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);
    font-family: var(--gas-font-family);
    color: var(--gas-input-color);
    background-color: var(--gas-input-bg);
    transition: border-color var(--gas-transition-normal), box-shadow var(--gas-transition-normal);
}

.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 .required {
    color: var(--gas-danger);
}

.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: 3px 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);
}

/* =============================================
   Button Variants
   ============================================= */

.aph-verify-account {
    background-color: var(--gas-success);
}

.aph-verify-account:hover {
    background-color: var(--gas-success-dark);
}

.aph-logout {
    background-color: var(--gas-danger);
}

.aph-logout:hover {
    background-color: var(--gas-danger-dark);
}

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

.aph-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gas-space-s);
    margin-top: var(--gas-space-l);
    color: var(--gas-neutral-900);
}

.aph-step {
    background: var(--gas-white);
    border-radius: var(--gas-radius-m);
    box-shadow: var(--gas-shadow-xs);
    transition: box-shadow var(--gas-transition-normal);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--gas-space-xs);
}

.aph-step:hover {
    box-shadow: var(--gas-shadow-s);
}

.step-header {
    display: flex;
    align-items: center;
    gap: var(--gas-space-m);
    padding: var(--gas-space-s);
    border-radius: var(--gas-radius-m) var(--gas-radius-m) 0 0;
    background: var(--gas-primary-light);
    margin-bottom: var(--gas-space-xs);
}

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

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

.step-description {
    color: var(--gas-secondary);
    line-height: var(--gas-leading-normal);
    flex-grow: 1;
    font-size: var(--gas-text-s);
    padding: 0 var(--gas-space-xs);
}

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

/* Step states */
.step-header.completed {
    background: var(--gas-success-light);
}

.step-header.completed .step-number {
    background: var(--gas-success);
    color: var(--gas-white);
}

.step-header.completed h3::after {
    content: " ✓";
    color: var(--gas-success-dark);
    margin-left: var(--gas-space-xs);
}

/* Future steps (not yet reached) */
.step-header:not(.completed):not(.current) {
    background: var(--gas-neutral-100);
    opacity: 0.7;
}

.step-header:not(.completed):not(.current) .step-number {
    background: var(--gas-neutral-400);
    color: var(--gas-white);
}

/* Current step */
.step-header.current {
    background: var(--gas-primary);
    border: 2px solid var(--gas-primary);
    color: var(--gas-white);
}

.step-header.current .step-number {
    background-color: var(--gas-white);
    color: var(--gas-primary);
    animation: gas-pulse 2s ease-in-out infinite;
}

.step-header.current h3 {
    color: var(--gas-white);
    font-weight: var(--gas-weight-bold);
}

/* Current step card glow */
.aph-step.is-current {
    box-shadow: 0 0 0 2px var(--gas-primary), var(--gas-shadow-m);
    transform: scale(1.02);
}

/* =============================================
   Step Animations
   ============================================= */

@keyframes gas-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 hsla(var(--gas-primary-h), var(--gas-primary-s), var(--gas-primary-l), 0.4);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 8px hsla(var(--gas-primary-h), var(--gas-primary-s), var(--gas-primary-l), 0);
    }
}

@keyframes gas-step-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered entrance for steps */
.aph-step {
    animation: gas-step-enter 0.4s ease-out both;
}

.aph-step:nth-child(1) { animation-delay: 0.05s; }
.aph-step:nth-child(2) { animation-delay: 0.1s; }
.aph-step:nth-child(3) { animation-delay: 0.15s; }
.aph-step:nth-child(4) { animation-delay: 0.2s; }
.aph-step:nth-child(5) { animation-delay: 0.25s; }

/* Smooth transitions on step state changes */
.aph-step {
    transition: box-shadow var(--gas-transition-slow), transform var(--gas-transition-slow);
}

.step-header {
    transition: background var(--gas-transition-slow), border-color var(--gas-transition-slow);
}

.step-number {
    transition: background-color var(--gas-transition-normal), color var(--gas-transition-normal), transform var(--gas-transition-normal);
}

/* Success state entrance */
.aph-registration-success .aph-next-steps {
    animation: gas-step-enter 0.5s ease-out 0.2s both;
}

/* Last step centered if odd */
.aph-step:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
}

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

.gas-explication-nouveau-membre-intro {
    margin-bottom: var(--gas-space-l);
    text-align: justify;
    line-height: var(--gas-leading-normal);
    color: var(--gas-text-color);
    font-size: var(--gas-text-m);
}

/* =============================================
   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);
}

/* =============================================
   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: 768px) {
    .aph-registration-container {
        padding: var(--gas-space-m);
    }

    .aph-steps {
        grid-template-columns: 1fr;
    }

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

    .step-description {
        padding: var(--gas-space-xs);
    }

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

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

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