/**
 * Connexion et inscription (3.87).
 *
 * Même formulaire Listeo à trois endroits : la fenêtre « Se connecter » de
 * l'en-tête, la page « Mon profil » hors connexion et « Ajouter un lieu »
 * sans compte. Une seule feuille les habille : onglets en curseur glissant,
 * champs arrondis avec icône, choix Voyageur / Hôte en cartes, bouton plein.
 * Sur « Mon profil », un panneau raconte ce que le compte permet.
 *
 * @package HauntedLodgesCore
 */

html body :is( #sign-in-dialog, .sign-in-form ) {
	--a-velours: #150e10;
	--a-rouge: #961b1b;
	--a-rouge-fonce: #7a1515;
	--a-rouge-voile: rgba( 150, 27, 27, 0.08 );
	--a-pierre-7: #6b6151;
	--a-pierre-5: #948670;
	--a-pierre-3: #bcb2a1;
	--a-pierre-2: #ddd7cc;
	--a-pierre-1: #eeebe5;
	--a-clair: #fbfaf8;
	--a-doux: cubic-bezier( 0.22, 1, 0.36, 1 );
}

/* ------------------------------------------------------------ Fenêtre */

html body #sign-in-dialog {
	max-width: 480px !important;
	padding: 0 !important;
	overflow: hidden;
	border: 1px solid var( --a-pierre-2 );
	border-radius: 24px !important;
	background: var( --a-clair ) !important;
	box-shadow: 0 30px 80px rgba( 21, 14, 16, 0.24 ), 0 2px 6px rgba( 21, 14, 16, 0.06 ) !important;
}

html body #sign-in-dialog .small-dialog-header {
	position: relative;
	top: 0 !important;
	left: 0 !important;
	width: auto !important;
	margin: 0 !important;
	padding: 34px 36px 0 !important;
	border: 0 !important;
	background: transparent !important;
	text-align: left;
}

html body #sign-in-dialog .sign-in-dialog-title {
	margin: 0 !important;
	padding-right: 48px;
	color: var( --a-velours ) !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 34px !important;
	font-weight: 500 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em !important;
}

html body #sign-in-dialog .hl-login-context {
	max-width: 36ch;
	margin: 8px 0 0 !important;
	color: var( --a-pierre-7 ) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
}

html body #sign-in-dialog .sign-in-form {
	padding: 24px 36px 34px !important;
}

html body #sign-in-dialog .mfp-close {
	top: 26px !important;
	right: 26px !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: var( --a-pierre-1 ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2 2 12' stroke='%23150e10' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E" ) center / 13px no-repeat !important;
	color: transparent !important;
	font-size: 0 !important;
	opacity: 1 !important;
	transition: background-color 0.25s ease, transform 0.35s var( --a-doux ) !important;
}

html body #sign-in-dialog .mfp-close::before,
html body #sign-in-dialog .mfp-close::after {
	display: none !important;
}

html body #sign-in-dialog .mfp-close:hover {
	background-color: var( --a-pierre-2 ) !important;
	transform: rotate( 90deg );
}

/* Entrée de la fenêtre : légère montée au lieu du zoom du thème. */
html body .my-mfp-zoom-in #sign-in-dialog {
	opacity: 0;
	transform: translateY( 14px ) scale( 0.985 ) !important;
	transition: opacity 0.3s ease, transform 0.45s var( --a-doux ) !important;
}

html body .my-mfp-zoom-in.mfp-ready #sign-in-dialog {
	opacity: 1;
	transform: none !important;
}

html body .my-mfp-zoom-in.mfp-removing #sign-in-dialog {
	opacity: 0;
	transform: translateY( 8px ) scale( 0.99 ) !important;
	transition-duration: 0.18s !important;
}

html body .my-mfp-zoom-in.mfp-bg.mfp-ready {
	opacity: 1 !important;
	background: rgba( 21, 14, 16, 0.55 ) !important;
}

/* ------------------------------------------------------------ Onglets */

