/* ==========================================================================
   SITM — FORMULAIRE DE DEVIS DÉCOUPE LASER
   Version compacte
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens du composant
   -------------------------------------------------------------------------- */

.wpcf7 .sitm-quote-form {
    --sitm-form-max-width: 40rem;

    --sitm-color-text: #111827;
    --sitm-color-muted: #8d9bb4;
    --sitm-color-border: #bcc8d9;
    --sitm-color-border-hover: #9eafc7;
    --sitm-color-primary: #318bd5;
    --sitm-color-primary-hover: #277dc2;
    --sitm-color-primary-soft: #dceeff;
    --sitm-color-upload-bg: #eef3f9;
    --sitm-color-error: #b42318;
    --sitm-color-error-bg: #fff5f5;
    --sitm-color-success: #17623f;
    --sitm-color-success-bg: #effaf5;

    --sitm-radius-control: 0.3125rem;
    --sitm-radius-upload: 0.375rem;

    --sitm-control-height: 3.375rem;
    --sitm-control-padding-x: 1rem;

    --sitm-font-label: 1rem;
    --sitm-font-control: 1rem;
    --sitm-font-helper: 0.875rem;

    --sitm-grid-gap-x: 1.25rem;
    --sitm-grid-gap-y: 1.25rem;

    width: 100%;
    max-width: var(--sitm-form-max-width);
    margin-inline: auto;
    color: var(--sitm-color-text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /*
     * Le formulaire devient responsive selon sa propre largeur,
     * indépendamment de la largeur globale de la page.
     */
    container: sitm-form / inline-size;
}

/* --------------------------------------------------------------------------
   2. Normalisation locale
   -------------------------------------------------------------------------- */

.wpcf7 .sitm-quote-form,
.wpcf7 .sitm-quote-form *,
.wpcf7 .sitm-quote-form *::before,
.wpcf7 .sitm-quote-form *::after {
    box-sizing: border-box;
}

.wpcf7 .sitm-quote-form :is(
    p,
    fieldset,
    legend
) {
    margin: 0;
    padding: 0;
}

.wpcf7 .sitm-quote-form fieldset {
    min-width: 0;
    border: 0;
}

.wpcf7 .sitm-quote-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* --------------------------------------------------------------------------
   3. Grille
   -------------------------------------------------------------------------- */

.wpcf7 .sitm-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sitm-grid-gap-x);
    row-gap: var(--sitm-grid-gap-y);
}

.wpcf7 .sitm-field {
    min-width: 0;
}

.wpcf7 .sitm-field--full {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   4. Labels
   -------------------------------------------------------------------------- */

.wpcf7 .sitm-label {
    display: block;
    margin: 0 0 0.5rem;
    color: var(--sitm-color-text);
    font-size: var(--sitm-font-label);
    font-weight: 700;
    line-height: 1.3;
}

.wpcf7 .sitm-required {
    color: var(--sitm-color-primary);
}

/* --------------------------------------------------------------------------
   5. Champs génériques
   -------------------------------------------------------------------------- */

.wpcf7 .sitm-quote-form :is(
    .sitm-control,
    .sitm-select,
    .sitm-textarea
) {
    display: block;
    width: 100%;
    margin: 0;
    border: 1.5px solid var(--sitm-color-border);
    border-radius: var(--sitm-radius-control);
    outline: 0;
    background-color: #ffffff;
    box-shadow: none;
    color: var(--sitm-color-text);
    font-family: inherit;
    font-size: var(--sitm-font-control);
    font-weight: 400;
    line-height: 1.35;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}

.wpcf7 .sitm-quote-form .sitm-control {
    height: var(--sitm-control-height);
    min-height: var(--sitm-control-height);
    padding: 0 var(--sitm-control-padding-x);
}

.wpcf7 .sitm-quote-form :is(
    .sitm-control,
    .sitm-textarea
)::placeholder {
    color: var(--sitm-color-muted);
    opacity: 1;
}

.wpcf7 .sitm-quote-form :is(
    .sitm-control,
    .sitm-select,
    .sitm-textarea
):hover {
    border-color: var(--sitm-color-border-hover);
}

.wpcf7 .sitm-quote-form :is(
    .sitm-control,
    .sitm-select,
    .sitm-textarea
):focus {
    border-color: var(--sitm-color-primary);
    box-shadow: 0 0 0 3px rgba(49, 139, 213, 0.12);
}

/* --------------------------------------------------------------------------
   6. Selects
   -------------------------------------------------------------------------- */

.wpcf7 .sitm-quote-form .sitm-select {
    height: var(--sitm-control-height);
    min-height: var(--sitm-control-height);
    padding: 0 2.75rem 0 var(--sitm-control-padding-x);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23657992' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1.125rem;
}

.wpcf7 .sitm-quote-form .sitm-select::-ms-expand {
    display: none;
}

/* --------------------------------------------------------------------------
   7. Opérations complémentaires
   -------------------------------------------------------------------------- */

.wpcf7 .sitm-operations .sitm-label {
    margin-bottom: 0.875rem;
}

.wpcf7 .sitm-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    width: 100%;
}

