/*
 * L'espace professionnels — issue 20. Référence : planche 8, maquette 10
 * (desktop et mobile). Balisage : inc/pro.php.
 *
 * Valeurs de la maquette ramenées à l'échelle : titres de preuve et d'étape
 * 18-19 → 22 (Fraunces jamais sous 22), textes 13,5-15 → 14 et 17, pastilles
 * d'étape 30 → 32, marges 18 → 16, 20 → 24, 28 → 32.
 * Surtitre et en-têtes de tableau en encre douce, pas en bronze (4,45:1 sur
 * sable, 4,36 sur champagne pâle).
 */

/* --- La page ---------------------------------------------------------------- */
.pel-pro__surtitre {
	margin: 0 0 var(--pel-space-s);
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	font-weight: 600;
	letter-spacing: var(--pel-capitales);
	text-transform: uppercase;
}

.pel-pro__titre {
	max-width: calc(var(--pel-container) * 0.7);
	margin: 0 0 var(--pel-space-s);
	font-size: var(--pel-fs-display);
	line-height: var(--pel-lh-titre);
}

.pel-pro__chapo,
.pel-pro__intro {
	max-width: calc(var(--pel-container) * 0.55);
	margin: 0 0 var(--pel-space-m);
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-pro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pel-space-xs);
	margin: 0;
}

.pel-pro__client {
	margin: var(--pel-space-s) 0 0;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
}

.pel-pro__degressifs {
	max-width: calc(var(--pel-container) * 0.6);
}

.pel-pro__compte {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--pel-space-xl);
	align-items: start;
}

.pel-pro__suivi {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-s);
}

.pel-pro__suivi-titre,
.pel-pro__suivi-texte {
	margin: 0;
}

.pel-pro__suivi-texte {
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

/* --- pel-public-proof ------------------------------------------------------- */
.pel-public-proof {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: var(--pel-space-m) 0 0;
	padding: 0;
	list-style: none;
}

.pel-public-proof__item {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-2xs);
	padding: var(--pel-space-m);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
}

.pel-public-proof__titre {
	margin: 0;
}

.pel-public-proof__texte {
	margin: 0;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

/* --- pel-steps ---------------------------------------------------------------- */
.pel-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pel-steps--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pel-steps__item {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-xs);
	padding-top: var(--pel-space-s);
	border-top: var(--pel-trait) solid var(--pel-champagne);   /* décoratif */
}

.pel-steps__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pel-space-l);
	height: var(--pel-space-l);
	border-radius: var(--pel-radius-pill);
	background: var(--pel-champagne-pale);
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	font-weight: 700;
}

.pel-steps__titre,
.pel-steps__texte {
	margin: 0;
}

.pel-steps__texte {
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

/* --- pel-degressive-table ------------------------------------------------------ */
.pel-degressive-table {
	padding: var(--pel-space-l);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
}

.pel-degressive-table__tableau {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.pel-degressive-table__legende {
	padding-bottom: var(--pel-space-s);
	font-family: var(--pel-font-titre);
	font-size: var(--pel-fs-h3);
	font-weight: 600;
	line-height: var(--pel-lh-titre);
	text-align: left;
}

.pel-degressive-table__entete,
.pel-degressive-table__tranche,
.pel-degressive-table__taux {
	padding-block: var(--pel-space-xs);
	border-bottom: var(--pel-filet) solid var(--pel-lin);
	font-weight: 400;
}

.pel-degressive-table__entete {
	padding-top: 0;
	border-bottom-color: var(--pel-encre);
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	font-weight: 600;
	letter-spacing: var(--pel-capitales-legende);
	text-transform: uppercase;
}

.pel-degressive-table__taux {
	font-weight: 700;
	white-space: nowrap;
}

.pel-degressive-table__note {
	margin: var(--pel-space-s) 0 0;
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

/* --- pel-account-status : un mot et une forme ------------------------------------ */
.pel-account-status {
	display: flex;
	align-items: flex-start;
	gap: var(--pel-space-xs);
	padding: var(--pel-space-s);
	border-radius: var(--pel-radius-m);
	background: var(--pel-champagne-pale);
}

.pel-account-status__forme {
	box-sizing: border-box;
	flex-shrink: 0;
	width: var(--pel-pastille);
	height: var(--pel-pastille);
	margin-top: calc((1lh - var(--pel-pastille)) / 2);
	border-radius: var(--pel-radius-pill);
}

.pel-account-status__forme--pending {
	border: var(--pel-trait) solid var(--pel-encre-douce);    /* rond vide */
}

.pel-account-status__forme--validated {
	background: var(--pel-disponible);                          /* rond plein */
}

.pel-account-status__forme--rejected {
	border-radius: 0;                                           /* carré */
	background: var(--pel-terre-foncee);
}

.pel-account-status__titre {
	margin: 0;
	color: var(--pel-encre);
	font-weight: 700;
}

.pel-account-status__texte {
	margin: 0;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

/* --- pel-pro-form ----------------------------------------------------------------- */
.pel-pro-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pel-space-s);
	margin-top: var(--pel-space-s);
	padding: var(--pel-space-l);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
}

.pel-pro-form__champs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pel-space-s);
	align-self: stretch;
}

