/* Version: 31-05-2026-16-39 */
#portfolio_page {
    --form-border: var(--portfolios-theme-border-strong);
    --form-bg: var(--portfolios-theme-bg-main);
    --form-error: rgb(241, 174, 174);
    --form-valid: #D4F2B8;
    --form-mandatory: var(--portfolios-theme-mandatory);
}

#portfolio_page label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

#portfolio_page :is(#main section article, form .limited-width, .welcome-to-windows) {
    border-color: var(--portfolios-theme-border) !important;
}

#portfolio_page :is(input:not([type="submit"]), select, textarea) {
    padding: 0.8rem 1rem;
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background-color: var(--form-bg);
    border-width: var(--portfolios-thumbnail-border-width, 2px);
    border-style: var(--portfolios-thumbnail-border-type, solid);
    border-color: var(--portfolios-thumbnail-border-color, var(--form-border));
    border-radius: var(--portfolios-thumbnail-radius, 0%);
    box-shadow: var(--portfolios-thumbnail-box-shadow, none);
    transition: border-width 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.18s ease;
} 

#portfolio_page textarea {
    min-height: 160px;
    resize: vertical;
}

#portfolio_page :is(input:focus, select:focus, textarea:focus) {
    outline: none;
    box-shadow: var(--portfolios-thumbnail-box-shadow, 0 8px 24px rgba(0,0,0,0.08));
    border-color: var(--portfolios-heading-primary-color, var(--form-border));
} 

#portfolio_page #mandatory, 
#portfolio_page #mandatory p {
    color: var(--form-mandatory) !important;
}

#portfolio_page #mandatory {
    border: 2px solid var(--form-mandatory) !important;
}

#portfolio_page :is(input:required, select:required, textarea:required) {
    border: 2px solid var(--form-error) !important;
}

#portfolio_page :is(input:required:valid, textarea:required:valid, select:required:valid) {
    border: 2px solid var(--form-valid) !important;
}

#portfolio_page :is(input:required:invalid:not([type="submit"]), input:required:not([type="submit"]):not(:valid), textarea:required:invalid, select:required:invalid) {
    border: 2px solid var(--form-error) !important;
    box-shadow: none !important;
}

#portfolio_page label[for="captcha"] small {
    display: block;
    margin-top: 0.25rem;
    color: var(--portfolios-text-main, inherit);
    font-size: 0.95rem;
}

#portfolio_page label[for="captcha"] small .captcha-question {
    display: inline-block;
    margin: 0 0.4rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--portfolios-theme-bg-alt);
    color: var(--portfolios-text-main-color);
    font-weight: 800;
    border-radius: var(--portfolios-border-radius-m);
    border: none;
    box-shadow: 0 8px 22px rgba(0,0,0,0.16);
    transform: translateY(-1px);
}

/* Ne pas forcer inherit ici : la spécificité #portfolio_page form gagnait sur buttons.css
   et annulait couleurs / typo du thème (--portfolios-button-*). */
#portfolio_page form .folio_button,
#portfolio_page form .folio-button {
    line-height: 1;
    width: max-content;
}

#portfolio_page .contact-form-alert {
    padding: 0.85rem 1rem;
    border-radius: var(--portfolios-border-radius-s, 8px);
    margin-bottom: 1.25rem;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
}

#portfolio_page .contact-form-alert__label {
    display: block;
    font-weight: var(--portfolios-font-weight-bold, 600);
    line-height: 1.45;
}

#portfolio_page .contact-form-alert--error {
    background-color: color-mix(in srgb, var(--form-error) 28%, var(--form-bg));
    color: var(--portfolios-text-main-color, inherit);
    border-color: var(--form-error);
}

#portfolio_page .contact-form-alert--success {
    background-color: color-mix(in srgb, var(--form-valid) 40%, var(--form-bg));
    color: var(--portfolios-text-main-color, inherit);
    border-color: var(--form-valid);
}