/* Version: 23-09-2026-20-19 */
:is(#portfolio_page, #survey-response-modal) {
    --form-border: var(--portfolios-ui-border-strong-color, var(--portfolios-theme-border-strong));
    --contact-control-border-color: var(
        --portfolios-color-border-custom,
        var(--portfolios-thumbnail-contour-color, var(--portfolios-section-divider-color, var(--form-border)))
    );
    --contact-control-border-width: max(var(--portfolios-thumbnail-border-width, 0px), 2px);
    --contact-control-padding-y: 0.75rem;
    --contact-control-padding-x: max(var(--portfolios-thumbnail-overlay-padding-x, 10px), 0.75rem);
    --form-bg: var(--portfolios-theme-bg-main);
    --form-error: rgb(241, 174, 174);
    --form-valid: #D4F2B8;
    --form-mandatory: var(--portfolios-theme-mandatory);
}

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

#portfolio_page :is(input:not([type="submit"]), select, textarea):not(.contact-form__control) {
    padding: 0.8rem var(--portfolios-thumbnail-overlay-padding-x, 10px);
    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;
}

/* Validation globale (hors formulaire contact structuré) */
#portfolio_page :is(input:required, select:required, textarea:required):not(.contact-form__control) {
    border: 2px solid var(--form-error) !important;
}

#portfolio_page :is(input:required:valid, textarea:required:valid, select:required:valid):not(.contact-form__control) {
    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):not(.contact-form__control) {
    border: 2px solid var(--form-error) !important;
    box-shadow: none !important;
}

:is(#portfolio_page, #survey-response-modal) form .folio_button,
:is(#portfolio_page, #survey-response-modal) form .folio-button {
    line-height: 1;
    width: max-content;
}

:is(#portfolio_page, #survey-response-modal) .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;
}

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

:is(#portfolio_page, #survey-response-modal) .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);
}

:is(#portfolio_page, #survey-response-modal) .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);
}

/* ——— Formulaire contact ——— */
:is(#portfolio_page, #survey-response-modal) .contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__row {
    margin-bottom: 0.25rem;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__label {
    display: block;
    margin: 0;
    font-weight: bold;
    line-height: 1.35;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__required {
    color: var(--form-mandatory);
    font-weight: inherit;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__control {
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
    padding: var(--contact-control-padding-y) var(--contact-control-padding-x);
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background-color: var(--form-bg);
    border-style: solid;
    border-width: var(--contact-control-border-width);
    border-color: var(--contact-control-border-color);
    border-radius: var(--portfolios-thumbnail-radius, 0%);
    box-shadow: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__control:focus {
    outline: none;
    border-color: var(--portfolios-heading-primary-color, var(--contact-control-border-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--portfolios-heading-primary-color, var(--contact-control-border-color)) 22%, transparent);
}

:is(#portfolio_page, #survey-response-modal) .contact-form__control[type="email"] {
    text-transform: none;
}

:is(#portfolio_page, #survey-response-modal) .contact-form textarea.contact-form__control {
    min-height: 180px;
    line-height: 1.55;
    align-items: flex-start;
    justify-content: flex-start;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-height: 1.25rem;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__hint {
    margin: 0;
    font-size: calc(var(--portfolios-font-size-base) * 0.88);
    line-height: 1.4;
    color: color-mix(in srgb, var(--form-error) 75%, var(--portfolios-text-main-color, inherit));
}

:is(#portfolio_page, #survey-response-modal) .contact-form__hint[hidden] {
    display: none;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__counter {
    margin: 0 0 0 auto;
    font-size: calc(var(--portfolios-font-size-base) * 0.82);
    line-height: 1.4;
    color: color-mix(in srgb, var(--portfolios-text-main-color, inherit) 65%, transparent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__counter--valid {
    color: color-mix(in srgb, var(--form-valid) 55%, var(--portfolios-text-main-color, inherit));
}

:is(#portfolio_page, #survey-response-modal) .contact-form__counter--invalid {
    color: color-mix(in srgb, var(--form-error) 80%, var(--portfolios-text-main-color, inherit));
}

:is(#portfolio_page, #survey-response-modal) .contact-form__field--valid .contact-form__control {
    border-color: var(--form-valid) !important;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__field--invalid .contact-form__control {
    border-color: var(--form-error) !important;
    box-shadow: none !important;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__field--invalid .contact-form__control:focus {
    border-color: var(--form-error) !important;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__altcha {
    margin-bottom: 1rem;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 0.25rem;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__legend {
    margin: 0;
    color: color-mix(in srgb, var(--portfolios-text-main-color, inherit) 70%, transparent);
}

:is(#portfolio_page, #survey-response-modal) .contact-form #submit-btn:disabled,
:is(#portfolio_page, #survey-response-modal) .contact-form #survey-submit-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media screen and (max-width: 650px) {
    :is(#portfolio_page, #survey-response-modal) .contact-form__row.pf-cols-2 {
        grid-template-columns: 1fr;
    }
}

.field-locked-control {
    position: relative;
    width: 100%;
}

.field-locked-control .field-locked-input {
    cursor: default;
}

.field-locked-indicator {
    position: absolute;
    top: 50%;
    right: calc(var(--contact-control-padding-x, 0.75rem) + 0.15rem);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    color: color-mix(in srgb, var(--portfolios-text-main-color, inherit) 55%, transparent);
}

.field-locked-control.is-locked:hover .field-locked-indicator {
    opacity: 0.85;
}

.field-locked-control.is-locked:hover .field-locked-input {
    padding-right: calc(var(--contact-control-padding-x, 0.75rem) + 1.85rem);
}