:root {
    --ink: #202124;
    --muted: #5f6368;
    --paper: #ffffff;
    --canvas: #f8f9fa;
    --green: #315b4e;
    --red: #a64032;
    --line: #dadce0;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: 'DM Sans', Arial, sans-serif; }
a { color: inherit; }

.signup-page { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 1fr) minmax(440px, 1fr); }
.signup-visual { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; padding: 58px clamp(28px, 5vw, 76px); color: #fff; background: url('images/Circuit des Arbres Remarquables.jpg') center/cover; }
.visual-copy { max-width: 470px; }.visual-copy h1 { max-width: 440px; margin: 0 0 16px; font-size: clamp(2.4rem, 4.2vw, 4.4rem); font-weight: 600; line-height: 1.08; letter-spacing: -.04em; text-shadow: 0 2px 12px rgba(0,0,0,.35); }.visual-copy p { max-width: 350px; margin: 0; color: rgba(255,255,255,.94); font-size: .95rem; line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.signup-content { display: flex; flex-direction: column; min-height: 100vh; padding: 32px clamp(28px, 7vw, 110px); background: var(--paper); }
.form-wrap { width: min(100%, 420px); margin: auto; }.form-wrap h2 { margin-bottom: 8px; font-size: 2rem; font-weight: 600; line-height: 1.2; letter-spacing: -.03em; }.intro { margin-bottom: 30px; color: var(--muted); font-size: .9rem; }
.field-row { margin-bottom: 20px; }.field-row label { display: block; margin-bottom: 8px; color: var(--ink); font-size: .8rem; font-weight: 600; }.field-row input { width: 100%; height: 48px; padding: 0 13px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 4px; outline: 0; font-size: .88rem; transition: border-color .2s, box-shadow .2s; }.field-row input:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(49,91,78,.14); }.field-row input.invalid { border-color: var(--red); }.field-hint, .field-error, .email-note { display: block; margin-top: 6px; color: var(--muted); font-size: .7rem; }.email-note { color: #6b5a2b; line-height: 1.45; }.field-error { color: var(--red); min-height: 0; }
.consent { display: flex; align-items: flex-start; gap: 9px; margin: 26px 0 18px; color: var(--muted); font-size: .72rem; line-height: 1.5; }.consent input { flex: 0 0 auto; margin: 2px 0 0; accent-color: #1a73e8; }.form-message { min-height: 18px; margin: 0 0 8px; color: var(--red); font-size: .72rem; }.submit-button { width: 100%; padding: 14px 18px; color: #fff; background: #1a73e8; border: 0; border-radius: 4px; font-size: .82rem; font-weight: 700; text-align: center; }.submit-button:hover { background: #1765cc; }.login-note { margin: 24px 0 0; color: var(--muted); font-size: .73rem; text-align: center; }.login-note a { color: var(--muted); font-weight: 400; text-decoration: underline; }.login-note a:hover { color: var(--ink); }

@media (max-width: 720px) { .signup-page { display: block; }.signup-visual { min-height: 270px; padding: 32px 24px; }.visual-copy h1 { margin-bottom: 10px; font-size: 2.5rem; }.visual-copy p { font-size: .8rem; }.signup-content { min-height: auto; padding: 25px 24px 38px; }.form-wrap { margin: 54px auto 0; } }