html body .sign-in-form .tabs-nav {
	position: relative;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	width: 100% !important;
	margin: 0 0 26px !important;
	padding: 4px !important;
	border: 0 !important;
	border-radius: 999px;
	background: var( --a-pierre-1 ) !important;
	list-style: none;
}

html body .sign-in-form .tabs-nav::before,
html body .sign-in-form .tabs-nav::after {
	display: none !important;
}

html body .sign-in-form .tabs-nav li {
	position: relative;
	z-index: 1;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

html body .sign-in-form .tabs-nav li a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 44px;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 0 !important;
	border-radius: 999px;
	background: transparent !important;
	color: var( --a-pierre-7 ) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	transition: color 0.3s ease !important;
}

html body .sign-in-form .tabs-nav li a::after,
html body .sign-in-form .tabs-nav li a::before {
	display: none !important;
}

html body .sign-in-form .tabs-nav li a:hover {
	color: var( --a-velours ) !important;
}

html body .sign-in-form .tabs-nav li.active a {
	color: var( --a-velours ) !important;
}

/* Le curseur blanc glisse d'un onglet à l'autre. Sans script, l'onglet
   actif garde son propre fond. */
html body .sign-in-form .hl-auth__curseur {
	position: absolute;
	z-index: 0;
	top: 4px;
	bottom: 4px;
	left: 0;
	width: var( --curseur-l, 50% );
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 21, 14, 16, 0.06 ), 0 4px 14px rgba( 21, 14, 16, 0.08 );
	transform: translateX( var( --curseur-x, 4px ) );
	transition: transform 0.5s var( --a-doux ), width 0.5s var( --a-doux );
	pointer-events: none;
}

html body .sign-in-form .tabs-nav:not( .hl-auth__nav ) li.active a {
	background: #fff !important;
}

/* ------------------------------------------------------------ Panneaux */

html body .sign-in-form .tabs-container,
html body .sign-in-form .tab-content {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

html body .sign-in-form .tab-content {
	animation: hl-auth-panneau 0.45s var( --a-doux ) both;
}

@keyframes hl-auth-panneau {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

html body .sign-in-form :is( form.login, form.register ) {
	margin: 0 !important;
}

html body .sign-in-form .form-row {
	margin: 0 0 14px !important;
	padding: 0 !important;
}

/* ------------------------------------------------------------ Champs */

html body .sign-in-form .form-row label {
	position: relative;
	display: block !important;
	margin: 0 !important;
	color: var( --a-pierre-7 ) !important;
}

html body .sign-in-form .form-row label > div {
	position: relative;
}

html body .sign-in-form .form-row label > i.sl {
	position: absolute !important;
	z-index: 2;
	top: 27px !important;
	left: 18px !important;
	margin: 0 !important;
	color: var( --a-pierre-5 ) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	transform: translateY( -50% );
	transition: color 0.25s ease, transform 0.35s var( --a-doux );
	pointer-events: none;
}

html body .sign-in-form .form-row label:focus-within > i.sl {
	color: var( --a-rouge ) !important;
	transform: translateY( -50% ) scale( 1.08 );
}

html body .sign-in-form :is( input.input-text, input[type="text"], input[type="email"], input[type="password"] ) {
	width: 100% !important;
	height: 54px !important;
	margin: 0 !important;
	padding: 0 18px 0 48px !important;
	border: 1px solid var( --a-pierre-2 ) !important;
	border-radius: 14px !important;
	background-color: #fff !important;
	box-shadow: none !important;
	color: var( --a-velours ) !important;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	transition: border-color 0.25s ease, box-shadow 0.3s ease, background-color 0.25s ease !important;
}

html body .sign-in-form :is( input.input-text, input[type="text"], input[type="email"], input[type="password"] )::placeholder {
	color: var( --a-pierre-5 ) !important;
	font-weight: 400;
	opacity: 1;
}

html body .sign-in-form :is( input.input-text, input[type="text"], input[type="email"], input[type="password"] ):hover {
	border-color: var( --a-pierre-3 ) !important;
}

html body .sign-in-form :is( input.input-text, input[type="text"], input[type="email"], input[type="password"] ):focus {
	border-color: var( --a-velours ) !important;
	outline: 0 !important;
	box-shadow: 0 0 0 4px var( --a-rouge-voile ) !important;
}

html body .sign-in-form input[type="password"] {
	padding-right: 52px !important;
}

/* Œil du mot de passe : petite pastille cliquable. */
html body .sign-in-form .form-row label .fa-eye,
html body .sign-in-form .form-row label .fa-eye-slash {
	display: grid !important;
	place-items: center;
	right: 8px !important;
	top: 27px !important;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	line-height: 38px !important;
	transform: translateY( -50% ) !important;
	color: var( --a-pierre-5 ) !important;
	font-size: 15px !important;
	transition: color 0.2s ease, background-color 0.2s ease;
}

html body .sign-in-form .form-row label :is( .fa-eye, .fa-eye-slash ):hover {
	background: var( --a-pierre-1 );
	color: var( --a-velours ) !important;
}

/* ------------------------------------------------------------ Options */

html body .sign-in-form .hl-auth__options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 4px 0 22px;
}

html body .sign-in-form .lost_password {
	display: inline-block !important;
	margin: 0 !important;
	float: none !important;
}

html body .sign-in-form .lost_password a {
	color: var( --a-velours ) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-decoration-color: var( --a-pierre-3 ) !important;
	text-underline-offset: 4px;
	transition: text-decoration-color 0.25s ease, color 0.25s ease;
}

html body .sign-in-form .lost_password a:hover {
	color: var( --a-rouge ) !important;
	text-decoration-color: var( --a-rouge ) !important;
}

/* Cases à cocher : carré arrondi qui se remplit de rouge. */
html body .sign-in-form .checkboxes {
	margin: 0 !important;
	padding: 0 !important;
}

html body .sign-in-form .checkboxes input[type="checkbox"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none;
}

html body .sign-in-form .checkboxes label {
	position: relative;
	display: inline-block !important;
	min-height: 20px;
	margin: 0 !important;
	padding: 0 0 0 30px !important;
	color: var( --a-pierre-7 ) !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	cursor: pointer;
}

html body .sign-in-form .checkboxes label::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	border: 1.5px solid var( --a-pierre-3 ) !important;
	border-radius: 6px !important;
	background: #fff center / 12px no-repeat !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.3s var( --a-doux ) !important;
	font-size: 0 !important;
}

