/**
 * ============================================================
 * CLUBKIDS PARTNER MANAGER — PUBLIC
 * ============================================================
 *
 * Fichier :
 * clubkids-partner-manager/assets/css/public.css
 *
 * Rôle :
 * - Interface publique partenaire
 * - Dashboard
 * - Cartes statistiques
 * - Profil
 * - Réservations
 * - Points ClubKids
 * - Cagnotte
 * - QR Code
 * - Responsive
 *
 * Version :
 * 0.1.0
 * ============================================================
 */


/* ============================================================
   VARIABLES
============================================================ */

:root {

	--ckpm-primary: #006DFF;
	--ckpm-primary-hover: #0057CC;

	--ckpm-success: #16B364;
	--ckpm-warning: #F59E0B;
	--ckpm-danger: #DC2626;

	--ckpm-background: #F5F7FB;
	--ckpm-surface: #FFFFFF;

	--ckpm-border: #E5EAF2;

	--ckpm-text: #1E293B;
	--ckpm-text-light: #64748B;

	--ckpm-radius: 18px;

	--ckpm-shadow:
		0 10px 25px rgba(15,23,42,.06);

}


/* ============================================================
   RESET
============================================================ */

.ckpm *,
.ckpm *::before,
.ckpm *::after {

	box-sizing: border-box;

}

.ckpm {

	color: var(--ckpm-text);

	font-family: inherit;

}


/* ============================================================
   CONTENEUR
============================================================ */

.ckpm-container {

	max-width: 1280px;

	margin: 0 auto;

	padding: 30px;

}


/* ============================================================
   TITRES
============================================================ */

.ckpm-title {

	margin: 0 0 8px;

	font-size: 34px;

	font-weight: 700;

	line-height: 1.2;

	color: var(--ckpm-text);

}

.ckpm-subtitle {

	margin-bottom: 35px;

	color: var(--ckpm-text-light);

	font-size: 16px;

}


/* ============================================================
   CARTES
============================================================ */

.ckpm-card {

	background: var(--ckpm-surface);

	border: 1px solid var(--ckpm-border);

	border-radius: var(--ckpm-radius);

	padding: 26px;

	box-shadow: var(--ckpm-shadow);

}

.ckpm-card + .ckpm-card {

	margin-top: 24px;

}

.ckpm-card h2,
.ckpm-card h3 {

	margin-top: 0;

	color: var(--ckpm-text);

}


/* ============================================================
   GRID
============================================================ */

.ckpm-grid {

	display: grid;

	grid-template-columns:
		repeat(auto-fit, minmax(280px,1fr));

	gap: 22px;

}


/* ============================================================
   KPI
============================================================ */

.ckpm-kpi {

	display: flex;

	flex-direction: column;

	gap: 10px;

}

.ckpm-kpi__label {

	font-size: 14px;

	color: var(--ckpm-text-light);

}

.ckpm-kpi__value {

	font-size: 36px;

	font-weight: 700;

	line-height: 1;

}

.ckpm-kpi__description {

	font-size: 13px;

	color: var(--ckpm-text-light);

}


/* ============================================================
   BADGES
============================================================ */

.ckpm-badge {

	display: inline-flex;

	align-items: center;

	padding: 7px 14px;

	border-radius: 999px;

	font-size: 13px;

	font-weight: 600;

}

.ckpm-badge--success {

	background: rgba(22,179,100,.12);

	color: var(--ckpm-success);

}

.ckpm-badge--warning {

	background: rgba(245,158,11,.12);

	color: #8A5B00;

}

.ckpm-badge--danger {

	background: rgba(220,38,38,.10);

	color: var(--ckpm-danger);

}

.ckpm-badge--primary {

	background: rgba(0,109,255,.10);

	color: var(--ckpm-primary);

}


/* ============================================================
   TABLEAUX
============================================================ */

.ckpm-table {

	width: 100%;

	border-collapse: collapse;

	background: white;

}

.ckpm-table th {

	padding: 16px;

	text-align: left;

	background: #F8FAFC;

	border-bottom: 1px solid var(--ckpm-border);

	font-weight: 600;

}

.ckpm-table td {

	padding: 16px;

	border-bottom: 1px solid var(--ckpm-border);

}

.ckpm-table tbody tr:hover {

	background: #FAFCFF;

}


/* ============================================================
   FORMULAIRES
============================================================ */

.ckpm-form-group {

	margin-bottom: 22px;

}

.ckpm-form-group label {

	display: block;

	margin-bottom: 8px;

	font-weight: 600;

}

.ckpm-input,
.ckpm-select,
.ckpm-textarea {

	width: 100%;

	padding: 13px 15px;

	border-radius: 12px;

	border: 1px solid var(--ckpm-border);

	background: white;

	font-size: 15px;

}

.ckpm-input:focus,
.ckpm-select:focus,
.ckpm-textarea:focus {

	outline: none;

	border-color: var(--ckpm-primary);

	box-shadow:
		0 0 0 3px rgba(0,109,255,.12);

}


/* ============================================================
   BOUTONS
============================================================ */

.ckpm-button {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	padding: 13px 22px;

	border-radius: 12px;

	font-weight: 600;

	text-decoration: none;

	cursor: pointer;

	border: none;

	transition: .2s;

}

.ckpm-button--primary {

	background: var(--ckpm-primary);

	color: white;

}

.ckpm-button--primary:hover {

	background: var(--ckpm-primary-hover);

	color: white;

}

.ckpm-button--secondary {

	background: #EDF4FF;

	color: var(--ckpm-primary);

}

.ckpm-button--secondary:hover {

	background: #DCEAFF;

}


/* ============================================================
   ALERTES
============================================================ */

.ckpm-alert {

	padding: 18px 20px;

	border-radius: 14px;

	margin-bottom: 25px;

}

.ckpm-alert--success {

	background: rgba(22,179,100,.10);

	color: var(--ckpm-success);

}

.ckpm-alert--warning {

	background: rgba(245,158,11,.12);

	color: #8A5B00;

}

.ckpm-alert--danger {

	background: rgba(220,38,38,.10);

	color: var(--ckpm-danger);

}

.ckpm-alert--info {

	background: rgba(0,109,255,.08);

	color: var(--ckpm-primary);

}


/* ============================================================
   STATUTS
============================================================ */

.ckpm-status {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	font-weight: 600;

}

.ckpm-status::before {

	content: "";

	width: 10px;

	height: 10px;

	border-radius: 50%;

	background: currentColor;

}

.ckpm-status--success {

	color: var(--ckpm-success);

}

.ckpm-status--warning {

	color: var(--ckpm-warning);

}

.ckpm-status--danger {

	color: var(--ckpm-danger);

}


/* ============================================================
   PROGRESSION
============================================================ */

.ckpm-progress {

	width: 100%;

	height: 10px;

	border-radius: 999px;

	background: #E9EEF7;

	overflow: hidden;

}

