/* Ride Club V4 : passe les feuilles d'avant (access.css, espace partenaire…) à la direction artistique V4.
   Chargée en dernier sur chaque page publique (PublicPage::head). Les anciennes variables pointent vers les tokens V4. */
.v4-light {
  --ink: var(--v4-ink);
  --muted: var(--v4-soft);
  --border: var(--v4-rule);
  --border-strong: var(--v4-rule);
  --paper: var(--v4-white);
  --brand: var(--v4-gold);
  --brand-deep: var(--v4-gold);
  --brand-tint: var(--v4-cream);
  --dark: var(--v4-ink);
  --dark-raised: #26271F;
  --on-dark: var(--v4-paper);
  --radius: var(--v4-radius-small);
  --gutter: var(--v4-gutter);
  --ease: var(--v4-ease);
}

/* ---------- Pages d'accès : connexion, code, inscription, profil ---------- */
.v4-light .access-main { flex: 1; width: 100%; max-width: 560px; margin: 0; padding: 28px 0 40px; }
.v4-light .access-main h1 { margin: 0; font-size: clamp(2.125rem, 9vw, 2.75rem); font-weight: 900; line-height: 1.04; letter-spacing: var(--v4-track-title); }
.v4-light .access-lead { margin: 14px 0 0; color: var(--v4-soft); font-size: 1.125rem; font-weight: 700; line-height: 1.45; }
.v4-light .join-form { display: grid; gap: 10px; margin-top: 24px; }
.v4-light .join-label { display: block; font-size: .9375rem; font-weight: 800; }
.v4-light .join-row { display: grid; gap: 10px; }
.v4-light .join-row input, .v4-light .form-field input, .v4-light .code-input {
  width: 100%; min-height: 58px; padding: 0 22px; border: 1.5px solid var(--v4-rule); border-radius: var(--v4-pill); background: var(--v4-white);
  color: var(--v4-ink); font: 800 1.0625rem var(--v4-font); outline: none;
}
.v4-light .join-row input:focus, .v4-light .form-field input:focus, .v4-light .code-input:focus { border-color: var(--v4-ink); box-shadow: 0 0 0 1px var(--v4-ink); outline: none; }
.v4-light .code-input { min-height: 72px; font-size: 2rem; font-weight: 900; letter-spacing: .3em; text-align: center; }
.v4-light .join-button, .v4-light .access-button {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--v4-button); margin: 0; padding: 0 26px; border: 0; border-radius: var(--v4-pill);
  background: var(--v4-gold); color: var(--v4-ink); font: 900 1.0625rem var(--v4-font); cursor: pointer; transform: none; transition: transform 100ms ease-out;
}
.v4-light .access-button { margin-top: 8px; }
.v4-light .join-button:active, .v4-light .access-button:active { transform: scale(.97); }
.v4-light .access-button:hover, .v4-light .join-button:hover { background: var(--v4-gold); transform: none; }
.v4-light .access-button-quiet { background: var(--v4-ink); color: var(--v4-gold); }
.v4-light .access-button-quiet:hover { background: var(--v4-ink); }
.v4-light .join-status { margin: 0; color: var(--v4-ink); font-size: .9375rem; font-weight: 800; }
.v4-light .join-status:empty { display: none; }
.v4-light .access .join-form.is-sent .join-status, .v4-light.access .join-form.is-sent .join-status { color: var(--v4-ink); }
.v4-light .access-aside { color: var(--v4-soft); font-weight: 700; }
.v4-light .access-aside a, .v4-light .access-main a { color: var(--v4-ink); font-weight: 800; text-underline-offset: 3px; }
.v4-light .code-link { color: var(--v4-ink); font-weight: 800; }
.v4-light .admin-login { border-top-color: var(--v4-rule); }
.v4-light .form-alert { border-radius: var(--v4-radius-small); }
.v4-light .access-form { gap: 18px; }
.v4-light .form-field label, .v4-light .choice-field legend { font-size: .9375rem; font-weight: 800; }
.v4-light .field-help { color: var(--v4-soft); font-weight: 700; }
.v4-light .company-card { padding: 16px 20px; border-radius: var(--v4-radius); background: var(--v4-cream); color: var(--v4-ink); }
.v4-light .company-card strong { color: var(--v4-ink); font-weight: 900; }
.v4-light .choice-option, .v4-light .consent { align-items: center; min-height: 58px; padding: 14px 20px; border: 1.5px solid var(--v4-rule); border-radius: var(--v4-radius); background: var(--v4-white); font-weight: 700; }
.v4-light .choice-option:has(input:checked) { border-color: var(--v4-ink); background: var(--v4-cream); }
.v4-light .choice-option input, .v4-light .consent input { accent-color: var(--v4-ink); }
.v4-light .consent-highlight { border-color: transparent; background: var(--v4-cream); }
.v4-light .access-email { color: var(--v4-soft); font-weight: 700; }
@media (min-width: 720px) {
  .v4-light .join-row { grid-template-columns: 1fr auto; }
  .v4-light .join-row .join-button { width: auto; }
}
.v4-light .code-link:disabled { color: var(--v4-soft); text-decoration: none; }
.v4-light main img { max-width: 100%; height: auto; }

/* ---------- Formulaire Partenaires ---------- */
.v4-light .pa-form { display: grid; gap: 16px; margin-top: 18px; }
.v4-light .pa-grid { display: grid; gap: 16px; }
.v4-light .pa-field { display: grid; gap: 8px; }
.v4-light .pa-label { font-size: .9375rem; font-weight: 800; }
.v4-light .pa-input { width: 100%; min-height: 58px; padding: 0 22px; border: 1.5px solid var(--v4-rule); border-radius: var(--v4-pill); background: var(--v4-white); color: var(--v4-ink); font: 800 1.0625rem var(--v4-font); outline: none; }
.v4-light select.pa-input { -webkit-appearance: none; appearance: none; }
.v4-light .pa-textarea { min-height: 110px; padding: 16px 22px; border-radius: var(--v4-radius); resize: vertical; }
.v4-light .pa-input:focus { border-color: var(--v4-ink); box-shadow: 0 0 0 1px var(--v4-ink); }
.v4-light .pa-input[aria-invalid="true"] { border-color: #8A1C12; }
.v4-light .pa-hint { margin: 0; color: var(--v4-soft); font-size: .8125rem; font-weight: 700; }
.v4-light .pa-trap { position: absolute; left: -9999px; }
.v4-light .pa-consent { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--v4-radius); background: var(--v4-white); font-weight: 700; line-height: 1.45; }
.v4-light .pa-consent input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--v4-ink); }
.v4-light .pa-status { margin: 0; color: #8A1C12; font-weight: 800; }
.v4-light .pa-status:empty { display: none; }
.v4-light .pa-done { margin-top: 18px; padding: 20px; border-radius: var(--v4-radius); background: var(--v4-white); }
.v4-light .pa-done h3 { margin: 0; font-size: 1.125rem; font-weight: 900; }
.v4-example { margin-top: 22px; padding: 20px 22px; }
.v4-example p { margin: 6px 0 0; font-weight: 700; line-height: 1.45; }
.v4-example .v4-label { margin: 0; }
@media (min-width: 720px) { .v4-light .pa-grid { grid-template-columns: 1fr 1fr; } }