/* ── Global site stylesheet ─────────────────────────────────────────────── */
/* Dark theme for native Contao "form" content elements (e.g. Contact page) */

/* Contact page layout (article #24: headline + form + privacy note) */
#article-24 {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
}

#article-24 .content-headline {
    text-align: center;
    margin-bottom: 28px;
}

#article-24 .content-text {
    max-width: 520px;
    margin: 20px auto 0;
    text-align: center;
    color: #888;
}

/* Contact confirmation page (article #34: "Message envoyé") */
#article-34 {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

#article-34 .content-headline {
    margin-bottom: 12px;
}

#article-34 .content-text {
    color: #22c55e;
    font-size: 1.05em;
}

.ce_form {
    max-width: 640px;
}

#article-24 .ce_form {
    background: #141414;
    border: 1px solid #242424;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

#article-24 .formbody {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
}

#article-24 .formbody > div {
    flex: 1 1 100%;
}

#article-24 .widget-text {
    flex: 1 1 200px;
}

#article-24 .cf-turnstile {
    margin-bottom: 20px;
    text-align: center;
}

.ce_form .widget {
    margin-bottom: 20px;
}

.ce_form label {
    display: block;
    font-size: 0.88em;
    font-weight: 600;
    color: #ccc;
    margin-bottom: 6px;
}

.ce_form label .mandatory {
    color: #ef4444;
}

.ce_form input[type=text],
.ce_form input[type=email],
.ce_form input[type=tel],
.ce_form input[type=number],
.ce_form input[type=date],
.ce_form input[type=password],
.ce_form select,
.ce_form textarea {
    width: 100% !important;
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    color: #f5f5f5 !important;
    padding: 12px 14px !important;
    font-size: 0.95em !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s !important;
}

.ce_form textarea {
    min-height: 140px;
    resize: vertical;
}

.ce_form input::placeholder,
.ce_form textarea::placeholder {
    color: #666 !important;
    opacity: 1 !important;
}

.ce_form input:focus,
.ce_form select:focus,
.ce_form textarea:focus {
    outline: none !important;
    border-color: #ef4444 !important;
}

/* Keep the dark background when the browser autofills a field */
.ce_form input:-webkit-autofill,
.ce_form input:-webkit-autofill:hover,
.ce_form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f5f5f5 !important;
    -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    caret-color: #f5f5f5 !important;
}

.ce_form .widget-submit {
    margin-top: 8px;
    text-align: center;
}

.ce_form button.submit {
    display: inline-block;
    background: #e63535 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.ce_form button.submit:hover {
    background: #c62a2a !important;
}

.ce_form p.error {
    color: #ef4444;
    font-size: 0.85em;
    margin: 0 0 8px;
}

.ce_form .form-confirmation {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #22c55e;
    color: #d1fae5;
    border-radius: 8px;
    padding: 16px 18px;
    font-size: 0.95em;
    max-width: 640px;
}

@media (max-width: 600px) {
    #article-24 {
        padding: 0 16px;
    }

    #article-24 .ce_form {
        padding: 20px;
        border-radius: 12px;
    }

    #article-24 .widget-text {
        flex: 1 1 100%;
    }

    .ce_form input[type=text],
    .ce_form input[type=email],
    .ce_form textarea {
        padding: 10px 12px !important;
    }

    .ce_form button.submit {
        width: 100%;
        text-align: center;
    }
}