.ckpm-progress__bar {

	height: 100%;

	width: 0;

	background: linear-gradient(
		90deg,
		#006DFF,
		#3B82F6
	);

	border-radius: inherit;

}


/* ============================================================
   QR CODE
============================================================ */

.ckpm-qr {

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 25px;

	background: white;

	border: 1px solid var(--ckpm-border);

	border-radius: var(--ckpm-radius);

}

.ckpm-qr img {

	max-width: 220px;

	height: auto;

	display: block;

}

/* ============================================================
   DASHBOARD — EN-TÊTE
============================================================ */

.ckpm-dashboard {
	background: var(--ckpm-background);
	min-height: 100vh;
}

.ckpm-dashboard__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 30px;
}

.ckpm-dashboard__eyebrow,
.ckpm-dashboard__section-eyebrow {
	margin: 0 0 8px;
	color: var(--ckpm-primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ckpm-dashboard__header .ckpm-subtitle {
	margin: 10px 0 0;
}


/* ============================================================
   DASHBOARD — ALERTE PROFIL
============================================================ */

.ckpm-dashboard__profile-alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
}

.ckpm-dashboard__profile-alert p {
	margin: 6px 0 0;
}


/* ============================================================
   DASHBOARD — KPI
============================================================ */

.ckpm-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 25px;
}

.ckpm-kpi-card {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
	padding: 24px;
	background: var(--ckpm-surface);
	border: 1px solid var(--ckpm-border);
	border-radius: var(--ckpm-radius);
	box-shadow: var(--ckpm-shadow);
}

.ckpm-kpi-card__icon {
	display: flex;
	flex: 0 0 52px;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 15px;
	background: rgba(0, 109, 255, 0.09);
	font-size: 25px;
}

.ckpm-kpi-card__label {
	margin: 0 0 8px;
	color: var(--ckpm-text-light);
	font-size: 13px;
	font-weight: 600;
}

.ckpm-kpi-card__value {
	display: block;
	color: var(--ckpm-text);
	font-size: 27px;
	font-weight: 750;
	line-height: 1.1;
}


/* ============================================================
   DASHBOARD — SECTIONS
============================================================ */

.ckpm-dashboard__section-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

.ckpm-dashboard__section-header h2,
.ckpm-dashboard__wallet h2,
.ckpm-dashboard__quick-links h2 {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
}

.ckpm-dashboard__status {
	margin-bottom: 24px;
}

.ckpm-dashboard__status-progress {
	margin-top: 20px;
}

.ckpm-dashboard__status-progress-labels {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 10px;
	color: var(--ckpm-text-light);
	font-size: 13px;
	font-weight: 600;
}

.ckpm-dashboard__status-progress p,
.ckpm-dashboard__status-max {
	margin: 12px 0 0;
	color: var(--ckpm-text-light);
	font-size: 14px;
}


/* ============================================================
   DASHBOARD — COLONNES
============================================================ */

.ckpm-dashboard__main-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: start;
	gap: 24px;
}

.ckpm-dashboard__main-column,
.ckpm-dashboard__sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ckpm-dashboard__main-column .ckpm-card,
.ckpm-dashboard__sidebar .ckpm-card {
	margin-top: 0;
}


/* ============================================================
   DASHBOARD — RECOMMANDATION
============================================================ */

.ckpm-dashboard__referral-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	align-items: center;
	gap: 30px;
}

.ckpm-copy-field {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.ckpm-copy-field .ckpm-input {
	min-width: 0;
}

.ckpm-copy-field .ckpm-button {
	flex: 0 0 auto;
}

.ckpm-dashboard__referral-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 22px;
}

.ckpm-dashboard__referral-stats > div {
	padding: 16px;
	border: 1px solid var(--ckpm-border);
	border-radius: 14px;
	background: #f8fafc;
}

.ckpm-dashboard__referral-stats span {
	display: block;
	margin-bottom: 6px;
	color: var(--ckpm-text-light);
	font-size: 12px;
}

.ckpm-dashboard__referral-stats strong {
	display: block;
	font-size: 20px;
}

.ckpm-qrcode {
	text-align: center;
}

.ckpm-qrcode img {
	display: block;
	width: 190px;
	max-width: 100%;
	height: auto;
	margin: 0 auto 12px;
	border-radius: 12px;
}

.ckpm-qrcode p {
	margin: 0;
	color: var(--ckpm-text-light);
	font-size: 13px;
}


/* ============================================================
   DASHBOARD — TABLEAU
============================================================ */

.ckpm-table-wrapper {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--ckpm-border);
	border-radius: 14px;
}

.ckpm-dashboard__empty-state {
	padding: 30px;
	border: 1px dashed var(--ckpm-border);
	border-radius: 14px;
	text-align: center;
}

.ckpm-dashboard__empty-state p {
	margin: 0;
	color: var(--ckpm-text-light);
}


/* ============================================================
   DASHBOARD — CAGNOTTE
============================================================ */

.ckpm-dashboard__wallet-balance {
	display: block;
	margin: 18px 0 24px;
	color: var(--ckpm-primary);
	font-size: 38px;
	line-height: 1;
}

.ckpm-dashboard__wallet-details {
	display: grid;
	gap: 12px;
	margin-bottom: 24px;
}

.ckpm-dashboard__wallet-details > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--ckpm-border);
}

.ckpm-dashboard__wallet-details span {
	color: var(--ckpm-text-light);
	font-size: 14px;
}

.ckpm-button--block {
	width: 100%;
}


/* ============================================================
   DASHBOARD — ACCÈS RAPIDES
============================================================ */

