/* Craft Compte — page de connexion / inscription plein écran
 * Thème clair (blanc / bleu / noir) repris des couleurs par défaut du site
 * (mêmes valeurs que Craft_Mon_Compte::$defaults : primary #3b5bdb). */

:root {
	--craft-auth-bg: #ffffff;
	--craft-auth-text: #12142b;
	--craft-auth-text-muted: #6b7280;
	--craft-auth-primary: #3b5bdb;
	--craft-auth-primary-dark: #2b46b8;
	--craft-auth-primary-light: #eef1fd;
	--craft-auth-border: #e2e5ee;
	--craft-auth-field-bg: #ffffff;
}

html, body.craft-auth-page {
	margin: 0 !important;
	padding: 0 !important;
	height: 100%;
	background: var(--craft-auth-bg);
}

.craft-auth-page {
	overflow: hidden; /* page "app-like" : jamais de défilement vertical sur ordinateur */
}

/* La page de connexion n'affiche jamais la barre d'admin WordPress : elle décalait
   le contenu de sa hauteur (~32px), ce qui provoquait un léger scroll et empêchait
   l'image de droite d'atteindre le bas de l'écran. */
body.craft-auth-page.admin-bar {
	margin-top: 0 !important;
}
body.craft-auth-page #wpadminbar {
	display: none !important;
}

.craft-auth-page *,
.craft-auth-page *::before,
.craft-auth-page *::after {
	box-sizing: border-box;
}

.craft-auth-wrap {
	display: flex;
	height: 100vh;
	width: 100%;
	background: var(--craft-auth-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	overflow: hidden;
}

.craft-auth-left {
	flex: 0 0 50%;
	max-width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 32px;
	height: 100%;
	overflow-y: auto; /* si le contenu (ex: inscription) dépasse la hauteur d'écran, on
	                     défile seulement dans la colonne du formulaire, jamais la page entière */
}

.craft-auth-form-box {
	width: 100%;
	max-width: 360px; /* réduit de 420px : cadre plus étroit, toujours centré */
}

.craft-auth-logo {
	margin-bottom: 32px;
}
.craft-auth-logo a {
	display: block;
	text-decoration: none;
	line-height: 0; /* évite un espace fantôme sous l'image lié */
}
.craft-auth-logo img {
	max-height: 80px; /* x2 par rapport à la taille d'origine (40px) */
}
.craft-auth-logo span {
	font-size: 44px; /* x2 par rapport à la taille d'origine (22px) */
	font-weight: 700;
	color: var(--craft-auth-text);
	line-height: normal;
}

/* Sur ordinateur, le logo est détaché de la carte de connexion et épinglé
   tout en haut à gauche de l'écran, comme sur shop.carry1st.com. */
@media (min-width: 900px) {
	.craft-auth-logo {
		position: fixed;
		top: 32px;
		left: 40px;
		margin-bottom: 0;
		z-index: 30;
	}

	/* Réserve toujours l'espace du logo (fixed, ~112px de haut) en haut de la colonne
	   de formulaire, pour que le contenu (ex: le formulaire d'inscription, plus long
	   que celui de connexion) ne passe jamais dessous et ne soit plus caché. */
	.craft-auth-left {
		padding-top: 120px;
		align-items: flex-start;
	}
	.craft-auth-form-box {
		margin: auto 0;
	}
}

/* Sur mobile, le logo n'est plus épinglé : il reste dans le flux de la carte
   de connexion, mais centré horizontalement entre les deux bords de l'écran
   (et non pas seulement dans la carte de 420px). */
@media (max-width: 899px) {
	.craft-auth-logo {
		display: flex;
		justify-content: center;
		width: 100vw;
		position: relative;
		left: 50%;
		margin-left: -50vw;
	}
	/* Redéclaré explicitement ici pour être sûr que la taille x2 s'applique
	   bien aussi sur mobile (et pas seulement sur la version ordinateur). */
	.craft-auth-logo img {
		max-height: 80px;
	}
	.craft-auth-logo span {
		font-size: 44px;
	}
}

.craft-auth-title {
	font-size: 26px;
	font-weight: 800;
	color: var(--craft-auth-text);
	margin: 0 0 8px;
}
.craft-auth-subtitle {
	color: var(--craft-auth-text-muted);
	font-size: 14px;
	margin: 0 0 24px;
	line-height: 1.5;
}

/* Boutons sociaux : icône + libellé, pleine largeur, empilés */
.craft-auth-social {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 14px;
}
.craft-auth-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 46px;
	border: 1px solid var(--craft-auth-border);
	border-radius: 12px;
	background: #ffffff;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	color: var(--craft-auth-text);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.craft-auth-social-btn:hover {
	background: #f7f8fc;
	border-color: #cfd4e6;
}
.craft-auth-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.craft-auth-social-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.craft-auth-social-apple .craft-auth-social-icon svg {
	fill: var(--craft-auth-text);
}
.craft-auth-social-label {
	white-space: nowrap;
}

