/* ==========================================================================
   Z'Padel — tokens & composants
   Les 4 couleurs de marque et la police des titres sont injectées par l'admin
   (Apparence & marque) dans :root ; tout le reste en découle.
   ========================================================================== */

:root {
	--zp-primary: #0B2A4A;
	--zp-secondary: #1E6FD9;
	--zp-accent: #D7F205;
	--zp-brand: #DA291C;
	--zp-brand-light: #FF4436;
	--zp-accent-hover: #C3D93A;
	--zp-select: #F6FBD9;
	--zp-me: #EEF5FD;
	--zp-hero-photo-bg: #123A63;
	--zp-hero-photo-bg2: #0F3358;
	--zp-card-dark: #0F3358;
	--zp-display: 'Barlow Condensed', sans-serif;
	--zp-text: Manrope, sans-serif;

	--zp-gray: #5B6770;
	--zp-win: #1FA463;
	--zp-win-text: #178A52;
	--zp-win-on-dark: #7BE0A6;
	--zp-loss: #F0533F;
	--zp-loss-text: #D9402F;
	--zp-loss-on-dark: #FF8A7A;
	--zp-bg: #F3F5F8;
	--zp-surface: #FFFFFF;
	--zp-line: #DDE3EA;
	--zp-line-soft: #EDF0F4;
	--zp-field: #C9D2DC;
	--zp-thead: #F7F9FB;
	--zp-score-lost: #7C8794;
	--zp-disabled-bg: #EDF0F4;
	--zp-disabled-fg: #A7B1BB;
	--zp-warn-bg: #FFF4D6;
	--zp-warn-fg: #A86A00;
	--zp-warn-text-dark: #5C3D00;
	--zp-danger-bg: #FDF3F2;
	--zp-danger-bd: #F0C8C4;
	--zp-danger-fg: #A3221A;
	--zp-ok-bg: #E3F5EB;
	--zp-balance-ok: #BFE8D0;
	--zp-loss-row: #FAFBFC;
	--zp-star: #E0A800;

	--zp-shadow-card: 0 10px 24px color-mix(in srgb, var(--zp-primary) 8%, transparent);
	--zp-shadow-card-lg: 0 10px 30px color-mix(in srgb, var(--zp-primary) 10%, transparent);
	--zp-shadow-overlay: 0 12px 30px color-mix(in srgb, var(--zp-primary) 30%, transparent);
	--zp-shadow-pop: 0 14px 30px color-mix(in srgb, var(--zp-primary) 18%, transparent);

	--zp-cut-btn: polygon(0 0, 100% 0, 100% 65%, calc(100% - var(--cut, 12px)) 100%, 0 100%);
	--zp-cut-badge: polygon(0 0, 100% 0, 100% 62%, calc(100% - 7px) 100%, 0 100%);
	--zp-cut-rank: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
	--zp-cut-card: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
	--zp-cut-photo: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);

	--zp-gutter: 64px;
	--zp-max: 1280px;
}

/* ---------- Base ---------- */

.zp-app {
	font-family: var(--zp-text);
	color: var(--zp-primary);
	background: var(--zp-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.5;
	min-height: 100vh;
	overflow-x: clip;
	font-size: 15px;
}
.zp-app *, .zp-app *::before, .zp-app *::after { box-sizing: border-box; }
.zp-app h1, .zp-app h2, .zp-app h3, .zp-app h4, .zp-app p { margin: 0; }
.zp-app :where(a) { color: var(--zp-secondary); text-decoration: none; }
.zp-app :where(a):hover { color: var(--zp-primary); text-decoration: underline; }
.zp-app :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.zp-app :where(img) { max-width: 100%; display: block; }
.zp-app :where(input, select, textarea) { font: inherit; color: inherit; }
.zp-app :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--zp-secondary) !important; }
.zp-app .zp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zp-num, .zp-display { font-family: var(--zp-display); }
.zp-tabular { font-variant-numeric: tabular-nums; }

.zp-wrap { width: 100%; max-width: var(--zp-max); margin: 0 auto; padding-left: var(--zp-gutter); padding-right: var(--zp-gutter); }

@media (max-width: 1100px) { :root { --zp-gutter: 32px; } }
@media (min-width: 761px) { .zp-only-m { display: none !important; } }
@media (max-width: 760px) {
	:root { --zp-gutter: 16px; }
	.zp-only-d { display: none !important; }
	.zp-app { font-size: 14px; padding-bottom: 96px; }
	.zp-app.zp-no-bn { padding-bottom: 0; }
}

/* ---------- Logo & mot-symbole ---------- */

