/*
 * Fichier : intemporris-signature.css
 * Emplacement : designs/intemporris/assets/css/
 *
 * Responsabilité :
 * La page de signature de Pluma Sign Manager : les étapes, la lecture des
 * documents et les accords, la confirmation de l'identité, la signature,
 * les messages d'erreur et le refus. La page garde le titre, son filet et
 * la lueur des pages simples (intemporris-pages.css) ; cette feuille
 * compose le passage qui suit le titre.
 *
 * Parti pris : le parapheur.
 *   La page se distingue de l'espace de compte. Les documents sont les
 *   feuilles d'un parapheur, empilées, numérotées en grands chiffres à
 *   empattements ; une feuille acceptée se coche. La signature est la
 *   dernière feuille, fermée par un bord dans l'accent. Les titres prennent
 *   la police des dossiers. La commande qui fait avancer est la capsule de
 *   verre lumineuse des commandes qui valident ; le refus est une capsule
 *   à l'écart, au contour neutre. Les autres boutons discrets de Pluma
 *   restent des liens soulignés, sans capsule.
 *
 * Accent :
 *   Le champagne, un doré clair et froid, distinct de l'or des livres
 *   audio. Le jeton --intemporris-signature-laiton est la seule valeur à
 *   changer pour changer l'accent de la page.
 *
 * Papier :
 *   Les aperçus de signature et le cadre de dessin gardent le papier clair
 *   de Pluma : l'encre bleu nuit ne se lit pas sur la nuit.
 *
 * Accessibilité : WCAG 2.1 niveau AA strict.
 *   - L'ordre de lecture reste celui du balisage.
 *   - Les contours des commandes et des champs gardent 3 pour 1.
 *   - Les cibles gardent 2,75 rem de haut.
 *   - Le focus garde le contour du thème.
 *   - Un état ne change ni la graisse ni l'épaisseur d'un contour.
 */

body.psm-screen {
	--intemporris-signature-laiton: #dcc791;
}

/* Le champagne remplace l'ardoise des pages simples : le filet du titre et
   la lueur le prennent. Le titre de la page prend la police des dossiers,
   d'une graisse normale. */