.ckpm-dashboard__quick-links ul {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.ckpm-dashboard__quick-links li + li {
	border-top: 1px solid var(--ckpm-border);
}

.ckpm-dashboard__quick-links a {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 15px 0;
	color: var(--ckpm-text);
	font-weight: 600;
	text-decoration: none;
}

.ckpm-dashboard__quick-links a:hover {
	color: var(--ckpm-primary);
}

.ckpm-dashboard__updated-at {
	margin: 25px 0 0;
	color: var(--ckpm-text-light);
	font-size: 12px;
	text-align: right;
}


/* ============================================================
   DASHBOARD — BADGES DE STATUT
============================================================ */

.ckpm-badge--discovery {
	background: #eef2f7;
	color: #475569;
}

.ckpm-badge--silver {
	background: #eef1f5;
	color: #596579;
}

.ckpm-badge--gold {
	background: #fff5cc;
	color: #8a6200;
}

.ckpm-badge--platinum {
	background: #e6f5ff;
	color: #006d99;
}

.ckpm-badge--ambassador {
	background: #f4e8ff;
	color: #7a28a8;
}


/* ============================================================
   DASHBOARD — RESPONSIVE
============================================================ */

@media (max-width: 1100px) {

	.ckpm-kpi-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ckpm-dashboard__main-grid {
		grid-template-columns: 1fr;
	}

	.ckpm-dashboard__sidebar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {

	.ckpm-dashboard__header,
	.ckpm-dashboard__profile-alert,
	.ckpm-dashboard__section-header {
		align-items: stretch;
		flex-direction: column;
	}

	.ckpm-dashboard__header .ckpm-button,
	.ckpm-dashboard__section-header .ckpm-button {
		width: 100%;
	}

	.ckpm-dashboard__referral-grid,
	.ckpm-dashboard__referral-stats,
	.ckpm-dashboard__sidebar {
		grid-template-columns: 1fr;
	}

	.ckpm-copy-field {
		flex-direction: column;
	}
}

@media (max-width: 560px) {

	.ckpm-kpi-grid {
		grid-template-columns: 1fr;
	}

	.ckpm-kpi-card {
		padding: 20px;
	}

	.ckpm-dashboard__wallet-balance {
		font-size: 32px;
	}
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1024px) {

	.ckpm-container {

		padding: 24px;

	}

}

@media (max-width: 768px) {

	.ckpm-container {

		padding: 18px;

	}

	.ckpm-grid {

		grid-template-columns: 1fr;

	}

	.ckpm-title {

		font-size: 28px;

	}

	.ckpm-card {

		padding: 20px;

	}

	.ckpm-kpi__value {

		font-size: 30px;

	}

	.ckpm-table {

		display: block;

		overflow-x: auto;

	}

}

@media (max-width: 480px) {

	.ckpm-button {

		width: 100%;

	}

}

/* ============================================================
   CLUBKIDS PARTENAIRES — DASHBOARD PREMIUM FULL WIDTH
   SURCHARGE VISUELLE — VERSION 1.0.0

   Installation :
   Ajouter ce fichier APRÈS assets/css/public.css
   ou copier son contenu tout en bas de public.css.
============================================================ */

.ckpm,
.ckpm * {
	box-sizing: border-box;
}

.ckpm-dashboard {
	--ckpm-primary: #0088ce;
	--ckpm-primary-dark: #006da7;
	--ckpm-primary-soft: #eaf7fd;
	--ckpm-primary-soft-2: #f4fbfe;
	--ckpm-ink: #173042;
	--ckpm-ink-soft: #5f7483;
	--ckpm-border: rgba(17, 61, 86, 0.10);
	--ckpm-surface: #ffffff;
	--ckpm-bg: #f5fbfe;
	--ckpm-shadow: 0 18px 50px rgba(26, 86, 120, 0.10);
	--ckpm-shadow-hover: 0 24px 60px rgba(26, 86, 120, 0.16);

	position: relative;
	width: 100vw;
	max-width: none;
	min-height: calc(100vh - 90px);
	margin: 0 calc(50% - 50vw);
	padding: 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 8% 6%, rgba(0, 136, 206, 0.12), transparent 26%),
		radial-gradient(circle at 92% 4%, rgba(0, 136, 206, 0.08), transparent 24%),
		linear-gradient(180deg, #f8fdff 0%, #f3f9fc 48%, #ffffff 100%);
	color: var(--ckpm-ink);
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;
}

.ckpm-dashboard::before {
	content: "";
	position: absolute;
	top: -160px;
	right: -120px;
	width: 440px;
	height: 440px;
	border: 70px solid rgba(0, 136, 206, 0.045);
	border-radius: 50%;
	pointer-events: none;
}

.ckpm-dashboard::after {
	content: "";
	position: absolute;
	left: -120px;
	bottom: 8%;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(0, 136, 206, 0.035);
	pointer-events: none;
}

.ckpm-dashboard > .ckpm-container {
	position: relative;
	z-index: 1;
	width: min(1480px, calc(100% - 40px));
	max-width: none;
	margin: 0 auto;
	padding: 0 0 56px;
}

/* ============================================================
   HERO DU DASHBOARD
============================================================ */

.ckpm-dashboard__header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	margin: 0 0 28px;
	padding: 42px 40px;
	overflow: hidden;
	border: 0;
	border-radius: 0 0 34px 34px;
	background:
		radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.18), transparent 30%),
		linear-gradient(135deg, #0088ce 0%, #0078b8 56%, #006da7 100%);
	box-shadow: 0 24px 60px rgba(0, 91, 139, 0.22);
	color: #ffffff;
}

.ckpm-dashboard__header::before {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -140px;
	width: 300px;
	height: 300px;
	border: 42px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	pointer-events: none;
}

.ckpm-dashboard__header > * {
	position: relative;
	z-index: 1;
}

.ckpm-dashboard__eyebrow,
.ckpm-dashboard__header .ckpm-dashboard__eyebrow {
	margin: 0 0 10px;
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ckpm-dashboard .ckpm-title,
.ckpm-dashboard__header .ckpm-title {
	margin: 0;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-size: clamp(36px, 4vw, 58px);
	font-weight: 850;
	line-height: 1.02;
	letter-spacing: -0.045em;
}

.ckpm-dashboard__header .ckpm-subtitle {
	max-width: 720px;
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.84);
	font-size: 17px;
	line-height: 1.55;
}

.ckpm-dashboard__header .ckpm-button--secondary {
	min-height: 52px;
	padding: 14px 24px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	background: #ffffff;
	color: var(--ckpm-primary-dark);
	box-shadow: 0 12px 28px rgba(0, 58, 89, 0.18);
	font-weight: 800;
}

.ckpm-dashboard__header .ckpm-button--secondary:hover,
.ckpm-dashboard__header .ckpm-button--secondary:focus-visible {
	border-color: #173042;
	background: #173042;
	color: #ffffff;
	transform: translateY(-2px);
	outline: none;
}

/* ============================================================
   ALERTE PROFIL
============================================================ */

.ckpm-dashboard__profile-alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 28px;
	padding: 24px 26px;
	border: 1px solid rgba(245, 158, 11, 0.18);
	border-radius: 22px;
	background: linear-gradient(135deg, #fffaf0 0%, #fff5df 100%);
	box-shadow: 0 14px 36px rgba(138, 91, 0, 0.08);
	color: #7b5200;
}

.ckpm-dashboard__profile-alert strong {
	display: block;
	margin-bottom: 6px;
	font-size: 17px;
}

.ckpm-dashboard__profile-alert p {
	margin: 0;
	color: #8a641d;
}

.ckpm-dashboard__profile-alert .ckpm-button--primary {
	flex: 0 0 auto;
}

/* ============================================================
   KPI
============================================================ */

.ckpm-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 28px;
}

.ckpm-kpi-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
	min-height: 142px;
	padding: 24px;
	overflow: hidden;
	border: 1px solid var(--ckpm-border);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--ckpm-shadow);
	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease,
		border-color 0.22s ease;
}

.ckpm-kpi-card::after {
	content: "";
	position: absolute;
	top: -34px;
	right: -34px;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: rgba(0, 136, 206, 0.045);
}

