/* =====================================================================
   Modales connexion / ouverture / fermeture de caisse (Option B 25/07/2026)
   Porté de CCTPROD-BO (dc6c688..bc3e9c5). Seul le bloc :root diffère entre
   les BO Kwanza (CAMRAIL = rouge marque, motif voie ferrée) : garder les
   sélecteurs identiques pour des portages propres.
   Le vert caisse #14a085 est commun à tous les BO (couleur d'app =
   utilisateur, vert = circuit caisse).
   ===================================================================== */
:root {
	--kzaAuthBrand: #c8102e;
	--kzaAuthBrandDeep: #9c0d24;
	--kzaAuthBtnShadow: rgba(200, 16, 46, .35);
	--kzaAuthLogo: url("../img/logo-hd.png");
	--kzaAuthBg: #fdf7f5;
	--kzaAuthInk: #2b2022;
	--kzaAuthMuted: #9a8087;
	--kzaAuthLine: #ddc6cb;
	--kzaAuthCard: #ffffff;
	--kzaAuthMotif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220' viewBox='0 0 320 220'%3E%3Cpath d='M10 240 C90 150 210 115 335 35' stroke='%23f2ddd8' stroke-width='36' fill='none' stroke-dasharray='6 16'/%3E%3Cpath d='M5 233 C85 143 205 108 330 28' stroke='%23e9cec8' stroke-width='4' fill='none'/%3E%3Cpath d='M15 247 C95 157 215 122 340 42' stroke='%23e9cec8' stroke-width='4' fill='none'/%3E%3C/svg%3E");
	--kzaAuthCaisse: #14a085;
	--kzaAuthCaisseDeep: #0f8a72;
	--kzaAuthCaisseLight: #17b394;
}

body.kzaAuth {
	background: var(--kzaAuthBg);
	color: var(--kzaAuthInk);
	min-height: 100vh;
	position: relative;
}
body.kzaAuth::after {
	content: "";
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: var(--kzaAuthMotif) right -40px bottom -50px / 300px auto no-repeat;
	opacity: .8;
	pointer-events: none;
	z-index: 0;
}
body.kzaAuth > * { position: relative; z-index: 1; }

.kzaAuthBand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 22px;
	background: var(--kzaAuthCard);
	border-bottom: 3px solid var(--kzaAuthBrand);
}
body.kzaCaisse .kzaAuthBand { border-bottom-color: var(--kzaAuthCaisse); }
.kzaAuthLogo {
	width: 132px;
	height: 36px;
	flex: none;
	background: var(--kzaAuthLogo) left center / contain no-repeat;
}
.kzaAuthTitles { text-align: right; line-height: 1.3; }
.kzaAuthTitles .t1 { display: block; font-weight: 700; font-size: 1rem; color: var(--kzaAuthInk); }
.kzaAuthTitles .t2 { display: block; font-size: .68rem; color: var(--kzaAuthMuted); text-transform: uppercase; letter-spacing: .1em; }

/* Aère les formulaires de connexion sous le bandeau (retour recette 25/07) */
body.kzaAuth #sgiDiv,
body.kzaAuth #sgoDiv { margin-top: 2.6rem !important; }

body.kzaAuth fieldset { border: 0 !important; }
body.kzaAuth legend { display: none; }

body.kzaAuth .form-control {
	border: 0;
	border-bottom: 2px solid var(--kzaAuthLine);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-weight: 600;
	letter-spacing: .04em;
	/* CAMRAIL : reprend la main sur .blueFont des champs historiques */
	color: var(--kzaAuthInk);
}
body.kzaAuth .form-control:focus {
	border-bottom-color: var(--kzaAuthBrand);
	box-shadow: none;
	background: transparent;
}
body.kzaCaisse .form-control:focus { border-bottom-color: var(--kzaAuthCaisse); }
body.kzaAuth .control-label {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
	color: var(--kzaAuthMuted);
}

