/* Inscription en 4 étapes — Padelaris Inscription.dc.html + InscriptionFlow.dc.html */

.zp-s-register { --zp-reg-pending: #FFD66B; }

/* Le reset `.zp-app button` (0,1,1) écrase les classes de composants : on les réaffirme ici. */
.zp-s-register button.zp-btn { font-family: var(--zp-text); font-weight: 800; line-height: 1.2; }
.zp-s-register button.zp-btn--primary { background: var(--zp-accent); color: var(--zp-primary); }
.zp-s-register button.zp-btn--primary:hover { background: var(--zp-accent-hover); }
.zp-s-register button.zp-btn--ghost { background: transparent; border: 2px solid var(--zp-primary); font-weight: 700; }
.zp-s-register button.zp-chip { font-size: 13px; font-weight: 700; background: #fff; color: var(--zp-primary); }
.zp-s-register button.zp-choice { background: #fff; }
.zp-s-register button.zp-choice[aria-checked="true"] { background: var(--zp-select); }
.zp-s-register h1, .zp-s-register h2 { color: inherit; }

.zp-reg { display: grid; grid-template-columns: 380px minmax(0, 1fr); min-height: 100vh; background: var(--zp-bg); line-height: normal; }

/* ---------- Panneau navy ---------- */
.zp-reg__side { position: relative; overflow: hidden; background: var(--zp-primary); color: #fff; padding: 40px; display: flex; flex-direction: column; gap: 32px; }
.zp-reg__side > *:not(.zp-stripes) { position: relative; }
.zp-stripes--reg { --st-r: 40px; --st-w: 44px; --st-r2: 12px; --st-w2: 10px; --st-h: 1200px; }
.zp-reg__brand .zp-lockup { gap: 10px; }
.zp-reg__intro { display: flex; flex-direction: column; gap: 12px; }
.zp-reg__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--zp-accent); text-transform: uppercase; }
.zp-reg__title { font-family: var(--zp-display); font-style: italic; font-weight: 800; font-size: 60px; line-height: .88; text-transform: uppercase; }
.zp-reg__lead { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .82); max-width: 300px; }
.zp-reg__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.zp-app .zp-reg__st { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-align: left; color: #fff; cursor: default; }
.zp-reg__st.is-cur { background: rgba(255, 255, 255, .08); }
.zp-reg__st.is-past, .zp-reg__st.is-cur { cursor: pointer; }
.zp-reg__st.is-past:hover { background: rgba(255, 255, 255, .05); }
.zp-reg__mk { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--zp-display); font-weight: 800; font-size: 19px; background: rgba(255, 255, 255, .12); color: #fff; clip-path: var(--zp-cut-rank); }
.zp-reg__st.is-cur .zp-reg__mk { background: var(--zp-accent); color: var(--zp-primary); }
.zp-reg__st.is-past .zp-reg__mk { background: var(--zp-win); }
.zp-reg__stt { display: flex; flex-direction: column; gap: 1px; }
.zp-reg__stt strong { font-weight: 800; font-size: 15px; color: rgba(255, 255, 255, .7); }
.zp-reg__st.is-cur strong, .zp-reg__st.is-past strong { color: #fff; }
.zp-reg__stt small { font-size: 12px; color: rgba(255, 255, 255, .7); }

/* ---------- Colonne principale ---------- */
.zp-reg__main { display: flex; flex-direction: column; min-width: 0; }
.zp-reg__prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 14px 48px; background: #fff; border-bottom: 1px solid var(--zp-line); }
.zp-reg__pg { display: flex; flex-direction: column; gap: 6px; }
.zp-reg__bar { height: 5px; background: var(--zp-line); }
.zp-reg__pl { font-size: 12px; font-weight: 700; color: var(--zp-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-reg__pg.is-cur .zp-reg__bar { background: var(--zp-primary); }
.zp-reg__pg.is-cur .zp-reg__pl { color: var(--zp-primary); }
.zp-reg__pg.is-past .zp-reg__bar { background: var(--zp-win); }
.zp-reg.is-done .zp-reg__prog, .zp-reg.is-done .zp-reg__foot, .zp-reg.is-done .zp-reg__head { display: none; }

.zp-reg__body { flex: 1; padding: 36px 48px; display: flex; flex-direction: column; gap: 22px; max-width: 760px; width: 100%; }
.zp-reg[data-step="3"]:not(.is-done) .zp-reg__body { max-width: 1000px; }
.zp-reg__head { display: flex; flex-direction: column; gap: 6px; }
.zp-reg__eb { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--zp-gray); text-transform: uppercase; }
.zp-reg__eb b { font-weight: 800; }
.zp-reg__h2 { color: var(--zp-primary) !important; font-family: var(--zp-display); font-weight: 800; font-size: 44px; line-height: 1; text-transform: uppercase; outline: none; }
.zp-reg__step { display: flex; flex-direction: column; gap: 22px; }
.zp-reg__step[hidden], .zp-reg__done[hidden], .zp-reg [hidden] { display: none !important; }

/* Champs */
.zp-reg .zp-field > label, .zp-reg .zp-field__l { }
.zp-s-register .zp-input, .zp-s-register .zp-select { font: 500 15px/normal var(--zp-text); color: var(--zp-primary); }
.zp-reg__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zp-reg__two--18 { gap: 18px; }
.zp-reg__hint { font-size: 12px; font-weight: 600; color: var(--zp-gray); }
.zp-reg .zp-field.is-error .zp-input { border: 2px solid var(--zp-loss-text); }
.zp-reg .zp-field.is-error .zp-reg__hint { color: var(--zp-loss-text); }
.zp-reg .zp-field:has(.zp-reg__chips), .zp-reg .zp-field:has(.zp-reg__seg), .zp-reg .zp-field:has(.zp-reg__sides), .zp-reg .zp-field:has(.zp-reg__feels), .zp-reg .zp-field:has(.zp-reg__feds), .zp-reg .zp-field:has(.zp-reg__levels) { gap: 8px; }

/* Photo */
.zp-reg__photo { display: flex; align-items: center; gap: 16px; padding: 14px; background: #fff; border: 1px solid var(--zp-line); }
.zp-reg__photo-av { display: inline-flex; flex: none; }
.zp-reg__photo-t { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zp-reg__photo-t strong { font-weight: 800; font-size: 14px; }
.zp-reg__photo-t span { font-size: 12.5px; color: var(--zp-gray); line-height: 1.4; }
.zp-app .zp-reg__photo-btn { font-size: 13px; font-weight: 800; color: var(--zp-secondary); white-space: nowrap; padding: 8px 0 8px 8px; }
.zp-reg__photo-btn:hover { color: var(--zp-primary); }
.zp-reg__photo.is-busy .zp-reg__photo-btn { opacity: .5; pointer-events: none; }

/* Chips de site */
.zp-reg__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zp-reg__chips .zp-chip { padding: 10px 14px; line-height: normal; }
.zp-reg__chips .zp-chip[aria-checked="true"] { background: var(--zp-primary); color: #fff; box-shadow: inset 0 0 0 1.5px var(--zp-primary); }

/* Segmented */
.zp-reg__seg { box-shadow: none; border: 1.5px solid var(--zp-primary); }
.zp-app .zp-reg__seg > button { padding: 13px; font-size: 14px; font-weight: 800; color: var(--zp-primary); background: #fff; }
.zp-app .zp-reg__seg > button[aria-checked="true"] { background: var(--zp-primary); color: #fff; }

/* Cartes de choix */
.zp-reg__sides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zp-reg .zp-reg__sides .zp-choice { padding: 14px 12px; }
.zp-reg__sides .zp-choice__t { }
.zp-reg__sides .zp-choice__s { font-size: 11.5px; line-height: 1.35; }
.zp-reg__feels, .zp-reg__feds { display: flex; flex-direction: column; gap: 6px; }
.zp-reg .zp-reg__feel { flex-direction: row; align-items: center; gap: 14px; padding: 11px 14px; }
.zp-reg__feel .zp-feel { flex: none; }
.zp-reg__feel-t { display: flex; flex-direction: column; gap: 1px; }
.zp-reg__feel-t strong { font-weight: 800; font-size: 14px; }
.zp-reg__feel-t span { font-size: 12px; color: var(--zp-gray); }
.zp-reg .zp-reg__fed { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; }
.zp-reg__fed-t { display: flex; flex-direction: column; gap: 2px; }
.zp-reg__fed-t strong { font-weight: 800; font-size: 14.5px; }
.zp-reg__fed-t span { font-size: 12px; color: var(--zp-gray); }
.zp-reg__radio { width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--zp-primary); }
.zp-reg__fed[aria-checked="true"] .zp-reg__radio { box-shadow: inset 0 0 0 6px var(--zp-primary); }
.zp-reg .zp-choice:hover:not([aria-checked="true"]) { box-shadow: inset 0 0 0 1px var(--zp-primary); }

/* Niveau P */
.zp-reg__aff { display: flex; flex-direction: column; gap: 22px; }
.zp-reg__levels { display: flex; flex-wrap: wrap; gap: 8px; }
.zp-reg .zp-reg__lv { padding: 6px; display: inline-flex; }
.zp-reg__lv[aria-checked="true"] { background: var(--zp-select); box-shadow: inset 0 0 0 2px var(--zp-primary); }
.zp-reg__lv:hover:not([aria-checked="true"]) { box-shadow: inset 0 0 0 1px var(--zp-field); }

/* Résultat annuaire */
.zp-reg__fedres:empty { display: none; }
.zp-reg__found { display: flex; gap: 12px; align-items: center; padding: 14px; background: var(--zp-ok-bg); box-shadow: inset 3px 0 0 var(--zp-win); }
.zp-reg__found > b { font-size: 18px; font-weight: 800; color: var(--zp-win-text); }
.zp-reg__found > span { flex: 1; display: flex; flex-direction: column; gap: 3px; color: var(--zp-primary); }
.zp-reg__found strong { font-size: 13.5px; font-weight: 800; }
.zp-reg__found em { font-style: normal; font-size: 12.5px; }
.zp-reg__auto { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--zp-warn-bg); }
.zp-reg__auto > b { font-size: 11.5px; font-weight: 800; color: var(--zp-warn-fg); padding: 3px 7px; border: 1.5px solid var(--zp-warn-fg); white-space: nowrap; }
.zp-reg__auto > span { font-size: 13px; line-height: 1.45; color: var(--zp-warn-text-dark); }
.zp-reg__nc { display: flex; gap: 12px; align-items: center; padding: 14px; background: #fff; border: 1px solid var(--zp-line); }
.zp-reg__nc > span:last-child { font-size: 13px; line-height: 1.45; }

/* Récapitulatif */
.zp-reg__recap { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.zp-reg__card { position: relative; overflow: hidden; background: var(--zp-primary); color: #fff; padding: 22px; display: flex; flex-direction: column; gap: 14px; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.zp-reg__card > *:not(.zp-reg__card-st) { position: relative; }
.zp-reg__card-st { position: absolute; top: -40px; right: 40px; width: 26px; height: 500px; background: var(--zp-brand); transform: rotate(24deg); }
.zp-reg__card-who { display: flex; align-items: center; gap: 14px; }
.zp-reg__card-av { display: inline-flex; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--zp-accent); }
.zp-reg__card-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zp-reg__card-n { font-family: var(--zp-display); font-style: italic; font-weight: 800; font-size: 28px; line-height: .95; text-transform: uppercase; overflow-wrap: anywhere; }
.zp-reg__card-m { font-size: 12px; color: rgba(255, 255, 255, .8); }
.zp-reg__card-tab { display: grid; grid-template-columns: 1fr 1fr; background: color-mix(in srgb, var(--zp-primary) 75%, transparent); border: 1px solid rgba(255, 255, 255, .15); }
.zp-reg__card-c { padding: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.zp-reg__card-c + .zp-reg__card-c { gap: 4px; border-left: 1px solid rgba(255, 255, 255, .15); }
.zp-reg__card-l { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: rgba(255, 255, 255, .75); text-transform: uppercase; }
.zp-reg__card-pend { font-size: 11px; font-weight: 700; color: var(--zp-reg-pending); }
.zp-reg__card-pend:empty { display: none; }
.zp-reg__card-elo { font-family: var(--zp-display); font-weight: 800; font-size: 44px; line-height: .9; color: var(--zp-accent); }
.zp-reg__card-s { font-size: 11px; color: rgba(255, 255, 255, .75); }
.zp-reg__card-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.zp-reg__card-tags .zp-tag-prov { font-size: 11.5px; color: #fff; border-color: rgba(255, 255, 255, .7); padding: 4px 9px; line-height: normal; }
.zp-reg__card-tags .zp-tag-beg { font-size: 11.5px; padding: 5px 9px; line-height: normal; }
.zp-reg__table { background: #fff; border: 1px solid var(--zp-line); }
.zp-reg__table dl { margin: 0; }
.zp-reg__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--zp-line-soft); }
.zp-reg__row dt { width: 110px; flex: none; font-size: 12px; font-weight: 700; color: var(--zp-gray); }
.zp-reg__row dd { margin: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.zp-reg__row dd > span { font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.zp-app .zp-reg__row dd > button { font-size: 12px; font-weight: 800; color: var(--zp-secondary); }
.zp-reg__row dd > button:hover { text-decoration: underline; }
.zp-reg__note { padding: 12px 14px; font-size: 12.5px; color: var(--zp-gray); }
.zp-reg__charte { align-items: center; gap: 12px; font-size: 13.5px; position: relative; }

/* Pied */
.zp-reg__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 48px; background: #fff; border-top: 1px solid var(--zp-line); }
.zp-reg .zp-reg__back { font-size: 15px; padding: 13px 18px; }
.zp-reg .zp-reg__back.is-off { opacity: .35; cursor: default; }
.zp-reg .zp-reg__next { font-size: 15px; padding: 15px 28px; }
.zp-reg .zp-reg__next[aria-disabled="true"], .zp-reg .zp-reg__next[aria-disabled="true"]:hover { background: var(--zp-disabled-bg); color: var(--zp-disabled-fg) !important; box-shadow: none; cursor: not-allowed; }
.zp-reg .zp-reg__next.is-busy { opacity: .7; pointer-events: none; }

/* Écran final */
.zp-reg__done { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 40px 0; margin: auto 0; }
.zp-reg__done-ic { width: 84px; height: 84px; border-radius: 50%; background: var(--zp-accent); box-shadow: 0 0 0 10px var(--zp-select); display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 800; }
.zp-reg__done-t { color: var(--zp-primary) !important; font-family: var(--zp-display); font-style: italic; font-weight: 800; font-size: 44px; line-height: .92; text-transform: uppercase; outline: none; }
.zp-reg__done-p { font-size: 14.5px; line-height: 1.55; color: var(--zp-gray); max-width: 360px; }
.zp-reg__done-p strong { color: var(--zp-primary); }
.zp-reg__done-w { font-size: 13px; line-height: 1.45; color: var(--zp-warn-text-dark); background: var(--zp-warn-bg); padding: 10px 14px; max-width: 360px; }
.zp-reg__done-cta { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
.zp-reg__done-cta .zp-btn { width: 100%; font-size: 15px; }
.zp-reg__done-cta .zp-btn--primary { padding: 15px; }
.zp-reg__done-cta .zp-btn--ghost { padding: 13px; }
.zp-reg.is-done .zp-reg__body { max-width: none; align-items: center; }
.zp-reg.is-done .zp-reg__main { justify-content: center; }

/* ---------- Mobile ---------- */
.zp-reg__mh { background: var(--zp-primary); color: #fff; padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.zp-reg__mrow { display: flex; justify-content: space-between; align-items: center; }
.zp-app .zp-reg__mback { font-size: 13px; font-weight: 700; color: #fff; min-height: 32px; }
.zp-reg__mstep { font-size: 12px; font-weight: 800; color: var(--zp-accent); text-transform: uppercase; }
.zp-reg__mt { font-family: var(--zp-display); font-style: italic; font-weight: 800; font-size: 36px; line-height: .92; text-transform: uppercase; color: #fff; }

@media (max-width: 1100px) {
	.zp-reg { grid-template-columns: 320px minmax(0, 1fr); }
	.zp-reg__body, .zp-reg__foot, .zp-reg__prog { padding-left: 32px; padding-right: 32px; }
	.zp-reg__recap { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.zp-reg { grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
	.zp-reg__prog { padding: 10px 16px; }
	.zp-reg__pl { font-size: 10px; }
	.zp-reg__body { padding: 18px 16px 22px; max-width: none; }
	.zp-reg[data-step="3"]:not(.is-done) .zp-reg__body { max-width: none; }
	.zp-reg__two { grid-template-columns: 1fr; }
	.zp-reg__two--18 { gap: 18px; }
	.zp-reg__recap { grid-template-columns: 1fr; }
	.zp-reg__foot { position: sticky; bottom: 0; z-index: 20; padding: 12px 16px 26px; padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px) * .5); }
	.zp-reg .zp-reg__next { flex: 1; }
	.zp-reg__sides .zp-choice__t { font-size: 19px; }
	.zp-reg__done-t { font-size: 40px; }
	.zp-reg.is-done .zp-reg__mh .zp-reg__mstep { visibility: hidden; }
}