body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.reset-container {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 20px 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
}

.logo {
    width: 275px;
    margin-bottom: 20px;
    /* 2026-10-07: a square or tall logo uploaded on the Paramètres page stays a reasonable height */
    max-height: 160px;
    object-fit: contain;
}

h2 {
    color: var(--primarycolor);
    margin-bottom: 20px;
}
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

form input,
form button,
form label {
    width: calc(100% - 20px); /* Ajuste la largeur en fonction du padding */
    box-sizing: border-box;   /* Assure que padding et bordures ne dépassent pas */
}
form label {
    font-weight: bold;
    text-align: left;
    margin: 10px 0px 0px 5px;
    color: var(--primarycolor);
}
form input {
    padding: 10px;
    margin: 0px 0px 10px;
    border-radius: 2px;
    border: 1px solid var(--tertiarycolor);
    background-color: var(--secondarycolor);
}

form input::placeholder {
    color: var(--tertiarycolor);
}

form button {
    padding: 10px;
    background-color: #F9C74F;
    color: #404040;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

form button:hover {
    background-color: #FFB200;
}

.notforgot-password {
    display: block;
    margin-top: 10px;
    color: var(--primarycolor);
    text-decoration: none;
    font-size: 0.9em;
}

.notforgot-password:hover {
    text-decoration: underline;
}
/* Site-wide unification pass (2026-08-29, devdoctor/devmobile ONLY -- .pl-devsite, added to
   <body> by this page's own main.js). Base rule above is shared by all 4 hostnames and its
   literal gold #F9C74F was left untouched deliberately -- findel/drfindel keep their exact
   current button colour. Brings devsite in line with the canonical blue used everywhere else,
   fixing the 3-way blue/gold/green split across the auth flow on devsite only. */
.pl-devsite form button {
    background-color: #2450E6;
    color: #FFFFFF;
}
.pl-devsite form button:hover {
    background-color: #1836B8;
}

/* ==== UI POLISH 2026-10-08 (public-patient) ====
   'Mot de passe oublie' step 1, devsite layer only (body.pl-devsite). Style only: no markup, id, class, text
   or JS change. ui_base styles only .login-container, so this card is brought onto the same tokens as the
   login it links from: 16px gutters on phones, 420px max, white inputs with a neutral border, the client's
   primary button, a real link cue. The inline style.border='1px solid red' written by send() still wins over
   the non-important rules below. --ui-fx-* tokens (ui_base section 7) are read with fallbacks. */
body.pl-devsite {
	height: auto;
	min-height: 100vh;
}
body.pl-devsite .reset-container {
	box-sizing: border-box;
	width: calc(100% - 32px);
	max-width: 462px; /* the login card's outer width (420px content-box + padding), so the card does not jump between the two pages */
	margin: 16px;
	padding: var(--ui-space-card-pad);
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-card);
	box-shadow: var(--ui-fx-shadow-1, 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -12px rgba(16, 24, 40, .14));
}
body.pl-devsite .reset-container .logo {
	display: block;
	width: 100%;
	max-width: 275px;
	margin: 0 auto var(--ui-space-card-gap);
}
body.pl-devsite .reset-container h2 {
	text-align: center;
	margin: 0 0 var(--ui-space-card-gap);
}
body.pl-devsite .reset-container form {
	align-items: stretch;
}
body.pl-devsite .reset-container form label {
	width: 100%;
	margin: 0 0 6px;
	text-align: left;
}
body.pl-devsite .reset-container .field_required {
	color: var(--ui-danger);
}
body.pl-devsite .reset-container form input {
	width: 100%;
	box-sizing: border-box;
	height: var(--ui-input-height);
	margin: 0 0 var(--ui-space-field-gap);
	padding: 0 16px;
	border: var(--ui-input-border);
	border-radius: var(--ui-input-radius);
	background: var(--ui-surface);
	font-family: var(--ui-font-family);
	font-size: var(--ui-input-font-size);
	color: var(--ui-text-primary);
	outline: none;
}
body.pl-devsite .reset-container form input:focus {
	border-color: var(--ui-input-focus-border);
	box-shadow: 0 0 0 3px rgba(36, 80, 230, .16);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	body.pl-devsite .reset-container form input:focus {
		box-shadow: 0 0 0 3px var(--ui-fx-ring-soft, color-mix(in srgb, var(--ui-brand-primary) 18%, transparent));
	}
}
/* Invalid e-mail: same red as the login (the inline flag sets the width/style; only the colour and halo here). */
body.pl-devsite .reset-container form input[style*='red'],
body.pl-devsite .reset-container form input[style*='red']:focus {
	border-color: var(--ui-danger) !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .14);
}
body.pl-devsite .reset-container form button {
	width: 100%;
	min-height: var(--ui-btn-primary-height);
	margin: 4px 0 0;
	padding: 8px 18px;
	background: var(--ui-btn-primary-bg);
	color: var(--ui-btn-primary-text);
	border: var(--ui-btn-primary-border);
	border-radius: var(--ui-btn-primary-radius);
	font-family: var(--ui-font-family);
	font-size: var(--ui-btn-primary-font-size);
	font-weight: var(--ui-btn-primary-font-weight);
	line-height: 1.25;
	cursor: pointer;
}
body.pl-devsite .reset-container form button:hover {
	background: var(--ui-brand-primary-hover);
}
/* 'Se connecter' back link: brand_heading text with an underline (it was navy plain text, no link cue). */
body.pl-devsite .reset-container .notforgot-password {
	display: block;
	width: fit-content;
	margin: 10px auto 0;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: var(--ui-small-size);
	color: var(--ui-brand-heading);
	text-decoration: underline;
	text-decoration-color: rgba(21, 32, 94, .35);
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 3px;
}
body.pl-devsite .reset-container .notforgot-password:hover {
	text-decoration-color: currentColor;
}
body.pl-devsite .reset-container .notforgot-password:focus-visible {
	outline: 2px solid var(--ui-fx-accent, var(--ui-brand-heading));
	outline-offset: 2px;
}
/* Press feedback on the primary button, as on the login. */
body.pl-devsite .reset-container form button {
	transition-property: color, background-color, border-color, box-shadow, transform !important;
	transition-duration: var(--ui-fx-dur-hover, .15s) !important;
	transition-timing-function: var(--ui-fx-ease-out, ease) !important;
}
body.pl-devsite .reset-container form button:not(:disabled):active {
	transform: scale(var(--ui-fx-press-scale-wide, .98)) !important;
	transition-duration: var(--ui-fx-dur-press, .1s) !important;
}
@media (prefers-reduced-motion: reduce) {
	body.pl-devsite .reset-container form button {
		transition: none !important;
	}
	body.pl-devsite .reset-container form button:not(:disabled):active {
		transform: none !important;
		filter: brightness(.94);
	}
}
/* ==== end UI POLISH 2026-10-08 (public-patient) ==== */