/**
 * Les etapes d une formule, sur la fiche produit.
 *
 * Mise en page seulement. Les couleurs viennent de variables : le
 * plugin ne connait pas l identite du commerce et n a pas a l imposer.
 * Mobile d abord : tout est ecrit pour 390 px, le reste ajoute.
 */

.formules {
	--formules-trait: var( --e-global-color-trait, #DDD5C7 );
	--formules-fond: var( --e-global-color-papier, #EFEAE0 );
	--formules-surface: #fff;
	--formules-texte: var( --e-global-color-text, #1F1D1A );
	--formules-attenue: var( --e-global-color-sarrasin, #6E6152 );
	--formules-primaire: var( --e-global-color-primary, #C8892B );

	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
}

.formules__etapes {
	flex: 1 1 100%;
	border: 1px solid var( --formules-trait );
	border-radius: 5px;
	background: var( --formules-fond );
	overflow: hidden;
}

.formules__tete {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var( --formules-trait );
}

.formules__tete b {
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --formules-primaire );
}

.formules__tete span {
	font-size: 12.5px;
	color: var( --formules-attenue );
}

.formules__etape {
	padding: 14px 16px;
	border-bottom: 1px solid var( --formules-trait );
}

.formules__etape:last-of-type {
	border-bottom: 0;
}

.formules__libelle {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	color: var( --formules-attenue );
}

.formules__libelle b {
	font-size: 14.5px;
	font-weight: 600;
	color: var( --formules-texte );
}

.formules__libelle em {
	font-style: normal;
	color: var( --formules-primaire );
}

.formules__select {
	width: 100%;
	min-height: 54px;
	margin-top: 8px;
	padding: 0 40px 0 14px;
	/* Sous 16 px, iOS zoome au focus et le champ saute. */
	font-size: 16px;
	color: var( --formules-texte );
	background: var( --formules-surface );
	border: 1px solid var( --formules-trait );
	border-radius: 4px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6152' stroke-width='1.6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 15px center;
}

.formules__select:first-of-type {
	margin-top: 0;
}

.formules__select:focus {
	outline: none;
	border-color: var( --formules-primaire );
	box-shadow: 0 0 0 3px rgba( 200, 137, 43, .18 );
}

.formules__select.est-en-faute {
	border-color: #B3261E;
}

.formules__note {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var( --formules-attenue );
}

.formules__note.est-en-faute {
	color: #B3261E;
	font-weight: 600;
}

.formules__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border-top: 1px solid var( --formules-trait );
	background: var( --formules-surface );
}

.formules__total span {
	font-size: 14.5px;
	color: var( --formules-attenue );
}

.formules__total b {
	font-size: 22px;
	color: var( --formules-primaire );
	font-variant-numeric: tabular-nums;
}

.formules-vide {
	padding: 14px 16px;
	border: 1px solid var( --formules-trait );
	border-radius: 4px;
	color: var( --formules-attenue );
}