.wz-brol-form,
.wz-brol-confirmation {
  --wz-form-border: color-mix(in srgb, var(--wz-text) 22%, transparent);
  width: min(100%, 64rem);
  margin-inline: auto;
  border: 1px solid var(--wz-form-border);
  background: var(--wz-bg-elevated);
  color: var(--wz-text);
  box-shadow: var(--wz-shadow-s);
}

.wz-brol-form {
  --wz-form-accent: #dd5234;
  --wz-form-accent-strong: var(--wz-red-deep);
  --wz-form-accent-text: #a83a27;
  --wz-form-on-accent: var(--wz-white);
  --wz-form-slash-image: url("../images/slash-diagonale-orange-wazerty.svg");
  padding: clamp(1.1rem, 3vw, 2.5rem);
  border-top: clamp(0.35rem, 1vw, 0.55rem) solid var(--wz-form-accent);
  background: color-mix(in srgb, var(--wz-form-accent) 3%, var(--wz-bg-elevated));
}
.wz-brol-form[data-brol-theme="informatique"] {
  --wz-form-accent: #dd5234;
  --wz-form-accent-strong: var(--wz-red-deep);
  --wz-form-accent-text: #a83a27;
  --wz-form-on-accent: var(--wz-white);
  --wz-form-slash-image: url("../images/slash-diagonale-orange-wazerty.svg");
}
.wz-brol-form[data-brol-theme="site-web"] {
  --wz-form-accent: #4059a7;
  --wz-form-accent-strong: #2a3876;
  --wz-form-accent-text: #2a3876;
  --wz-form-on-accent: var(--wz-white);
  --wz-form-slash-image: url("../images/slash-diagonale-bleu-wazerty.svg");
}
.wz-brol-form[data-brol-theme="achat"] {
  --wz-form-accent: #f5c54f;
  --wz-form-accent-strong: #f0b34c;
  --wz-form-accent-text: #694600;
  --wz-form-on-accent: var(--wz-black);
  --wz-form-slash-image: url("../images/slash-diagonale-jaune-wazerty.svg");
}
.wz-brol-form[data-brol-theme="autre"] {
  --wz-form-accent: #676767;
  --wz-form-accent-strong: #3f3f3f;
  --wz-form-accent-text: #3f3f3f;
  --wz-form-on-accent: var(--wz-white);
  --wz-form-slash-image: url("../images/slash-diagonale-gris-wazerty.svg");
}
:root[data-theme="dark"] .wz-brol-form[data-brol-theme="informatique"] {
  --wz-form-accent: var(--wz-red);
  --wz-form-accent-strong: var(--wz-red-deep);
  --wz-form-accent-text: #ff8068;
}
:root[data-theme="dark"] .wz-brol-form[data-brol-theme="site-web"] {
  --wz-form-accent: #7892e6;
  --wz-form-accent-strong: #7892e6;
  --wz-form-accent-text: #a9bbff;
  --wz-form-on-accent: var(--wz-black);
}
:root[data-theme="dark"] .wz-brol-form[data-brol-theme="achat"] {
  --wz-form-accent: var(--wz-yellow);
  --wz-form-accent-strong: var(--wz-yellow);
  --wz-form-accent-text: var(--wz-yellow);
}
:root[data-theme="dark"] .wz-brol-form[data-brol-theme="autre"] {
  --wz-form-accent: var(--wz-gray-light);
  --wz-form-accent-strong: var(--wz-gray-light);
  --wz-form-accent-text: var(--wz-white);
  --wz-form-on-accent: var(--wz-black);
}
.wz-visually-hidden,
.wz-brol-form__status {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.wz-brol-form__summary {
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
  border: 2px solid var(--wz-red);
  background: color-mix(in srgb, var(--wz-red) 10%, var(--wz-bg-elevated));
}
.wz-brol-form__summary h3 { margin: 0 0 0.35rem; font-size: var(--wz-step-1); }
.wz-brol-form__summary p { margin: 0; }

.wz-brol-progress { margin-bottom: clamp(1.5rem, 4vw, 3rem); scroll-margin-top: clamp(1rem, 4vw, 3rem); }
.wz-brol-progress p { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 0.7rem; }
.wz-brol-progress p span { color: var(--wz-text-muted); }
.wz-brol-progress__track { height: 0.5rem; overflow: hidden; background: var(--wz-bg-soft); }
.wz-brol-progress__track span { display: block; width: 33.333%; height: 100%; background: var(--wz-form-accent); transition: width var(--wz-duration-normal) var(--wz-ease), background-color var(--wz-duration-normal); }

.wz-brol-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.wz-brol-form.is-enhanced .wz-brol-step[hidden] { display: none; }
.wz-brol-step legend:not(.wz-visually-hidden),
.wz-brol-step__title {
  max-width: 22ch;
  margin: 0 0 0.65rem;
  padding: 0;
  font-family: var(--wz-font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
}
.wz-brol-choice-confirmation {
  position: relative;
  width: 100%;
  max-width: none;
  padding: clamp(1.4rem, 4vw, 2.6rem);
  background: color-mix(in srgb, var(--wz-form-accent) 8%, var(--wz-bg));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wz-white) 55%, transparent);
}
.wz-brol-choice-confirmation__eyebrow {
  margin: 0 0 0.55rem;
  color: var(--wz-form-accent-text);
  font-family: var(--wz-font-display);
  font-weight: 700;
}
.wz-brol-choice-confirmation__message {
  max-width: 48rem;
  margin: 0 0 1.25rem;
  color: var(--wz-text-muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.65;
}
.wz-brol-step__intro {
	max-width: 44rem;
	margin: 0 0 1.5rem;
	color: var(--wz-text-muted);
	font-size: calc(var(--wz-step-1) - 1px);
	line-height: 1.65;
}
.wz-brol-step__actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.wz-brol-step__actions--end { justify-content: flex-end; }

.wz-brol-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.wz-brol-choice { position: relative; display: block; cursor: pointer; }
.wz-brol-choice input { position: absolute; width: 1px; height: 1px; opacity: 0.01; }
.wz-brol-choice > span {
  display: grid;
  align-items: center;
  gap: 0.22rem;
  min-height: 6.5rem;
  padding: 1.25rem 1.25rem 1.25rem 3.35rem;
  border: 2px solid var(--wz-form-border);
  background: var(--wz-bg);
  font-family: var(--wz-font-display);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  transition: border-color var(--wz-duration-fast), background var(--wz-duration-fast), transform var(--wz-duration-fast);
}
.wz-brol-choice > span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.55rem;
  width: 2.25rem;
  height: 5rem;
  background: url("../images/slash-diagonale-orange-wazerty.svg") center / 100% 100% no-repeat;
  transform: translateY(-50%);
}
.wz-brol-choice:nth-child(2) > span::before { background-image: url("../images/slash-diagonale-bleu-wazerty.svg"); }
.wz-brol-choice:nth-child(3) > span::before { background-image: url("../images/slash-diagonale-jaune-wazerty.svg"); }
.wz-brol-choice:nth-child(4) > span::before { background-image: url("../images/slash-diagonale-gris-wazerty.svg"); }
.wz-brol-choice__line {
  display: block;
  white-space: nowrap;
}
.wz-brol-choice input:checked + span { border-color: var(--wz-form-accent); background: color-mix(in srgb, var(--wz-form-accent) 12%, var(--wz-bg)); transform: translateY(-2px); }
.wz-brol-choice input:focus-visible + span { outline: 4px solid var(--wz-focus); outline-offset: 3px; }