body.kzaAuth .btn-primary,
body.kzaAuth .btn-danger,
body.kzaAuth .kzaBtnMain {
	border: 0;
	border-radius: 999px;
	padding: .6rem 1.8rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(180deg, var(--kzaAuthBrand), var(--kzaAuthBrandDeep));
	box-shadow: 0 4px 12px var(--kzaAuthBtnShadow);
}
body.kzaAuth .btn-primary:hover, body.kzaAuth .btn-primary:focus,
body.kzaAuth .btn-danger:hover, body.kzaAuth .btn-danger:focus,
body.kzaAuth .kzaBtnMain:hover, body.kzaAuth .kzaBtnMain:focus {
	background: var(--kzaAuthBrandDeep);
	color: #fff;
}
body.kzaCaisse .btn-danger,
body.kzaCaisse .kzaBtnMain {
	background: linear-gradient(180deg, var(--kzaAuthCaisseLight), var(--kzaAuthCaisseDeep));
	box-shadow: 0 4px 12px rgba(20, 160, 133, .35);
}
body.kzaCaisse .btn-danger:hover, body.kzaCaisse .btn-danger:focus,
body.kzaCaisse .kzaBtnMain:hover, body.kzaCaisse .kzaBtnMain:focus {
	background: var(--kzaAuthCaisseDeep);
	color: #fff;
}
.kzaBtnMain,
.kzaBtnGhost {
	font-size: 1rem;
	cursor: pointer;
	/* CAMRAIL : formstyle.css fixe input{height:24px}, ce qui rogne les pilules */
	height: auto;
	line-height: 1.2;
}
.kzaBtnGhost {
	border: 1px solid var(--kzaAuthMuted);
	border-radius: 999px;
	padding: .7rem 2.4rem;
	font-weight: 700;
	color: var(--kzaAuthInk);
	background: var(--kzaAuthCard);
}
.kzaBtnGhost:hover { border-color: var(--kzaAuthInk); background: var(--kzaAuthCard); color: var(--kzaAuthInk); }
body.kzaAuth a { color: var(--kzaAuthBrandDeep); }

.kzaState {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--kzaAuthCard);
	border: 1px solid var(--kzaAuthLine);
	border-radius: 10px;
	/* recette CAMRAIL 25/07 : texte trop serré -> carte plus aérée */
	padding: 18px 22px;
	margin: 0 0 22px;
	line-height: 1.5;
	text-align: left;
}
.kzaState .kzaStateIco {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #fff;
}
.kzaStateOk .kzaStateIco { background: var(--kzaAuthCaisse); }
.kzaStateIdle .kzaStateIco { background: #a9a294; }
.kzaState .kzaStateTt { display: block; font-weight: 700; }
.kzaState .kzaStateDd { display: block; font-size: .85rem; color: var(--kzaAuthMuted); margin-top: 3px; }

dl.kzaRecap {
	display: grid;
	grid-template-columns: max-content 1fr;
	/* recette CAMRAIL 25/07 : interligne du récapitulatif élargi */
	gap: 12px 26px;
	line-height: 1.4;
	margin: 0 0 22px;
	text-align: left;
}
dl.kzaRecap dt { color: var(--kzaAuthMuted); font-weight: 400; }
dl.kzaRecap dd { margin: 0; font-weight: 700; }

.kzaModalActions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kzaAuthPad { padding: 2.4rem 26px 12px; }

/* Les gestionnaires de mots de passe (KeePassXC-Browser...) posent un fond
   violet en STYLE INLINE sur les champs remplis : seul un !important côté
   feuille de style reprend la main. */
body.kzaAuth input.form-control,
body.kzaAuth input.form-control:focus {
	background-color: transparent !important;
}

/* Chrome/Edge teintent les champs auto-remplis (violet/bleu) : on neutralise. */
body.kzaAuth input:-webkit-autofill,
body.kzaAuth input:-webkit-autofill:hover,
body.kzaAuth input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--kzaAuthBg) inset;
	-webkit-text-fill-color: var(--kzaAuthInk);
	caret-color: var(--kzaAuthInk);
	transition: background-color 99999s ease-out;
}