.wpcf7 .sitm-checkboxes .wpcf7-list-item {
    display: block;
    min-width: 0;
    margin: 0;
}

.wpcf7 .sitm-checkboxes label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    cursor: pointer;
}

.wpcf7 .sitm-checkboxes input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.125rem 0 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #85898e;
    border-radius: 0.1875rem;
    outline: 0;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem;
    cursor: pointer;

    transition:
        border-color 140ms ease,
        background-color 140ms ease,
        box-shadow 140ms ease;
}

.wpcf7 .sitm-checkboxes input[type="checkbox"]:hover {
    border-color: var(--sitm-color-primary);
}

.wpcf7 .sitm-checkboxes input[type="checkbox"]:focus-visible {
    border-color: var(--sitm-color-primary);
    box-shadow: 0 0 0 3px rgba(49, 139, 213, 0.15);
}

.wpcf7 .sitm-checkboxes input[type="checkbox"]:checked {
    border-color: var(--sitm-color-primary);
    background-color: var(--sitm-color-primary);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
}

.wpcf7 .sitm-checkboxes .wpcf7-list-item-label {
    min-width: 0;
    color: var(--sitm-color-text);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   8. Zone d’upload
   -------------------------------------------------------------------------- */

.wpcf7 .sitm-file-zone {
    position: relative;
    display: flex;
    min-height: 10.25rem;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 1.5px dashed #b8c8dc;
    border-radius: var(--sitm-radius-upload);
    background-color: var(--sitm-color-upload-bg);

    transition:
        border-color 150ms ease,
        background-color 150ms ease,
        box-shadow 150ms ease;
}

.wpcf7 .sitm-file-zone:is(
    :hover,
    :focus-within
),
.wpcf7 .sitm-file-zone.is-dragover {
    border-color: var(--sitm-color-primary);
    background-color: #e8f2fc;
    box-shadow: 0 0 0 3px rgba(49, 139, 213, 0.08);
}

.wpcf7 .sitm-file-zone.is-error {
    border-color: var(--sitm-color-error);
    background-color: var(--sitm-color-error-bg);
}

.wpcf7 .sitm-file-zone > .wpcf7-form-control-wrap {
    position: absolute;
    z-index: 2;
    inset: 0;
}

.wpcf7 .sitm-file-zone .sitm-file-input {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.wpcf7 .sitm-upload-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem;
    text-align: center;
    pointer-events: none;
}

.wpcf7 .sitm-upload-icon {
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    border-radius: 0.3125rem;
    background-color: var(--sitm-color-primary-soft);
}

.wpcf7 .sitm-upload-icon::before {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233a9be8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
}

.wpcf7 .sitm-upload-title {
    color: var(--sitm-color-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.wpcf7 .sitm-upload-title span {
    color: var(--sitm-color-primary);
}

.wpcf7 .sitm-upload-formats {
    margin-top: 0.5rem;
    color: #61718e;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.045em;
}

.wpcf7 .sitm-file-help {
    margin-top: 0.5rem;
    color: #61718e;
    font-size: var(--sitm-font-helper);
    font-weight: 400;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   9. Message
   -------------------------------------------------------------------------- */

.wpcf7 .sitm-quote-form .sitm-textarea {
    min-height: 8.75rem;
    padding: 0.875rem var(--sitm-control-padding-x);
    resize: vertical;
}

/* --------------------------------------------------------------------------
   10. Bouton d’envoi
   -------------------------------------------------------------------------- */

.wpcf7 .sitm-submit-area {
    margin-top: 1.25rem;
}

.wpcf7 .sitm-submit-wrap {
    position: relative;
    width: min(100%, 19rem);
}

.wpcf7 .sitm-quote-form .sitm-submit {
    display: block;
    width: 100%;
    height: 3.625rem;
    margin: 0;
    padding: 0 3.75rem 0 1.5rem;
    border: 0;
    border-radius: 0.25rem;
    outline: 0;
    background-color: var(--sitm-color-primary);
    box-shadow: none;
    color: #ffffff;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-align: left;

    transition:
        background-color 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
}

.wpcf7 .sitm-quote-form .sitm-submit:hover {
    background-color: var(--sitm-color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1.125rem rgba(49, 139, 213, 0.18);
}

.wpcf7 .sitm-quote-form .sitm-submit:focus-visible {
    box-shadow: 0 0 0 4px rgba(49, 139, 213, 0.2);
}

.wpcf7 .sitm-quote-form .sitm-submit:active {
    transform: translateY(0);
}

.wpcf7 .sitm-submit-wrap::after {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
    pointer-events: none;
}

.wpcf7 .sitm-submit-wrap .wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.75rem);
    margin: 0;
    transform: translateY(-50%);
}

.wpcf7 .sitm-response-delay {
    margin-top: 0.875rem;
    color: #61718e;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-align: center;
}

/* --------------------------------------------------------------------------
   11. Validation Contact Form 7
   -------------------------------------------------------------------------- */

.wpcf7 .sitm-quote-form .wpcf7-not-valid {
    border-color: var(--sitm-color-error);
}

.wpcf7 .sitm-quote-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.375rem;
    color: var(--sitm-color-error);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}

.wpcf7 .sitm-file-zone .wpcf7-not-valid-tip {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    width: 100%;
    pointer-events: none;
}

.wpcf7 form .wpcf7-response-output {
    max-width: var(--sitm-form-max-width, 40rem);
    margin: 1rem auto 0;
    padding: 0.75rem 1rem;
    border-width: 1px;
    border-radius: 0.3125rem;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #2d9b69;
    background-color: var(--sitm-color-success-bg);
    color: var(--sitm-color-success);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #d89b28;
    background-color: #fff9e9;
    color: #805b12;
}

/* --------------------------------------------------------------------------
   12. Responsive piloté par la largeur réelle du formulaire
   -------------------------------------------------------------------------- */

@container sitm-form (max-width: 35rem) {
    .sitm-form-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.125rem;
    }

    .sitm-field--full {
        grid-column: auto;
    }

    .sitm-checkboxes {
        grid-template-columns: minmax(0, 1fr);
    }

    .sitm-submit-wrap {
        width: 100%;
    }
}

/* Fallback pour les navigateurs ne gérant pas les container queries */

@media (max-width: 767px) {
    .wpcf7 .sitm-form-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.125rem;
    }

    .wpcf7 .sitm-field--full {
        grid-column: auto;
    }

    .wpcf7 .sitm-checkboxes {
        grid-template-columns: minmax(0, 1fr);
    }

    .wpcf7 .sitm-submit-wrap {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   13. Respect de la préférence utilisateur
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .wpcf7 .sitm-quote-form *,
    .wpcf7 .sitm-quote-form *::before,
    .wpcf7 .sitm-quote-form *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}