.wz-brol-story-prompt {
  position: relative;
  display: grid;
  gap: 0.3rem;
  max-width: 48rem;
  margin: 0 0 1.35rem;
  padding: 1.2rem 1.15rem 1.2rem 4rem;
  background: color-mix(in srgb, var(--wz-form-accent) 15%, var(--wz-bg));
}
.wz-brol-story-prompt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.65rem;
  width: 2.7rem;
  height: 4.4rem;
  background: var(--wz-form-slash-image) center / 100% 100% no-repeat;
  transform: translateY(-50%);
}
.wz-brol-story-prompt strong { font-family: var(--wz-font-display); }
.wz-brol-story-field { max-width: 48rem; }
.wz-brol-story-field textarea { min-height: clamp(10rem, 24vh, 15rem); line-height: 1.55; }
.wz-brol-story-field textarea { caret-color: var(--wz-form-accent); }
.wz-brol-story-field textarea::placeholder { color: color-mix(in srgb, var(--wz-text-muted) 78%, transparent); }
.wz-brol-story-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--wz-text-muted); }
.wz-brol-story-meta small:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.wz-brol-attachment-note {
  position: relative;
  max-width: 48rem;
  margin: 1rem 0 0;
  min-height: 4.6rem;
  padding: 1rem 1rem 1rem 4rem;
  background: color-mix(in srgb, var(--wz-form-accent) 9%, var(--wz-bg));
  color: var(--wz-text-muted);
  line-height: 1.5;
}
.wz-brol-attachment-note::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.65rem;
  width: 2.7rem;
  height: 4rem;
  background: var(--wz-form-slash-image) center / 100% 100% no-repeat;
  transform: translateY(-50%);
}
.wz-brol-attachment-note strong { color: var(--wz-text); font-family: var(--wz-font-display); }