.zp-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; }
.zp-logo { width: var(--lg, 30px); height: var(--lg, 30px); flex: none; background: var(--zp-brand); clip-path: var(--zp-cut-rank); display: inline-flex; align-items: center; justify-content: center; }
.zp-logo > span { width: 40%; height: 40%; border-radius: 50%; background: var(--zp-accent); }
.zp-logo-img { object-fit: contain; flex: none; }
.zp-wordmark { font-family: var(--zp-display); font-style: italic; font-weight: 800; font-size: var(--wm, 28px); line-height: 1; letter-spacing: .01em; color: #fff; text-transform: uppercase; white-space: nowrap; }
.zp-wordmark > span { color: var(--zp-brand-light); }

/* ---------- Motifs ---------- */

.zp-stripes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.zp-stripes i, .zp-stripes b { position: absolute; top: -60px; height: var(--st-h, 900px); transform: rotate(24deg); }
.zp-stripes i { right: var(--st-r, 150px); width: var(--st-w, 56px); background: var(--zp-brand); }
.zp-stripes b { right: var(--st-r2, 110px); width: var(--st-w2, 12px); background: var(--zp-accent); }
.zp-stripes--hero-sm { --st-h: 600px; }
.zp-stripes--m { --st-r: 24px; --st-w: 34px; --st-r2: 2px; --st-w2: 8px; --st-h: 620px; }
.zp-stripes--m i, .zp-stripes--m b { top: -40px; }

.zp-court { position: absolute; border: 2px solid rgba(255, 255, 255, .07); pointer-events: none; }
.zp-court i { position: absolute; display: block; }
.zp-court .n { left: 50%; top: -20px; bottom: -20px; width: 3px; background: rgba(255, 255, 255, .1); }
.zp-court .l { left: 15%; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .07); }
.zp-court .r { right: 15%; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .07); }
.zp-court .m { left: 15%; right: 15%; top: 50%; height: 2px; background: rgba(255, 255, 255, .07); }
.zp-court--simple .l, .zp-court--simple .r, .zp-court--simple .m { display: none; }
.zp-court--simple .n { top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .08); }

.zp-striped { background: repeating-linear-gradient(135deg, var(--zp-hero-photo-bg) 0 12px, var(--zp-hero-photo-bg2) 12px 24px); }

/* ---------- En-tête & héro ---------- */

