/* ==============================
   VARIABLES CSS
   ============================== */
:root {
    /* Container dimensions */
    --container-max-width: 800px;
    --container-padding: 20px;
    --container-margin-bottom: 30px;

    /* Breakpoints */
    --bp-mobile: 600px;

    /* Colors */
    --color-bg: #2e2e2e;
    --color-text: #ffffff;
    --color-accent: #FFD700;
    --color-border: #444444;
    --color-placeholder: #cccccc;
    --color-error: red;
    --color-disabled: #aaaaaa;

    /* Spacing */
    --spacing-xxs: 4px;
    /* very small gaps (error margin) */
    --spacing-xs: 5px;
    /* small gaps (placeholder margin) */
    --spacing-sm: 10px;
    /* input padding & button gaps */
    --spacing-md: 15px;
    /* group margin-bottom */
    --spacing-lg: 20px;
    /* row gaps & heading margins */
    --spacing-xl: 30px;
    /* container bottom margin, top margins */

    /* Border & Radius */
    --radius-sm: 3px;
    --radius-md: 8px;

    /* Typography */
    --fs-input: 14px;
    --fs-error: 0.9rem;

    /* Shadow */
    --shadow-container: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ==============================
   CONTAINER
   ============================== */
.insc-ent-container {
    background: var(--color-bg);
    padding: var(--container-padding);
    max-width: var(--container-max-width);
    margin: 0 auto var(--container-margin-bottom);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-container);
    color: var(--color-text);
}

/* ==============================
   TITRES
   ============================== */
.insc-ent-container h3 {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    margin-top: 0;
    color: var(--color-accent);
}

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

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

/* ==============================
   CHAMPS (INPUTS & SELECT)
   ============================== */
.insc-ent-group input,
.insc-ent-group select {
    width: 100%;
    padding: var(--spacing-sm);
    font-size: var(--fs-input);
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    margin-bottom: var(--spacing-md);
}

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

.insc-ent-group input:focus,
.insc-ent-group select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 8px rgba(220, 209, 112, 0.5);
    outline: none;
}

/* ==============================
   ALIGNEMENT & LIGNES
   ============================== */
.insc-ent-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

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

.insc-ent-text-center {
    text-align: center;
    margin-top: var(--spacing-xl);
}

/* ==============================
   MESSAGES D’ERREUR
   ============================== */
.error-message-ent {
    display: block;
    color: var(--color-error);
    font-size: var(--fs-error);
    margin-top: var(--spacing-xxs);
}

/* ==============================
   BOUTON DÉSACTIVÉ
   ============================== */
.button-05:disabled {
    background-color: var(--color-disabled);
    cursor: not-allowed;
}

/* ==============================
   ÉTAPES DE FORMULAIRE
   ============================== */
.form-inscr-ent-form-step {
    display: none;
    margin-bottom: var(--spacing-md);
}

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

/* ==============================
   BOUTONS DE NAVIGATION
   ============================== */
.form-inscr-ent-buttons {
    margin-top: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
}

/* ==============================
   RÉPONSIVE
   ============================== */
@media (max-width: var(--bp-mobile)) {
    .insc-ent-row {
        flex-direction: column;
    }

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