html body .sign-in-form .checkboxes label:hover::before {
	border-color: var( --a-velours ) !important;
}

html body .sign-in-form .checkboxes input[type="checkbox"]:checked + label::before {
	border-color: var( --a-rouge ) !important;
	background-color: var( --a-rouge ) !important;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) !important;
	transform: scale( 1.06 );
}

html body .sign-in-form .checkboxes input[type="checkbox"]:focus-visible + label::before {
	box-shadow: 0 0 0 4px var( --a-rouge-voile );
}

html body .sign-in-form .checkboxes label a {
	color: var( --a-velours ) !important;
	font-weight: 600;
	text-decoration: underline !important;
	text-decoration-color: var( --a-pierre-3 ) !important;
	text-underline-offset: 3px;
}

html body .sign-in-form form.register p.checkboxes {
	margin: 0 0 12px !important;
}

/* ------------------------------------------------------------ Bouton */

html body .sign-in-form :is( input[type="submit"], #otp_submit ) {
	display: block !important;
	width: 100% !important;
	height: 54px !important;
	margin: 0 !important;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var( --a-velours ) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	line-height: 54px !important;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease !important;
}

html body .sign-in-form :is( input[type="submit"], #otp_submit ):hover {
	background: var( --a-rouge ) !important;
	box-shadow: 0 10px 24px rgba( 150, 27, 27, 0.24 ) !important;
}

html body .sign-in-form :is( input[type="submit"], #otp_submit ):active {
	transform: scale( 0.985 );
}

html body .sign-in-form :is( input[type="submit"], #otp_submit ):focus-visible {
	outline: 2px solid var( --a-rouge ) !important;
	outline-offset: 3px;
}

