/* Styles réutilisables. Le préfixe pap- limite leur portée à la démo. */
.pap { font: 400 1rem/1.5 var(--pap-sans); color: var(--pap-text); background: var(--pap-canvas); }
.pap *, .pap *::before, .pap *::after { box-sizing: border-box; }
.pap button, .pap input, .pap select { font: inherit; }
.pap a { color: var(--pap-lagoon); }
.pap :focus-visible { outline: 3px solid var(--pap-focus); outline-offset: 3px; }
.pap h1, .pap h2, .pap h3, .pap p { margin-block-start: 0; }
.pap h1, .pap h2 { font-family: var(--pap-serif); font-weight: 400; line-height: 1.1; }
.pap h1 { font-size: clamp(2.6rem,5.4vw,4.75rem); letter-spacing: -.048em; }
.pap h2 { font-size: clamp(1.75rem,3.1vw,2.6rem); letter-spacing: -.028em; margin-bottom: .6rem; }
.pap h3 { font-size: 1.06rem; line-height: 1.3; margin-bottom: .55rem; }
.pap .pap-small { font-size: .875rem; }
.pap .pap-muted { color: var(--pap-muted); }
.pap .pap-overline { color: var(--pap-lagoon); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.pap .pap-button {
  display: inline-flex; min-height: var(--pap-control-min); align-items: center; justify-content: center;
  padding: .5rem .95rem; border-radius: var(--pap-radius-control); border: 1px solid transparent;
  font: 700 .9rem/1.2 var(--pap-sans); text-decoration: none; text-align: center; cursor: pointer;
}
.pap .pap-button-primary { background: var(--pap-lagoon); color: var(--pap-on-primary); }
.pap .pap-button-primary:hover { background: var(--pap-lagoon-hover); }
.pap .pap-button-secondary { background: var(--pap-surface); color: var(--pap-lagoon); border-color: var(--pap-input-border); }
.pap .pap-button-secondary:hover { background: var(--pap-water); }
.pap .pap-button:disabled { opacity: .6; cursor: default; }

.pap .pap-card { padding: var(--pap-gap-6); border: 1px solid var(--pap-border); border-radius: var(--pap-radius-card); background: var(--pap-surface); }
.pap .pap-field { display: grid; gap: .35rem; font-size: .9rem; font-weight: 700; }
.pap .pap-field input, .pap .pap-field select {
  display: block; width: 100%; min-height: var(--pap-control-min); padding: .55rem .7rem;
  border-radius: var(--pap-radius-control); border: 1px solid var(--pap-input-border); background: var(--pap-surface);
  color: var(--pap-text); font-size: 1rem; font-weight: 400;
}
.pap .pap-field input[aria-invalid="true"] { border-color: var(--pap-error-text); }
.pap .pap-field-hint { font-size: .83rem; font-weight: 400; color: var(--pap-muted); }
.pap .pap-error { color: var(--pap-error-text); }
.pap .pap-status {
  display: inline-flex; width: fit-content; align-items: center; padding: .19rem .6rem;
  border-radius: 999px; background: var(--pap-water); color: var(--pap-lagoon);
  font-size: .78rem; font-weight: 700; line-height: 1.45;
}
.pap .pap-status-success { background: var(--pap-success-bg); color: var(--pap-success-text); }
.pap .pap-status-warning { background: var(--pap-warning-bg); color: var(--pap-warning-text); }
.pap .pap-status-error { background: var(--pap-error-bg); color: var(--pap-error-text); }

.pap .pap-steps { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--pap-gap-2) var(--pap-gap-3); padding: 0; margin: 0; list-style: none; }
.pap .pap-steps li { display: flex; align-items: center; gap: .4rem; color: var(--pap-muted); font-size: .8rem; }
.pap .pap-step-index { display: grid; place-items: center; flex: none; width: 1.55rem; height: 1.55rem; border: 1px solid var(--pap-input-border); border-radius: 50%; font-weight: 700; }
.pap .pap-steps li[aria-current="step"] { color: var(--pap-lagoon); font-weight: 700; }
.pap .pap-steps li[aria-current="step"] .pap-step-index { color: var(--pap-on-primary); background: var(--pap-lagoon); border-color: var(--pap-lagoon); }

.pap .pap-notice { display: grid; gap: .35rem; padding: var(--pap-gap-4); border-inline-start: 3px solid var(--pap-lagoon); border-radius: var(--pap-radius-control); background: var(--pap-water); }
.pap .pap-notice p { margin: 0; }
.pap .pap-visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}