:root {
    --container-max-width: 800px;
    --container-padding: 20px;
    --container-margin-bottom: 30px;

    --bp-mobile: 600px;

    --color-bg: #2e2e2e;
    --color-text: #ffffff;
    --color-accent: #FFD700;
    --color-border: #444;
    --color-placeholder: #ccc;
    --color-error: #ff4c4c;
    --color-disabled: #999;

    --spacing-xxs: 4px;
    --spacing-xs: 6px;
    --spacing-sm: 10px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --shadow-container: 0 8px 24px rgba(0, 0, 0, .35);

    --fs-input: 14px;
    --fs-error: .9rem;
}

/* ============================================================
   1. CONTENEUR PRINCIPAL
   ============================================================ */
.insc-ent-container {
    max-width: var(--container-max-width);
    margin: 0 auto var(--container-margin-bottom);
    padding: var(--container-padding);
    background: -o-linear-gradient(305deg, #363636 0%, #252525 100%);
    background: linear-gradient(145deg, #363636 0%, #252525 100%);
    border: 1px solid #1a1a1a;
    border-radius: var(--radius-md);
    -webkit-box-shadow: var(--shadow-container);
    box-shadow: var(--shadow-container);
    color: var(--color-text);
}

.insc-ent-container h3 {
    margin: 0 0 var(--spacing-lg);
    text-align: center;
    color: var(--color-accent);
}

h4 {
    margin: 0 0 var(--spacing-lg);
    color: var(--color-accent);
}

hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-lg) 0;
}

/* ============================================================
   2. BARRE DE PROGRESSION (2 étapes)
   ============================================================ */
.form-step-indicators {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding: 0 var(--spacing-md);
}

.form-step-indicators::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--spacing-md) + 17px);
    right: calc(var(--spacing-md) + 17px);
    height: 3px;
    background: var(--color-border);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 0;
}

.step-indicator {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    text-align: center;
    z-index: 1;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}

.step-indicator .circle {
    width: 34px;
    height: 34px;
    line-height: 34px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-text);
    font-weight: 600;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .25);
    box-shadow: 0 0 8px rgba(0, 0, 0, .25);
    -webkit-transition: background .3s, -webkit-transform .3s;
    transition: background .3s, -webkit-transform .3s;
    -o-transition: background .3s, transform .3s;
    transition: background .3s, transform .3s;
    transition: background .3s, transform .3s, -webkit-transform .3s;
}

.step-indicator .label {
    margin-top: var(--spacing-xs);
    font-size: .85rem;
    letter-spacing: .3px;
    color: var(--color-placeholder);
    -webkit-transition: color .3s;
    -o-transition: color .3s;
    transition: color .3s;
}

/* Active */
.step-indicator.active .circle {
    background: var(--color-accent);
    color: var(--color-bg);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.step-indicator.active .label {
    color: var(--color-accent);
}

.step-indicator.done .circle {
    background: var(--color-accent);
    opacity: .5;
}

.step-indicator.done .label {
    color: var(--color-accent);
    opacity: .6;
}

.step-indicator:not(.active):not(.done) {
    opacity: .6;
}

/* ============================================================
   3. GROUPES DE CHAMPS
   ============================================================ */
.insc-ent-group {
    margin-bottom: var(--spacing-md);
    position: relative;
}

.insc-ent-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    letter-spacing: .25px;
}

.insc-ent-group input,
.insc-ent-group select {
    width: 100%;
    padding: var(--spacing-sm);
    font-size: var(--fs-input);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: border-color .3s;
    -o-transition: border-color .3s;
    transition: border-color .3s;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.insc-ent-group input::-webkit-input-placeholder {
    color: var(--color-placeholder);
}

.insc-ent-group input::-moz-placeholder {
    color: var(--color-placeholder);
}

.insc-ent-group input:-ms-input-placeholder {
    color: var(--color-placeholder);
}

.insc-ent-group input::-ms-input-placeholder {
    color: var(--color-placeholder);
}

.insc-ent-group input::placeholder {
    color: var(--color-placeholder);
}

.insc-ent-group input:focus,
.insc-ent-group select:focus {
    border-color: var(--color-accent);
    -webkit-box-shadow: 0 0 8px rgba(255, 215, 0, .5);
    box-shadow: 0 0 8px rgba(255, 215, 0, .5);
    outline: none;
}

.insc-ent-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.insc-ent-row .insc-ent-group {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 45%;
    flex: 1 1 45%;
}

.insc-ent-group input[type="checkbox"] {
    width: auto;
    height: 16px;
    min-width: 16px;
    margin: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
    vertical-align: middle;
}

.insc-ent-group input[type="checkbox"]+label {
    display: inline-block;
    margin: 0 0 0 var(--spacing-xs);
    font-weight: 400;
    cursor: pointer;
}

.terms-check {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--spacing-xs);
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.terms-check label {
    display: inline-block;
    margin: 0;
}

.error-message-ent {
    display: block;
    font-size: var(--fs-error);
    color: var(--color-error);
    margin-top: var(--spacing-xxs);
}

/* ============================================================
   5. SLIDES (étapes du formulaire)
   ============================================================ */
.form-inscr-ent-form-step {
    display: none;
    margin-bottom: var(--spacing-md);
}

.form-inscr-ent-form-step.active {
    display: block;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media(max-width:var(--bp-mobile)) {
    .insc-ent-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .insc-ent-row .insc-ent-group {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
    }
}

@media(max-width:480px) {
    h4 {
        font-size: 1.1rem;
    }

    .step-indicator .label {
        font-size: .75rem;
    }

    .button-05 {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.readonly-input {
    background: #2e2e2e;
    color: #fff;
    border: 1px solid #555;
    cursor: not-allowed;
}

.form-text-muted {
    display: block;
    margin-top: 4px;
    font-size: 0.9rem;
    color: #bbb;
}

.button-05:disabled {
    opacity: .5;
    cursor: not-allowed;
}