body.psm-screen.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry {
	--intemporris-page: var(--intemporris-signature-laiton, #dcc791);
}

body.psm-screen.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-header .discovery-entry-title {
	font-family: var(--intemporris-police-dossier, Georgia, "Times New Roman", "Noto Serif", serif);
	font-weight: var(--discovery-weight-normal, 400);
	letter-spacing: 0;
}

body.psm-screen .psm-page {
	--intemporris-signature-accent: var(--intemporris-signature-laiton, #dcc791);
	--intemporris-signature-nuit: var(--intemporris-compte-nuit, #05070c);
	--intemporris-signature-police: var(--intemporris-police-dossier, Georgia, "Times New Roman", "Noto Serif", serif);
	--intemporris-signature-filet: color-mix(in srgb, var(--discovery-color-text, #ffffff) 14%, transparent);
	--intemporris-signature-filet-accent: color-mix(in srgb, var(--intemporris-signature-accent) 55%, transparent);
	--intemporris-signature-contour: color-mix(in srgb, var(--discovery-color-text, #ffffff) 46%, var(--discovery-color-background, #000000));
	--intemporris-signature-plaque: color-mix(in srgb, var(--intemporris-signature-accent) 5%, var(--intemporris-signature-nuit));
	--intemporris-signature-feuille-fond: color-mix(in srgb, var(--intemporris-signature-accent) 10%, var(--intemporris-signature-nuit));
	--intemporris-signature-feuille-dessous: color-mix(in srgb, var(--intemporris-signature-accent) 16%, var(--intemporris-signature-nuit));
	--intemporris-signature-numero: 3.25rem;
	--intemporris-signature-carte: color-mix(in srgb, var(--intemporris-signature-accent) 5%, var(--intemporris-signature-nuit));
	--intemporris-signature-verre: color-mix(in srgb, var(--intemporris-signature-accent) 26%, var(--intemporris-signature-nuit));
	--intemporris-signature-creux: color-mix(in srgb, var(--discovery-color-background, #000000) 55%, transparent);
	--intemporris-signature-doux: var(--discovery-color-muted, #b3b3b3);
	--intemporris-signature-texte: color-mix(in srgb, var(--discovery-color-text, #ffffff) 88%, var(--discovery-color-muted, #b3b3b3));
	--intemporris-signature-erreur: var(--discovery-color-erreur, #ff9b8f);
	--intemporris-signature-rond: var(--discovery-radius-full, 9999px);
	--intemporris-signature-rayon: var(--discovery-radius-md, 0.5rem);
	--intemporris-signature-champ-rayon: var(--discovery-radius-md, 0.5rem);
	--intemporris-signature-cible: 2.75rem;
	--intemporris-signature-trait: var(--intemporris-trait-fin, 1.5px);
	--intemporris-signature-barre: 3px;
	--intemporris-signature-duree: var(--discovery-duration-normal, 240ms);
	--intemporris-signature-air-groupe: var(--discovery-space-10, 2.5rem);
	--psm-accent: var(--intemporris-signature-accent);
}

@media (min-width: 36rem) {

	body.psm-screen .psm-page {
		--intemporris-signature-numero: 4.5rem;
	}
}

/* Les titres du passage : la police des dossiers, d'une graisse normale. */
body.psm-screen .psm-page :is(.psm-heading, .psm-document-title, .psm-sig > .psm-sig-legend, .psm-group > .psm-group-legend, .psm-page--deposit > h3, .psm-editor > h4, .psm-signed-name, .psm-ui--request-status .psm-ui-title) {
	font-family: var(--intemporris-signature-police);
	font-weight: var(--discovery-weight-normal, 400);
	letter-spacing: 0;
}


/* Les étapes */

/* Le chemin du passage, sous le titre de la page : son libellé en petites
   capitales grises, puis les étapes, l'une sous l'autre sur un téléphone,
   sur une ligne dès que la place le permet. */
body.psm-screen .psm-page .psm-progress-label {
	margin: 0 0 var(--discovery-space-3, 0.75rem);
	color: var(--intemporris-signature-doux);
	font-size: var(--discovery-text-xs, 0.75rem);
	font-weight: var(--discovery-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body.psm-screen .psm-page .psm-steps {
	flex-direction: column;
	gap: var(--discovery-space-2, 0.5rem);
}

body.psm-screen .psm-page .psm-step {
	gap: var(--discovery-space-3, 0.75rem);
	color: var(--intemporris-signature-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
}

body.psm-screen .psm-page .psm-step-name {
	display: inline-flex;
	align-items: center;
	gap: var(--discovery-space-2, 0.5rem);
}

body.psm-screen .psm-page .psm-step-name .psm-icon {
	margin: 0;
}

/* La pastille d'une étape : un rond de verre au contour fin. L'étape en
   cours prend la surface de l'accent et son nom passe en blanc ; une étape
   faite garde le contour de l'accent et son icône le dit. */
body.psm-screen .psm-page .psm-step-mark {
	box-sizing: border-box;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid var(--intemporris-signature-contour);
	background: linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 8%, transparent), transparent 55%);
	font-family: var(--intemporris-signature-police);
	font-size: var(--discovery-text-xs, 0.75rem);
	font-weight: var(--discovery-weight-normal, 400);
}

body.psm-screen .psm-page .psm-step--current {
	color: var(--discovery-color-text, #ffffff);
}

body.psm-screen .psm-page .psm-step--current .psm-step-mark {
	border-color: var(--intemporris-signature-accent);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 14%, transparent), transparent 55%),
		color-mix(in srgb, var(--intemporris-signature-accent) 40%, var(--intemporris-signature-nuit));
	color: var(--discovery-color-text, #ffffff);
}

body.psm-screen .psm-page .psm-step--done {
	color: var(--intemporris-signature-texte);
}

body.psm-screen .psm-page .psm-step--done .psm-step-mark {
	border-color: var(--intemporris-signature-filet-accent);
}

body.psm-screen .psm-page :is(.psm-step--current, .psm-step--done) .psm-step-name .psm-icon {
	color: var(--intemporris-signature-accent);
}

@media (min-width: 36rem) {

	body.psm-screen .psm-page .psm-steps {
		flex-direction: row;
		gap: var(--discovery-space-2, 0.5rem) var(--discovery-space-6, 1.5rem);
	}
}


/* Le titre de l'étape et la phrase de tête */

/* Le titre de l'étape s'écarte du chemin et porte le court filet de l'accent
   des têtes de section. La phrase de tête se lit comme le texte d'une
   page. */
body.psm-screen .psm-page > .psm-heading {
	margin-block-start: var(--discovery-space-8, 2rem);
	font-size: var(--discovery-text-2xl, 1.5rem);
}

body.psm-screen .psm-page > .psm-heading::after {
	content: "";
	display: block;
	inline-size: var(--discovery-space-8, 2rem);
	block-size: 1px;
	margin-block-start: var(--discovery-space-3, 0.75rem);
	background: var(--intemporris-signature-filet-accent);
}

/* L'aide d'Emma : sa question puis son bouton, un peu d'air entre les
   deux ; ils vont ensemble sans se toucher. */
body.psm-screen .psm-page > .psm-emma .rle-ea-aide-accroche {
	margin-block: 0 var(--discovery-space-3, 0.75rem);
}

body.psm-screen .psm-page > .psm-lead {
	color: var(--intemporris-signature-texte);
	font-size: var(--discovery-text-base, 1rem);
	line-height: 1.65;
}

/* Sur l'écran de l'identité, la phrase de tête dit où attend le code :
   elle se détache en encadré, tenue à gauche par l'accent. */
body.psm-screen .psm-page--identity > .psm-lead {
	padding: var(--discovery-space-4, 1rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-signature-filet);
	border-inline-start: var(--intemporris-signature-barre) solid var(--intemporris-signature-accent);
	border-radius: var(--intemporris-signature-champ-rayon);
	background: color-mix(in srgb, var(--intemporris-signature-accent) 8%, var(--intemporris-signature-nuit));
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-lg, 1.125rem);
	line-height: 1.5;
}


/* Les commandes */

/* Une commande : une capsule de verre au contour net, son icône dans
   l'accent. Le bouton masqué en attendant le script reste masqué. */
body.psm-screen .psm-page :is(.psm-button--secondary, .psm-button--danger, .psm-sig-actions .button):not([hidden]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--discovery-space-2, 0.5rem);
	box-sizing: border-box;
	min-block-size: var(--intemporris-signature-cible);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-signature-contour);
	border-radius: var(--intemporris-signature-rond);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--discovery-color-text, #ffffff) 8%, transparent), transparent 46%),
		transparent;
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	font-weight: var(--discovery-weight-semibold, 600);
	line-height: 1.3;
	text-decoration: none;
	transition: border-color var(--intemporris-signature-duree), background-color var(--intemporris-signature-duree);
}

body.psm-screen .psm-page :is(.psm-button--secondary, .psm-button--danger, .psm-sig-actions .button):not([hidden]):is(:hover, :focus-visible) {
	border-color: var(--discovery-color-text, #ffffff);
	background-color: color-mix(in srgb, var(--intemporris-signature-accent) 18%, transparent);
}

body.psm-screen .psm-page .psm-button--danger:not([hidden]) {
	border-color: var(--intemporris-signature-erreur);
}

/* La commande qui fait avancer le passage : la capsule de verre lumineuse,
   un peu plus large. */
body.psm-screen .psm-page .psm-button--primary:not([hidden]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--discovery-space-2, 0.5rem);
	box-sizing: border-box;
	min-block-size: var(--intemporris-signature-cible);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-6, 1.5rem);
	border: 1px solid color-mix(in srgb, var(--intemporris-signature-accent) 70%, transparent);
	border-radius: var(--intemporris-signature-rond);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 12%, transparent), transparent 55%),
		var(--intemporris-signature-verre);
	color: var(--discovery-color-text, #ffffff);
	font-weight: var(--discovery-weight-semibold, 600);
	line-height: 1.3;
	transition: border-color var(--intemporris-signature-duree), background-color var(--intemporris-signature-duree);
}

body.psm-screen .psm-page .psm-button--primary:not([hidden]):is(:hover, :focus-visible) {
	border-color: var(--discovery-color-text, #ffffff);
	background-color: color-mix(in srgb, var(--intemporris-signature-accent) 40%, var(--intemporris-signature-nuit));
}

/* Le bouton discret reste ce que Pluma en fait : un texte souligné, sans
   capsule, aligné sur la colonne. Le soulignement prend l'accent
   et passe au blanc au survol. */
body.psm-screen .psm-page .psm-button--quiet:not([hidden]) {
	display: inline-flex;
	align-items: center;
	gap: var(--discovery-space-2, 0.5rem);
	min-block-size: var(--intemporris-signature-cible);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	font-weight: var(--discovery-weight-semibold, 600);
	text-decoration-line: underline;
	text-decoration-color: var(--intemporris-signature-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
	transition: text-decoration-color var(--intemporris-signature-duree);
}

body.psm-screen .psm-page .psm-button--quiet:not([hidden]):hover {
	text-decoration-color: var(--discovery-color-text, #ffffff);
	text-decoration-thickness: 2px;
}

/* L'écart entre l'icône et le texte est celui de la commande. */
body.psm-screen .psm-page .psm-button .psm-icon {
	margin: 0;
}

body.psm-screen .psm-page :is(.psm-button--secondary, .psm-button--quiet, .psm-button--danger) .psm-icon {
	color: var(--intemporris-signature-accent);
}

/* La commande du passage se tient sous ce qu'elle valide, avec de
   l'air ; le retour vers l'étape précédente, discret, vient dessous. */
body.psm-screen .psm-page .psm-form > .psm-actions:not(.psm-actions--back) {
	gap: var(--discovery-space-3, 0.75rem) var(--discovery-space-4, 1rem);
	margin-block-start: var(--discovery-space-8, 2rem);
}

body.psm-screen .psm-page .psm-form > .psm-actions--back {
	margin-block-start: var(--discovery-space-3, 0.75rem);
}


/* Les documents à lire */

/* Un document : une feuille du parapheur. Deux bords dépassent sous elle ;
   son numéro se tient dans une marge tracée à gauche. */
body.psm-screen .psm-page .psm-documents {
	counter-reset: psm-feuille;
	gap: var(--discovery-space-8, 2rem);
}

body.psm-screen .psm-page .psm-document {
	counter-increment: psm-feuille;
	position: relative;
	gap: var(--discovery-space-3, 0.75rem);
	padding: var(--discovery-space-5, 1.25rem) var(--discovery-space-6, 1.5rem) var(--discovery-space-5, 1.25rem) calc(var(--intemporris-signature-numero) + var(--discovery-space-5, 1.25rem));
	border: 1px solid var(--intemporris-signature-filet);
	border-radius: var(--intemporris-signature-rayon);
	background:
		linear-gradient(90deg, transparent var(--intemporris-signature-numero), var(--intemporris-signature-filet) var(--intemporris-signature-numero), var(--intemporris-signature-filet) calc(var(--intemporris-signature-numero) + 1px), transparent calc(var(--intemporris-signature-numero) + 1px)),
		var(--intemporris-signature-plaque);
	box-shadow:
		0 0.375rem 0 -0.1875rem var(--intemporris-signature-feuille-fond),
		0 0.75rem 0 -0.375rem var(--intemporris-signature-feuille-dessous);
}

/* Le numéro de la feuille, en grand ; une feuille acceptée se coche. Le
   numéro et la coche ne se lisent pas : le titre du document et la case
   disent la même chose. */
body.psm-screen .psm-page .psm-document::before {
	content: counter(psm-feuille) / "";
	position: absolute;
	inset-block-start: var(--discovery-space-4, 1rem);
	inset-inline-start: 0;
	inline-size: var(--intemporris-signature-numero);
	color: var(--intemporris-signature-accent);
	font-family: var(--intemporris-signature-police);
	font-size: var(--discovery-text-4xl, 2.25rem);
	line-height: 1;
	text-align: center;
}

body.psm-screen .psm-page .psm-document:has(.psm-consent input:checked) {
	border-color: var(--intemporris-signature-filet-accent);
}

body.psm-screen .psm-page .psm-document:has(.psm-consent input:checked)::before {
	content: "\2713" / "";
}

body.psm-screen .psm-page .psm-document-title {
	font-size: var(--discovery-text-xl, 1.25rem);
	line-height: 1.25;
}

body.psm-screen .psm-page :is(.psm-document-meta, .psm-document-note) {
	color: var(--intemporris-signature-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
}

/* La lecture et le téléchargement, deux capsules côte à côte ; la mise de
   côté, discrète, part à droite de la même ligne quand la place le
   permet. */
body.psm-screen .psm-page .psm-document-actions {
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
	margin-block-start: var(--discovery-space-1, 0.25rem);
}

@media (min-width: 36rem) {

	body.psm-screen .psm-page .psm-document-actions > .psm-button--quiet {
		margin-inline-start: auto;
	}
}

/* Le texte d'un document, déplié : un creux plat au rayon des champs, à
   même la plaque. Chaque article s'ouvre par le court filet de l'accent des
   titres. */
body.psm-screen .psm-page .psm-reading:not([hidden]) {
	max-inline-size: none;
	margin-block-start: var(--discovery-space-2, 0.5rem);
	padding: var(--discovery-space-4, 1rem) var(--discovery-space-5, 1.25rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-signature-filet);
	border-radius: var(--intemporris-signature-champ-rayon);
	background: var(--intemporris-signature-creux);
	color: var(--intemporris-signature-texte);
	font-family: var(--intemporris-signature-police);
	font-size: 1.0625rem;
	line-height: 1.7;
}

body.psm-screen .psm-page .psm-reading > :first-child {
	margin-block-start: 0;
}

body.psm-screen .psm-page .psm-reading > h4 {
	position: relative;
	margin-block-start: var(--discovery-space-6, 1.5rem);
	padding-block-start: var(--discovery-space-3, 0.75rem);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-base, 1rem);
}

body.psm-screen .psm-page .psm-reading > h4::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: var(--discovery-space-6, 1.5rem);
	block-size: var(--intemporris-signature-trait);
	background: var(--intemporris-signature-filet-accent);
}

body.psm-screen .psm-page .psm-reading > :is(h5, h6) {
	margin-block-start: var(--discovery-space-4, 1rem);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	font-weight: var(--discovery-weight-semibold, 600);
}

/* L'accord : sous un filet, la case et sa phrase. */
body.psm-screen .psm-page .psm-consent {
	gap: var(--discovery-space-3, 0.75rem);
	margin-block-start: var(--discovery-space-2, 0.5rem);
	padding-block-start: var(--discovery-space-4, 1rem);
	border-block-start: 1px solid var(--intemporris-signature-filet);
	line-height: 1.5;
}

body.psm-screen .psm-page :is(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--intemporris-signature-accent);
}

/* Ce qui est consigné : le lien discret, puis le texte en gris, dans la
   colonne de lecture. */
body.psm-screen .psm-page .psm-recorded {
	margin-block-start: var(--discovery-space-6, 1.5rem);
}

body.psm-screen .psm-page .psm-recorded-text:not([hidden]) {
	color: var(--intemporris-signature-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
	line-height: 1.65;
}


/* Les champs */

/* Une feuille autour des formulaires de l'identité et de la signature : un
   champ ne se pose jamais nu dans la nuit. La signature est la dernière
   feuille du parapheur, fermée par un bord dans l'accent. */
body.psm-screen .psm-page :is(.psm-form--identity, .psm-form--sign) {
	padding: var(--discovery-space-5, 1.25rem) var(--discovery-space-4, 1rem);
	border: 1px solid var(--intemporris-signature-filet);
	border-block-start-color: var(--intemporris-signature-filet-accent);
	border-radius: var(--intemporris-signature-rayon);
	background: var(--intemporris-signature-plaque);
}

body.psm-screen .psm-page .psm-form--sign {
	border-block-end: 4px solid var(--intemporris-signature-accent);
	box-shadow:
		0 0.375rem 0 -0.1875rem var(--intemporris-signature-feuille-fond),
		0 0.75rem 0 -0.375rem var(--intemporris-signature-feuille-dessous);
}

/* Le jeton caché ouvre le formulaire : le premier élément visible ne prend
   pas d'air au-dessus de lui. */
body.psm-screen .psm-page .psm-form > input[type="hidden"]:first-child + * {
	margin-block-start: 0;
}

@media (min-width: 36rem) {

	body.psm-screen .psm-page :is(.psm-form--identity, .psm-form--sign) {
		padding: var(--discovery-space-6, 1.5rem) var(--discovery-space-8, 2rem);
	}
}

/* Le libellé en blanc, l'aide en gris dessous, puis le champ. */
body.psm-screen .psm-page .psm-field {
	gap: var(--discovery-space-2, 0.5rem);
}

body.psm-screen .psm-page :is(.psm-label, .psm-field-label, .psm-sig .psm-field > label, .psm-field--radios > legend) {
	margin: 0;
	padding: 0;
	color: var(--discovery-color-text, #ffffff);
	font-weight: var(--discovery-weight-semibold, 600);
}

body.psm-screen .psm-page :is(.psm-hint, .psm-sig .description) {
	margin: 0;
	color: var(--intemporris-signature-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
	line-height: 1.5;
}

/* Un champ de saisie : du verre aux coins arrondis, de la hauteur des
   commandes, au contour à 3 pour 1. */
body.psm-screen .psm-page :is(.psm-input, .psm-sig input[type="text"]) {
	box-sizing: border-box;
	min-block-size: var(--intemporris-signature-cible);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-4, 1rem);
	border: 1px solid var(--intemporris-signature-contour);
	border-radius: var(--intemporris-signature-champ-rayon);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 6%, transparent), transparent 60%),
		var(--discovery-color-background, #000000);
	color: var(--discovery-color-text, #ffffff);
	font: inherit;
	line-height: 1.3;
	transition: border-color var(--intemporris-signature-duree);
}

body.psm-screen .psm-page :is(.psm-input, .psm-sig input[type="text"]):hover {
	border-color: var(--discovery-color-text, #ffffff);
}

body.psm-screen .psm-page .psm-sig .regular-text {
	max-inline-size: 24rem;
}

/* Le code reçu : en chiffres à chasse égale, espacés, pour qu'il se lise
   et se recopie chiffre par chiffre. */
body.psm-screen .psm-page .psm-input--code {
	max-inline-size: 11rem;
	font-family: var(--discovery-font-mono, ui-monospace, monospace);
	font-size: var(--discovery-text-lg, 1.125rem);
	letter-spacing: 0.25em;
}

/* Un champ refusé : son contour passe à la couleur d'erreur du thème, à la
   même épaisseur. */
body.psm-screen .psm-page [aria-invalid="true"] {
	border-width: 1px;
	border-color: var(--intemporris-signature-erreur);
}


/* Les erreurs */

/* Le résumé des erreurs : l'encadré de contexte de l'espace, tenu à gauche
   par la couleur d'erreur, sur une lueur de la même couleur. Chaque
   erreur est un lien vers son champ. */
body.psm-screen .psm-page .psm-errors {
	padding: var(--discovery-space-4, 1rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid color-mix(in srgb, var(--intemporris-signature-erreur) 45%, transparent);
	border-inline-start: var(--intemporris-signature-barre) solid var(--intemporris-signature-erreur);
	border-radius: var(--intemporris-signature-champ-rayon);
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--intemporris-signature-erreur) 10%, transparent), transparent 80%),
		var(--intemporris-signature-nuit);
}

body.psm-screen .psm-page .psm-errors-title {
	display: flex;
	align-items: center;
	gap: var(--discovery-space-2, 0.5rem);
	margin-block-end: var(--discovery-space-2, 0.5rem);
	font-size: var(--discovery-text-base, 1rem);
}

body.psm-screen .psm-page .psm-errors-title .psm-icon {
	margin: 0;
	color: var(--intemporris-signature-erreur);
}

body.psm-screen .psm-page .psm-errors-list {
	padding-inline-start: var(--discovery-space-5, 1.25rem);
	line-height: 1.55;
}

body.psm-screen .psm-page .psm-errors-list a {
	color: var(--discovery-color-text, #ffffff);
	text-decoration-line: underline;
	text-decoration-color: var(--intemporris-signature-erreur);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* L'erreur de connexion se détache de la phrase qui invite à se
   connecter : un peu d'air au-dessus d'elle. */
body.psm-screen .psm-page .psm-account-offer .psm-login > .psm-errors:first-child {
	margin-block-start: var(--discovery-space-4, 1rem);
}

/* Le message d'un champ : dans la couleur d'erreur, au-dessus du champ,
   tenu à gauche par un filet de la même couleur. */
body.psm-screen .psm-page .psm-field-error {
	margin: 0;
	padding-inline-start: var(--discovery-space-3, 0.75rem);
	border-inline-start: var(--intemporris-signature-barre) solid var(--intemporris-signature-erreur);
	color: var(--intemporris-signature-erreur);
	font-size: var(--discovery-text-sm, 0.875rem);
	font-weight: var(--discovery-weight-semibold, 600);
	line-height: 1.5;
}

/* Un document dont l'accord manque prend la couleur d'erreur en haut et à
   gauche. */
body.psm-screen .psm-page .psm-document:has(.psm-consent [aria-invalid="true"]) {
	border-block-start-color: var(--intemporris-signature-erreur);
	border-inline-start-color: var(--intemporris-signature-erreur);
}


/* La signature */

/* Le composant de signature : son titre, puis les champs du nom et des
   initiales, la façon de signer, les styles, l'encre et l'épaisseur. */
body.psm-screen .psm-page .psm-sig {
	gap: var(--discovery-space-6, 1.5rem);
}

body.psm-screen .psm-page .psm-sig > .psm-sig-legend {
	margin-block-end: var(--discovery-space-5, 1.25rem);
	font-size: var(--discovery-text-lg, 1.125rem);
}

/* Un choix parmi quelques-uns : les options sur une ligne quand la place
   le permet. */
body.psm-screen .psm-page .psm-sig .psm-field--radios:not(.psm-sig-styles) {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--discovery-space-6, 1.5rem);
}

body.psm-screen .psm-page .psm-sig .psm-field--radios:not(.psm-sig-styles) > legend {
	margin-block-end: var(--discovery-space-1, 0.25rem);
}

body.psm-screen .psm-page .psm-sig .psm-radio {
	gap: var(--discovery-space-3, 0.75rem);
}

/* Les styles d'écriture : de petites cartes plates au rayon des champs.
   La carte choisie prend le contour de l'accent sur une lueur ; sa pastille
   cochée le dit aussi. */
body.psm-screen .psm-page .psm-sig-styles {
	gap: var(--discovery-space-3, 0.75rem);
}

body.psm-screen .psm-page .psm-sig-styles > legend {
	margin-block-end: var(--discovery-space-2, 0.5rem);
}

body.psm-screen .psm-page .psm-sig-style {
	column-gap: var(--discovery-space-3, 0.75rem);
	padding: var(--discovery-space-3, 0.75rem) var(--discovery-space-4, 1rem);
	border: 1px solid var(--intemporris-signature-filet);
	border-radius: var(--intemporris-signature-champ-rayon);
	background: var(--intemporris-signature-carte);
	box-shadow: none;
	transition: border-color var(--intemporris-signature-duree);
}

body.psm-screen .psm-page .psm-sig-style:hover {
	border-color: var(--intemporris-signature-contour);
}

body.psm-screen .psm-page .psm-sig-style:has(input:checked) {
	border-color: var(--intemporris-signature-accent);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-signature-accent) 18%, transparent), transparent 60%),
		var(--intemporris-signature-carte);
	box-shadow: none;
}

body.psm-screen .psm-page .psm-sig-style input[type="radio"] {
	margin-block-start: var(--discovery-space-1, 0.25rem);
}

body.psm-screen .psm-page .psm-sig-style-name {
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
}

/* Le papier garde sa teinte claire ; il prend le rayon des champs et un
   peu d'air autour de l'encre. */
body.psm-screen .psm-page .psm-sig-paper {
	margin-block-start: var(--discovery-space-2, 0.5rem);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-3, 0.75rem);
	border-radius: calc(var(--intemporris-signature-champ-rayon) - 0.125rem);
}

body.psm-screen .psm-page .psm-sig-style .description {
	margin-block-start: var(--discovery-space-2, 0.5rem);
}

body.psm-screen .psm-page .psm-sig-canvas {
	border: 1px solid var(--intemporris-signature-contour);
	border-radius: var(--intemporris-signature-champ-rayon);
}

/* Le titre des styles d'écriture prend un peu d'air avant les cartes. */
body.psm-screen .psm-page .psm-sig .psm-sig-styles > legend {
	padding-block-end: var(--discovery-space-3, 0.75rem);
}

/* Les mentions : une carte par document, son titre posé dedans, en tête,
   et non sur le cadre ; de l'air entre les cartes. */
body.psm-screen .psm-page .psm-form--sign > .psm-group {
	margin: var(--discovery-space-6, 1.5rem) 0 0;
	padding: var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-signature-filet);
	border-radius: var(--intemporris-signature-champ-rayon);
	background: var(--intemporris-signature-carte);
}

body.psm-screen .psm-page .psm-group > .psm-group-legend {
	float: inline-start;
	inline-size: 100%;
	margin: 0 0 var(--discovery-space-4, 1rem);
	padding: 0;
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-lg, 1.125rem);
	line-height: 1.3;
}

body.psm-screen .psm-page .psm-group > .psm-group-legend + * {
	clear: both;
}

body.psm-screen .psm-page .psm-group .psm-field--choices {
	display: grid;
	gap: var(--discovery-space-2, 0.5rem);
}

body.psm-screen .psm-page .psm-group .psm-field--choices > legend {
	float: inline-start;
	inline-size: 100%;
	margin-block-end: var(--discovery-space-1, 0.25rem);
}

/* La commande de signature se pose sous un filet, détachée des champs. */
body.psm-screen .psm-page .psm-form--sign > .psm-actions:not(.psm-actions--back) {
	padding-block-start: var(--discovery-space-6, 1.5rem);
	border-block-start: 1px solid var(--intemporris-signature-filet);
}


/* Le refus */

/* Le refus est un autre geste : il se tient à l'écart du passage, sous un
   filet, en capsule au contour neutre. Le rouge reste au bouton qui
   confirme le refus, sur l'écran du refus, comme Pluma le prévoit. */
body.psm-screen .psm-page > .psm-refuse {
	margin-block-start: var(--intemporris-signature-air-groupe);
	padding-block-start: var(--discovery-space-5, 1.25rem);
	border-block-start: 1px solid var(--intemporris-signature-filet);
}

body.psm-screen .psm-page > .psm-refuse .psm-button--quiet:not([hidden]) {
	box-sizing: border-box;
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-signature-contour);
	border-radius: var(--intemporris-signature-rond);
	text-decoration-line: none;
	transition: border-color var(--intemporris-signature-duree), background-color var(--intemporris-signature-duree);
}

body.psm-screen .psm-page > .psm-refuse .psm-button--quiet:not([hidden]):is(:hover, :focus-visible) {
	border-color: var(--discovery-color-text, #ffffff);
	background-color: color-mix(in srgb, var(--intemporris-signature-accent) 18%, transparent);
}


/* Le refus confirmé, le dépôt, les reçus et les demandes closes */

/* Le bouton qui confirme le refus garde le contour rouge que Pluma lui
   donne : la règle des capsules ne le recouvre pas. */
body.psm-screen .psm-page .psm-button.psm-button--danger:not([hidden]) {
	border-color: var(--intemporris-signature-erreur);
}

body.psm-screen .psm-page .psm-button.psm-button--danger:not([hidden]):is(:hover, :focus-visible) {
	border-color: var(--discovery-color-text, #ffffff);
	background-color: color-mix(in srgb, var(--intemporris-signature-erreur) 14%, transparent);
}

body.psm-screen .psm-page .psm-button--danger .psm-icon {
	color: var(--intemporris-signature-erreur);
}

/* Les formulaires du refus, du dépôt et de l'éditeur de placement : la
   plaque des formulaires de l'identité et de la signature. */
body.psm-screen .psm-page :is(.psm-form--decline, .psm-form--deposit, .psm-form--editor) {
	padding: var(--discovery-space-5, 1.25rem) var(--discovery-space-4, 1rem);
	border: 1px solid var(--intemporris-signature-filet);
	border-block-start-color: var(--intemporris-signature-filet-accent);
	border-radius: var(--intemporris-signature-rayon);
	background: var(--intemporris-signature-plaque);
}

@media (min-width: 36rem) {

	body.psm-screen .psm-page :is(.psm-form--decline, .psm-form--deposit, .psm-form--editor) {
		padding: var(--discovery-space-6, 1.5rem) var(--discovery-space-8, 2rem);
	}
}

body.psm-screen .psm-page :is(.psm-form--decline, .psm-form--deposit) > .psm-actions {
	margin-block-start: var(--discovery-space-6, 1.5rem);
}

/* La liste des documents refusés : une case par ligne, un peu d'air. */
body.psm-screen .psm-page .psm-field--choices {
	display: grid;
	gap: var(--discovery-space-2, 0.5rem);
	margin: 0;
	padding: 0;
	border: 0;
}

body.psm-screen .psm-page .psm-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--discovery-space-3, 0.75rem);
	line-height: 1.5;
}

/* Le motif : le champ de verre, sur plusieurs lignes. */
body.psm-screen .psm-page textarea.psm-input {
	min-block-size: 7rem;
	resize: vertical;
}

/* Les sections de la page de dépôt : des titres posés avec l'air d'un
   nouveau groupe. */
body.psm-screen .psm-page--deposit > h3 {
	margin-block: var(--intemporris-signature-air-groupe) 0;
	font-size: var(--discovery-text-xl, 1.25rem);
}

body.psm-screen .psm-page--deposit > h3 + * {
	margin-block-start: var(--discovery-space-4, 1rem);
}

/* Le choix du fichier : son bouton prend la capsule des commandes. */
/* Le choix du fichier ne déborde pas de la plaque : le nom du fichier se
   coupe à la largeur disponible. */
body.psm-screen .psm-page .psm-field:has(> input[type="file"]) {
	min-inline-size: 0;
}

body.psm-screen .psm-page input[type="file"] {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
}

body.psm-screen .psm-page input[type="file"]::file-selector-button {
	min-block-size: var(--intemporris-signature-cible);
	margin-inline-end: var(--discovery-space-3, 0.75rem);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-signature-contour);
	border-radius: var(--intemporris-signature-rond);
	background: transparent;
	color: var(--discovery-color-text, #ffffff);
	font: inherit;
	font-size: var(--discovery-text-sm, 0.875rem);
	font-weight: var(--discovery-weight-semibold, 600);
	cursor: pointer;
}

body.psm-screen .psm-page input[type="file"]:hover::file-selector-button {
	border-color: var(--discovery-color-text, #ffffff);
}

/* L'éditeur de placement : le titre du document, les intertitres en
   petites capitales grises, les champs posés en petites cartes. */
body.psm-screen .psm-page .psm-editor > h4 {
	margin: 0 0 var(--discovery-space-2, 0.5rem);
	font-size: var(--discovery-text-lg, 1.125rem);
	line-height: 1.3;
}

body.psm-screen .psm-page .psm-editor :is(h5, .psm-editor-preview-note) {
	margin: var(--discovery-space-6, 1.5rem) 0 var(--discovery-space-3, 0.75rem);
	color: var(--intemporris-signature-doux);
	font-size: var(--discovery-text-xs, 0.75rem);
	font-weight: var(--discovery-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body.psm-screen .psm-page .psm-editor .psm-editor-list {
	display: grid;
	gap: var(--discovery-space-3, 0.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.psm-screen .psm-page .psm-editor .psm-editor-list > li {
	margin: 0;
	padding: var(--discovery-space-3, 0.75rem) var(--discovery-space-4, 1rem);
	border: 1px solid var(--intemporris-signature-filet);
	border-radius: var(--intemporris-signature-champ-rayon);
	background: var(--intemporris-signature-carte);
}

body.psm-screen .psm-page .psm-editor .psm-editor-list > li.psm-editor-list--current {
	border-color: var(--intemporris-signature-filet-accent);
	border-inline-start: var(--intemporris-signature-barre) solid var(--intemporris-signature-accent);
}

body.psm-screen .psm-page .psm-editor .psm-editor-list p {
	margin: 0;
	line-height: 1.5;
}

body.psm-screen .psm-page .psm-editor .psm-state--warn {
	color: var(--intemporris-signature-accent);
	font-size: var(--discovery-text-sm, 0.875rem);
}

body.psm-screen .psm-page .psm-editor .psm-editor-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--discovery-space-2, 0.5rem) var(--discovery-space-4, 1rem);
	margin-block-start: var(--discovery-space-3, 0.75rem);
}

/* Les champs de l'éditeur, l'un sous l'autre, avec l'air d'un champ. */
body.psm-screen .psm-page .psm-editor .psm-editor-controls > .psm-field,
body.psm-screen .psm-page .psm-editor fieldset.psm-field > .psm-field {
	display: grid;
	gap: var(--discovery-space-2, 0.5rem);
	margin-block-start: var(--discovery-space-4, 1rem);
}

body.psm-screen .psm-page .psm-editor :is(.psm-field > label, fieldset > legend) {
	color: var(--discovery-color-text, #ffffff);
	font-weight: var(--discovery-weight-semibold, 600);
}

body.psm-screen .psm-page .psm-editor .description {
	margin: 0;
	color: var(--intemporris-signature-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
	line-height: 1.5;
}

/* Un choix parmi quelques-uns : sans cadre, les options à la suite. */
body.psm-screen .psm-page .psm-editor fieldset.psm-field--radios {
	display: flex;
	flex-wrap: wrap;
	gap: var(--discovery-space-2, 0.5rem) var(--discovery-space-6, 1.5rem);
	margin: var(--discovery-space-5, 1.25rem) 0 0;
	padding: 0;
	border: 0;
}

body.psm-screen .psm-page .psm-editor fieldset.psm-field--radios > legend {
	float: inline-start;
	inline-size: 100%;
	margin-block-end: var(--discovery-space-1, 0.25rem);
	padding: 0;
}

body.psm-screen .psm-page .psm-editor .psm-radio {
	display: flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
}

/* L'emplacement, le texte repère et la zone : chacun une carte, son titre
   posé dedans. */
body.psm-screen .psm-page .psm-editor fieldset:is(.psm-editor-position, .psm-editor-anchor, .psm-editor-zone) {
	margin: var(--discovery-space-5, 1.25rem) 0 0;
	padding: var(--discovery-space-4, 1rem) var(--discovery-space-5, 1.25rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-signature-filet);
	border-radius: var(--intemporris-signature-champ-rayon);
	background: var(--intemporris-signature-carte);
}

body.psm-screen .psm-page .psm-editor fieldset:is(.psm-editor-position, .psm-editor-anchor, .psm-editor-zone) > legend {
	float: inline-start;
	inline-size: 100%;
	margin: 0;
	padding: 0;
}

body.psm-screen .psm-page .psm-editor fieldset:is(.psm-editor-position, .psm-editor-anchor, .psm-editor-zone) > legend + * {
	clear: both;
}

body.psm-screen .psm-page .psm-editor fieldset:is(.psm-editor-position, .psm-editor-anchor, .psm-editor-zone) > :is(.description, .psm-button) {
	margin-block-start: var(--discovery-space-4, 1rem);
}

/* Les champs de saisie et les listes de l'éditeur : le verre des champs. */
body.psm-screen .psm-page .psm-editor :is(select, input[type="text"], input[type="number"], input[type="search"]) {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 24rem;
	min-block-size: var(--intemporris-signature-cible);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-4, 1rem);
	border: 1px solid var(--intemporris-signature-contour);
	border-radius: var(--intemporris-signature-champ-rayon);
	background-color: var(--discovery-color-background, #000000);
	color: var(--discovery-color-text, #ffffff);
	font: inherit;
}

body.psm-screen .psm-page .psm-editor select {
	max-inline-size: 100%;
}

body.psm-screen .psm-page .psm-editor input.small-text {
	max-inline-size: 8rem;
}

body.psm-screen .psm-page .psm-editor .psm-editor-submit {
	margin-block-start: var(--discovery-space-6, 1.5rem);
	padding-block-start: var(--discovery-space-5, 1.25rem);
	border-block-start: 1px solid var(--intemporris-signature-filet);
}

/* L'aperçu de la page garde son papier ; il prend le rayon des champs. */
body.psm-screen .psm-page .psm-editor .psm-editor-sheet {
	border-radius: calc(var(--intemporris-signature-champ-rayon) - 0.125rem);
	overflow: hidden;
}

/* La validation du dépôt, détachée de l'éditeur sous un filet. */
body.psm-screen .psm-page > .psm-form--validate {
	margin-block-start: var(--intemporris-signature-air-groupe);
	padding-block-start: var(--discovery-space-5, 1.25rem);
	border-block-start: 1px solid var(--intemporris-signature-filet);
}

body.psm-screen .psm-page > .psm-form--validate .psm-hint {
	margin: 0 0 var(--discovery-space-3, 0.75rem);
	color: var(--intemporris-signature-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
}

/* Les avis : l'encadré de la phrase de l'identité, tenu à gauche par la
   couleur de leur sens ; l'icône dans la même couleur. */
body.psm-screen .psm-page .psm-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--discovery-space-3, 0.75rem);
	padding: var(--discovery-space-4, 1rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-signature-filet);
	border-inline-start: var(--intemporris-signature-barre) solid var(--intemporris-signature-accent);
	border-radius: var(--intemporris-signature-champ-rayon);
	background: color-mix(in srgb, var(--intemporris-signature-accent) 6%, var(--intemporris-signature-nuit));
	line-height: 1.55;
}

body.psm-screen .psm-page .psm-notice--success {
	border-inline-start-color: var(--discovery-color-succes, #7ddf9a);
}

body.psm-screen .psm-page .psm-notice--error {
	border-inline-start-color: var(--intemporris-signature-erreur);
}

body.psm-screen .psm-page .psm-notice .psm-icon {
	flex: none;
	margin: 0.2em 0 0;
}

body.psm-screen .psm-page .psm-notice--success .psm-icon {
	color: var(--discovery-color-succes, #7ddf9a);
}

/* Les documents signés : chacun une feuille, son nom en tête, le
   téléchargement dessous, au même endroit quelle que soit la longueur du
   nom. */
body.psm-screen .psm-page .psm-signed {
	gap: var(--discovery-space-3, 0.75rem);
}

body.psm-screen .psm-page .psm-signed-item {
	display: grid;
	justify-items: start;
	gap: var(--discovery-space-3, 0.75rem);
	padding: var(--discovery-space-4, 1rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-signature-filet);
	border-inline-start: var(--intemporris-signature-barre) solid var(--intemporris-signature-accent);
	border-radius: var(--intemporris-signature-champ-rayon);
	background: var(--intemporris-signature-plaque);
}

body.psm-screen .psm-page .psm-signed-name {
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-lg, 1.125rem);
	line-height: 1.3;
}

/* Les certificats, à l'écart des documents. */
body.psm-screen .psm-page > .psm-form--receipt + .psm-form--certificate {
	margin-block-start: var(--discovery-space-6, 1.5rem);
}

/* Les comptes rendus et la demande achevée : un cachet au-dessus du
   titre, un double anneau dans l'accent ; il porte une coche quand un
   geste est fait, il reste vide pour un refus. La phrase de tête prend
   la taille d'un message ; la suite se pose en encadré. */
body.psm-screen .psm-page:is(.psm-page--receipt, .psm-page--completed) > .psm-heading::before {
	content: "" / "";
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	margin-block-end: var(--discovery-space-5, 1.25rem);
	border: 1.5px solid var(--intemporris-signature-accent);
	border-radius: var(--intemporris-signature-rond);
	background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--intemporris-signature-accent) 24%, transparent), transparent 70%);
	box-shadow:
		inset 0 0 0 0.3125rem var(--discovery-color-background, #000000),
		inset 0 0 0 0.40625rem var(--intemporris-signature-filet-accent);
	color: var(--intemporris-signature-accent);
	font-size: var(--discovery-text-xl, 1.25rem);
	line-height: 1;
}

body.psm-screen .psm-page.psm-page--completed > .psm-heading::before,
body.psm-screen .psm-page--receipt:has(> .psm-lead + :is(p, .psm-notice, .psm-form)) > .psm-heading::before {
	content: "\2713" / "";
}

body.psm-screen .psm-page:is(.psm-page--receipt, .psm-page--completed) > .psm-lead {
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-lg, 1.125rem);
}

body.psm-screen .psm-page--receipt > .psm-lead + p,
body.psm-screen .psm-page--receipt > .psm-form--resume {
	padding: var(--discovery-space-4, 1rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-signature-filet);
	border-inline-start: var(--intemporris-signature-barre) solid var(--intemporris-signature-accent);
	border-radius: var(--intemporris-signature-champ-rayon);
	background: var(--intemporris-signature-plaque);
	color: var(--intemporris-signature-texte);
	line-height: 1.6;
}

body.psm-screen .psm-page--receipt > .psm-form--resume > p {
	margin: 0 0 var(--discovery-space-4, 1rem);
}

body.psm-screen .psm-page--receipt > .psm-form--resume > input[type="hidden"]:first-child + p {
	margin-block-start: 0;
}

/* L'état d'une demande close : une feuille, son titre, l'avancement en
   gris, puis chaque personne et son geste. */
body.psm-screen .psm-page .psm-ui--request-status {
	padding: var(--discovery-space-5, 1.25rem) var(--discovery-space-6, 1.5rem);
	border: 1px solid var(--intemporris-signature-filet);
	border-radius: var(--intemporris-signature-rayon);
	background: var(--intemporris-signature-plaque);
}

body.psm-screen .psm-page .psm-ui--request-status .psm-ui-title {
	margin: 0 0 var(--discovery-space-2, 0.5rem);
	font-size: var(--discovery-text-lg, 1.125rem);
	line-height: 1.3;
}

body.psm-screen .psm-page .psm-ui--request-status :is(.psm-status, .psm-people li) {
	display: flex;
	align-items: flex-start;
	gap: var(--discovery-space-2, 0.5rem);
	margin: 0;
	line-height: 1.5;
}

body.psm-screen .psm-page .psm-ui--request-status .psm-status {
	color: var(--intemporris-signature-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
}

body.psm-screen .psm-page .psm-ui--request-status .psm-people {
	display: grid;
	gap: var(--discovery-space-2, 0.5rem);
	margin: var(--discovery-space-4, 1rem) 0 0;
	padding: var(--discovery-space-4, 1rem) 0 0;
	border-block-start: 1px solid var(--intemporris-signature-filet);
	list-style: none;
}

body.psm-screen .psm-page .psm-ui--request-status .psm-icon {
	flex: none;
	margin: 0.2em 0 0;
	color: var(--intemporris-signature-doux);
}

body.psm-screen .psm-page .psm-ui--request-status .psm-icon--success {
	color: var(--intemporris-signature-accent);
}


/* Les préférences de l'utilisateur */

@media (prefers-reduced-motion: reduce) {

	body.psm-screen .psm-page :is(.psm-button, .psm-input, .psm-sig input, .psm-sig-style, .psm-sig-actions .button) {
		transition: none;
	}
}

@media (prefers-contrast: more), (forced-colors: active) {

	body.psm-screen .psm-page--receipt > :is(.psm-lead + p, .psm-form--resume) {
		background: var(--discovery-color-background, #000000);
	}

	body.psm-screen .psm-page :is(.psm-document, .psm-form--identity, .psm-form--sign, .psm-errors, .psm-reading, .psm-sig-style, .psm-sig-style:has(input:checked), .psm-step-mark, .psm-step--current .psm-step-mark, .psm-form--decline, .psm-form--deposit, .psm-form--editor, .psm-notice, .psm-signed-item, .psm-ui--request-status, .psm-group, .psm-editor-list > li, .psm-editor fieldset) {
		background: var(--discovery-color-background, #000000);
	}

	body.psm-screen .psm-page :is(.psm-button--primary, .psm-button--secondary, .psm-button--danger, .psm-sig-actions .button, .psm-input, .psm-sig input[type="text"]):not([hidden]) {
		background: var(--discovery-color-background, #000000);
	}

	body.psm-screen .psm-page :is(.psm-document, .psm-sig-style, .psm-reading, .psm-form--identity, .psm-form--sign, .psm-form--decline, .psm-form--deposit, .psm-form--editor, .psm-signed-item, .psm-ui--request-status, .psm-group) {
		border-color: var(--discovery-color-text, #ffffff);
	}
}