/* Page de connexion intranet — couleurs des 3 structures (vert AOC, bleu APP, orange GOC) */
:root
{
	--lg-vert: #138a36;
	--lg-vert-fonce: #0f6e2b;
	--lg-bleu: #0b6bcb;
	--lg-orange: #e08a12;
	--lg-texte: #1d2b22;
	--lg-texte-2: #5b6b61;
	--lg-bord: #d5ddd8;
}

html, body
{
	background: #eef4f0;
}

.login_content
{
	min-height: 100%;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 24px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 18px;
	font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	color: var(--lg-texte);
	background:
		radial-gradient(ellipse 55% 45% at 8% 12%, rgba(19, 138, 54, .22), transparent 70%),
		radial-gradient(ellipse 50% 45% at 92% 18%, rgba(11, 107, 203, .18), transparent 70%),
		radial-gradient(ellipse 60% 50% at 70% 100%, rgba(224, 138, 18, .20), transparent 70%),
		linear-gradient(160deg, #f4f9f5 0%, #eaf2ee 100%);
}

.login_cadre
{
	position: relative;
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
	padding: 34px 36px 30px;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(16, 40, 24, .06), 0 18px 48px -12px rgba(16, 40, 24, .22);
	overflow: hidden;
	animation: login_apparition .45s ease both;
}

.login_ruban
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--lg-vert), var(--lg-bleu) 50%, var(--lg-orange));
}

.login_logo
{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid #e6ece8;
}

.login_logo img
{
	height: 26px;
	width: auto;
	min-width: 0;
	max-width: 33%;
	object-fit: contain;
}

.login_titre
{
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--lg-texte);
	display: flex;
	align-items: center;
	gap: 10px;
}

.login_points
{
	display: inline-flex;
	gap: 5px;
	margin-top: 4px;
}

.login_points i
{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lg-vert);
}
.login_points i:nth-child(2) { background: var(--lg-bleu); }
.login_points i:nth-child(3) { background: var(--lg-orange); }

.login_soustitre
{
	margin: 6px 0 22px;
	font-size: 14px;
	color: var(--lg-texte-2);
}

.login_erreur
{
	margin: -6px 0 18px;
	padding: 10px 12px 10px 38px;
	font-size: 13.5px;
	color: #9b1c1c;
	background: #fdecec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c53030' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") no-repeat 12px center / 18px;
	border: 1px solid #f5c2c2;
	border-radius: 10px;
	animation: login_secousse .4s ease;
}

.login_champ
{
	display: block;
	margin-bottom: 16px;
}

.login_libelle
{
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lg-texte);
}

.login_saisie
{
	position: relative;
	display: block;
}

/* Icône devant le champ */
.login_saisie::before
{
	content: "";
	position: absolute;
	left: 13px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background-color: #8a9a90;
	-webkit-mask: var(--lg-icone) no-repeat center / contain;
	mask: var(--lg-icone) no-repeat center / contain;
	pointer-events: none;
	transition: background-color .15s ease;
}
.login_saisie_util { --lg-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
.login_saisie_mdp { --lg-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.login_saisie:focus-within::before { background-color: var(--lg-vert); }

.login_champ input
{
	width: 100%;
	height: 46px;
	box-sizing: border-box;
	padding: 0 14px 0 42px;
	font-family: inherit;
	font-size: 15px;
	color: var(--lg-texte);
	background: #fff;
	border: 1px solid var(--lg-bord);
	border-radius: 11px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.login_saisie_mdp input { padding-right: 46px; }

.login_champ input::placeholder { color: #a7b3ab; }

.login_champ input:hover { border-color: #b9c6be; }

.login_champ input:focus
{
	border-color: var(--lg-vert);
	box-shadow: 0 0 0 4px rgba(19, 138, 54, .14);
}

/* Remplissage automatique du navigateur : pas de fond bleu */
.login_champ input:-webkit-autofill
{
	-webkit-box-shadow: 0 0 0 40px #fff inset;
	-webkit-text-fill-color: var(--lg-texte);
}
.login_champ input:-webkit-autofill:focus
{
	-webkit-box-shadow: 0 0 0 40px #fff inset, 0 0 0 4px rgba(19, 138, 54, .14);
}

/* Bouton œil (afficher / masquer le mot de passe) */
.login_oeil
{
	position: absolute;
	right: 6px;
	top: 50%;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
}
.login_oeil::after
{
	content: "";
	position: absolute;
	inset: 8px;
	background-color: #8a9a90;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.login_oeil.visible::after
{
	background-color: var(--lg-vert);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7c2 0 3.7.7 5.1 1.6M22 12s-3.6 7-10 7c-2 0-3.7-.7-5.1-1.6'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7c2 0 3.7.7 5.1 1.6M22 12s-3.6 7-10 7c-2 0-3.7-.7-5.1-1.6'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}
.login_oeil:hover { background: #eef4f0; }
.login_oeil:focus-visible { outline: 2px solid var(--lg-vert); outline-offset: 1px; }

.login_bouton
{
	padding-top: 8px;
}

.login_bouton button
{
	position: relative;
	width: 100%;
	height: 48px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: .01em;
	color: #fff;
	background: linear-gradient(180deg, #19a043, var(--lg-vert));
	border: 0;
	border-radius: 11px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 16px -6px rgba(19, 138, 54, .6);
	cursor: pointer;
	transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.login_bouton button:hover
{
	filter: brightness(1.06);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 22px -8px rgba(19, 138, 54, .7);
}
.login_bouton button:active { transform: translateY(1px); background: var(--lg-vert-fonce); }
.login_bouton button:focus-visible { outline: 3px solid rgba(19, 138, 54, .35); outline-offset: 2px; }

/* Pendant l'envoi : petit indicateur de chargement */
form.envoi .login_bouton button
{
	color: transparent;
	pointer-events: none;
}
form.envoi .login_bouton button::after
{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2.5px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: login_rotation .7s linear infinite;
}

.login_pied
{
	font-size: 12px;
	letter-spacing: .06em;
	color: #6f7f75;
}

@keyframes login_apparition
{
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
@keyframes login_secousse
{
	0%, 100% { transform: none; }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}
@keyframes login_rotation
{
	to { transform: rotate(360deg); }
}

@media (max-width: 480px)
{
	.login_content { justify-content: flex-start; padding-top: 32px; }
	.login_cadre { padding: 28px 22px 24px; border-radius: 16px; }
	.login_logo { gap: 10px; }
	.login_logo img { height: 20px; }
	.login_titre { font-size: 23px; }
	.login_champ input { font-size: 16px; } /* évite le zoom auto sur iPhone */
}

@media (prefers-reduced-motion: reduce)
{
	.login_cadre, .login_erreur { animation: none; }
}
.login_erreur[hidden] { display: none; }