.craft-auth-separator {
	display: flex;
	align-items: center;
	text-align: center;
	color: var(--craft-auth-text-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 12px 0;
}
.craft-auth-separator::before,
.craft-auth-separator::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--craft-auth-border);
}
.craft-auth-separator span {
	padding: 0 12px;
}

.craft-auth-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.craft-auth-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--craft-auth-text);
	margin: 6px 0 -2px;
}
.craft-auth-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 6px 0 -2px;
}
.craft-auth-label-row .craft-auth-label {
	margin: 0;
}

/* Champ = UN SEUL rectangle (bordure + fond), sans halo ni bordure superposée. */
.craft-auth-field {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid var(--craft-auth-border);
	border-radius: 10px;
	padding: 0 16px;
	height: 46px;
	background: var(--craft-auth-field-bg);
	transition: border-color 0.15s ease;
}
.craft-auth-field:focus-within {
	border-color: var(--craft-auth-primary);
}
.craft-auth-field input {
	flex: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	border: none;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	font-size: 14px;
	background: transparent;
	color: var(--craft-auth-text);
}
.craft-auth-field input::placeholder {
	color: var(--craft-auth-text-muted);
}
/* Neutralise le fond jaune que Chrome ajoute sur l'auto-remplissage : sans ça,
   on obtient visuellement "un rectangle dans un rectangle". */
.craft-auth-field input:-webkit-autofill,
.craft-auth-field input:-webkit-autofill:hover,
.craft-auth-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--craft-auth-text);
	-webkit-box-shadow: 0 0 0 1000px var(--craft-auth-field-bg) inset;
	box-shadow: 0 0 0 1000px var(--craft-auth-field-bg) inset;
	transition: background-color 9999s ease-in-out 0s;
}
.craft-auth-toggle-pw {
	cursor: pointer;
	color: var(--craft-auth-text-muted);
	margin-left: 8px;
	user-select: none;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
/* Une seule icône SVG dans le DOM : son tracé est remplacé en JS au clic
   (oeil ouvert <-> oeil barré). Évite tout conflit avec un CSS externe qui
   forcerait l'affichage d'un élément masqué en display:none. */
.craft-auth-eye-icon {
	display: block;
}

.craft-auth-rules {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
	font-size: 11px;
	color: var(--craft-auth-text-muted);
	margin: 4px 0 4px;
}
.craft-auth-rules span {
	transition: color 0.15s ease;
}
.craft-auth-rules span.valid {
	color: #16a34a;
}

.craft-auth-forgot {
	font-size: 12px;
	color: var(--craft-auth-primary);
	text-decoration: none;
	font-weight: 600;
}
.craft-auth-forgot:hover {
	text-decoration: underline;
}

.craft-auth-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--craft-auth-text-muted);
	cursor: pointer;
	margin: 2px 0 4px;
	user-select: none;
}
.craft-auth-remember input {
	width: 16px;
	height: 16px;
	accent-color: var(--craft-auth-primary);
	cursor: pointer;
}

.craft-auth-terms {
	font-size: 11px;
	color: var(--craft-auth-text-muted);
	line-height: 1.5;
	margin: 0;
}
.craft-auth-terms a {
	color: var(--craft-auth-primary);
	text-decoration: underline;
}