.ckpm-kpi-card:hover {
	border-color: rgba(0, 136, 206, 0.22);
	box-shadow: var(--ckpm-shadow-hover);
	transform: translateY(-4px);
}

.ckpm-kpi-card__icon {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 0 0 58px;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: linear-gradient(145deg, #eef9fe 0%, #dff3fc 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 136, 206, 0.08);
	font-size: 26px;
}

.ckpm-kpi-card__label {
	margin: 0 0 8px;
	color: var(--ckpm-ink-soft);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.ckpm-kpi-card__value {
	display: block;
	color: var(--ckpm-ink);
	font-size: clamp(28px, 2.2vw, 38px);
	font-weight: 850;
	line-height: 1;
	letter-spacing: -0.035em;
}

/* ============================================================
   CARTES ET SECTIONS
============================================================ */

.ckpm-card {
	border: 1px solid var(--ckpm-border);
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--ckpm-shadow);
}

.ckpm-dashboard__status,
.ckpm-dashboard__referral,
.ckpm-dashboard__bookings,
.ckpm-dashboard__wallet,
.ckpm-dashboard__quick-links {
	padding: 30px;
}

.ckpm-dashboard__status {
	margin-bottom: 28px;
	background:
		linear-gradient(
			135deg,
			rgba(234, 247, 253, 0.92),
			rgba(255, 255, 255, 0.98)
		);
}

.ckpm-dashboard__section-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 22px;
	margin: 0 0 24px;
}

