/* =============================================
   L'Atelier à Histoires — Formulaire de pré-inscription
   Charte : bordeaux #b82105 | noir #1A202C
   Classes Elementor Pro 4.1 inspectées
   ============================================= */

/* --- Barre de progression (indicateurs d'étapes) --- */

.e-form__indicators {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding-bottom: 32px !important;
    padding-top: 8px !important;
    overflow: visible !important;
}

/* Chaque étape : largeur fixe pour que le label ait de la place */
.e-form__indicators__indicator {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    min-width: 130px !important;
    text-align: center !important;
    overflow: visible !important;
}

/* Séparateur (ligne entre les étapes) */
.e-form__indicators__indicator__separator {
    flex: 1 !important;
    height: 2px !important;
    background: #ddd !important;
    margin-top: 20px !important;
    align-self: flex-start !important;
}

/* Cercle numéroté */
.e-form__indicators__indicator__number {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid #ccc !important;
    color: #aaa !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    flex-shrink: 0 !important;
    transition: border-color 0.2s, color 0.2s, background 0.2s !important;
}

/* Étape active : bordeaux */
.e-form__indicators__indicator--state-active .e-form__indicators__indicator__number {
    border-color: #b82105 !important;
    color: #b82105 !important;
    background: #fff !important;
}

/* Étape terminée : fond bordeaux */
.e-form__indicators__indicator--state-complete .e-form__indicators__indicator__number {
    border-color: #b82105 !important;
    background: #b82105 !important;
    color: #fff !important;
}

/* Label de l'étape */
.e-form__indicators__indicator__label {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: visible !important;
    width: auto !important;
    max-width: none !important;
    text-align: center !important;
    display: block !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #aaa !important;
    margin-top: 8px !important;
    line-height: 1.3 !important;
}

/* Label étape active */
.e-form__indicators__indicator--state-active .e-form__indicators__indicator__label {
    color: #b82105 !important;
    font-weight: 700 !important;
}

/* Label étape terminée */
.e-form__indicators__indicator--state-complete .e-form__indicators__indicator__label {
    color: #b82105 !important;
}

/* --- Champs de saisie --- */
.elementor-widget-form .elementor-field {
    border: 1.5px solid #d6cdc6 !important;
    border-radius: 8px !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 15px !important;
    padding: 11px 14px !important;
    color: #1A202C !important;
    background: #ffffff !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.elementor-widget-form .elementor-field:focus {
    border-color: #b82105 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(184, 33, 5, 0.1) !important;
}

.elementor-widget-form textarea.elementor-field {
    min-height: 90px !important;
    resize: vertical !important;
}

/* --- Labels des champs --- */
.elementor-widget-form .elementor-field-label {
    font-family: 'Barlow', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1A202C !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* --- Bouton "Suivant" --- */
.elementor-widget-form .e-form__buttons__button--next.elementor-button {
    background-color: #b82105 !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.4px !important;
    border-radius: 8px !important;
    padding: 13px 32px !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    width: 100% !important;
}

.elementor-widget-form .e-form__buttons__button--next.elementor-button:hover {
    background-color: #961a03 !important;
}

/* --- Bouton "Précédent" --- */
.elementor-widget-form .e-form__buttons__button--previous.elementor-button {
    background-color: transparent !important;
    border: 2px solid #b82105 !important;
    color: #b82105 !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    padding: 11px 24px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.elementor-widget-form .e-form__buttons__button--previous.elementor-button:hover {
    background-color: #b82105 !important;
    color: #fff !important;
}

/* --- Bouton Stripe (valider et payer) --- */
.elementor-field-type-stripe-button .elementor-button,
.e-stripe-button {
    background-color: #b82105 !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    padding: 14px 32px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    letter-spacing: 0.3px !important;
}

.elementor-field-type-stripe-button .elementor-button:hover,
.e-stripe-button:hover {
    background-color: #961a03 !important;
}

/* --- Espacement général --- */
.elementor-widget-form .elementor-field-group {
    margin-bottom: 16px !important;
}