/* DropZone × Borne — carte liée. Tout est préfixé .dzcl- (chargé sur la page de la borne, « Mes cartes » et l'appli). */

/* ---------- Page « Mes cartes » (s'appuie sur borne.css du module borne) ---------- */
.dzbc[data-screen="cards"] [data-s="cards"], .dzbc[data-screen="linked"] [data-s="linked"] { display: block; }
.dzcl-page .dzbc-pin { margin-bottom: 16px; }
.dzcl-form-title { margin-top: 4px; color: #fff !important; letter-spacing: .12em; }
.dzcl-gold { color: var(--gold, #ffc233) !important; }

.dzcl-list { margin: 0 0 22px; }
.dzcl-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dzcl-item {
	display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px;
	background: #0a0a0f; border: 1px solid rgba(255, 255, 255, .1);
}
.dzcl-chip {
	flex: none; width: 38px; height: 26px; border-radius: 6px;
	background: linear-gradient(135deg, #3a3a46, #15151c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
	position: relative;
}
.dzcl-chip::after { content: ""; position: absolute; left: 6px; top: 8px; width: 10px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, #f3d27a, #b08a2e); }
.dzcl-item-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dzcl-item-tx b { font: 700 15px/1.2 var(--f-display, sans-serif); color: #fff; letter-spacing: .02em; }
.dzcl-item-tx small { color: var(--mute, #a6a6b4); font-size: 12px; }
.dzcl-unlink {
	flex: none; height: 34px; padding: 0 12px; border-radius: 10px; cursor: pointer;
	background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .16); color: #ddd;
	font: 700 12px/1 var(--f-body, sans-serif);
}
.dzcl-unlink.is-confirm { background: rgba(255, 59, 59, .14); border-color: rgba(255, 59, 59, .55); color: #ff8a8a; }
.dzcl-unlink[disabled] { opacity: .5; }

/* ---------- Encadré d'information (page borne / Mes cartes) ---------- */
.dzcl-info {
	margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; text-align: left;
	background: rgba(46, 230, 107, .07); border: 1px solid rgba(46, 230, 107, .28); color: #c8f7d6; font-size: 13px; line-height: 1.5;
}
.dzcl-info b { color: #fff; }
[data-s="success"] .dzcl-info, [data-s="linked"] .dzcl-info { margin-top: -6px; }

/* ---------- Case « Lier cette carte » (page borne) ---------- */
.dzcl-opt {
	display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
	background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); color: #d9d9e2; font-size: 13px; line-height: 1.45;
}
.dzcl-opt input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #ff3b3b; }
.dzcl-sep { margin: 0 8px; color: var(--mute, #a6a6b4); }

/* ---------- Appli : carte sous le pass ---------- */
.dzcl-home {
	display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 14px 14px 14px 12px; border-radius: 16px; text-decoration: none !important;
	background: var(--dzm-card, #101016); border: 1px solid rgba(255, 194, 51, .28); color: #fff !important;
	box-shadow: 0 14px 34px -22px rgba(255, 194, 51, .55);
}
.dzcl-home.is-linked { border-color: rgba(46, 230, 107, .28); box-shadow: none; }
.dzcl-home-ic {
	flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
	background: rgba(255, 194, 51, .12); color: var(--dzm-gold, #ffc233);
}
.dzcl-home.is-linked .dzcl-home-ic { background: rgba(46, 230, 107, .12); color: #2ee66b; }
.dzcl-home-ic svg { width: 22px; height: 22px; }
.dzcl-home-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dzcl-home-tx strong { font-size: 14px; font-weight: 800; color: #fff; }
.dzcl-home-tx small { font-size: 12px; color: var(--dzm-mute, #a6a6b4); }
.dzcl-chev { flex: none; width: 20px; height: 20px; color: var(--dzm-mute, #a6a6b4); }

/* ---------- Appli : bulles (booster gagné, paiement en DC) ---------- */
.dzcl-toasts {
	position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); z-index: 2147483600;
	display: flex; flex-direction: column; gap: 8px; max-width: 460px; margin: 0 auto; pointer-events: none;
}
.dzcl-toast {
	display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 16px; border-radius: 16px; pointer-events: auto;
	background: linear-gradient(180deg, #1d160a, #120e07); border: 1px solid rgba(255, 194, 51, .45); color: #fff;
	box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8), 0 0 30px -10px rgba(255, 194, 51, .5);
	font-family: Montserrat, system-ui, sans-serif; opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease;
}
.dzcl-toast.in { opacity: 1; transform: none; }
.dzcl-toast-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dzcl-toast-tx strong { font-size: 15px; font-weight: 800; color: #ffc233; }
.dzcl-toast-tx small { font-size: 12px; color: #d8cfb8; }
.dzcl-toast-btn {
	flex: none; padding: 10px 14px; border-radius: 12px; text-decoration: none !important;
	background: #ffc233; color: #2a1d00 !important; font-weight: 800; font-size: 13px;
}
.dzcl-toast-x {
	flex: none; width: 32px; height: 32px; padding: 0 !important; border: 0 !important; border-radius: 50%; cursor: pointer;
	background: rgba(255, 255, 255, .08) !important; color: #fff !important; font-size: 20px; line-height: 32px;
}
/* Paiement en DC validé à la borne */
.dzcl-toast.is-dc { background: linear-gradient(180deg, #0c1626, #080e18); border-color: rgba(127, 184, 255, .5); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8), 0 0 30px -10px rgba(127, 184, 255, .55); }
.dzcl-toast.is-dc .dzcl-toast-tx strong { color: #9cc8ff; font-size: 17px; }
.dzcl-toast.is-dc .dzcl-toast-tx small { color: #c6d6ec; }
.dzcl-toast-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(127, 184, 255, .14); color: #9cc8ff; }
.dzcl-toast-ic svg { width: 20px; height: 20px; }

/* Solde qui change en direct / nouvelle ligne du journal */
@keyframes dzclBump { 0%, 100% { text-shadow: none; } 30% { text-shadow: 0 0 14px currentColor, 0 0 3px currentColor; } }
.dzcl-bump { animation: dzclBump 1.1s ease; }
@keyframes dzclNew { 0% { background-color: rgba(255, 194, 51, .22); } 100% { background-color: transparent; } }
.dz-log-item.dzcl-new { animation: dzclNew 2.4s ease-out; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .dzcl-toast { transition: none; } .dzcl-bump, .dz-log-item.dzcl-new { animation: none; } }

/* ---------- Appli : journal d'extractions (vrais achats) ---------- */
.dz-log-list .dzcl-more { display: none !important; }
.dz-log-list.dzcl-all .dzcl-more { display: flex !important; }
.dzcl-log-ic { display: grid; place-items: center; color: var(--dzm-gold, #ffc233); }
.dzcl-log-ic svg { width: 20px; height: 20px; }
.dzcl-log-dc .dzcl-log-ic { color: #7fb8ff; }
.dzcl-log-muted .dzcl-log-ic, .dzcl-log-muted .dzcl-log-val { color: var(--dzm-mute, #a6a6b4) !important; }
.dzcl-log-dc .dzcl-log-val { color: #7fb8ff; white-space: nowrap; }
.dzcl-log-val { white-space: nowrap; }
.dzcl-log-empty { padding: 14px 4px; color: var(--dzm-mute, #a6a6b4); font-size: 13px; line-height: 1.5; }

/* ---------- Mes cartes : téléphone / montre ---------- */
.dzcl-phone { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.dzcl-phone .dzcl-form { margin-top: 4px; }
.dzcl-phone-help { margin: 0 0 16px !important; }
.dzcl-phone-where { margin: -4px 0 16px !important; font-size: 12px !important; }

/* ---------- Ordinateur : « Ma carte liée » dans le tableau de bord (bandeau, menu, fenêtre) ---------- */
html.dzm-desk .dzd .dzcl-desk {
	display: flex; align-items: center; gap: 20px; padding: 18px 22px; position: relative; overflow: hidden;
	background: linear-gradient(115deg, rgba(255, 194, 51, .11), #0e0e14 58%); border: 1px solid rgba(255, 194, 51, .28);
}
html.dzm-desk .dzd .dzcl-desk.is-linked { background: linear-gradient(115deg, rgba(46, 230, 107, .09), #0e0e14 58%); border-color: rgba(46, 230, 107, .24); }
.dzcl-desk-ic { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: rgba(255, 194, 51, .12); color: #ffc233; }
.dzcl-desk.is-linked .dzcl-desk-ic { background: rgba(46, 230, 107, .12); color: #2ee66b; }
.dzcl-desk-ic svg { width: 25px; height: 25px; }
.dzcl-desk-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html.dzm-desk .dzd .dzcl-desk-tx .dzd-h3 { margin: 0; }
html.dzm-desk .dzd .dzcl-desk-tx .dzd-muted { max-width: 640px; }
.dzcl-desk-k { display: inline-flex; align-items: center; gap: 7px; }
html.dzm-desk .dzd .dzcl-desk.is-linked .dzcl-desk-k { color: #36d67a; }
.dzcl-desk-k i { width: 7px; height: 7px; border-radius: 50%; background: #36d67a; box-shadow: 0 0 0 3px rgba(54, 214, 122, .18); }
.dzcl-desk-cards { flex: none; display: flex; gap: 10px; }
.dzcl-cc {
	width: 128px; height: 78px; box-sizing: border-box; padding: 10px 12px; border-radius: 11px; display: flex; flex-direction: column; justify-content: space-between;
	background: linear-gradient(135deg, #2c2c38, #15151c 72%); border: 1px solid rgba(255, 255, 255, .13); color: #fff;
	box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .9); transform: rotate(-2deg);
}
.dzcl-cc + .dzcl-cc { transform: rotate(1.5deg); }
.dzcl-cc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dzcl-cc-top i { width: 22px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #f6dc86, #b48b2c); }
.dzcl-cc-top small { font: 700 10px "Space Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #d9d9e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dzcl-cc b { font: 700 12.5px "Space Mono", ui-monospace, monospace; letter-spacing: .06em; white-space: nowrap; }
.dzcl-desk-act { flex: none; display: flex; gap: 10px; }
html.dzm-desk .dzd .dzcl-desk-act .dzd-btn { padding: 0 20px; display: inline-flex; align-items: center; text-decoration: none; }
html.dzm-desk .dzd .dzcl-nav .dzcl-nav-ok { color: #36d67a; }
@media (max-width: 1180px) { .dzcl-desk-cards .dzcl-cc + .dzcl-cc { display: none; } }
@media (max-width: 1020px) { .dzcl-desk-cards { display: none; } }

.dzcl-dlg {
	position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; padding: 24px; box-sizing: border-box;
	background: rgba(3, 3, 6, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease;
}
.dzcl-dlg.in { opacity: 1; }
.dzcl-dlg-box {
	width: min(540px, 100%); height: min(880px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; outline: none;
	border-radius: 22px; background: #0b0b10; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .9);
	transform: translateY(14px) scale(.98); transition: transform .22s ease;
}
.dzcl-dlg.in .dzcl-dlg-box { transform: none; }
.dzcl-dlg-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.dzcl-dlg-head .dzcl-desk-ic { width: 40px; height: 40px; border-radius: 12px; }
.dzcl-dlg-head .dzcl-desk-ic svg { width: 21px; height: 21px; }
.dzcl-dlg-t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.dzcl-dlg-t small { font: 700 10.5px "Space Mono", ui-monospace, monospace; letter-spacing: .16em; color: #e9c46a; }
.dzcl-dlg-t b { font: 700 18px "Chakra Petch", Montserrat, system-ui, sans-serif; color: #fff; }
.dzcl-dlg-x {
	all: unset; box-sizing: border-box; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
	cursor: pointer; color: #fff; font: 400 24px/1 system-ui, sans-serif; background: rgba(255, 255, 255, .06); transition: background .15s ease;
}
.dzcl-dlg-x:hover, .dzcl-dlg-x:focus-visible { background: rgba(255, 255, 255, .13); }
.dzcl-dlg-body { position: relative; flex: 1 1 auto; min-height: 0; }
.dzcl-dlg-load { position: absolute; inset: 0; display: grid; place-items: center; color: #a6a6b4; font: 600 13px Montserrat, system-ui, sans-serif; }
.dzcl-dlg-fr { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0b0b10; opacity: 0; transition: opacity .2s ease; }
.dzcl-dlg.is-ready .dzcl-dlg-fr { opacity: 1; }
html.dzcl-lock, html.dzcl-lock body { overflow: hidden !important; }

/* ---------- Inscription : « Lier ma carte bancaire » (facultatif) dans le formulaire ---------- */
.dzcl-su {
	margin: 26px 0 24px; border-radius: 10px; overflow: hidden; text-align: left;
	background: linear-gradient(135deg, rgba(255, 0, 0, .11), rgba(0, 0, 0, .45) 62%); border: 1px solid rgba(190, 0, 0, .55);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.dzcl-su.is-on { border-color: #ff0000; box-shadow: 0 0 18px rgba(255, 0, 0, .35), inset 0 0 24px -12px rgba(255, 0, 0, .5); }
#dz-custom-register-form .dzcl-su .dzcl-su-head {
	display: flex !important; align-items: center; gap: 12px; margin: 0 !important; padding: 14px 16px; cursor: pointer;
	text-transform: none !important; letter-spacing: 0 !important; font-size: inherit !important; -webkit-tap-highlight-color: transparent;
}
#dz-custom-register-form .dzcl-su .dzcl-su-tg { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; margin: 0; }
.dzcl-su-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 0, 0, .14); color: #ff2a2a; box-shadow: inset 0 0 0 1px rgba(255, 0, 0, .35); }
.dzcl-su-ic svg { width: 22px; height: 22px; }
.dzcl-su-tg:focus-visible ~ .dzcl-su-sw { outline: 2px solid #ff0000; outline-offset: 3px; }
.dzcl-su-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dzcl-su-tx b { font: 800 12.5px/1.25 Montserrat, sans-serif; color: #fff; text-transform: uppercase; letter-spacing: .5px; }
.dzcl-su-tx b em { font-style: normal; font-weight: 600; font-size: 9.5px; color: rgba(255, 255, 255, .4); letter-spacing: .3px; white-space: nowrap; }
.dzcl-su-tx small { font: 500 12px/1.45 Montserrat, sans-serif; color: rgba(255, 255, 255, .62); }
.dzcl-su-sw { flex: none; position: relative; width: 44px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, .16); transition: background .2s ease; }
.dzcl-su-sw::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
	background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); transition: transform .2s ease;
}
.dzcl-su.is-on .dzcl-su-sw { background: #be0000; box-shadow: 0 0 12px rgba(255, 0, 0, .75); }
.dzcl-su.is-on .dzcl-su-sw::after { transform: translateX(20px); }
.dzcl-su-body { padding: 2px 16px 16px; }
#dz-custom-register-form .dzcl-su .dzcl-su-lab { margin: 0 0 10px; font: 700 11px/1.4 Montserrat, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: #fff; }
.dzcl-su-row { display: flex; align-items: center; gap: 10px; }
#dz-custom-register-form .dzcl-su .dzcl-su-row input {
	flex: 1 1 0; min-width: 0; width: auto !important; text-align: center; font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
	font-size: 17px !important; letter-spacing: .3em; padding: 0 0 0 .3em !important;
}
#dz-custom-register-form .dzcl-su .dzcl-su-row input.is-error { border-color: #ff3333 !important; box-shadow: 0 0 14px rgba(255, 51, 51, .4) !important; }
.dzcl-su-dots { flex: none; font: 700 14px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; color: rgba(255, 255, 255, .35); }
#dz-custom-register-form .dzcl-su .dzcl-su-note { margin: 12px 0 0; font: 500 11.5px/1.55 Montserrat, sans-serif; color: rgba(255, 255, 255, .55); text-transform: none; }
.dzcl-su-note b { color: #ff3b3b; font-weight: 700; }
.dzcl-su-note a { color: rgba(255, 255, 255, .8); text-decoration: underline; }
#dz-custom-register-form .dzcl-su .dzcl-su-err { margin: 12px 0 0; font: 700 12px/1.45 Montserrat, sans-serif; color: #ff5a5a; }
@media (max-width: 480px) {
	#dz-custom-register-form .dzcl-su .dzcl-su-head {
		display: grid !important; grid-template-columns: 36px 1fr 44px; grid-template-areas: "ic t sw" "d d d"; align-items: center; gap: 10px 12px; padding: 13px 13px 14px;
	}
	.dzcl-su-ic { grid-area: ic; width: 36px; height: 36px; }
	.dzcl-su-tx { display: contents; }
	.dzcl-su-tx b { grid-area: t; }
	.dzcl-su-tx small { grid-area: d; }
	.dzcl-su-sw { grid-area: sw; }
	.dzcl-su-body { padding: 0 13px 14px; }
	.dzcl-su-row { gap: 8px; }
	.dzcl-su-dots { font-size: 10px; letter-spacing: 0; }
}