/* Panneau latéral Connexion / Inscription (js/auth_panel.js)
   Utilisé sur la home (Bootstrap 2) et dans jk.php (MDL) : tous les styles sont préfixés
   et redéfinissent explicitement ce que ces frameworks modifient (inputs, boutons, liens). */

.jk-auth-panel {
	--jk-accent: #3f51b5;
	--jk-accent-hover: #303f9f;
	--jk-texte: #1f2430;
	--jk-texte-2: #5f6675;
	--jk-bord: #d5d9e2;
	--jk-fond-2: #f4f6fa;
	--jk-erreur: #c62828;
	--jk-erreur-fond: #fdecea;
	--jk-succes: #2e7d32;
	--jk-succes-fond: #e8f5e9;
}

html.jk-auth-lock, html.jk-auth-lock body { overflow: hidden; }

.jk-auth-overlay {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 10040;
	background: rgba(15, 18, 30, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s;
}
.jk-auth-overlay.is-open { opacity: 1; visibility: visible; }

.jk-auth-panel {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	z-index: 10050;
	display: flex;
	flex-direction: column;
	width: 440px;
	max-width: 100%;
	background: #fff;
	color: var(--jk-texte);
	font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	text-align: left;
	box-shadow: -8px 0 32px rgba(0, 0, 0, .2);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility .32s;
}
.jk-auth-panel.is-open { transform: translateX(0); visibility: visible; }
.jk-auth-panel *, .jk-auth-panel *::before, .jk-auth-panel *::after { box-sizing: border-box; }

.jk-auth-loading { margin: auto; padding: 24px; color: var(--jk-texte-2); text-align: center; }
.jk-auth-loading a { color: var(--jk-accent); }

/* En-tête : bouton de fermeture */
.jk-auth-head {
	display: flex;
	justify-content: flex-end;
	padding: 12px 12px 0;
}
.jk-auth-panel .jk-auth-close {
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--jk-texte-2);
	font-weight: 400; font-size: 26px; line-height: 36px;
	font-family: inherit;
	opacity: 1;
	text-shadow: none;
	cursor: pointer;
}
.jk-auth-panel .jk-auth-close:hover { background: var(--jk-fond-2); color: var(--jk-texte); }

/* Corps */
.jk-auth-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 24px 32px; }

.jk-auth-form { display: none; margin: 0; }
.jk-auth-form.is-active { display: block; animation: jk-auth-fondu .25s ease; }
@keyframes jk-auth-fondu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.jk-auth-panel .jk-auth-title { margin: 0 0 4px; padding: 0; color: var(--jk-texte); font-weight: 700; font-size: 24px; line-height: 1.25; font-family: inherit; letter-spacing: -.01em; text-shadow: none; }
.jk-auth-panel .jk-auth-sub { margin: 0 0 20px; color: var(--jk-texte-2); font-size: 14px; }

.jk-auth-msg { display: none; margin-bottom: 16px; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.jk-auth-msg.is-error { display: block; background: var(--jk-erreur-fond); color: var(--jk-erreur); }
.jk-auth-msg.is-success { display: block; background: var(--jk-succes-fond); color: var(--jk-succes); }

.jk-auth-panel .jk-auth-label { display: block; margin: 16px 0 6px; padding: 0; color: var(--jk-texte); font-size: 14px; font-weight: 600; line-height: 1.3; }
.jk-auth-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.jk-auth-label-row .jk-auth-label { margin-bottom: 6px; }

.jk-auth-panel .jk-auth-input {
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--jk-bord);
	border-radius: 8px;
	background: #fff;
	color: var(--jk-texte);
	font-size: 15px; line-height: normal;
	font-family: inherit;
	box-shadow: none;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.jk-auth-panel .jk-auth-input:focus { border-color: var(--jk-accent); box-shadow: 0 0 0 3px rgba(63, 81, 181, .18); }
.jk-auth-panel .jk-auth-code { font-size: 26px; font-weight: 700; letter-spacing: .4em; text-align: center; }
.jk-auth-panel .jk-auth-input.is-invalid { border-color: var(--jk-erreur); box-shadow: 0 0 0 3px rgba(198, 40, 40, .12); }

.jk-auth-hint { display: block; margin-top: 4px; color: var(--jk-texte-2); font-size: 12px; }

.jk-auth-pwd { position: relative; }
.jk-auth-pwd .jk-auth-input { padding-right: 84px; }
.jk-auth-panel .jk-auth-eye {
	position: absolute;
	top: 6px; right: 6px;
	height: 32px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--jk-accent);
	font-weight: 600; font-size: 13px; line-height: 32px;
	font-family: inherit;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}
.jk-auth-panel .jk-auth-eye:hover { background: var(--jk-fond-2); }

.jk-auth-panel .jk-auth-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 20px 0 0;
	padding: 8px;
	border-radius: 8px;
	color: var(--jk-texte);
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}
.jk-auth-panel .jk-auth-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--jk-accent); }
.jk-auth-panel .jk-auth-check.is-invalid { background: var(--jk-erreur-fond); }

.jk-auth-panel .jk-auth-submit {
	display: block;
	width: 100%;
	height: 46px;
	margin: 24px 0 0;
	padding: 0 16px;
	border: 0;
	border-radius: 8px;
	background: var(--jk-accent);
	color: #fff;
	font-weight: 600; font-size: 15px; line-height: 46px;
	font-family: inherit;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background .15s;
}
.jk-auth-panel .jk-auth-submit:hover { background: var(--jk-accent-hover); }
.jk-auth-panel .jk-auth-submit:disabled { opacity: .65; cursor: default; }

.jk-auth-panel .jk-auth-link { color: var(--jk-accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.jk-auth-panel .jk-auth-link:hover { text-decoration: underline; }
.jk-auth-switch { margin: 20px 0 0; color: var(--jk-texte-2); font-size: 14px; text-align: center; }
.jk-auth-switch .jk-auth-link { font-size: 14px; }
.jk-auth-check .jk-auth-link { font-size: inherit; }

/* Champ piège : hors écran plutôt que display:none, que certains robots détectent */
.jk-auth-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 480px) {
	.jk-auth-body { padding: 20px 16px 28px; }
}