/**
 * Pack VWEB - Styles de la page de connexion WordPress
 * v1.4.0 : logo corrigé, design premium, infobulle Espace client
 */

/* ==========================================================================
   Base : arrière-plan doux, typographie Jost
   ========================================================================== */

body.login,
body.login label,
body.login input,
body.login .button,
body.login p,
body.login a {
	font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.login {
	background: #f4f5f7 !important;
}

body.login #login {
	padding-top: 5% !important;
	width: 340px !important;
}

/* ==========================================================================
   Logo : container agrandi + background-size: contain
   → l'image 219×88 s'affiche ENTIÈRE, centrée, nette (taille native)
   ========================================================================== */

body.login #login h1 {
	padding-bottom: 20px !important;
	margin-bottom: 0 !important;
	text-align: center;
}

body.login #login h1 a {
	background-image: var(--pack-vweb-login-logo) !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;

	/* Nouveau logo VWEB 2026 (source WebP 608×270 px, ratio 2.252).
	   Affichage à 110×49 → downscaling 5.5× = ultra-net même sur Retina 2×
	   (car 110×2 = 220 device pixels, largement < 608 source). */
	width: 110px !important;
	height: 49px !important;
	max-width: 100% !important;
	margin: 0 auto 10px !important;
	padding: 0 !important;

	text-indent: -9999px;
	overflow: hidden;
	display: block;
}

/* ==========================================================================
   Formulaire : carte moderne avec ombre douce et coins arrondis
   ========================================================================== */

body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
	border: 1px solid rgba(0, 0, 0, 0.04) !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
	padding: 32px 28px 28px !important;
	background: #fff !important;
	margin-top: 0 !important;
}

/* Labels des champs */
body.login label {
	color: #1d2327 !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	margin-bottom: 8px !important;
	display: block;
}

body.login .forgetmenot label {
	color: #6d6d78 !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	margin-bottom: 0 !important;
	display: inline-block;
}

/* Champs de saisie : plus arrondis, transitions douces, look premium */
body.login .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	border: 1.5px solid #e5e5ea !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	font-family: "Jost", sans-serif !important;
	background: #fafafc !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
	box-shadow: none !important;
	line-height: 1.4 !important;
	height: auto !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

body.login .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: var(--pack-vweb-accent) !important;
	box-shadow: 0 0 0 3px rgba(240, 25, 93, 0.12) !important;
	background: #fff !important;
	outline: none !important;
}

/* Œil pour voir/masquer le mot de passe : intégré au champ */
body.login .password-input-wrapper {
	position: relative;
}

body.login .password-input-wrapper button.wp-hide-pw {
	border-radius: 0 8px 8px 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.login .password-input-wrapper button.wp-hide-pw:focus {
	box-shadow: none !important;
}

body.login .password-input-wrapper button.wp-hide-pw .dashicons {
	color: var(--pack-vweb-accent) !important;
}

/* ==========================================================================
   Bouton "Se connecter" : dégradé rose VWEB avec ombre au hover
   ========================================================================== */

body.login .wp-core-ui .button-primary,
body.login #wp-submit {
	background: linear-gradient(135deg, var(--pack-vweb-accent) 0%, var(--pack-vweb-accent-hover) 100%) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 11px 26px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	font-family: "Jost", sans-serif !important;
	text-shadow: none !important;
	box-shadow: 0 4px 14px rgba(240, 25, 93, 0.28) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
	height: auto !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
	color: #fff !important;
}

body.login .wp-core-ui .button-primary:hover,
body.login #wp-submit:hover,
body.login .wp-core-ui .button-primary:focus,
body.login #wp-submit:focus {
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 22px rgba(240, 25, 93, 0.4) !important;
	background: linear-gradient(135deg, var(--pack-vweb-accent-hover) 0%, var(--pack-vweb-accent) 100%) !important;
	color: #fff !important;
}

body.login .wp-core-ui .button-primary:active,
body.login #wp-submit:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 8px rgba(240, 25, 93, 0.3) !important;
}

/* ==========================================================================
   Liens sous le formulaire (Mot de passe oublié, Retour au site)
   ========================================================================== */

body.login #nav,
body.login #backtoblog {
	padding: 12px 0 !important;
	text-align: center !important;
}

body.login #nav a,
body.login #backtoblog a {
	color: #50575e !important;
	transition: color 0.2s ease !important;
	font-size: 14px !important;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
	color: var(--pack-vweb-accent) !important;
}

/* Messages (déconnexion, erreurs) : bordure rose */
body.login .message,
body.login .notice,
body.login #login_error {
	border-left-color: var(--pack-vweb-accent) !important;
	border-radius: 4px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
	padding: 14px 16px !important;
}

/* ==========================================================================
   Infobulle "Espace client" fixée en bas à droite
   ========================================================================== */

.pack-vweb-espace-client-tooltip {
	position: fixed;
	bottom: 24px;
	right: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 20px;
	background: linear-gradient(135deg, var(--pack-vweb-accent) 0%, var(--pack-vweb-accent-hover) 100%);
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	font-family: "Jost", sans-serif;
	box-shadow: 0 8px 24px rgba(240, 25, 93, 0.35);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	z-index: 999999;
}

.pack-vweb-tooltip-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	flex-shrink: 0;
	animation: pack-vweb-tooltip-blink 2s ease-in-out infinite;
}

@keyframes pack-vweb-tooltip-blink {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.6; transform: scale(0.75); }
}

.pack-vweb-tooltip-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
	margin-left: 2px;
}

.pack-vweb-espace-client-tooltip:hover,
.pack-vweb-espace-client-tooltip:focus {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(240, 25, 93, 0.5);
	color: #fff !important;
}

.pack-vweb-espace-client-tooltip:hover .pack-vweb-tooltip-arrow,
.pack-vweb-espace-client-tooltip:focus .pack-vweb-tooltip-arrow {
	transform: translateX(4px);
}

/* Infobulle réduite sur mobile pour ne pas gêner */
@media screen and (max-width: 600px) {
	.pack-vweb-espace-client-tooltip {
		bottom: 14px;
		right: 14px;
		padding: 9px 14px;
		font-size: 12px;
		gap: 6px;
	}
	.pack-vweb-tooltip-dot {
		width: 6px;
		height: 6px;
	}
}