.ckpm-dashboard__section-eyebrow {
	margin: 0 0 8px;
	color: var(--ckpm-primary);
	font-size: 12px;
	font-weight: 850;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.ckpm-dashboard__section-header h2,
.ckpm-dashboard__wallet h2,
.ckpm-dashboard__quick-links h2 {
	margin: 0;
	color: var(--ckpm-ink);
	font-size: clamp(24px, 2vw, 31px);
	font-weight: 820;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

/* ============================================================
   STATUT ET PROGRESSION
============================================================ */

.ckpm-dashboard__status-progress-labels {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
	color: var(--ckpm-ink-soft);
	font-size: 13px;
	font-weight: 750;
}

.ckpm-progress {
	height: 12px;
	border-radius: 999px;
	background: #dfeff6;
	box-shadow: inset 0 1px 2px rgba(17, 61, 86, 0.08);
}

.ckpm-progress__bar {
	background: linear-gradient(90deg, #0088ce 0%, #28aee8 100%);
	box-shadow: 0 0 18px rgba(0, 136, 206, 0.24);
}

.ckpm-badge {
	min-height: 34px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
}

/* ============================================================
   LAYOUT PRINCIPAL
============================================================ */

.ckpm-dashboard__main-grid {
	display: grid;
	grid-template-columns:
		minmax(0, 1.55fr)
		minmax(300px, 0.72fr);
	align-items: start;
	gap: 24px;
}

.ckpm-dashboard__main-column,
.ckpm-dashboard__sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ============================================================
   RECOMMANDATION
============================================================ */

.ckpm-dashboard__referral-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	align-items: center;
	gap: 30px;
}

.ckpm-form-group label {
	margin-bottom: 9px;
	color: var(--ckpm-ink);
	font-size: 14px;
	font-weight: 800;
}

.ckpm-copy-field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
}

.ckpm-input,
.ckpm-select,
.ckpm-textarea {
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid rgba(17, 61, 86, 0.14);
	border-radius: 14px;
	background: #fbfdfe;
	color: var(--ckpm-ink);
	font-size: 15px;
	box-shadow: inset 0 1px 2px rgba(17, 61, 86, 0.03);
}

.ckpm-input:focus,
.ckpm-select:focus,
.ckpm-textarea:focus {
	border-color: var(--ckpm-primary);
	box-shadow: 0 0 0 4px rgba(0, 136, 206, 0.10);
}

.ckpm-button {
	min-height: 48px;
	padding: 13px 22px;
	border-radius: 999px;
	font-weight: 800;
	line-height: 1;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}

.ckpm-button--primary {
	background: linear-gradient(135deg, #0088ce 0%, #0076b6 100%);
	color: #ffffff;
	box-shadow: 0 12px 26px rgba(0, 136, 206, 0.22);
}

.ckpm-button--primary:hover,
.ckpm-button--primary:focus-visible {
	background: linear-gradient(135deg, #007ab9 0%, #006da7 100%);
	color: #ffffff;
	box-shadow: 0 16px 34px rgba(0, 112, 170, 0.28);
	transform: translateY(-2px);
	outline: none;
}

.ckpm-button--secondary {
	background: #edf8fd;
	color: var(--ckpm-primary-dark);
}

.ckpm-button--secondary:hover,
.ckpm-button--secondary:focus-visible {
	background: #dff2fb;
	color: var(--ckpm-primary-dark);
	transform: translateY(-2px);
	outline: none;
}

.ckpm-dashboard__referral-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 22px;
}

.ckpm-dashboard__referral-stats > div {
	min-height: 104px;
	padding: 18px;
	border: 1px solid rgba(17, 61, 86, 0.08);
	border-radius: 18px;
	background: linear-gradient(180deg, #fbfdfe 0%, #f4f9fb 100%);
}

.ckpm-dashboard__referral-stats span {
	display: block;
	margin-bottom: 8px;
	color: var(--ckpm-ink-soft);
	font-size: 12px;
	line-height: 1.35;
}

.ckpm-dashboard__referral-stats strong {
	display: block;
	color: var(--ckpm-ink);
	font-size: 24px;
	font-weight: 850;
}

.ckpm-qr,
.ckpm-qrcode {
	padding: 18px;
	border: 1px solid rgba(0, 136, 206, 0.12);
	border-radius: 22px;
	background: linear-gradient(180deg, #f8fdff 0%, #eef9fe 100%);
	text-align: center;
}

.ckpm-qr img,
.ckpm-qrcode img {
	width: min(190px, 100%);
	max-width: 100%;
	height: auto;
	margin: 0 auto 10px;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 12px 28px rgba(20, 80, 110, 0.10);
}

/* ============================================================
   CAGNOTTE
============================================================ */

.ckpm-dashboard__wallet {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(0, 136, 206, 0.09),
			transparent 32%
		),
		#ffffff;
}

.ckpm-dashboard__wallet-balance {
	display: block;
	margin: 18px 0 26px;
	color: var(--ckpm-primary);
	font-size: clamp(42px, 4vw, 58px);
	font-weight: 850;
	line-height: 1;
	letter-spacing: -0.045em;
}

.ckpm-dashboard__wallet-details {
	display: grid;
	gap: 0;
	margin-bottom: 24px;
}

.ckpm-dashboard__wallet-details > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(17, 61, 86, 0.08);
}

.ckpm-dashboard__wallet-details span {
	color: var(--ckpm-ink-soft);
	font-size: 14px;
}

.ckpm-dashboard__wallet-details strong {
	color: var(--ckpm-ink);
	font-size: 15px;
}

/* ============================================================
   ACCÈS RAPIDES
============================================================ */

.ckpm-dashboard__quick-links ul {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.ckpm-dashboard__quick-links li + li {
	border-top: 1px solid rgba(17, 61, 86, 0.08);
}

.ckpm-dashboard__quick-links a {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 17px 0;
	color: var(--ckpm-ink);
	font-weight: 750;
	text-decoration: none;
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.ckpm-dashboard__quick-links a:hover,
.ckpm-dashboard__quick-links a:focus-visible {
	color: var(--ckpm-primary);
	transform: translateX(3px);
	outline: none;
}

/* ============================================================
   TABLEAU ET ÉTAT VIDE
============================================================ */

.ckpm-table-wrapper {
	width: 100%;
	overflow-x: auto;
	border: 1px solid rgba(17, 61, 86, 0.08);
	border-radius: 18px;
	background: #ffffff;
}

.ckpm-table {
	min-width: 760px;
}

.ckpm-table th {
	padding: 16px 18px;
	background: #f3f9fc;
	color: #486273;
	font-size: 12px;
	font-weight: 850;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ckpm-table td {
	padding: 17px 18px;
	color: var(--ckpm-ink);
}

.ckpm-table tbody tr:hover {
	background: #f8fcfe;
}

.ckpm-dashboard__empty-state {
	padding: 36px 24px;
	border: 1px dashed rgba(0, 136, 206, 0.24);
	border-radius: 18px;
	background: #f8fdff;
	text-align: center;
}

.ckpm-dashboard__updated-at {
	margin: 28px 4px 0;
	color: var(--ckpm-ink-soft);
	font-size: 12px;
	text-align: right;
}

/* ============================================================
   ELEMENTOR — SUPPRESSION DES MARGES
============================================================ */

.elementor-widget-shortcode:has(.ckpm-dashboard),
.elementor-widget-shortcode:has(.ckpm-dashboard) .elementor-widget-container,
.elementor-section:has(.ckpm-dashboard),
.elementor-container:has(.ckpm-dashboard),
.e-con:has(.ckpm-dashboard),
.e-con-inner:has(.ckpm-dashboard) {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 1180px) {

	.ckpm-dashboard > .ckpm-container {
		width: min(100% - 28px, 1180px);
	}

	.ckpm-kpi-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ckpm-dashboard__main-grid {
		grid-template-columns: 1fr;
	}

	.ckpm-dashboard__sidebar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 780px) {

	.ckpm-dashboard > .ckpm-container {
		width: min(100% - 20px, 760px);
		padding-bottom: 34px;
	}

	.ckpm-dashboard__header,
	.ckpm-dashboard__profile-alert,
	.ckpm-dashboard__section-header {
		align-items: stretch;
		flex-direction: column;
	}

	.ckpm-dashboard__header {
		padding: 28px 24px;
		border-radius: 0 0 24px 24px;
	}

	.ckpm-dashboard__header .ckpm-button,
	.ckpm-dashboard__profile-alert .ckpm-button,
	.ckpm-dashboard__section-header .ckpm-button {
		width: 100%;
	}

	.ckpm-kpi-grid,
	.ckpm-dashboard__referral-grid,
	.ckpm-dashboard__referral-stats,
	.ckpm-dashboard__sidebar {
		grid-template-columns: 1fr;
	}

	.ckpm-kpi-card {
		min-height: 122px;
	}

	.ckpm-dashboard__status,
	.ckpm-dashboard__referral,
	.ckpm-dashboard__bookings,
	.ckpm-dashboard__wallet,
	.ckpm-dashboard__quick-links {
		padding: 24px;
		border-radius: 22px;
	}

	.ckpm-copy-field {
		grid-template-columns: 1fr;
	}

}

/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 480px) {

	.ckpm-dashboard > .ckpm-container {
		width: min(100% - 14px, 460px);
	}

	.ckpm-dashboard__header {
		padding: 24px 20px;
		border-radius: 0 0 20px 20px;
	}

	.ckpm-dashboard .ckpm-title,
	.ckpm-dashboard__header .ckpm-title {
		font-size: 36px;
	}

	.ckpm-kpi-card {
		padding: 20px;
		border-radius: 20px;
	}

	.ckpm-kpi-card__icon {
		flex-basis: 52px;
		width: 52px;
		height: 52px;
	}

	.ckpm-button {
		width: 100%;
	}

}

/* ============================================================
   ACCESSIBILITÉ
============================================================ */

@media (prefers-reduced-motion: reduce) {

	.ckpm-dashboard *,
	.ckpm-dashboard *::before,
	.ckpm-dashboard *::after {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}

}

/* ============================================================
   CLUBKIDS — PATCH CORRECTIFS DASHBOARD
   - Remonte le dashboard sous le header
   - Force les CTA bleus en texte blanc
   - Modernise les champs code + lien partenaire
============================================================ */


/* ============================================================
   1. COLLER LE DASHBOARD AU HEADER
============================================================ */

body:has(.ckpm-dashboard) .site-main,
body:has(.ckpm-dashboard) .content-area,
body:has(.ckpm-dashboard) .site-content,
body:has(.ckpm-dashboard) .entry-content,
body:has(.ckpm-dashboard) main,
body:has(.ckpm-dashboard) article,
body:has(.ckpm-dashboard) .elementor,
body:has(.ckpm-dashboard) .elementor-location-single,
body:has(.ckpm-dashboard) .elementor-widget-shortcode,
body:has(.ckpm-dashboard) .elementor-widget-shortcode > .elementor-widget-container,
body:has(.ckpm-dashboard) .e-con,
body:has(.ckpm-dashboard) .e-con-inner {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body:has(.ckpm-dashboard) .entry-header,
body:has(.ckpm-dashboard) .page-header,
body:has(.ckpm-dashboard) .page-title,
body:has(.ckpm-dashboard) .entry-title {
	display: none !important;
}

body:has(.ckpm-dashboard) header + main,
body:has(.ckpm-dashboard) .site-header + .site-main,
body:has(.ckpm-dashboard) .elementor-location-header + main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.ckpm-dashboard {
	margin-top: 0 !important;
}

.ckpm-dashboard > .ckpm-container {
	padding-top: 0 !important;
}


/* ============================================================
   2. CTA BLEUS — TEXTE BLANC
============================================================ */

.ckpm-dashboard .ckpm-button--primary,
.ckpm-dashboard .ckpm-button--primary:visited,
.ckpm-dashboard .ckpm-button--primary:hover,
.ckpm-dashboard .ckpm-button--primary:focus,
.ckpm-dashboard .ckpm-button--primary:focus-visible,
.ckpm-dashboard__profile-alert .ckpm-button--primary,
.ckpm-dashboard__wallet .ckpm-button--primary {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.ckpm-dashboard .ckpm-button--primary *,
.ckpm-dashboard__profile-alert .ckpm-button--primary *,
.ckpm-dashboard__wallet .ckpm-button--primary * {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}


/* ============================================================
   3. CHAMPS CODE + LIEN — DESIGN PREMIUM
============================================================ */

.ckpm-dashboard__referral .ckpm-copy-field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: stretch;
}

.ckpm-dashboard__referral .ckpm-input {
	min-height: 58px;
	padding: 0 20px;

	border: 1px solid rgba(0, 136, 206, 0.16);
	border-radius: 18px;

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#f8fcfe 100%
		);

	color: #173042;

	box-shadow:
		inset 0 1px 2px rgba(17, 61, 86, 0.04),
		0 8px 24px rgba(26, 86, 120, 0.06);

	font-size: 16px;
	font-weight: 650;
	line-height: 1;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.ckpm-dashboard__referral .ckpm-input:hover {
	border-color: rgba(0, 136, 206, 0.30);
}

.ckpm-dashboard__referral .ckpm-input:focus {
	border-color: #0088ce;

	background: #ffffff;

	box-shadow:
		0 0 0 4px rgba(0, 136, 206, 0.10),
		0 12px 30px rgba(26, 86, 120, 0.08);

	outline: none;
}

.ckpm-dashboard__referral .ckpm-copy-field .ckpm-button {
	min-width: 116px;
	min-height: 58px;
	padding: 0 24px;

	border: 0;
	border-radius: 18px;

	background:
		linear-gradient(
			135deg,
			#edf8fd 0%,
			#dff3fc 100%
		);

	color: #006da7 !important;
	-webkit-text-fill-color: #006da7 !important;

	box-shadow:
		inset 0 0 0 1px rgba(0, 136, 206, 0.08),
		0 8px 22px rgba(26, 86, 120, 0.08);

	font-size: 15px;
	font-weight: 850;

	transition:
		transform 0.2s ease,
		background 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease;
}

.ckpm-dashboard__referral .ckpm-copy-field .ckpm-button:hover,
.ckpm-dashboard__referral .ckpm-copy-field .ckpm-button:focus-visible {
	background:
		linear-gradient(
			135deg,
			#0088ce 0%,
			#006da7 100%
		);

	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;

	box-shadow:
		0 14px 30px rgba(0, 112, 170, 0.22);

	transform: translateY(-2px);

	outline: none;
}


/* ============================================================
   4. LABELS DES CHAMPS
============================================================ */

.ckpm-dashboard__referral .ckpm-form-group label {
	margin-bottom: 10px;

	color: #173042;

	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.01em;
}



/* ============================================================
   5. MOBILE
============================================================ */

@media (max-width: 700px) {

	.ckpm-dashboard__referral .ckpm-copy-field {
		grid-template-columns: 1fr;
	}

	.ckpm-dashboard__referral .ckpm-copy-field .ckpm-button {
		width: 100%;
	}

}

/* ==========================================================
 * DASHBOARD PARTENAIRE — BLOC QR CODE
 * ========================================================== */

.ckpm-dashboard__qr-block {
	margin-top: 24px;
	padding: 22px;
	border: 1px solid rgba(0, 136, 206, 0.16);
	border-radius: 22px;
	background:
		linear-gradient(
			135deg,
			rgba(0, 136, 206, 0.055) 0%,
			rgba(255, 255, 255, 0.96) 60%,
			rgba(0, 136, 206, 0.035) 100%
		);
}

.ckpm-dashboard__qr-header {
	margin-bottom: 18px;
}

.ckpm-dashboard__qr-label {
	display: block;
	margin-bottom: 5px;
	color: #132c42;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
}

.ckpm-dashboard__qr-header p {
	margin: 0;
	color: #637587;
	font-size: 14px;
	line-height: 1.55;
}

.ckpm-dashboard__qr-content {
	display: flex;
	align-items: center;
	gap: 24px;
}

.ckpm-dashboard__qr-image {
	display: flex;
	flex: 0 0 180px;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border: 1px solid rgba(19, 44, 66, 0.1);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(19, 44, 66, 0.08);
}

.ckpm-dashboard__qr-image img {
	display: block;
	width: 100%;
	max-width: 180px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.ckpm-dashboard__qr-information {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
}

.ckpm-dashboard__qr-information strong {
	margin-bottom: 7px;
	color: #132c42;
	font-size: 17px;
	font-weight: 800;
}

.ckpm-dashboard__qr-information p {
	max-width: 470px;
	margin: 0 0 16px;
	color: #637587;
	font-size: 14px;
	line-height: 1.6;
}

.ckpm-dashboard__qr-information .ckpm-button {
	width: auto;
	min-height: 48px;
	padding-right: 22px;
	padding-left: 22px;
}

/* Tablette et mobile */
@media screen and (max-width: 767px) {

	.ckpm-dashboard__qr-block {
		padding: 18px;
	}

	.ckpm-dashboard__qr-content {
		flex-direction: column;
		align-items: stretch;
	}

	.ckpm-dashboard__qr-image {
		flex-basis: auto;
		width: 100%;
		max-width: 220px;
		margin: 0 auto;
	}

	.ckpm-dashboard__qr-information {
		align-items: stretch;
		text-align: center;
	}

	.ckpm-dashboard__qr-information p {
		max-width: none;
	}

	.ckpm-dashboard__qr-information .ckpm-button {
		width: 100%;
	}
}

/* ==========================================================
 * COPIE — ÉTATS ET ANIMATION
 * ========================================================== */

.ckpm-copy-field .ckpm-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
	transition:
		background-color 0.22s ease,
		border-color 0.22s ease,
		color 0.22s ease,
		transform 0.22s ease,
		box-shadow 0.22s ease;
}

.ckpm-copy-field .ckpm-button.is-loading {
	pointer-events: none;
	opacity: 0.72;
}

.ckpm-copy-field .ckpm-button.is-copy-success {
	color: #ffffff;
	border-color: #169b62;
	background: #169b62;
	box-shadow: 0 10px 24px rgba(22, 155, 98, 0.22);
	animation: ckpm-copy-success 0.42s ease;
}

.ckpm-copy-field .ckpm-button.is-copy-error {
	color: #ffffff;
	border-color: #d94747;
	background: #d94747;
	animation: ckpm-copy-error 0.34s ease;
}

.ckpm-copy-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
	animation: ckpm-check-appear 0.38s ease;
}

.ckpm-copy-field .ckpm-input {
	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		background-color 0.25s ease;
}

.ckpm-copy-field .ckpm-input.is-copy-success {
	border-color: rgba(22, 155, 98, 0.65);
	background-color: rgba(22, 155, 98, 0.045);
	box-shadow: 0 0 0 4px rgba(22, 155, 98, 0.1);
}

@keyframes ckpm-copy-success {
	0% {
		transform: scale(1);
	}

	45% {
		transform: scale(1.055);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes ckpm-check-appear {
	0% {
		opacity: 0;
		transform: scale(0.55) rotate(-18deg);
	}

	100% {
		opacity: 1;
		transform: scale(1) rotate(0);
	}
}

@keyframes ckpm-copy-error {
	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-4px);
	}

	75% {
		transform: translateX(4px);
	}
}


/* ==========================================================
 * TÉLÉCHARGEMENT DU QR CODE
 * ========================================================== */

.ckpm-qr-download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	transition:
		background-color 0.22s ease,
		border-color 0.22s ease,
		color 0.22s ease,
		transform 0.22s ease,
		box-shadow 0.22s ease;
}

.ckpm-qr-download__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(0, 136, 206, 0.1);
	font-size: 15px;
	font-weight: 900;
	transition:
		transform 0.25s ease,
		background-color 0.25s ease;
}

.ckpm-qr-download:hover .ckpm-qr-download__icon {
	transform: translateY(2px);
}

.ckpm-qr-download.is-downloading {
	pointer-events: none;
	opacity: 0.78;
}

.ckpm-qr-download.is-downloading .ckpm-qr-download__icon {
	animation: ckpm-download-bounce 0.7s ease infinite;
}

.ckpm-qr-download.is-download-success {
	color: #ffffff;
	border-color: #169b62;
	background: #169b62;
	box-shadow: 0 10px 24px rgba(22, 155, 98, 0.2);
}

.ckpm-qr-download.is-download-success .ckpm-qr-download__icon {
	background: rgba(255, 255, 255, 0.18);
}

@keyframes ckpm-download-bounce {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(4px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.ckpm-copy-field .ckpm-button,
	.ckpm-copy-field .ckpm-input,
	.ckpm-qr-download,
	.ckpm-qr-download__icon {
		animation: none !important;
		transition: none !important;
	}
}


/* ==========================================================
 * RÉPARTITION PARTENAIRE
 * ========================================================== */

.ckpm-distribution {
	margin-top: 24px;
}

.ckpm-distribution__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.7fr);
	gap: 22px;
}

.ckpm-distribution__controls,
.ckpm-distribution__result {
	padding: 22px;
	border: 1px solid rgba(19, 44, 66, 0.1);
	border-radius: 20px;
	background: #fff;
}

.ckpm-distribution__amounts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.ckpm-distribution__amount {
	padding: 18px;
	border: 1px solid rgba(0, 136, 206, 0.14);
	border-radius: 16px;
	background: rgba(0, 136, 206, 0.035);
}

.ckpm-distribution__amount span {
	display: block;
	color: #657887;
	font-size: 13px;
}

.ckpm-distribution__amount strong {
	display: block;
	margin-top: 7px;
	color: #0088ce;
	font-size: 28px;
	font-weight: 900;
}

.ckpm-distribution__label,
.ckpm-distribution__company label {
	display: block;
	margin-bottom: 10px;
	color: #173e52;
	font-weight: 800;
}

.ckpm-distribution__range {
	width: 100%;
	height: 10px;
	appearance: none;
	border-radius: 999px;
	background:
		linear-gradient(
			to right,
			#0088ce 0%,
			#0088ce var(--ckpm-distribution-progress, 50%),
			#155f84 var(--ckpm-distribution-progress, 50%),
			#155f84 100%
		);
}

.ckpm-distribution__range::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
	appearance: none;
	border: 4px solid #fff;
	border-radius: 50%;
	background: #0088ce;
	box-shadow: 0 4px 12px rgba(0, 70, 108, 0.3);
	cursor: grab;
}