.zp-hero { position: relative; overflow: hidden; background: var(--zp-primary); color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-h, 40px)), 0 100%); padding-bottom: var(--hero-pb, 84px); }
.zp-hero > .zp-wrap { position: relative; }
.zp-head { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.zp-head__in { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; gap: 24px; }
.zp-nav { display: flex; gap: 30px; font-size: 14px; font-weight: 600; }
.zp-app .zp-nav a { color: rgba(255, 255, 255, .82); text-decoration: none; padding-bottom: 4px; }
.zp-app .zp-nav a:hover { color: #fff; }
.zp-app .zp-nav a.is-active { color: #fff; box-shadow: 0 2px 0 var(--zp-accent); }
.zp-head__r { display: flex; align-items: center; gap: 14px; }
.zp-app .zp-head__login { font-size: 14px; font-weight: 600; color: #fff; }
.zp-head__av { display: inline-flex; border-radius: 50%; }
.zp-head__manage { background: var(--zp-accent); color: var(--zp-primary) !important; font-weight: 800; font-size: 13px; padding: 10px 14px; text-decoration: none !important; }
.zp-head__bell { position: relative; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; color: #fff !important; }
.zp-head__bell b { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--zp-brand); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--zp-primary); }

.zp-mhead { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }
.zp-mhead .zp-lockup { gap: 8px; }
.zp-app .zp-mhead__act { font-size: 13px; font-weight: 700; color: #fff; }
.zp-mtitle { font-family: var(--zp-display); font-style: italic; font-weight: 800; font-size: 48px; line-height: .9; text-transform: uppercase; color: #fff; }

.zp-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--zp-accent); text-transform: uppercase; }
.zp-eyebrow--sq::before { content: ""; width: 10px; height: 10px; background: var(--zp-brand); flex: none; }
.zp-h1 { font-family: var(--zp-display); font-style: italic; font-weight: 800; font-size: 84px; line-height: .88; color: #fff; text-transform: uppercase; }
.zp-h2 { font-family: var(--zp-display); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--zp-primary); }
.zp-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--zp-gray); }
.zp-muted { color: var(--zp-gray); }
.zp-link-arrow { font-size: 13px; font-weight: 700; }
.zp-link-arrow::after { content: " →"; }

@media (max-width: 760px) {
	.zp-hero { --cut-h: 30px; }
	.zp-h1 { font-size: 48px; line-height: .9; }
	.zp-h2 { font-size: 26px; }
}

/* ---------- Boutons ---------- */

.zp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--zp-text); font-weight: 800; text-decoration: none !important; cursor: pointer; border: 0; line-height: 1.2; white-space: nowrap; transition: background-color .15s, box-shadow .15s; }
.zp-btn--lg { font-size: 16px; padding: 17px 30px; --cut: 14px; }
.zp-btn--md { font-size: 15px; padding: 14px 26px; --cut: 12px; }
.zp-btn--sm { font-size: 13px; padding: 10px 18px; --cut: 10px; }
.zp-btn--xs { font-size: 12px; padding: 7px 12px; --cut: 8px; }
.zp-btn--block { display: flex; width: 100%; }
.zp-btn--primary { background: var(--zp-accent); color: var(--zp-primary) !important; clip-path: var(--zp-cut-btn); }
.zp-btn--primary:hover { background: var(--zp-accent-hover); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--zp-primary) 25%, transparent); }
.zp-btn--secondary { background: var(--zp-primary); color: #fff !important; clip-path: var(--zp-cut-btn); }
.zp-btn--secondary:hover { background: color-mix(in srgb, var(--zp-primary) 88%, #fff); }
.zp-btn--ghost { background: transparent; color: var(--zp-primary) !important; border: 2px solid var(--zp-primary); font-weight: 700; }
.zp-btn--ghost.zp-btn--lg { padding: 15px 26px; }
.zp-btn--ghost.zp-btn--md { padding: 12px 24px; }
.zp-btn--ghost.zp-btn--sm { padding: 8px 16px; }
.zp-btn--ghost.zp-btn--xs { padding: 5px 10px; }
.zp-btn--ghost-dark { background: transparent; color: #fff !important; border: 2px solid rgba(255, 255, 255, .85); font-weight: 700; }
.zp-btn--ghost-dark.zp-btn--lg { padding: 15px 26px; }
.zp-btn--ghost-dark.zp-btn--md { padding: 12px 24px; }
.zp-btn--danger { background: var(--zp-brand); color: #fff !important; }
.zp-btn--outline { background: #fff; color: var(--zp-primary) !important; box-shadow: inset 0 0 0 1.5px var(--zp-field); font-weight: 700; }
.zp-btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--zp-primary); }
.zp-btn--link { color: var(--zp-secondary) !important; font-weight: 700; padding: 0; background: none; }
.zp-btn--link::after { content: " →"; }
.zp-btn[disabled], .zp-btn.is-disabled { background: var(--zp-disabled-bg) !important; color: var(--zp-disabled-fg) !important; box-shadow: none !important; cursor: not-allowed; border-color: transparent; }

/* ---------- Badges, tags, rangs ---------- */

.zp-badge { display: inline-flex; align-items: center; font-family: var(--zp-display); font-weight: 700; letter-spacing: .04em; line-height: 1; clip-path: var(--zp-cut-badge); white-space: nowrap; flex: none; }
.zp-badge--sm { height: 22px; font-size: 14px; padding: 0 9px 0 7px; }
.zp-badge--lg { height: 30px; font-size: 18px; padding: 0 13px 0 10px; }
.zp-lv-nc { background: #EEF1F4; color: #5B6770; }
.zp-lv-p50 { background: #E3EAF2; color: #0B2A4A; }
.zp-lv-p100 { background: #CFE0F7; color: #0B2A4A; }
.zp-lv-p200 { background: #1E6FD9; color: #fff; }
.zp-lv-p300 { background: #0B2A4A; color: #fff; }
.zp-lv-p500 { background: #DA291C; color: #fff; }
.zp-lv-p700 { background: #8E1B12; color: #fff; }
.zp-lv-p1000 { background: #111418; color: #D7F205; }
.zp-tag-pending { display: inline-flex; align-items: center; background: var(--zp-warn-bg); color: var(--zp-warn-fg); font-size: 12px; font-weight: 700; padding: 4px 8px; white-space: nowrap; }
.zp-tag-prov { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--zp-gray); border: 1.5px dashed var(--zp-gray); padding: 4px 10px; white-space: nowrap; line-height: 1.2; }
.zp-tag-beg { display: inline-flex; align-items: center; background: var(--zp-accent); color: var(--zp-primary); font-size: 12px; font-weight: 800; padding: 4px 8px; white-space: nowrap; line-height: 1.2; }
.zp-tag-q { display: inline-flex; background: var(--zp-accent); color: var(--zp-primary); font-size: 10px; font-weight: 800; padding: 2px 5px; letter-spacing: .04em; }
.zp-div { display: inline-flex; transform: skewX(-14deg); font-family: var(--zp-display); font-weight: 800; font-style: italic; font-size: 15px; padding: 4px 12px; color: #fff; text-transform: uppercase; line-height: 1.1; }
.zp-div--1 { background: var(--zp-brand); }
.zp-div--2 { background: var(--zp-primary); }
.zp-div--3 { background: var(--zp-secondary); }
.zp-pool-chip { display: inline-flex; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 7px; line-height: 1.2; }
.zp-pool-chip--1 { background: var(--zp-brand); }
.zp-pool-chip--2 { background: var(--zp-secondary); }

.zp-rank { width: var(--rk, 36px); height: var(--rk, 36px); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--zp-primary); color: #fff; font-family: var(--zp-display); font-weight: 800; font-size: calc(var(--rk, 36px) * .61); clip-path: var(--zp-cut-rank); line-height: 1; }
.zp-rank--1 { background: var(--zp-accent); color: var(--zp-primary); }

.zp-evol { font-family: var(--zp-display); font-weight: 700; font-size: 16px; white-space: nowrap; }
.zp-evol--up { color: var(--zp-win-text); }
.zp-evol--down { color: var(--zp-loss-text); }
.zp-evol--eq { color: var(--zp-gray); }

.zp-form { display: inline-flex; gap: 3px; }
.zp-form__i { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 800; }
.zp-form__i--v { background: var(--zp-win); }
.zp-form__i--d { background: var(--zp-loss); }
.zp-form__i--n { background: var(--zp-gray); }
.zp-form--dots { gap: 3px; }
.zp-form--dots .zp-form__i { width: 7px; height: 7px; }

.zp-delta { font-family: var(--zp-display); font-weight: 700; }
.zp-delta--up { color: var(--zp-win-text); }
.zp-delta--down { color: var(--zp-loss-text); }
.zp-dark .zp-delta--up { color: var(--zp-win-on-dark); }
.zp-dark .zp-delta--down { color: var(--zp-loss-on-dark); }

/* ---------- Avatars ---------- */

.zp-av { width: var(--av, 38px); height: var(--av, 38px); flex: none; display: inline-block; border-radius: 50%; overflow: hidden; position: relative; vertical-align: middle; }
.zp-av--h { background: var(--zp-av-h-bg, #D9E7FA); }
.zp-av--d { background: var(--zp-av-d-bg, #FBE1DE); }
.zp-av--h .bd { fill: var(--zp-secondary); }
.zp-av--d .bd { fill: var(--zp-brand); }
.zp-av .hr { fill: var(--zp-av-hair, #9E1C12); }
.zp-av svg, .zp-av img { width: 100%; height: 100%; display: block; object-fit: cover; }
.zp-av--ring { box-shadow: 0 0 0 2px #fff; }
.zp-av--accent { box-shadow: 0 0 0 3px var(--zp-accent); }
.zp-avpair { display: inline-flex; flex: none; }
.zp-avpair .zp-av + .zp-av { margin-left: var(--ov, -8px); }
.zp-avstack { display: inline-flex; }
.zp-avstack .zp-av { box-shadow: 0 0 0 2px #fff; }
.zp-avstack .zp-av + .zp-av { margin-left: -8px; }

/* ---------- Cartes, titres de section ---------- */

.zp-card { background: var(--zp-surface); border: 1px solid var(--zp-line); }
.zp-card--raised { box-shadow: var(--zp-shadow-card); }
.zp-card--dark { background: var(--zp-primary); color: #fff; border: 0; position: relative; overflow: hidden; }
.zp-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }

/* ---------- Chips, onglets, segmented ---------- */

.zp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.zp-chip { display: inline-flex; align-items: center; cursor: pointer; padding: 7px 14px; font-size: 13px; font-weight: 700; background: #fff; color: var(--zp-primary); box-shadow: inset 0 0 0 1.5px var(--zp-field); white-space: nowrap; text-decoration: none !important; line-height: 1.5; }
.zp-chip:hover { box-shadow: inset 0 0 0 1.5px var(--zp-primary); }
.zp-chip.is-active, .zp-chip[aria-pressed="true"], .zp-chip[aria-selected="true"] { background: var(--zp-primary); color: #fff !important; box-shadow: inset 0 0 0 1.5px var(--zp-primary); }
.zp-chip--sm { padding: 6px 10px; font-size: 12px; }

.zp-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--zp-line-soft); }
.zp-tab { padding: 12px 0; font-size: 15px; font-weight: 700; color: var(--zp-gray) !important; text-decoration: none !important; cursor: pointer; }
.zp-tab.is-active, .zp-tab[aria-selected="true"] { color: var(--zp-primary) !important; font-weight: 800; box-shadow: inset 0 -3px 0 var(--zp-accent); }

.zp-modes { display: flex; background: rgba(255, 255, 255, .08); padding: 4px; gap: 4px; }
.zp-mode { cursor: pointer; padding: 12px 20px; font-size: 14px; font-weight: 800; color: #fff !important; text-decoration: none !important; }
.zp-mode.is-active { background: var(--zp-accent); color: var(--zp-primary) !important; }

.zp-seg { display: grid; grid-template-columns: 1fr 1fr; box-shadow: inset 0 0 0 1.5px var(--zp-primary); }
.zp-seg > * { padding: 12px; text-align: center; font-size: 14px; font-weight: 800; cursor: pointer; color: var(--zp-primary); background: transparent; }
.zp-seg > .is-active, .zp-seg > [aria-checked="true"] { background: var(--zp-primary); color: #fff; }

.zp-segsm { display: inline-flex; background: var(--zp-thead); box-shadow: inset 0 0 0 1px var(--zp-line); }
.zp-segsm > * { padding: 7px 12px; font-size: 12px; font-weight: 700; color: var(--zp-gray); cursor: pointer; }
.zp-segsm > .is-active { background: var(--zp-primary); color: #fff; }

/* ---------- Champs ---------- */

.zp-field { display: flex; flex-direction: column; gap: 6px; }
.zp-field > label, .zp-field__l { font-size: 13px; font-weight: 700; color: var(--zp-primary); }
.zp-input, .zp-select, .zp-textarea { width: 100%; border: 1.5px solid var(--zp-field); border-radius: 0; padding: 12px 14px; font-family: var(--zp-text); font-weight: 500; font-size: 15px; background: #fff; color: var(--zp-primary); outline: none; appearance: none; -webkit-appearance: none; line-height: 1.4; }
.zp-select { background-image: linear-gradient(45deg, transparent 50%, var(--zp-primary) 50%), linear-gradient(-45deg, transparent 50%, var(--zp-primary) 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.zp-input:focus, .zp-select:focus, .zp-textarea:focus { border: 2px solid var(--zp-secondary); padding: 11.5px 13.5px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--zp-secondary) 18%, transparent) !important; }
.zp-input.is-error, .zp-field.is-error .zp-input { border: 2px solid var(--zp-loss-text); padding: 11.5px 13.5px; }
.zp-err { font-size: 12px; font-weight: 600; color: var(--zp-loss-text); }
.zp-help { font-size: 12px; color: var(--zp-gray); }
.zp-textarea { min-height: 92px; resize: vertical; }

.zp-choice { padding: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--zp-line); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.zp-choice.is-active, .zp-choice[aria-checked="true"] { background: var(--zp-select); box-shadow: inset 0 0 0 2px var(--zp-primary); }
.zp-choice__t { font-family: var(--zp-display); font-weight: 800; font-size: 21px; text-transform: uppercase; line-height: 1; }
.zp-choice__s { font-size: 12px; color: var(--zp-gray); }

.zp-feel { display: inline-flex; gap: 3px; }
.zp-feel i { width: 9px; height: 16px; background: var(--zp-line); transform: skewX(-14deg); display: block; }
.zp-feel i.on { background: var(--zp-primary); }

.zp-toggle { position: relative; width: 46px; height: 26px; border-radius: 13px; background: var(--zp-field); flex: none; cursor: pointer; transition: background .15s; display: inline-block; }
.zp-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.zp-toggle[aria-checked="true"], .zp-toggle.is-on { background: var(--zp-primary); }
.zp-toggle[aria-checked="true"]::after, .zp-toggle.is-on::after { transform: translateX(20px); }

.zp-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.zp-check__box { width: 22px; height: 22px; flex: none; box-shadow: inset 0 0 0 2px var(--zp-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--zp-primary); background: #fff; }
.zp-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zp-check input:checked + .zp-check__box { background: var(--zp-accent); }
.zp-check input:checked + .zp-check__box::after { content: "✓"; }
.zp-check input:focus-visible + .zp-check__box { box-shadow: inset 0 0 0 2px var(--zp-primary), 0 0 0 3px var(--zp-secondary); }

/* ---------- Tableaux ---------- */

.zp-thead { display: grid; align-items: center; background: var(--zp-thead); border-bottom: 1px solid var(--zp-line-soft); padding: 12px 24px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zp-gray); }
.zp-trow { display: grid; align-items: center; padding: 12px 24px; border-bottom: 1px solid var(--zp-line-soft); }
.zp-trow:last-child { border-bottom: 0; }
.zp-trow.is-me { background: var(--zp-me); }
.zp-r { text-align: right; justify-self: end; }
.zp-player { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zp-player__txt { display: flex; flex-direction: column; min-width: 0; }
.zp-player__n { font-size: 15px; font-weight: 800; color: var(--zp-primary) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-player__n:hover { text-decoration: underline; }
.zp-player__m { font-size: 12px; color: var(--zp-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-player__line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.zp-elo { font-family: var(--zp-display); font-weight: 800; font-size: 26px; line-height: 1; }

/* ---------- Carte de match ---------- */

.zp-mc { background: #fff; border: 1px solid var(--zp-line); width: 100%; }
.zp-mc__h { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--zp-line-soft); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zp-gray); }
.zp-mc__gap { font-weight: 600; letter-spacing: .02em; text-transform: none; }
.zp-mc__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.zp-mc__row.is-loss { background: var(--zp-loss-row); }
.zp-mc__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zp-accent); box-shadow: 0 0 0 1.5px var(--zp-primary); flex: none; opacity: 0; }
.zp-mc__row.is-win .zp-mc__dot { opacity: 1; }
.zp-mc__names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zp-mc__n { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.3; }
.zp-mc__n a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--zp-gray) !important; font-weight: 500; }
.zp-mc__row.is-win .zp-mc__n a { color: var(--zp-primary) !important; font-weight: 700; }
.zp-mc__d { font-size: 14px; }
.zp-mc__sets { display: flex; gap: 2px; flex: none; }
.zp-mc__sets span { width: 26px; text-align: center; font-family: var(--zp-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--zp-primary); }
.zp-mc__sets span.is-l { color: var(--zp-score-lost); }

/* ---------- Équilibre ---------- */

.zp-bal { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zp-bal__lab { font-size: 12px; font-weight: 700; }
.zp-bal__lab--ok { color: var(--zp-win-text); }
.zp-bal__lab--warn { color: var(--zp-warn-fg); }
.zp-bal__lab--bad { color: var(--zp-loss-text); }
.zp-bal__rail { position: relative; display: block; height: 8px; background: linear-gradient(90deg, var(--zp-loss) 0, var(--zp-line-soft) 22%, var(--zp-line-soft) 78%, var(--zp-loss) 100%); }
.zp-bal__ok { position: absolute; left: 40%; width: 20%; top: 0; bottom: 0; background: var(--zp-balance-ok); }
.zp-bal__mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--zp-primary); }
.zp-bal__cur { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--zp-accent); box-shadow: 0 0 0 2px var(--zp-primary); }

/* ---------- Jauges ---------- */

.zp-gauge { position: relative; height: 12px; background: var(--zp-line-soft); }
.zp-gauge__bar { position: absolute; left: 0; top: 0; bottom: 0; }
.zp-gauge__bar--off { background: var(--zp-primary); }
.zp-gauge__bar--up { background: var(--zp-win); }
.zp-gauge__bar--down { background: var(--zp-loss); }
.zp-gauge__mark { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--zp-primary); }
.zp-progress { height: 6px; background: var(--zp-line-soft); }
.zp-progress > span { display: block; height: 100%; background: var(--zp-primary); }

/* ---------- États vides ---------- */

.zp-empty { background: #fff; border: 1.5px dashed var(--zp-field); padding: 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.zp-empty__ball { width: 56px; height: 56px; border-radius: 50%; background: var(--zp-accent); box-shadow: 0 0 0 6px var(--zp-select); margin-bottom: 8px; }
.zp-empty__t { font-family: var(--zp-display); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1.05; }
.zp-empty__p { font-size: 14px; color: var(--zp-gray); max-width: 300px; margin-bottom: 8px; }

/* ---------- Toasts ---------- */

.zp-toasts { position: fixed; z-index: 99990; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.zp-toast { display: flex; background: var(--zp-primary); color: #fff; box-shadow: var(--zp-shadow-overlay); pointer-events: auto; animation: zp-toast-in .2s ease-out; font-family: var(--zp-text); }
.zp-toast__ic { width: 44px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: #fff; }
.zp-toast--ok .zp-toast__ic { background: var(--zp-win); }
.zp-toast--info .zp-toast__ic { background: var(--zp-accent); color: var(--zp-primary); }
.zp-toast--warn .zp-toast__ic { background: #E7A100; color: var(--zp-primary); }
.zp-toast--err .zp-toast__ic { background: var(--zp-brand); }
.zp-toast__b { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zp-toast__t { font-size: 14px; font-weight: 800; }
.zp-toast__d { font-size: 13px; color: rgba(255, 255, 255, .8); }
.zp-toast__a { align-self: flex-start; padding: 12px 14px; font-size: 13px; font-weight: 800; color: var(--zp-accent) !important; }
@keyframes zp-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .zp-toasts { bottom: 104px; } }

/* ---------- Barre de navigation basse ---------- */

.zp-bn { display: none; }
@media (max-width: 760px) {
	.zp-bn { display: block; position: fixed; z-index: 9000; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--zp-line); padding: 0 6px calc(22px + env(safe-area-inset-bottom, 0px) * .5); font-family: var(--zp-text); }
	.zp-bn::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 120px; height: 4px; margin-left: -60px; border-radius: 2px; background: var(--zp-primary); }
}
.zp-bn__g { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; }
.zp-bn__i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 0 2px; min-height: 48px; color: var(--zp-gray) !important; font-size: 10.5px; font-weight: 600; text-decoration: none !important; }
.zp-bn__i.is-active { color: var(--zp-primary) !important; font-weight: 800; }
.zp-bn__bar { width: 28px; height: 3px; background: transparent; }
.zp-bn__i.is-active .zp-bn__bar { background: var(--zp-primary); }
.zp-bn__ic { margin-top: 5px; height: 18px; display: flex; align-items: flex-end; }
.zp-bn__home { width: 20px; background: currentColor; clip-path: polygon(50% 0, 100% 45%, 100% 100%, 62% 100%, 62% 66%, 38% 66%, 38% 100%, 0 100%, 0 45%); }
.zp-bn__bars { gap: 2px; }
.zp-bn__bars i { width: 6px; background: currentColor; display: block; }
.zp-bn__bars i:nth-child(1) { height: 11px; }
.zp-bn__bars i:nth-child(2) { height: 18px; }
.zp-bn__bars i:nth-child(3) { height: 7px; }
.zp-bn__duo { align-items: center; }
.zp-bn__duo i { width: 13px; height: 13px; border-radius: 50%; display: block; }
.zp-bn__duo i:first-child { background: currentColor; }
.zp-bn__duo i:last-child { box-shadow: inset 0 0 0 2.5px currentColor; margin-left: -4px; }
.zp-bn__i .zp-av { margin-top: 4px; }
.zp-bn__i.is-active .zp-av { box-shadow: 0 0 0 2px var(--zp-primary); }
.zp-bn__i--match { color: var(--zp-primary) !important; font-weight: 800; }
.zp-bn__plus { position: relative; width: 52px; height: 52px; margin-top: -22px; background: var(--zp-accent); box-shadow: 0 0 0 0 var(--zp-primary), 0 6px 14px color-mix(in srgb, var(--zp-primary) 25%, transparent); clip-path: var(--zp-cut-rank); display: flex; align-items: center; justify-content: center; }
.zp-bn__plus::before, .zp-bn__plus::after { content: ""; position: absolute; background: var(--zp-primary); }
.zp-bn__plus::before { width: 20px; height: 4px; }
.zp-bn__plus::after { width: 4px; height: 20px; }
.zp-bn__badge { position: absolute; top: 4px; left: 50%; margin-left: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--zp-brand); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }

/* ---------- Pied de page ---------- */

.zp-foot { background: var(--zp-primary); color: rgba(255, 255, 255, .75); }
.zp-foot__in { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 24px; padding-bottom: 24px; font-size: 13px; }
.zp-foot__l { display: flex; align-items: center; gap: 12px; }
.zp-foot__r { display: flex; gap: 24px; }
.zp-app .zp-foot__r a { color: rgba(255, 255, 255, .75); }
.zp-app .zp-foot__r a:hover { color: #fff; }
@media (max-width: 760px) { .zp-foot { display: none; } }

/* ---------- Champ lieu ---------- */

.zp-lieu { display: flex; flex-direction: column; gap: 6px; width: 100%; position: relative; }
.zp-lieu__l { font-size: 13px; font-weight: 700; }
.zp-lieu__f { cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--zp-field); text-align: left; width: 100%; }
.zp-lieu.is-open .zp-lieu__f { box-shadow: inset 0 0 0 2px var(--zp-primary); }
.zp-lieu__pic { width: 36px; height: 36px; flex: none; background: var(--zp-primary); display: flex; align-items: center; justify-content: center; clip-path: var(--zp-cut-rank); }
.zp-lieu__pic::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--zp-accent); }
.zp-lieu__sel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zp-lieu__sn { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-lieu__sn.is-ph { font-weight: 600; color: var(--zp-gray); }
.zp-lieu__sm { font-size: 12px; color: var(--zp-gray); }
.zp-lieu__fav { font-size: 11px; font-weight: 800; padding: 3px 7px; background: var(--zp-accent); color: var(--zp-primary); white-space: nowrap; }
.zp-lieu__caret { font-size: 14px; color: var(--zp-gray); }
.zp-lieu__p { background: #fff; border: 1.5px solid var(--zp-primary); box-shadow: var(--zp-shadow-pop); display: flex; flex-direction: column; }
.zp-lieu__top { padding: 10px; border-bottom: 1px solid var(--zp-line-soft); display: flex; flex-direction: column; gap: 8px; }
.zp-lieu__q { width: 100%; border: 1.5px solid var(--zp-field); padding: 11px 12px; font: 500 14px var(--zp-text); color: var(--zp-primary); outline: none; border-radius: 0; }
.zp-lieu__q:focus { border-color: var(--zp-secondary); }
.zp-lieu__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.zp-lieu__chips::-webkit-scrollbar { display: none; }
.zp-lieu__chips .zp-chip { padding: 6px 10px; font-size: 12px; flex: none; }
.zp-lieu__list { overflow-y: auto; }
.zp-lieu__sec { padding: 8px 14px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--zp-gray); }
.zp-lieu__sec--all { padding-top: 10px; border-top: 1px solid var(--zp-line-soft); }
.zp-lieu__row { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 14px; border-top: 1px solid var(--zp-bg); background: #fff; }
.zp-lieu__row:hover, .zp-lieu__row.is-sel { background: var(--zp-select); }
.zp-lieu__row.is-favrow { border-top: 0; }
.zp-lieu__rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zp-lieu__rn { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-lieu__row.is-favrow .zp-lieu__rn { font-weight: 800; }
.zp-lieu__rm { font-size: 11.5px; color: var(--zp-gray); }
.zp-lieu__courts { flex: none; font-family: var(--zp-display); font-weight: 700; font-size: 14px; padding: 2px 7px; background: var(--zp-primary); color: #fff; }
.zp-lieu__courts.is-out { background: var(--zp-line-soft); color: var(--zp-gray); }
.zp-lieu__star { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--zp-disabled-fg); }
.zp-lieu__star.is-on { color: var(--zp-star); }
.zp-lieu__empty { padding: 18px 14px; font-size: 13px; color: var(--zp-gray); text-align: center; }
.zp-lieu__hint { padding: 8px 14px 12px; font-size: 12.5px; color: var(--zp-gray); }
.zp-lieu__foot { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-top: 1px solid var(--zp-line-soft); background: var(--zp-thead); font-size: 11.5px; color: var(--zp-gray); }
.zp-lieu__other { font-weight: 800; color: var(--zp-secondary); cursor: pointer; }
.zp-lieu__custom { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--zp-line-soft); }
.zp-lieu__custom .zp-lieu__q { flex: 1; }

/* ---------- Champ date ---------- */

.zp-datef { display: flex; flex-direction: column; gap: 5px; position: relative; width: 100%; }
.zp-datef__l { font-size: 12.5px; font-weight: 700; }
.zp-datef__f { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px; height: 40px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--zp-field); width: 100%; text-align: left; }
.zp-datef.is-open .zp-datef__f { box-shadow: inset 0 0 0 2px var(--zp-primary); }
.zp-datef__v { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-datef__ic { width: 20px; height: 18px; flex: none; position: relative; box-shadow: inset 0 0 0 2px var(--zp-primary); }
.zp-datef__ic::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--zp-primary); }
.zp-datef__ic::after { content: ""; position: absolute; left: 5px; top: 9px; width: 4px; height: 4px; background: var(--zp-brand); }
.zp-cal { position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 60; width: 290px; background: #fff; border: 1.5px solid var(--zp-primary); box-shadow: 0 14px 30px color-mix(in srgb, var(--zp-primary) 20%, transparent); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.zp-cal__h { display: flex; justify-content: space-between; align-items: center; }
.zp-cal__nav { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--zp-field); }
.zp-cal__m { font-family: var(--zp-display); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.zp-cal__wd, .zp-cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.zp-cal__wd { font-size: 10.5px; font-weight: 800; color: var(--zp-gray); text-align: center; }
.zp-cal__wd span { padding: 4px 0; }
.zp-cal__d { height: 34px; display: flex; align-items: center; justify-content: center; font-family: var(--zp-display); font-weight: 700; font-size: 14px; background: #fff; color: var(--zp-primary); }
.zp-cal__d:hover:not([disabled]) { box-shadow: inset 0 0 0 1.5px var(--zp-primary); }
.zp-cal__d.is-today { box-shadow: inset 0 0 0 1.5px var(--zp-secondary); }
.zp-cal__d.is-sel { background: var(--zp-accent); box-shadow: none; }
.zp-cal__d[disabled] { color: var(--zp-disabled-fg); cursor: not-allowed; }
.zp-cal__f { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; padding-top: 4px; border-top: 1px solid var(--zp-line-soft); }
.zp-cal__f button:first-child { color: var(--zp-secondary); }
.zp-cal__f button:last-child { color: var(--zp-gray); }

/* ---------- Stepper ---------- */

.zp-stepper { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.zp-stepper__l { font-size: 12.5px; font-weight: 700; }
.zp-stepper__box { display: flex; align-items: stretch; height: 40px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--zp-field); }
.zp-stepper__dec, .zp-stepper__inc { width: 40px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }
.zp-stepper__dec { color: var(--zp-primary); box-shadow: inset -1.5px 0 0 var(--zp-field); }
.zp-stepper__dec[disabled] { color: var(--zp-field); cursor: not-allowed; }
.zp-stepper__inc { background: var(--zp-primary); color: #fff; }
.zp-stepper__inc[disabled] { background: var(--zp-field); cursor: not-allowed; }
.zp-stepper__v { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--zp-display); font-weight: 800; font-size: 18px; white-space: nowrap; }

/* ---------- Bandeaux ---------- */

.zp-notice { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 13px; font-weight: 600; }
.zp-notice--ok { background: var(--zp-ok-bg); color: var(--zp-win-text); }
.zp-notice--warn { background: var(--zp-warn-bg); color: var(--zp-warn-text-dark); }
.zp-notice--err { background: var(--zp-danger-bg); color: var(--zp-danger-fg); box-shadow: inset 0 0 0 1px var(--zp-danger-bd); }
.zp-offline { display: none; }
.zp-is-offline .zp-offline { display: flex; }

/* ---------- Modale simple ---------- */

.zp-modal { position: fixed; inset: 0; z-index: 99980; background: color-mix(in srgb, var(--zp-primary) 55%, transparent); display: flex; align-items: center; justify-content: center; padding: 16px; }
.zp-modal__c { background: #fff; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: var(--zp-shadow-overlay); padding: 24px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.zp-modal__x { position: absolute; top: 12px; right: 14px; font-size: 20px; font-weight: 800; color: var(--zp-gray); }
.zp-modal__t { font-family: var(--zp-display); font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1; }


/* Pied de page collé en bas : la page occupe au moins la hauteur de l'écran. */
.zp-app:not(.zpa-zp) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.zp-app:not(.zpa-zp) > * { flex-shrink: 0; }
.zp-app > .zp-foot { margin-top: auto; }

/* ---------- Coordonnées des clubs (fiche « i » du sélecteur + annuaire) ---------- */

.zp-app .zp-lieu__info { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font: italic 800 14px/1 var(--zp-display); color: var(--zp-secondary); box-shadow: inset 0 0 0 1.5px var(--zp-field); background: #fff; }
.zp-app .zp-lieu__info:hover, .zp-app .zp-lieu__info.is-on { color: #fff; background: var(--zp-secondary); box-shadow: none; }
.zp-lieu__card { padding: 4px 14px 14px; background: var(--zp-select); border-top: 0; }
.zp-lieu__fr { display: flex; align-items: center; gap: 14px; }
.zp-app .zp-lieu__dir { font-weight: 800; color: var(--zp-secondary); }
.zp-cc { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.zp-cc__adr { margin: 0; color: var(--zp-primary); font-weight: 600; }
.zp-cc__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.zp-app .zp-cc__a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px; background: #fff; color: var(--zp-primary); box-shadow: inset 0 0 0 1.5px var(--zp-field); font-weight: 700; font-size: 12.5px; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-app .zp-cc__a:hover { box-shadow: inset 0 0 0 1.5px var(--zp-primary); }
.zp-cc__k { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--zp-gray); }
.zp-app .zp-cc__a--go { background: var(--zp-primary); color: #fff; box-shadow: none; }
.zp-app .zp-cc__a--go:hover { background: var(--zp-secondary); box-shadow: none; }
.zp-cc__none { margin: 0; font-size: 12px; color: var(--zp-gray); }