.wz-field { display: grid; gap: 0.45rem; }
.wz-field > span { font-weight: 700; }
.wz-field input,
.wz-field textarea {
  width: 100%;
  min-height: 3.35rem;
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--wz-form-border);
  border-radius: 0;
  background: var(--wz-bg);
  color: var(--wz-text);
  font: inherit;
}
.wz-field textarea { resize: vertical; }
.wz-field input:focus-visible,
.wz-field textarea:focus-visible,
.wz-file-drop:focus-within { outline: 4px solid var(--wz-focus); outline-offset: 3px; border-color: var(--wz-form-accent); }
.wz-field small { color: var(--wz-text-muted); }
.wz-profile-choice { margin: 0 0 2rem; }
.wz-profile-choice .wz-brol-step__intro { margin-bottom: 0.75rem; }
.wz-profile-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wz-profile-choice-grid .wz-brol-choice > span { min-height: 4.8rem; }
.wz-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }

.wz-file-picker { position: relative; max-width: 48rem; }
.wz-file-input { max-width: 100%; margin-bottom: 1rem; font: inherit; }
.wz-brol-form.is-enhanced .wz-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.wz-file-drop {
  display: grid;
  gap: 0.6rem;
  place-items: center;
  min-height: 13rem;
  padding: 1.5rem;
  border: 2px dashed var(--wz-form-accent);
  background: color-mix(in srgb, var(--wz-form-accent) 7%, var(--wz-bg));
  text-align: center;
}
.wz-file-drop[hidden],
.wz-file-selection[hidden] { display: none; }
.wz-file-drop__title { font-family: var(--wz-font-display); font-size: var(--wz-step-1); font-weight: 700; }
.wz-file-open { display: none; margin-top: 0.65rem; }
.wz-brol-form.is-enhanced .wz-file-open { display: inline-flex; }
.wz-file-selection {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid var(--wz-form-accent);
  background: color-mix(in srgb, var(--wz-form-accent) 7%, var(--wz-bg));
}
.wz-file-selection__summary { display: flex; justify-content: space-between; gap: 1rem; }
.wz-file-selection__summary strong { font-family: var(--wz-font-display); }
.wz-file-selection__summary span { color: var(--wz-text-muted); }
.wz-file-list { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.wz-file-item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--wz-form-border);
  background: var(--wz-bg);
}
.wz-file-selection__preview {
  display: grid;
  place-items: center;
  width: 7rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wz-form-accent-strong);
  color: var(--wz-form-on-accent);
  font-family: var(--wz-font-display);
  font-size: var(--wz-step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.wz-file-selection__preview img { width: 100%; height: 100%; object-fit: cover; }
.wz-file-selection__copy { display: grid; min-width: 0; gap: 0.2rem; }
.wz-file-selection__copy strong { overflow-wrap: anywhere; font-family: var(--wz-font-display); }
.wz-file-selection__copy span { color: var(--wz-text-muted); }
.wz-file-selection__actions { display: flex; justify-content: space-between; align-items: center; gap: 0.65rem; }
.wz-file-remove {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--wz-text);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.wz-file-remove:focus-visible { outline: 4px solid var(--wz-focus); outline-offset: 2px; }
.wz-file-feedback { margin: 0.8rem 0 0; color: var(--wz-text-muted); }
.wz-file-feedback--error { color: var(--wz-red-deep); font-weight: 700; }
:root[data-theme="dark"] .wz-file-feedback--error { color: #ff8068; }

.wz-consent { display: flex; gap: 0.8rem; align-items: flex-start; margin-top: 1.5rem; }
.wz-consent input { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; accent-color: var(--wz-form-accent); }
.wz-consent a { color: inherit; }
.wz-contact-reassurance {
  max-width: 48rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.15rem;
  background: color-mix(in srgb, var(--wz-form-accent) 8%, var(--wz-bg));
  color: var(--wz-text-muted);
}
.wz-contact-reassurance strong { color: var(--wz-text); }
.wz-field-error { margin: 0.65rem 0 0; color: var(--wz-red-deep); font-weight: 700; }
.wz-honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.wz-brol-form .wz-button--primary {
  background: var(--wz-form-accent-strong);
  color: var(--wz-form-on-accent);
  box-shadow: 0 0.45rem 1rem color-mix(in srgb, var(--wz-form-accent) 24%, transparent);
}
.wz-brol-form .wz-button--secondary {
  border-color: var(--wz-form-accent-text);
  background: var(--wz-form-accent-text);
  color: var(--wz-white);
}
:root[data-theme="dark"] .wz-brol-form .wz-button--secondary {
  border-color: var(--wz-form-accent-strong);
  background: var(--wz-form-accent-strong);
  color: var(--wz-form-on-accent);
}
.wz-brol-form button,
.wz-brol-form .wz-button { cursor: pointer; }
.wz-brol-form button:disabled,
.wz-brol-form .wz-button:disabled { cursor: not-allowed; }

.wz-brol-confirmation { position: relative; overflow: hidden; padding: clamp(2rem, 6vw, 5rem); scroll-margin-top: clamp(1rem, 4vw, 3rem); }
.wz-brol-confirmation h3 { margin: 0 0 1rem; font-size: clamp(2.1rem, 6vw, 4.8rem); }
.wz-brol-confirmation p { max-width: 42rem; }
.wz-brol-confirmation__point { display: block; width: clamp(2.6rem, 6vw, 4.8rem); aspect-ratio: 1; margin-bottom: 1.4rem; border-radius: 50%; background: var(--wz-red); box-shadow: inset -0.4rem -0.5rem 0 rgba(178,65,48,0.35); }
.wz-brol-confirmation__reference { display: inline-block; margin-top: 1.5rem; padding: 0.65rem 0.85rem; background: var(--wz-yellow); color: var(--wz-black); font-weight: 700; }
.wz-brol-confirmation__mail { margin-top: 1.25rem; padding-left: 1.7rem; font-weight: 700; position: relative; }
.wz-brol-confirmation__mail::before { content: '✓'; position: absolute; left: 0; color: var(--wz-yellow); }
.wz-brol-confirmation__mail--warning::before { content: '!'; color: var(--wz-red); }
.wz-brol-confirmation__mail-tip { margin-top: 0.6rem; padding: 0.75rem 0.9rem; background: color-mix(in srgb, var(--wz-yellow) 18%, var(--wz-bg)); color: var(--wz-text-muted); font-size: 0.95rem; }
.wz-brol-form__eyebrow { color: var(--wz-red-deep); font-family: var(--wz-font-display); font-weight: 700; }

@media (max-width: 42rem) {
  .wz-brol-choice-grid,
  .wz-profile-choice-grid,
  .wz-contact-grid { grid-template-columns: 1fr; }
  .wz-brol-choice > span { min-height: 5.2rem; }
  .wz-brol-progress p { display: grid; gap: 0.15rem; }
  .wz-brol-step__actions { flex-wrap: wrap; }
  .wz-brol-step__actions .wz-button { flex: 1 1 10rem; }
  .wz-brol-story-meta { align-items: flex-start; }
  .wz-file-selection__summary { display: grid; gap: 0.15rem; }
  .wz-file-item { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .wz-file-selection__preview { width: 5.5rem; }
  .wz-file-item > .wz-file-remove { grid-column: 1 / -1; justify-self: stretch; }
  .wz-file-selection__actions { flex-wrap: wrap; }
  .wz-file-selection__actions .wz-button,
  .wz-file-selection__actions .wz-file-remove { flex: 1 1 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wz-brol-progress__track span,
  .wz-brol-choice > span { transition: none; }
}