html body .sign-in-form form.register .form-row:has( > input[type="submit"] ),
html body .sign-in-form #otp_submit {
	margin-top: 8px !important;
}

/* ------------------------------------------------------------ Inscription */

/* Prénom et nom côte à côte. */
html body .sign-in-form .listeo-register-form-fields-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 12px;
}

html body .sign-in-form .listeo-register-form-fields-container > * {
	grid-column: 1 / -1;
}

html body .sign-in-form .listeo-register-form-fields-container > p.form-row:has( #first-name ),
html body .sign-in-form .listeo-register-form-fields-container > p.form-row:has( #last-name ) {
	grid-column: auto;
}

html body .sign-in-form .listeo-register-form-fields-container > .clearfix {
	display: none;
}

/* Voyageur ou hôte : deux cartes. */
html body .sign-in-form .account-type {
	display: grid !important;
	width: 100% !important;
	max-width: 100%;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 0 0 18px !important;
	padding: 0 !important;
}

html body .sign-in-form .account-type > div {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

html body .sign-in-form .account-type input.account-type-radio {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none;
}

html body .sign-in-form .account-type label {
	position: relative;
	display: grid !important;
	grid-template-columns: 34px 1fr;
	align-items: center;
	column-gap: 10px;
	height: auto !important;
	min-height: 68px;
	margin: 0 !important;
	padding: 12px !important;
	border: 1px solid var( --a-pierre-2 ) !important;
	border-radius: 16px !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var( --a-velours ) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	text-align: left !important;
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.3s ease, transform 0.35s var( --a-doux ) !important;
}

html body .sign-in-form .account-type label:hover {
	border-color: var( --a-pierre-3 ) !important;
	transform: translateY( -1px );
}

html body .sign-in-form .account-type label i {
	display: none !important;
}

html body .sign-in-form .account-type .hl-auth__role-icone {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var( --a-pierre-1 );
	color: var( --a-pierre-7 );
	transition: background-color 0.3s ease, color 0.3s ease;
}

html body .sign-in-form .account-type .hl-auth__role-icone svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

html body .sign-in-form .account-type .hl-auth__role-texte {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

html body .sign-in-form .account-type .hl-auth__role-texte small {
	color: var( --a-pierre-7 );
	font-size: 12.5px;
	line-height: 1.35;
	font-weight: 500;
}

/* Pastille cochée en haut à droite. */
html body .sign-in-form .account-type label::after {
	content: "" !important;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var( --a-rouge ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5.1 8.2 9 4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / 10px no-repeat;
	opacity: 0;
	transform: scale( 0.4 );
	transition: opacity 0.2s ease, transform 0.4s var( --a-doux );
}

html body .sign-in-form .account-type label::before {
	display: none !important;
}

html body .sign-in-form .account-type input.account-type-radio:checked ~ label {
	border-color: var( --a-rouge ) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px var( --a-rouge-voile ) !important;
	color: var( --a-velours ) !important;
}

html body .sign-in-form .account-type input.account-type-radio:checked ~ label::after {
	opacity: 1;
	transform: scale( 1 );
}

html body .sign-in-form .account-type input.account-type-radio:checked ~ label .hl-auth__role-icone {
	background: var( --a-rouge );
	color: #fff;
}

html body .sign-in-form .account-type input.account-type-radio:focus-visible ~ label {
	outline: 2px solid var( --a-rouge );
	outline-offset: 2px;
}

/* Règles du mot de passe : discrètes, sous le champ. */
html body .sign-in-form .password-strength-requirements {
	margin: -4px 0 14px !important;
	padding: 12px 14px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: var( --a-pierre-1 ) !important;
	color: var( --a-pierre-7 ) !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
}

html body .sign-in-form .password-strength-requirements strong {
	color: var( --a-velours ) !important;
	font-weight: 600;
}

html body .sign-in-form .pwstrength_viewport_progress .progress {
	height: 4px !important;
	margin: 8px 2px 0 !important;
	border-radius: 999px !important;
	background: var( --a-pierre-1 ) !important;
}

/* Code reçu par e-mail. */
html body .sign-in-form .otp_registration {
	padding: 20px !important;
	border: 0 !important;
	border-radius: 16px !important;
	background: var( --a-pierre-1 ) !important;
	color: var( --a-pierre-7 );
}

html body .sign-in-form .otp_registration h4 {
	margin: 0 0 6px !important;
	color: var( --a-velours ) !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 24px !important;
	font-weight: 500 !important;
}

html body .sign-in-form #listeo_otp-inputs {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}

html body .sign-in-form #listeo_otp-inputs input.field__token {
	width: 54px !important;
	height: 60px !important;
	padding: 0 !important;
	border: 1px solid var( --a-pierre-2 ) !important;
	border-radius: 14px !important;
	background: #fff !important;
	color: var( --a-velours ) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	text-align: center;
}

html body .sign-in-form #listeo_otp-inputs input.field__token:focus {
	border-color: var( --a-velours ) !important;
	box-shadow: 0 0 0 4px var( --a-rouge-voile ) !important;
	outline: 0;
}

/* Messages d'erreur. */
html body .sign-in-form .notification {
	margin: 16px 0 0 !important;
	padding: 12px 16px !important;
	border: 0 !important;
	border-radius: 12px !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}

html body .sign-in-form .notification.error {
	background: #f6e8e8 !important;
	color: var( --a-rouge-fonce ) !important;
}

html body .sign-in-form .notification.success {
	background: #e7efe2 !important;
	color: #3b6b2a !important;
}

html body .sign-in-form .notification p {
	margin: 0 !important;
	color: inherit !important;
}

/* « Ajouter un lieu » sans compte : la phrase d'introduction. */
html body .sign-in-form .hl-ajout-intro {
	margin: 0 0 20px !important;
	color: var( --a-pierre-7 ) !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
}

/* ------------------------------------------------------- Page « Mon profil » */

html body.hl-invite #titlebar {
	display: none !important;
}

/* Le formulaire attend sa mise en page pour éviter un saut à l'ouverture ;
   sans script, il apparaît quand même au bout d'une seconde. */
html body.hl-invite .sign-in-form:not( .hl-auth--pret ) {
	animation: hl-auth-secours 0s linear 1s both;
	visibility: hidden;
}

@keyframes hl-auth-secours {
	to {
		visibility: visible;
	}
}

html body .hl-auth-page {
	display: grid;
	grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, 1fr );
	gap: 20px;
	align-items: stretch;
	max-width: 1120px;
	margin: 56px auto 96px;
	padding: 0 24px;
}

