/*
 * Livraison en deux lignes — issue 16. Référence : planche 8, maquettes 4, 5
 * et 6. Balisage : inc/livraison.php.
 *
 * Chaque ligne tient sur une grille à deux colonnes : intitulé et précision à
 * gauche, montant à droite, en haut.
 *
 * Valeurs de la planche ramenées à l'échelle : intitulés 15 → 16, précisions
 * 13 → 14, écarts 3 → 4, 14 → 16, 18 → 16.
 * « Sur devis » passe du bronze à l'encre douce : le bronze n'y fait que 4,45:1
 * sur sable et 4,36 sur champagne pâle, les fonds où le bloc est posé — même
 * arbitrage que les badges (issue 07).
 */

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

/* --card : le bloc posé seul sur une section (fiche, projet, pages villes). */
.pel-delivery--card {
	padding: var(--pel-space-m);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
}

.pel-delivery__line,
.pel-delivery__option {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--pel-space-s);
	row-gap: var(--pel-space-3xs);
	align-items: start;
	padding-block: var(--pel-space-xs);
	border-bottom: var(--pel-filet) solid var(--pel-lin);
}

.pel-delivery__intitule {
	margin: 0;
	color: var(--pel-encre);
	font-size: var(--pel-fs-champ);
	font-weight: 600;
}

.pel-delivery__precision {
	grid-column: 1;
	margin: 0;
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

.pel-delivery__montant {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
	color: var(--pel-encre);
	font-size: var(--pel-fs-champ);
	font-weight: 700;
	white-space: nowrap;
}

.pel-delivery__regime {
	margin-inline-start: var(--pel-space-3xs);
}

/* Montant pas encore connu : le chemin pour le connaître, 44 px de cible. */
.pel-delivery__ville {
	display: inline-flex;
	align-items: center;
	min-height: var(--pel-cible);
	color: var(--pel-terre-foncee);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: var(--pel-soulignement);
}

/* L'installation : jamais un montant, toujours « Sur devis ». */
.pel-delivery__devis {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	font-weight: 600;
	white-space: nowrap;
}

.pel-delivery__case {
	grid-column: 1;
	font-weight: 600;
}

/* La précision s'aligne sur le libellé, pas sur la case. */
.pel-delivery__precision--option {
	padding-inline-start: calc(var(--pel-case) + var(--pel-space-2xs));
}

.pel-delivery__devis--option {
	align-self: center;
}

.pel-delivery__note {
	margin: 0;
	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-mode-choice : livraison ou retrait, au projet et à la commande --- */
/* Absent de la table des classes de la planche 8 : il nomme le choix dessiné
   sur les maquettes 5 et 6. */
.pel-mode-choice {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-s);
}

.pel-mode-choice__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pel-space-s);
	margin: 0;
	padding: 0;
	border: 0;
}

.pel-mode-choice__option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--pel-space-xs);
	padding: var(--pel-space-s);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
	cursor: pointer;
}

/* L'option choisie : bordure épaisse ET rond plein, jamais la couleur seule. */
.pel-mode-choice__option:has(:checked) {
	border: var(--pel-trait) solid var(--pel-terre-cuite);
}

.pel-mode-choice__option:has(:focus-visible) {
	outline: var(--pel-focus-epaisseur) solid var(--pel-focus-couleur);
	outline-offset: var(--pel-focus-decalage);
}

.pel-mode-choice__input {
	position: absolute;
	width: var(--pel-filet);
	height: var(--pel-filet);
	margin: 0;
	opacity: 0;
}

.pel-mode-choice__rond {
	box-sizing: border-box;
	flex-shrink: 0;
	width: var(--pel-case);
	height: var(--pel-case);
	border: var(--pel-filet) solid var(--pel-encre-douce);
	border-radius: var(--pel-radius-pill);
	background: var(--pel-blanc);
}

.pel-mode-choice__input:checked + .pel-mode-choice__rond {
	border: calc(var(--pel-case) * 0.3) solid var(--pel-terre-cuite);
}

.pel-mode-choice__texte {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-3xs);
}

.pel-mode-choice__titre {
	color: var(--pel-encre);
	font-weight: 600;
}

.pel-mode-choice__precision {
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

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

	.pel-delivery--card {
		padding: var(--pel-space-s);
	}
}

/* Hors secteur (#292) : au-delà de 200 km, dit dans le bloc. */
.pel-delivery__hors-secteur {
	margin: 0;
	padding: var(--pel-space-xs) var(--pel-space-s);
	border-inline-start: var(--pel-space-3xs) solid var(--pel-terre-foncee);
	border-radius: var(--pel-radius-m);
	background: var(--pel-champagne-pale);
	color: var(--pel-encre);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}