/*
 * Les trois issues du projet et la bascule en devis — issue 17. Référence :
 * planche 8, maquettes 5 et 5 bis. Balisage : inc/parcours.php.
 *
 * Valeurs de la planche ramenées à l’échelle : chapeaux 14,5 → 17 et texte du
 * bandeau 15 → 17 (corps de texte), points et raisons 13-14 → 14, écarts
 * 7 → 8, 14 → 16, 18 → 16.
 * Raison du verrou en encre douce, pas en bronze : le bronze n'y fait que
 * 4,36:1 sur champagne pâle (même arbitrage que les badges, issue 07).
 */

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

.pel-paths__titre {
	margin: 0;
}

.pel-paths__liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pel-space-m);
	align-items: stretch;
}

/* --- pel-quote-notice ----------------------------------------------------- */
.pel-quote-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--pel-space-s);
	padding: var(--pel-space-m);
	border: var(--pel-filet) solid var(--pel-champagne);   /* décoratif */
	border-radius: var(--pel-radius-l);
	background: var(--pel-champagne-pale);
}

.pel-quote-notice__icone {
	flex-shrink: 0;
	width: var(--pel-case);
	height: var(--pel-case);
	color: var(--pel-bronze);                /* pictogramme : 3:1 suffit, 4,36:1 */
}

.pel-quote-notice__titre {
	margin: 0 0 var(--pel-space-3xs);
	color: var(--pel-encre);
	font-size: var(--pel-fs-champ);
	font-weight: 700;
}

.pel-quote-notice__texte {
	margin: 0;
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

/* --- pel-path-card -------------------------------------------------------- */
.pel-path-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-s);
	padding: var(--pel-space-m);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
}

/* L'issue mise en avant : bordure épaisse, badge, bouton plein. */
.pel-path-card--featured {
	border: var(--pel-trait) solid var(--pel-terre-cuite);
}

.pel-path-card__badge {
	align-self: flex-start;
	margin: 0;
	color: var(--pel-terre-foncee);          /* 5,63:1 sur champagne pâle */
}

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

.pel-path-card__chapo {
	margin: 0;
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-path-card__points {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pel-path-card__point {
	display: flex;
	align-items: flex-start;
	gap: var(--pel-space-2xs);
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

/* Puce champagne : décorative, centrée sur la première ligne. */
.pel-path-card__point::before {
	content: "";
	flex-shrink: 0;
	width: calc(var(--pel-space-3xs) * 1.5);
	height: calc(var(--pel-space-3xs) * 1.5);
	margin-top: calc((1lh - var(--pel-space-3xs) * 1.5) / 2);
	border-radius: var(--pel-radius-pill);
	background: var(--pel-champagne);
}

/* Le verrou : jamais un bouton mort sans sa raison ni le geste qui rouvre. */
.pel-path-card__verrou {
	display: flex;
	align-items: flex-start;
	gap: var(--pel-space-2xs);
	padding: var(--pel-space-xs) var(--pel-space-s);
	border-radius: var(--pel-radius-m);
	background: var(--pel-champagne-pale);
	color: var(--pel-encre-douce);           /* 7,96:1 */
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

.pel-path-card__cadenas {
	flex-shrink: 0;
	width: var(--pel-icone-s);
	height: var(--pel-icone-s);
	margin-top: calc((1lh - var(--pel-icone-s)) / 2);
	color: var(--pel-bronze);
}

.pel-path-card__raison {
	margin: 0;
}

.pel-path-card__action {
	margin-top: auto;
	padding-top: var(--pel-space-2xs);
}

/* Formulaire du choix d'installation : avec JavaScript, la case suffit. */
.pel-installation-form__envoi {
	margin: var(--pel-space-s) 0 0;
}

.pel-installation-form.is-enhanced .pel-installation-form__envoi {
	display: none;
}

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

/* Une seule issue (#314) : pleine largeur ; le texte à gauche, les points et
   un grand bouton à droite. Sur mobile, une colonne et le bouton en entier. */
.pel-paths__liste--seule {
	grid-template-columns: minmax(0, 1fr);
}

.pel-paths__liste--seule .pel-path-card {
	padding: var(--pel-space-l);
}

.pel-paths__liste--seule .pel-path-card__chapo {
	font-size: var(--pel-fs-champ);
}

.pel-paths__liste--seule .pel-path-card__action .pel-btn {
	box-sizing: border-box;
	width: 100%;
	justify-content: center;
}

.pel-paths__liste--seule .pel-path-card {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	grid-template-areas:
		"titre  points"
		"chapo  points"
		"chapo  action";
	column-gap: var(--pel-space-xl);
	row-gap: var(--pel-space-s);
	align-items: start;
}

.pel-paths__liste--seule .pel-path-card__titre { grid-area: titre; }
.pel-paths__liste--seule .pel-path-card__chapo { grid-area: chapo; }
.pel-paths__liste--seule .pel-path-card__points { grid-area: points; }
.pel-paths__liste--seule .pel-path-card__action { grid-area: action; margin-top: 0; }

@media (max-width: 767px) {
	.pel-paths__liste--seule .pel-path-card {
		display: flex;
	}
}

/* Livraison ou retrait sans rechargement (#306) : ce qui va changer s'estompe le temps de la réponse. */
.pel-installation-form[aria-busy="true"],
.pel-recap[aria-busy="true"],
.pel-paths[aria-busy="true"] {
	opacity: 0.5;
	transition: opacity var(--pel-duree-courte) ease;
}