/* Shared stylesheet of the legal and information pages (content/*.html), one copy instead of an inline block
   per page (ENH-021, 2 Oct 2026). The base (tokens, fonts, page container, type, cards, buttons, forms, tables,
   theme toggle) is /libs/site-pages.css since 3 Oct 2026, shared with the guides, listings and blog so every
   page matches the homepage. This file holds only the box classes of these pages and the contact form's extras.
   The gutter (16 px under 640 px, 80 px from 640 px) is the site's layout rule, applied by the base container. */

.container a, .container code { overflow-wrap: anywhere; }

/* Information boxes: one surface (from the base), with a coloured left edge where the page marks a point */
.contact, .privacy-highlight, .data-info, .rights-info,
.checklist, .cookie-info, .privacy-note,
.architecture-info, .protection-info, .security-highlight, .contact-security,
.service-info, .license-info, .legal-notice {
    padding: 24px;
    margin: 2rem 0;
    box-shadow: none;
}
.contact h2, .privacy-highlight h2, .data-info h2, .rights-info h2, .checklist h2, .cookie-info h2, .privacy-note h2,
.architecture-info h2, .protection-info h2, .security-highlight h2, .contact-security h2, .service-info h2,
.license-info h2, .legal-notice h2 { margin-top: 0; }
.privacy-highlight, .checklist, .privacy-note, .security-highlight { border-left: 4px solid var(--success); }
.legal-notice, .contact-security { border-left: 4px solid var(--warning); }

/* The last paragraph in a box keeps the box tidy */
.contact p:last-child, .privacy-highlight p:last-child, .data-info p:last-child, .rights-info p:last-child,
.checklist p:last-child, .cookie-info p:last-child, .privacy-note p:last-child, .architecture-info p:last-child,
.protection-info p:last-child, .security-highlight p:last-child, .contact-security p:last-child,
.service-info p:last-child, .license-info p:last-child, .legal-notice p:last-child { margin-bottom: 0; }

/* Contact form */
.contact-form { margin: 2rem 0; }
.contact-form-card .contact-form { margin: 0; }

/* Site map: the small "(guide)" link after a tool name */
.muted { color: var(--text-2); font-size: 0.9em; }

/* ----- Contact page (3 Oct 2026) ----- */
/* The form sits in its own card beside a column of three small cards; the long text follows underneath. */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 2rem 0 2.5rem; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; } }
.contact-card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    box-shadow: var(--surface-shadow);
    padding: 24px;
    margin: 0;
}
.contact-form-card { padding: 28px 24px 24px; }
@media (min-width: 640px) { .contact-form-card { padding: 32px; } }
.contact-card h2 { margin: 0 0 1rem; font-size: 1.35rem; }
.contact-aside { display: grid; gap: 20px; }
.contact-aside .contact-card h2 { font-size: 1.05rem; margin-bottom: 0.75rem; }
.contact-aside p { font-size: 0.9rem; color: var(--text-2); margin-bottom: 0.75rem; }
.contact-aside p:last-child { margin-bottom: 0; }
.contact-facts { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.contact-facts li { font-size: 0.9rem; color: var(--text); margin: 0 0 10px; line-height: 1.5; }
.contact-facts li:last-child { margin-bottom: 0; }
.contact-facts li span { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-3); margin-bottom: 2px; }
.contact-facts a { overflow-wrap: anywhere; }
.contact-hours, .contact-address { font-size: 0.9rem; line-height: 1.6; }

.form-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.contact-form .form-group { margin-bottom: 1.25rem; }
.contact-form label { font-size: 0.9rem; }
.contact-form textarea { min-height: 170px; }
.field-hint { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-3); }
.form-check { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin: 0.5rem 0 1.25rem; }
.form-check .cf-turnstile { display: flex; justify-content: center; min-height: 65px; }
.form-actions { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.form-actions .form-submit-btn { min-width: 220px; }
.form-actions .form-note { margin: 0; max-width: 34rem; }
.form-banner { display: block; padding: 14px 18px; border-radius: 12px; margin-bottom: 1.25rem; text-align: center; font-weight: 600; font-size: 0.95rem; }
.form-banner[hidden] { display: none; }
.form-banner.is-ok { background: rgba(22, 163, 74, 0.1); color: #166534; border: 1px solid rgba(22, 163, 74, 0.35); }
.form-banner.is-error { background: rgba(220, 38, 38, 0.08); color: #991b1b; border: 1px solid rgba(220, 38, 38, 0.35); }
:root:not([data-theme="light"]) .form-banner.is-ok { color: #86efac; }
:root:not([data-theme="light"]) .form-banner.is-error { color: #fca5a5; }
@media (max-width: 639.98px) { .form-actions .form-submit-btn { width: 100%; } }

/* Troubleshooting checklist: a tick before each item */
.check-list { list-style: none; padding-left: 0; }
.check-list li { position: relative; padding-left: 28px; }
.check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(22, 163, 74, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23166534' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
:root:not([data-theme="light"]) .check-list li::before { background-color: rgba(34, 197, 94, 0.18); }

/* Target of the footers' "Privacy and cookie settings" link without JavaScript: clear of the fixed header */
#consent-settings { scroll-margin-top: 96px; }

/* Phones: secondary text at 16 px and tap targets of 44 px (AdSense audit H-04, 8 Oct 2026); larger screens unchanged */
@media (max-width: 639.98px) {
    .contact-aside p, .contact-facts li, .contact-hours, .contact-address, .contact-form label, .field-hint { font-size: 1rem; }
    .site-map li > a:first-child { display: inline-block; padding-block: 12px; }
}