/* Un champ hors de la grille (un texte long) prend toute la largeur. */
.pel-pro-form__champ {
	align-self: stretch;
}

.pel-field__input--multiligne {
	padding-block: var(--pel-space-xs);
	line-height: var(--pel-lh-texte);
	resize: vertical;
}

/* Le piège à robots : hors de l'écran, hors de la tabulation. */
.pel-pro-form__piege {
	position: absolute;
	left: calc(var(--pel-container) * -10);
	margin: 0;
}

.pel-pro-form__erreur {
	align-self: stretch;
	margin: 0;
	padding: var(--pel-space-xs) var(--pel-space-s);
	border-left: var(--pel-trait) solid var(--pel-terre-foncee);
	background: var(--pel-champagne-pale);
	color: var(--pel-terre-foncee);         /* 5,63:1 */
	font-weight: 600;
}

.pel-pro-form__titre {
	margin: 0;
	color: var(--pel-encre);
	font-size: var(--pel-fs-h3);
	font-family: var(--pel-font-titre);
	font-weight: 600;
}

.pel-pro-form__texte {
	margin: 0;
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

@media (max-width: 991px) {
	.pel-public-proof,
	.pel-steps,
	.pel-steps--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pel-pro__compte {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.pel-public-proof,
	.pel-steps,
	.pel-steps--5,
	.pel-pro-form__champs {
		grid-template-columns: minmax(0, 1fr);
	}

	.pel-pro-form,
	.pel-degressive-table {
		padding: var(--pel-space-m);
	}
}

/* --- pel-pro-form--longue-duree : les types d'espace, plusieurs possibles ----- */
.pel-pro-form__espaces {
	align-self: stretch;
}

.pel-pro-form__cases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pel-space-2xs) var(--pel-space-s);
}

.pel-pro-form__precision {
	color: var(--pel-gris-chaud);
	font-weight: 400;
}

@media (max-width: 767px) {
	.pel-pro-form__cases {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Mon espace (#263) : deux choix côte à côte, l'un sous l'autre sur mobile --- */
.pel-mon-espace__h1 {
	margin: 0 0 var(--pel-space-xs);
}

.pel-mon-espace__intro,
.pel-mon-espace__aide {
	margin: 0;
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-mon-espace__liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: var(--pel-space-l) 0;
	padding: 0;
	list-style: none;
}

.pel-mon-espace__choix {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pel-space-xs);
	padding: var(--pel-space-m);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-m);
	background: var(--pel-blanc);
}

.pel-mon-espace__titre {
	margin: 0;
	font-size: var(--pel-fs-h3);
}

.pel-mon-espace__texte {
	margin: 0;
	line-height: var(--pel-lh-texte);
}

.pel-mon-espace__bouton {
	margin-top: auto;
}

@media (max-width: 767px) {
	.pel-mon-espace__liste {
		grid-template-columns: minmax(0, 1fr);
	}
}