/*
 * Bloc drache/caracteristiques.
 * Réf design : Figma 14779:4643.
 *
 * Une carte grise de 1024 de large au plus, centrée, et dedans les couples
 * libellé / valeur répartis sur deux colonnes.
 *
 * DEUX COLONNES PAR `columns`, ET NON PAR UNE GRILLE. Le nombre de lignes
 * dépend du produit : une grille demanderait de savoir où couper. `columns`
 * équilibre seul, et `break-inside: avoid` garde chaque couple entier. Avec
 * des lignes de même hauteur, dix lignes donnent cinq et cinq, comme la
 * maquette ; un nombre impair met la ligne en plus à gauche.
 * ------------------------------------------------------------------------- */

.caracteristiques {
	box-sizing: border-box;
	width: 100%;
	max-width: 1024px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--3-xl, 2.5rem);
	border-radius: var(--wp--custom--radius--2-xl, 24px);

	/* Pas de jeton de palette pour ce gris ni pour le filet : ce sont les
	 * « background/base/default » et « border/default » de Figma. */
	background: #f6f7f9;
	color: var(--wp--preset--color--noir, #1f2937);
	font-family: var(--wp--preset--font-family--body, "DM Sans", sans-serif);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: 1.4;
}

.caracteristiques__liste {
	margin: 0;
	columns: 2;
	column-gap: var(--wp--preset--spacing--6-xl, 5rem);
}

.caracteristiques__ligne {
	display: flex;
	gap: var(--wp--preset--spacing--3-xl, 2.5rem);
	align-items: flex-start;
	margin-block-end: var(--wp--preset--spacing--md, 1rem);
	padding-block-end: var(--wp--preset--spacing--md, 1rem);
	border-block-end: 1px solid #9ca3af;
	break-inside: avoid;
}

.caracteristiques__ligne dt {
	flex-shrink: 0;
	font-weight: 400;
	white-space: nowrap;
}

.caracteristiques__ligne dd {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-weight: 700;
	text-align: end;
}

/*
 * La dernière ligne d'une colonne n'a pas de marge sous son filet dans la
 * maquette. `columns` ne dit pas quelle ligne finit une colonne : toutes
 * gardent donc leur marge, et la liste la reprend d'un seul coup en dessous.
 * Retirer celle du :last-child seul laissait la colonne de gauche plus longue
 * de 16 px, et la carte avec.
 */
.caracteristiques__liste {
	margin-block-end: calc(-1 * var(--wp--preset--spacing--md, 1rem));
}

/* Bloc vide, en édition seulement. */
.caracteristiques--vide {
	padding: var(--wp--preset--spacing--xl, 1.5rem);
	border: 1px dashed var(--wp--preset--color--rose-04, #664d9a);
	text-align: center;
}

/* Mobile : une seule colonne, carte resserrée. */
@media (max-width: 781px) {

	.caracteristiques {
		padding: var(--wp--preset--spacing--xl, 1.5rem);
		font-size: var(--wp--preset--font-size--md, 1rem);
	}

	.caracteristiques__liste {
		columns: 1;
	}

	.caracteristiques__ligne {
		gap: var(--wp--preset--spacing--md, 1rem);
	}
}