/* SJB — refinements for public application forms.
   Loaded after forms.css so the application panel stays consistently readable. */

.form-flow .professional-form {
  background: var(--forms-green);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: 0 28px 75px rgba(6, 75, 57, 0.16);
}

.form-flow .professional-form__heading {
  border-bottom-color: rgba(255, 255, 255, 0.34);
}

.form-flow .professional-form__heading .eyebrow {
  color: var(--forms-yellow);
}

.form-flow .professional-form__heading h2 {
  color: #fff;
}

.form-flow .professional-form__heading p {
  color: rgba(255, 255, 255, 0.68);
}

/* Top-level field labels must remain readable on the dark SJB panel. */
.form-flow .professional-form .form-field > label {
  color: #fff;
  font-weight: 700;
}

.form-flow .professional-form .required-mark {
  color: #ffd55f;
}

.form-flow .professional-form .form-help {
  color: rgba(255, 255, 255, 0.72);
}

.form-flow .professional-form .form-file-state {
  color: #d8efe6;
}

/* Inputs remain light for maximum contrast and familiar form affordance. */
.form-flow .professional-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-flow .professional-form select,
.form-flow .professional-form textarea {
  border-color: rgba(255, 255, 255, 0.42);
  background: #fff;
  color: #12372d;
}

.form-flow .professional-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.form-flow .professional-form select:focus,
.form-flow .professional-form textarea:focus {
  border-color: var(--forms-yellow);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(243, 186, 47, 0.2);
}

/* Chrome autofill should not introduce the blue field treatment visible in some browsers. */
.form-flow .professional-form input:-webkit-autofill,
.form-flow .professional-form input:-webkit-autofill:hover,
.form-flow .professional-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #12372d;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-out 0s;
}

.form-flow .professional-form input[type="file"] {
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.96);
  color: #38584f;
}

/* Choice cards stay light; their option labels therefore remain dark. */
.form-flow .professional-form .form-field--radio > div label,
.form-flow .professional-form .form-field--checkbox > div label,
.form-flow .professional-form .form-field--multiselect > div label {
  border-color: rgba(255, 255, 255, 0.35);
  background: #fff;
  color: #12372d;
}

.form-flow .professional-form .form-consent-row {
  border-left-color: var(--forms-yellow);
  background: #eef5f1;
}

.form-flow .professional-form .form-consent-row label {
  color: #12372d;
}

.form-flow .professional-form__footer {
  border-top-color: rgba(255, 255, 255, 0.3);
}

.form-flow .professional-form .form-privacy-note,
.form-flow .professional-form .form-submit-note {
  color: rgba(255, 255, 255, 0.72);
}

.form-flow .professional-form .form-privacy-note > span {
  background: rgba(255, 255, 255, 0.14);
  color: var(--forms-yellow);
}

.form-flow .professional-form .form-privacy-note a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.form-flow .professional-form .form-submit {
  border-color: var(--forms-yellow);
  background: var(--forms-yellow);
  color: #12372d;
}

.form-flow .professional-form .form-submit:hover,
.form-flow .professional-form .form-submit:focus-visible {
  background: #ffd158;
  color: #12372d;
}

/* Progress feedback becomes visually meaningful as soon as the form loads. */
.form-flow .form-progress {
  min-width: 190px;
  font-variant-numeric: tabular-nums;
}

.form-flow .form-progress-track > span {
  background: var(--forms-green-2);
  will-change: width;
}

.form-flow .form-progress-shell.is-complete .form-progress-shell__header {
  color: var(--forms-green);
}

.form-flow .form-progress-shell.is-complete .form-progress-track > span {
  background: var(--forms-green);
}

@media (max-width: 620px) {
  .form-flow .form-progress-shell__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-flow .form-progress {
    min-width: 0;
    text-align: left;
  }
}


/* Badge « J’y serai » — photo privée, visuel généré à la demande. */
.jy-serai-section {
  scroll-margin-top: 110px;
}

.jy-serai-form {
  display: grid;
  gap: 12px;
  max-width: 640px;
  margin-top: 22px;
  padding: 22px;
  border: 1px solid #d7dfd9;
  background: #f7faf8;
}

.jy-serai-form label {
  color: var(--forms-green);
  font-weight: 850;
}

.jy-serai-form input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 13px;
  border: 1px solid #cfd9d4;
  background: #fff;
  color: var(--forms-ink);
}

.jy-serai-form small {
  color: var(--forms-muted);
  line-height: 1.5;
}

.jy-serai-form .form-primary-action,
.jy-serai-form .form-secondary-action {
  width: fit-content;
  margin-top: 4px;
  cursor: pointer;
}

.jy-serai-preview {
  max-width: 540px;
  margin: 24px 0 18px;
  overflow: hidden;
  border: 1px solid #d6dfda;
  background: #fff;
  box-shadow: 0 24px 60px rgba(6, 75, 57, 0.12);
}

.jy-serai-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.jy-serai-replace {
  max-width: 640px;
  margin-top: 22px;
}

.jy-serai-replace summary {
  width: fit-content;
  color: var(--forms-green);
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 620px) {
  .jy-serai-form {
    padding: 18px;
  }

  .jy-serai-form .form-primary-action,
  .jy-serai-form .form-secondary-action {
    width: 100%;
    justify-content: center;
  }
}