.craft-auth-btn-primary {
	height: 46px;
	border: none;
	border-radius: 10px;
	background: var(--craft-auth-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 6px;
	transition: background 0.15s ease, transform 0.05s ease;
}
.craft-auth-btn-primary:hover {
	background: var(--craft-auth-primary-dark);
}
.craft-auth-btn-primary:active {
	transform: scale(0.99);
}
.craft-auth-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.craft-auth-switch {
	text-align: center;
	font-size: 13px;
	color: var(--craft-auth-text-muted);
	margin-top: 14px;
}
.craft-auth-switch a {
	color: var(--craft-auth-primary);
	font-weight: 700;
	text-decoration: none;
}
.craft-auth-switch a:hover {
	text-decoration: underline;
}

.craft-auth-back {
	display: inline-block;
	margin-top: 24px;
	font-size: 12px;
	color: var(--craft-auth-text-muted);
	text-decoration: none;
}
.craft-auth-back:hover {
	color: var(--craft-auth-text);
}

.craft-auth-message {
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 12px;
	margin-bottom: 16px;
}
.craft-auth-message.error {
	background: rgba(220, 38, 38, 0.08);
	color: #b91c1c;
}
.craft-auth-message.success {
	background: rgba(22, 163, 74, 0.08);
	color: #15803d;
}

/* Panneau droit : une seule image, choisie par l'admin (Craft Compte > Connexion).
   height:100% + le parent en display:flex/height:100vh garantit qu'elle va
   toujours jusqu'en bas de l'écran, sans espace vide. */
.craft-auth-right {
	flex: 1;
	height: 100%;
	background-color: var(--craft-auth-primary-light);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: none;
}
.craft-auth-right-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--craft-auth-primary), var(--craft-auth-primary-dark));
}

@media (min-width: 900px) {
	.craft-auth-right {
		display: block;
	}
	/* Épingle le conteneur pleine page exactement sur les 4 bords de l'écran
	   (position:fixed + inset:0), pour ignorer tout padding/margin résiduel
	   que le thème pourrait injecter via wp_head() (ex: espace réservé à un
	   header sticky non affiché sur cette page). Corrige l'espace qui restait
	   en haut, alors que le bas était déjà bien collé à l'écran. */
	.craft-auth-wrap {
		position: fixed;
		inset: 0;
	}
}

@media (max-width: 899px) {
	.craft-auth-page {
		overflow-y: auto; /* sur mobile, le défilement ne doit porter que sur un éventuel
		                     dépassement réel du contenu, jamais sur une zone vide en bas */
		overflow-x: hidden;
	}
	/* Réinitialise toute hauteur minimale que le thème pourrait avoir imposée
	   globalement sur <body> (certains thèmes fixent min-height:100vh en dur),
	   qui s'ajoutait sinon à notre propre min-height ci-dessous et créait un
	   espace vide en bas de la page de connexion. */
	html, body.craft-auth-page {
		min-height: 0 !important;
	}
	.craft-auth-wrap {
		height: auto;
		/* 100vh sur mobile compte la zone masquée par la barre d'adresse du
		   navigateur, ce qui rend la page plus haute que ce qui est réellement
		   visible et force un défilement inutile pour voir un espace vide.
		   100svh (small viewport height) correspond à la hauteur visible une
		   fois la barre d'adresse affichée : c'est la valeur la plus sûre pour
		   éviter tout défilement superflu. Repli sur 100vh pour les anciens
		   navigateurs qui ne connaissent pas encore svh. */
		min-height: 100vh;
		min-height: 100svh;
	}
	.craft-auth-left {
		flex: 1;
		max-width: 100%;
		padding: 28px 20px;
		overflow-y: visible;
		height: auto;
	}
	.craft-auth-form-box {
		max-width: 320px; /* cadre plus étroit sur mobile aussi, toujours centré */
	}
	/* Filet de sécurité : le panneau visuel de droite (image/dégradé) ne doit
	   jamais exister sur mobile, quelle que soit la spécificité d'une règle de
	   thème qui tenterait de le réafficher — sans ça, sa hauteur (héritée du
	   flex parent) peut ajouter une grande zone vide sous le formulaire. */
	.craft-auth-right,
	.craft-auth-right-placeholder {
		display: none !important;
		height: 0 !important;
	}
	/* La page de connexion est une page "app" autonome : les widgets flottants
	   du thème (bulle WhatsApp, bannière de cookies, chat) n'ont pas leur place
	   ici et sont la cause la plus fréquente d'un bloc vide/inattendu en bas
	   d'écran sur mobile. On les masque uniquement sur cette page précise. */
	body.craft-auth-page > [class*="whatsapp" i],
	body.craft-auth-page > [id*="whatsapp" i],
	body.craft-auth-page [class*="whatsapp-chat" i],
	body.craft-auth-page [class*="cookie-notice" i],
	body.craft-auth-page [id*="cookie-notice" i],
	body.craft-auth-page [class*="cookie-consent" i],
	body.craft-auth-page [class*="cookie-law" i] {
		display: none !important;
	}
}

/* Neutralise la bordure du thème sur les inputs dans la page auth */
.craft-auth-page .craft-auth-field input,
.craft-auth-page .craft-auth-field input:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}