html body .hl-auth-page .sign-in-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: auto !important;
	margin: 0 !important;
	padding: 40px 44px 44px !important;
	float: none !important;
	border: 1px solid var( --a-pierre-2, #ddd7cc );
	border-radius: 28px;
	background: #fbfaf8;
}

html body .hl-auth-page__aside {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 48px 48px 0;
	border-radius: 28px;
	background: #eeebe5;
	color: #150e10;
}

html body .hl-auth-page h1.hl-auth-page__titre {
	max-width: 15ch;
	margin: 0 0 14px !important;
	color: #150e10 !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: clamp( 40px, 3.9vw, 52px ) !important;
	font-weight: 500 !important;
	line-height: 1.02 !important;
	letter-spacing: -0.015em !important;
}

html body .hl-auth-page__texte {
	max-width: 40ch;
	margin: 0 0 32px !important;
	color: #6b6151 !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
}

html body .hl-auth-page__liste {
	display: grid;
	gap: 18px;
	margin: 0 0 28px !important;
	padding: 0 !important;
	list-style: none !important;
}

html body .hl-auth-page__liste li {
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: start;
	column-gap: 14px;
	margin: 0 !important;
	padding: 0 !important;
}

html body .hl-auth-page__liste li::before {
	display: none !important;
}

html body .hl-auth-page__icone {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fbfaf8;
	color: #961b1b;
}

html body .hl-auth-page__icone svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