.ckpm-distribution__scale {
	display: flex;
	justify-content: space-between;
	margin-top: 9px;
	color: #72858f;
	font-size: 11px;
}

.ckpm-distribution__company {
	margin-top: 24px;
}

.ckpm-distribution__money-field {
	position: relative;
}

.ckpm-distribution__money-field input {
	width: 100%;
	height: 58px;
	padding: 0 50px 0 17px;
	border: 1px solid #dce8ee;
	border-radius: 14px;
	font-size: 23px;
	font-weight: 900;
}

.ckpm-distribution__money-field span {
	position: absolute;
	top: 50%;
	right: 18px;
	color: #0088ce;
	font-size: 20px;
	font-weight: 900;
	transform: translateY(-50%);
}

.ckpm-distribution__company small {
	display: block;
	margin-top: 8px;
	color: #72858f;
	line-height: 1.5;
}

.ckpm-distribution__total {
	padding: 20px;
	border-radius: 16px;
	color: #fff;
	background: linear-gradient(135deg, #155f84, #0088ce);
}

.ckpm-distribution__total span {
	display: block;
	font-size: 12px;
	opacity: 0.8;
}

.ckpm-distribution__total strong {
	display: block;
	margin-top: 7px;
	font-size: 38px;
	font-weight: 900;
}

.ckpm-distribution__attractiveness {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	padding: 16px;
	border-radius: 15px;
}

.ckpm-distribution__attractiveness.is-green {
	background: #eaf8f1;
}

.ckpm-distribution__attractiveness.is-orange {
	background: #fff4e2;
}

.ckpm-distribution__attractiveness.is-red {
	background: #fff0f1;
}

.ckpm-distribution__traffic {
	display: grid;
	gap: 4px;
	padding: 7px;
	border-radius: 11px;
	background: #203a49;
}

.ckpm-distribution__traffic span {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	opacity: 0.17;
}

.ckpm-distribution__traffic .is-red {
	background: #dc4a50;
}

.ckpm-distribution__traffic .is-orange {
	background: #eb971e;
}

.ckpm-distribution__traffic .is-green {
	background: #20a96b;
}

.ckpm-distribution__attractiveness.is-red
.ckpm-distribution__traffic .is-red,
.ckpm-distribution__attractiveness.is-orange
.ckpm-distribution__traffic .is-orange,
.ckpm-distribution__attractiveness.is-green
.ckpm-distribution__traffic .is-green {
	opacity: 1;
	box-shadow: 0 0 13px currentColor;
}

.ckpm-distribution__attractiveness strong {
	display: block;
	margin-top: 4px;
	color: #173e52;
}

.ckpm-distribution__attractiveness p {
	margin: 5px 0 0;
	color: #72858f;
	font-size: 12px;
	line-height: 1.5;
}

.ckpm-distribution__save-status {
	min-height: 24px;
	margin: 14px 0;
	font-size: 13px;
	font-weight: 750;
}

.ckpm-distribution__save-status.is-saving {
	color: #657887;
}

.ckpm-distribution__save-status.is-success {
	color: #168b5a;
}

.ckpm-distribution__save-status.is-error {
	color: #c83e45;
}

@media screen and (max-width: 900px) {

	.ckpm-distribution__layout {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 600px) {

	.ckpm-distribution__amounts {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   CORRECTIF — BLOC RÉPARTITION DANS MON PROFIL
   À placer tout en bas de assets/css/public.css
============================================================ */

.ckpm-account-page .ckpm-distribution {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	margin: 0 0 26px !important;
	padding: 0 !important;
	overflow: hidden !important;
	border-radius: 26px !important;
}

/*
 * Réinitialisation des styles hérités du dashboard.
 */
.ckpm-account-page
.ckpm-distribution
.ckpm-dashboard__section-header {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 30px 32px 26px !important;

	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;

	transform: none !important;
	translate: none !important;

	overflow: visible !important;
	box-sizing: border-box !important;

	border: 0 !important;
	border-bottom: 1px solid rgba(17, 61, 86, 0.10) !important;
	border-radius: 0 !important;

	background: #ffffff !important;
}

/*
 * Empêche le contenu du titre d’être rogné.
 */
.ckpm-account-page
.ckpm-distribution
.ckpm-dashboard__section-header > div {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 0 0 2px !important;

	transform: none !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

.ckpm-account-page
.ckpm-distribution
.ckpm-dashboard__section-eyebrow {
	display: block !important;
	width: auto !important;

	margin: 0 0 8px !important;
	padding: 0 !important;

	color: #087fc0 !important;
	font-size: 12px !important;
	font-weight: 850 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.12em !important;
	text-indent: 0 !important;
	text-transform: uppercase !important;

	transform: none !important;
	overflow: visible !important;
}

.ckpm-account-page
.ckpm-distribution
.ckpm-dashboard__section-header h2 {
	display: block !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #173042 !important;
	font-size: clamp(28px, 3vw, 38px) !important;
	font-weight: 850 !important;
	line-height: 1.12 !important;
	letter-spacing: -0.035em !important;
	text-indent: 0 !important;

	transform: none !important;
	overflow: visible !important;
}

.ckpm-account-page
.ckpm-distribution
.ckpm-dashboard__section-header p:not(.ckpm-dashboard__section-eyebrow) {
	display: block !important;
	max-width: 800px !important;

	margin: 7px 0 0 !important;
	padding: 0 !important;

	color: #536b7a !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
	text-indent: 0 !important;

	transform: none !important;
	overflow: visible !important;
}

/*
 * Contenu principal du simulateur.
 */
.ckpm-account-page
.ckpm-distribution
.ckpm-distribution__layout {
	margin: 0 !important;
	padding: 22px !important;
	box-sizing: border-box !important;
}

/* Tablette */
@media (max-width: 780px) {

	.ckpm-account-page
	.ckpm-distribution
	.ckpm-dashboard__section-header {
		padding: 26px 24px 22px !important;
	}

	.ckpm-account-page
	.ckpm-distribution
	.ckpm-distribution__layout {
		padding: 18px !important;
	}

}

/* Mobile */
@media (max-width: 480px) {

	.ckpm-account-page .ckpm-distribution {
		border-radius: 21px !important;
	}

	.ckpm-account-page
	.ckpm-distribution
	.ckpm-dashboard__section-header {
		padding: 23px 20px 20px !important;
	}

	.ckpm-account-page
	.ckpm-distribution
	.ckpm-dashboard__section-header h2 {
		font-size: 27px !important;
	}

	.ckpm-account-page
	.ckpm-distribution
	.ckpm-dashboard__section-header p:not(.ckpm-dashboard__section-eyebrow) {
		font-size: 14px !important;
	}

}


.ckpm-distribution__cse-notice{
	display:flex;
	align-items:flex-start;
	gap:16px;

	margin-top:18px;
	padding:18px 20px;

	border-radius:18px;

	background:#eef8fd;
	border:1px solid rgba(0,136,206,.18);

	animation:ckpmFade .25s ease;
}

.ckpm-distribution__cse-icon{
	flex:0 0 42px;

	width:42px;
	height:42px;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:50%;

	background:#0088ce;
	color:#fff;

	font-size:20px;
}

.ckpm-distribution__cse-content strong{
	display:block;
	margin-bottom:6px;

	font-size:15px;
	font-weight:800;

	color:#173042;
}

.ckpm-distribution__cse-content p{
	margin:0;

	font-size:14px;
	line-height:1.6;

	color:#546b79;
}

.ckpm-distribution__cse-content a{
	font-weight:700;
	color:#0088ce;
	text-decoration:none;
}

.ckpm-distribution__cse-content a:hover{
	text-decoration:underline;
}

@keyframes ckpmFade{
	from{
		opacity:0;
		transform:translateY(-6px);
	}
	to{
		opacity:1;
		transform:none;
	}
}

.ckpm-referral-locked {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	padding: 32px;
	border: 1px solid rgba(0, 136, 206, 0.15);
	border-radius: 24px;
	background:
		linear-gradient(
			135deg,
			rgba(234, 247, 253, 0.95),
			rgba(255, 255, 255, 0.98)
		);
	box-shadow: 0 18px 45px rgba(26, 86, 120, 0.08);
}

.ckpm-referral-locked__icon {
	display: flex;
	flex: 0 0 58px;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: #0088ce;
	color: #ffffff;
	font-size: 25px;
	box-shadow: 0 12px 28px rgba(0, 136, 206, 0.22);
}

.ckpm-referral-locked__content {
	flex: 1;
	min-width: 0;
}

.ckpm-referral-locked__eyebrow {
	display: block;
	margin-bottom: 8px;
	color: #0088ce;
	font-size: 12px;
	font-weight: 850;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ckpm-referral-locked__content h2 {
	margin: 0 0 10px;
	color: #173042;
	font-size: 25px;
	font-weight: 850;
	line-height: 1.15;
}

.ckpm-referral-locked__content p {
	max-width: 650px;
	margin: 0 0 20px;
	color: #667b89;
	font-size: 14px;
	line-height: 1.6;
}

@media (max-width: 680px) {

	.ckpm-referral-locked {
		align-items: stretch;
		flex-direction: column;
		padding: 24px;
	}

	.ckpm-referral-locked__icon {
		width: 52px;
		height: 52px;
	}

	.ckpm-referral-locked .ckpm-button {
		width: 100%;
	}

}


/* ============================================================
 * KPI — VALEURS EN ATTENTE
 * ============================================================ */

.ckpm-kpi-card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.ckpm-kpi-card__pending {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
	margin-top: 9px;
	padding: 6px 10px;
	border: 1px solid rgba(22, 163, 74, 0.15);
	border-radius: 999px;
	background: rgba(22, 163, 74, 0.09);
	color: #15803d;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	white-space: normal;
}

.ckpm-kpi-card__pending-dot {
	display: block;
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

@media (max-width: 767px) {

	.ckpm-kpi-card__pending {
		padding: 5px 8px;
		font-size: 11px;
	}
}