*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --ink:       #1a1410;
      --paper:     #fdf8f0;
      --cream:     #f5ede0;
      --rust:      #c4521a;
      --rust-light:#e8763a;
      --rust-pale: #fbeade;
      --sage:      #4a6741;
      --border:    #d4c4b0;
      --muted:     #7a6a58;
      --error:     #b83232;
      --success:   #2e6b3e;
      --radius:    4px;
      --shadow:    0 2px 12px rgba(26,20,16,.08);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--cream);
      color: var(--ink);
      min-height: 100vh;
      padding: 2rem 1rem 4rem;
    }

    /* ── HEADER ── */
    .page-header {
      max-width: 760px;
      margin: 0 auto 2.5rem;
      display: flex;
      align-items: flex-end;
      gap: 1.5rem;
      border-bottom: 2px solid var(--ink);
      padding-bottom: 1.25rem;
    }

    /* ── FORM SHELL ── */
    .form-card {
      max-width: 760px;
      margin: 0 auto;
      background: var(--paper);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    /* ── FIELDSETS ── */
    fieldset {
      border: none;
      padding: 2rem 2.5rem;
      border-bottom: 1.5px solid var(--cream);
      position: relative;
    }
    fieldset:last-of-type { border-bottom: none; }

    legend {
      font-family: 'Fraunces', serif;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--rust);
      letter-spacing: .01em;
      display: flex;
      align-items: center;
      gap: .5rem;
      margin-bottom: 1.5rem;
      width: 100%;
    }
    legend::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }
    .legend-icon {
      width: 26px; height: 26px;
      background: var(--rust-pale);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .75rem;
    }

    /* ── GRID ── */
    .grid { display: grid; gap: 1.25rem; }
    .grid-2 { grid-template-columns: 1fr 1fr; }
    @media (max-width: 540px) { .grid-2 { grid-template-columns: 1fr; } }

    /* ── FIELD ── */
    .field { display: flex; flex-direction: column; gap: .35rem; }

    label {
      font-size: .8rem;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    label .req { color: var(--rust); margin-left: 2px; }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="date"],
    input[type="file"],
    select,
    textarea {
      width: 100%;
      padding: .6rem .85rem;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: .95rem;
      color: var(--ink);
      transition: border-color .18s, box-shadow .18s;
      outline: none;
    }
    input:focus, select:focus, textarea:focus {
      border-color: var(--rust);
      box-shadow: 0 0 0 3px rgba(196,82,26,.12);
    }

    /* native validation states */
    input:not(:placeholder-shown):valid,
    select:valid,
    textarea:not(:placeholder-shown):valid {
      border-color: var(--success);
    }
    input:not(:placeholder-shown):invalid,
    select:invalid,
    textarea:not(:placeholder-shown):invalid {
      border-color: var(--error);
    }

    textarea {
      resize: vertical;
      min-height: 110px;
    }
    select { cursor: pointer; }

    /* file input */
    input[type="file"] {
      padding: .45rem .75rem;
      cursor: pointer;
      background: var(--cream);
      font-size: .875rem;
    }
    input[type="file"]::file-selector-button {
      font-family: 'DM Sans', sans-serif;
      font-size: .8rem;
      font-weight: 500;
      background: var(--ink);
      color: var(--paper);
      border: none;
      padding: .35rem .75rem;
      border-radius: var(--radius);
      cursor: pointer;
      margin-right: .75rem;
      transition: background .15s;
    }
    input[type="file"]::file-selector-button:hover { background: var(--rust); }

    /* char counter */
    .char-counter {
      font-size: .75rem;
      color: var(--muted);
      text-align: right;
      margin-top: .15rem;
    }

    /* hint */
    .hint {
      font-size: .78rem;
      color: var(--muted);
      font-style: italic;
    }

    /* custom error messages */
    .field-error {
      font-size: .78rem;
      color: var(--error);
      display: none;
      align-items: center;
      gap: .3rem;
    }
    .field-error::before { content: '⚠'; font-style: normal; }
    input:not(:placeholder-shown):invalid ~ .field-error,
    textarea:not(:placeholder-shown):invalid ~ .field-error,
    select:invalid ~ .field-error { display: flex; }

    /* ── RADIO & CHECKBOX GROUP ── */
    .options-group {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
    }
    .option-pill {
      display: flex;
      align-items: center;
      gap: .45rem;
      padding: .45rem .9rem;
      border: 1.5px solid var(--border);
      border-radius: 99px;
      cursor: pointer;
      transition: border-color .15s, background .15s;
      font-size: .875rem;
      user-select: none;
    }
    .option-pill:hover { border-color: var(--rust-light); background: var(--rust-pale); }
    .option-pill input[type="radio"],
    .option-pill input[type="checkbox"] {
      width: 15px; height: 15px;
      accent-color: var(--rust);
      cursor: pointer;
    }
    .option-pill:has(input:checked) {
      border-color: var(--rust);
      background: var(--rust-pale);
      font-weight: 500;
    }

    /* ── CGU ── */
    .cgu-row {
      display: flex;
      align-items: flex-start;
      gap: .75rem;
      padding: 1rem 1.25rem;
      background: var(--cream);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
    }
    .cgu-row input[type="checkbox"] {
      width: 18px; height: 18px;
      flex-shrink: 0;
      margin-top: .15rem;
      accent-color: var(--rust);
      cursor: pointer;
    }
    .cgu-row label {
      text-transform: none;
      font-size: .875rem;
      color: var(--ink);
      font-weight: 400;
      letter-spacing: 0;
      cursor: pointer;
    }
    .cgu-row a { color: var(--rust); text-decoration: underline; }

    /* ── PASSWORD STRENGTH ── */
    .strength-bar { display: flex; gap: 4px; margin-top: .35rem; }
    .strength-bar span {
      flex: 1; height: 4px;
      background: var(--border);
      border-radius: 99px;
      transition: background .3s;
    }
    .strength-label {
      font-size: .75rem;
      color: var(--muted);
      margin-top: .2rem;
    }

    /* ── SUBMIT ── */
    .form-actions {
      padding: 2rem 2.5rem;
      background: var(--cream);
      border-top: 1.5px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .form-actions p {
      font-size: .8rem;
      color: var(--muted);
    }
    .btn-submit {
      font-family: 'Fraunces', serif;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: .02em;
      color: #fff;
      background: var(--ink);
      border: 2px solid var(--ink);
      padding: .75rem 2.25rem;
      border-radius: var(--radius);
      cursor: pointer;
      transition: background .18s, color .18s, transform .1s;
      display: flex;
      align-items: center;
      gap: .6rem;
    }
    .btn-submit:hover { background: var(--rust); border-color: var(--rust); }
    .btn-submit:active { transform: scale(.97); }

    /* ── SUCCESS BANNER ── */
    #success-banner {
      display: none;
      max-width: 760px;
      margin: 1.5rem auto 0;
      background: #e6f4eb;
      border: 1.5px solid var(--success);
      border-radius: 8px;
      padding: 1rem 1.5rem;
      font-size: .9rem;
      color: var(--success);
      font-weight: 500;
      align-items: center;
      gap: .6rem;
    }