/* ===========================================================
   ESCEP QR - Application publique (front-end)
   =========================================================== */
.escep-qr-frontend {
	--escep-blue: #1863D8;
	--escep-blue-dark: #0F4CB0;
	--escep-yellow: #F5D400;
	--escep-red: #E8171B;
	--escep-line: #e6eaf2;
	--escep-ink: #10203a;
	--escep-muted: #6b7a90;
	max-width: 960px; margin: 0 auto; color: var(--escep-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.escep-qr-frontend * { box-sizing: border-box; }

.escep-qr-topbar {
	background: linear-gradient(120deg, var(--escep-blue-dark), var(--escep-blue));
	border-radius: 16px; padding: 22px 26px; color: #fff; margin-bottom: 22px;
	display: flex; align-items: center; gap: 16px;
}
.escep-qr-topbar img { height: 46px; background:#fff; padding:6px 10px; border-radius:10px; }
.escep-qr-topbar h2 { margin: 0; color: #fff; font-size: 22px; font-weight: 800; }
.escep-qr-topbar p { margin: 2px 0 0; opacity: .9; font-size: 13px; }

.escep-qr-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
@media (max-width: 780px) { .escep-qr-grid { grid-template-columns: 1fr; } }

.escep-qr-panel { background: #fff; border: 1px solid var(--escep-line); border-radius: 16px; padding: 22px; }
.escep-qr-panel h3 { margin-top: 0; font-size: 16px; }

.escep-qr-frontend .field { margin-bottom: 15px; }
.escep-qr-frontend .field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 13px; }
.escep-qr-frontend .field input[type=text], .escep-qr-frontend .field input[type=url], .escep-qr-frontend .field select {
	width: 100%; padding: 10px 12px; border: 1px solid var(--escep-line); border-radius: 10px; font-size: 14px;
}
.escep-qr-frontend .row { display: flex; gap: 14px; }
.escep-qr-frontend .row .field { flex: 1; }
.escep-qr-frontend .swatches { display: flex; gap: 8px; margin-top: 8px; }
.escep-qr-frontend .swatch { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; box-shadow: 0 0 0 1px var(--escep-line); border: 2px solid #fff; }

.escep-qr-previewbox { text-align: center; }
#eqa_preview canvas { max-width: 280px; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 22px rgba(16,32,58,.12); background:#fff; }
.escep-qr-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

.escep-qr-frontend .ebtn {
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none;
	background: var(--escep-blue); color: #fff; border: none; border-radius: 10px; padding: 11px 18px;
	font-weight: 700; font-size: 14px; transition: all .15s ease;
}
.escep-qr-frontend .ebtn:hover { background: var(--escep-blue-dark); color:#fff; }
.escep-qr-frontend .ebtn.yellow { background: var(--escep-yellow); color: #23303f; }
.escep-qr-frontend .ebtn.ghost { background:#fff; color: var(--escep-blue); border: 1px solid var(--escep-blue); }

.escep-qr-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* ---- Connexion ---- */
.escep-qr-login-wrap {
	--escep-blue: #1863D8; --escep-blue-dark: #0F4CB0; --escep-yellow: #F5D400; --escep-red: #E8171B;
	display: flex; justify-content: center; padding: 30px 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.escep-qr-login-card {
	background: #fff; border: 1px solid #e6eaf2; border-radius: 18px; padding: 34px 30px;
	max-width: 400px; width: 100%; text-align: center;
	box-shadow: 0 18px 44px rgba(16,32,58,.12);
	border-top: 6px solid var(--escep-blue);
}
.escep-qr-login-logo { max-height: 60px; margin-bottom: 14px; }
.escep-qr-login-card h2 { margin: 0 0 4px; font-size: 20px; color: #10203a; }
.escep-qr-login-sub { color: #6b7a90; font-size: 13px; margin: 0 0 18px; }
.escep-qr-login-card .login-username, .escep-qr-login-card .login-password { text-align: left; margin-bottom: 12px; }
.escep-qr-login-card label { display:block; font-weight:700; font-size:13px; margin-bottom:5px; color:#10203a; }
.escep-qr-login-card input[type=text], .escep-qr-login-card input[type=password] {
	width: 100%; padding: 11px 12px; border: 1px solid #e6eaf2; border-radius: 10px; font-size: 14px;
}
.escep-qr-login-card .login-remember { text-align: left; font-size: 13px; margin: 6px 0 14px; }
.escep-qr-login-card .button, .escep-qr-login-card #wp-submit {
	width: 100%; background: var(--escep-blue) !important; border: none !important; color: #fff !important;
	border-radius: 10px !important; padding: 12px !important; height: auto !important;
	font-weight: 700 !important; font-size: 15px !important; cursor: pointer; box-shadow: none !important;
	text-shadow: none !important;
}
.escep-qr-login-card .button:hover, .escep-qr-login-card #wp-submit:hover { background: var(--escep-blue-dark) !important; }
.escep-qr-login-links { margin-top: 14px; font-size: 13px; }
.escep-qr-login-links a { color: var(--escep-blue); text-decoration: none; }

/* ---- Affichage QR isolé [escep_qr] ---- */
.escep-qr-single { text-align: center; display: inline-block; padding: 12px; }
.escep-qr-single canvas { max-width: 100%; height: auto; border-radius: 10px; }
.escep-qr-single-title { margin-top: 8px; font-weight: 700; color: #10203a; font-size: 14px; }

/* Sélecteur de forme (front) */
.escep-qr-frontend .escep-shapes { display: flex; gap: 10px; flex-wrap: wrap; }
.escep-qr-frontend .escep-shape-btn {
	display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
	background: #fff; border: 2px solid var(--escep-line); border-radius: 12px;
	padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--escep-ink); min-width: 76px;
}
.escep-qr-frontend .escep-shape-btn.active { border-color: var(--escep-blue); background: #eef3fd; }
.escep-qr-frontend .escep-shape-icon { width: 28px; height: 28px; background-repeat: no-repeat; }
.escep-qr-frontend .escep-shape-square  { background: repeating-linear-gradient(0deg, var(--escep-blue) 0 8px, #fff 8px 11px), repeating-linear-gradient(90deg, var(--escep-blue) 0 8px, #fff 8px 11px); background-blend-mode: multiply; }
.escep-qr-frontend .escep-shape-dots    { background-image: radial-gradient(var(--escep-blue) 42%, transparent 46%); background-size: 10px 10px; }
.escep-qr-frontend .escep-shape-rounded { background-image: radial-gradient(circle at center, var(--escep-blue) 46%, transparent 50%); background-size: 10px 10px; border-radius: 3px; }