/* Onboarding (une seule fois) : « Comment vous appelez-vous ? », dans l'habillage de l'instantané. */

.onboard {
  position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: max(26px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: linear-gradient(180deg, #f6eadf, #e5cbbb);
  transition: opacity .35s ease, translate .45s var(--ease-out);
}
.onboard[hidden] { display: none; }
.onboard.is-leaving { opacity: 0; translate: 0 -5%; pointer-events: none; }
.onboard.is-entering { opacity: 0; translate: 0 4%; }
.onboard__brand { align-self: flex-start; }

.onboard__form { margin: auto 0; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-block: 14px; }
.onboard__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.onboard h2 { font-size: clamp(30px, 9.4vw, 38px); font-weight: 600; line-height: 1.04; letter-spacing: -.01em; color: var(--green); text-wrap: balance; }

/* Le polaroïd-badge : il prend le prénom au fil de la frappe */
.tag { align-self: flex-start; width: 104px; margin: 0 0 8px; padding: 6px 6px 0; background: var(--paper); rotate: -4deg; box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 10px 16px -8px rgba(58, 36, 32, .55); }
.tag__photo { display: block; aspect-ratio: 1; background: radial-gradient(circle at 40% 35%, #b4bca8, #8b9682); overflow: hidden; position: relative; }
.tag__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); translate: -100% 0; animation: sheen 3.2s ease-in-out .6s infinite; }
@keyframes sheen { 0%, 55% { translate: -100% 0; } 100% { translate: 100% 0; } }
.tag figcaption { height: 30px; line-height: 30px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: #4a3f39; }

.field { display: grid; gap: 6px; margin-top: 8px; }
.field__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field__input { width: 100%; height: 58px; padding: 0 18px; border: 0; border-radius: 18px; background: #fbf8f3; color: var(--ink); font: inherit; font-size: 20px; font-weight: 500; box-shadow: inset 0 0 0 2px rgba(61, 96, 68, .35); caret-color: var(--coral); }
.field__input::placeholder { color: #6d605a; opacity: 1; }
.field__input:focus { outline: 0; box-shadow: inset 0 0 0 3px var(--green); }
.field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 3px var(--coral-deep); }
.field__error { font-size: 14px; font-weight: 600; color: #8a3a28; }
.field__error[hidden] { display: none; }

/* Même bouton que le déclencheur : corail, ombre verte. Texte en grand + gras (AA grand texte). */
.btn--cta { width: 100%; min-height: 60px; margin-top: 6px; border-radius: 99px; background: radial-gradient(circle at 35% 25%, #d4765d, #ca6f57 50%, #b05843); color: #fff; font-size: 19px; font-weight: 700; box-shadow: 0 6px 0 -1px #2c4a33, 0 14px 20px rgba(58, 36, 32, .3); transition: translate .08s, box-shadow .08s; }
.btn--cta:active { translate: 0 5px; box-shadow: 0 1px 0 -1px #2c4a33, 0 5px 9px rgba(58, 36, 32, .3); }
.onboard .link-btn { align-self: center; }
.onboard .link-btn[hidden] { display: none; }
.onboard__info { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--ink); max-width: 38ch; }
.onboard__info--small { margin-top: 0; font-size: 13px; }

@media (max-height: 700px) {
  .onboard__form { gap: 6px; }
  .tag { width: 84px; margin-bottom: 2px; }
  .field__input { height: 52px; }
  .btn--cta { min-height: 56px; }
  .onboard__info { font-size: 13px; }
  .onboard__info--small { font-size: 12.5px; }
}
@media (orientation: landscape) and (max-height: 520px) { /* téléphone couché : tout tient sans défiler */
  .tag, .onboard__eyebrow { display: none; }
  .onboard { padding-top: max(18px, env(safe-area-inset-top)); }
  .onboard__form { max-width: 560px; gap: 4px; padding-block: 4px; }
  .onboard h2 { font-size: 26px; }
  .field { margin-top: 2px; }
  .field__input { height: 48px; }
  .btn--cta { min-height: 52px; margin-top: 2px; }
  .onboard__info { max-width: 60ch; font-size: 13px; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .onboard { transition: opacity .15s linear; }
  .onboard.is-leaving, .onboard.is-entering { translate: 0 0; }
  .tag__photo::after { animation: none; }
}