html body .hl-auth-page__liste strong {
	display: block;
	margin: 2px 0 2px;
	color: #150e10;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

html body .hl-auth-page__liste span:not( .hl-auth-page__icone ) {
	display: block;
	color: #6b6151;
	font-size: 15px;
	line-height: 1.5;
}

html body .hl-auth-page__hote {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #150e10;
	font: 600 15px/1.4 "Plus Jakarta Sans", system-ui, sans-serif;
	text-align: left;
	text-decoration: underline;
	text-decoration-color: #bcb2a1;
	text-underline-offset: 4px;
	cursor: pointer;
	transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

html body .hl-auth-page__hote:hover {
	color: #961b1b;
	text-decoration-color: #961b1b;
}

html body .hl-auth-page__hote svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	transition: transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}

html body .hl-auth-page__hote:hover svg {
	transform: translateX( 3px );
}

html body .hl-auth-page__illustration {
	display: block;
	width: calc( 100% + 96px );
	max-width: none;
	height: auto;
	margin: auto -48px 0;
	padding-top: 24px;
	pointer-events: none;
	user-select: none;
}

/* Un seul moment orchestré : le panneau entre, puis ses trois promesses. */
html body .hl-auth-page__aside > *,
html body .hl-auth-page__liste li {
	animation: hl-auth-entree 0.7s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

html body .hl-auth-page h1.hl-auth-page__titre { animation-delay: 0.05s; }
html body .hl-auth-page__texte { animation-delay: 0.12s; }
html body .hl-auth-page__liste li:nth-child( 1 ) { animation-delay: 0.2s; }
html body .hl-auth-page__liste li:nth-child( 2 ) { animation-delay: 0.28s; }
html body .hl-auth-page__liste li:nth-child( 3 ) { animation-delay: 0.36s; }
html body .hl-auth-page__hote { animation-delay: 0.44s; }

html body .hl-auth-page__aside > .hl-auth-page__illustration {
	animation: hl-auth-soleil 1.4s cubic-bezier( 0.22, 1, 0.36, 1 ) 0.2s both;
}

@keyframes hl-auth-entree {
	from {
		opacity: 0;
		transform: translateY( 12px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hl-auth-soleil {
	from {
		opacity: 0;
		transform: translateY( 24px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media ( max-width: 991px ) {
	html body .hl-auth-page {
		grid-template-columns: 1fr;
		max-width: 620px;
		margin: 32px auto 72px;
	}

	html body .hl-auth-page__aside {
		padding: 36px 32px 0;
	}

	html body .hl-auth-page__illustration {
		width: calc( 100% + 64px );
		margin: 8px -32px 0;
		padding-top: 0;
	}
}

@media ( max-width: 600px ) {
	html body #sign-in-dialog {
		width: calc( 100vw - 24px ) !important;
		margin: 12px auto !important;
		border-radius: 22px !important;
	}

	html body #sign-in-dialog .small-dialog-header {
		padding: 28px 22px 0 !important;
	}

	html body #sign-in-dialog .sign-in-dialog-title {
		font-size: 30px !important;
	}

	html body #sign-in-dialog .sign-in-form {
		padding: 20px 22px 26px !important;
	}

	html body #sign-in-dialog .mfp-close {
		top: 20px !important;
		right: 18px !important;
	}

	html body .hl-auth-page {
		gap: 14px;
		margin: 16px auto 56px;
		padding: 0 14px;
	}

	html body .hl-auth-page__aside {
		padding: 30px 24px 0;
		border-radius: 24px;
	}

	html body .hl-auth-page h1.hl-auth-page__titre {
		font-size: 40px !important;
	}

	html body .hl-auth-page__texte {
		margin-bottom: 24px !important;
		font-size: 15px !important;
	}

	html body .hl-auth-page__liste {
		gap: 14px;
	}

	html body .hl-auth-page__illustration {
		width: calc( 100% + 48px );
		margin: 4px -24px 0;
	}

	html body .hl-auth-page .sign-in-form {
		padding: 26px 20px 28px !important;
		border-radius: 24px;
	}

	html body .hl-auth-page__liste {
		display: none;
	}

	html body .hl-auth-page__hote {
		margin-bottom: 4px;
		font-size: 14px;
	}

	html body .sign-in-form .listeo-register-form-fields-container > p.form-row:has( #first-name ),
	html body .sign-in-form .listeo-register-form-fields-container > p.form-row:has( #last-name ) {
		grid-column: 1 / -1;
	}

	html body .sign-in-form .account-type label {
		grid-template-columns: 1fr;
		row-gap: 8px;
		padding: 14px !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html body :is( #sign-in-dialog, .sign-in-form, .hl-auth-page ) *,
	html body :is( #sign-in-dialog, .sign-in-form, .hl-auth-page ) *::before,
	html body :is( #sign-in-dialog, .sign-in-form, .hl-auth-page ) *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}
}

/* Panneau 3.94 : plus de soleil, trois vrais lieux en éventail. */
html body .hl-auth-page__aside {
	padding-bottom: 44px;
}

html body .hl-auth-page__apercu {
	margin-top: auto;
	padding-top: 12px;
}

html body .hl-auth-page__photos {
	position: relative;
	height: 150px;
	margin: 0 0 14px;
}

html body .hl-auth-page__photos img {
	position: absolute;
	bottom: 0;
	left: calc( var( --n, 0 ) * 26% );
	width: 46%;
	height: 132px;
	border: 4px solid #fbfaf8;
	border-radius: 16px;
	box-shadow: 0 18px 30px -18px rgba( 21, 14, 16, 0.55 );
	object-fit: cover;
	transform: rotate( calc( ( var( --n, 0 ) - 1 ) * 6deg ) );
	transform-origin: bottom center;
	animation: hl-auth-carte 0.8s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
	animation-delay: calc( 0.45s + var( --n, 0 ) * 0.12s );
	transition: transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 );
}

html body .hl-auth-page__photos img:nth-child( 2 ) {
	z-index: 2;
	bottom: 8px;
}

html body .hl-auth-page__photos:hover img:nth-child( 1 ) {
	transform: rotate( -10deg ) translateX( -8px );
}

html body .hl-auth-page__photos:hover img:nth-child( 3 ) {
	transform: rotate( 10deg ) translateX( 8px );
}

@keyframes hl-auth-carte {
	from {
		opacity: 0;
		transform: translateY( 30px ) rotate( 0deg );
	}
}

html body .hl-auth-page p.hl-auth-page__nombre {
	margin: 0 !important;
	color: #6b6151 !important;
	font-size: 14px !important;
	font-weight: 600;
}

@media ( max-width: 600px ) {
	html body .hl-auth-page__aside {
		padding-bottom: 28px;
	}

	html body .hl-auth-page__photos {
		height: 110px;
	}

	html body .hl-auth-page__photos img {
		height: 96px;
	}
}

/* Le formulaire reste en haut, collé pendant le défilement (3.94.1). */
@media ( min-width: 992px ) {
	html body .hl-auth-page {
		align-items: start;
	}

	html body .hl-auth-page .sign-in-form {
		position: sticky;
		top: 112px;
		justify-content: flex-start;
	}
}

html body .hl-auth-page h1.hl-auth-page__titre {
	max-width: 17ch;
}

/* 3.108 : champs à corriger avant l'envoi du code. */
html body form.register input.hl-champ-faux {
	border-color: #961b1b !important;
	box-shadow: 0 0 0 3px rgba( 150, 27, 27, 0.12 ) !important;
}

html body form.register input[type="checkbox"].hl-champ-faux + label::before,
html body form.register input[type="checkbox"].hl-champ-faux {
	border-color: #961b1b !important;
	outline: 2px solid rgba( 150, 27, 27, 0.35 );
	outline-offset: 2px;
}

html body form.register .hl-champ-msg {
	display: block;
	width: 100%;
	margin: 6px 0 0;
	color: #961b1b;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

/* 3.109 : étape du code, un seul bouton (« Valider le code »). */
html body form.register.hl-etape-code #otp_submit {
	display: none !important;
}

/* Vérification de l'e-mail en cours, avant l'envoi du code. */
html body form.register #otp_submit.hl-verif-encours {
	opacity: 0.7;
	pointer-events: none;
}