/*
 * La fiche produit du site : les ingredients et les allergenes.
 *
 * POURQUOI CETTE FEUILLE EXISTE. Les champs etaient poses sans style,
 * au motif que le theme s en occuperait. Il ne s en occupe pas : un
 * `label` qui enveloppe un `input` et deux `span` se met en ligne, et la
 * liste des ajouts sortait sur UNE SEULE RANGEE, les noms sous les
 * champs. Un formulaire ou le libelle n est pas a cote de son champ
 * n est pas un formulaire, c est une devinette.
 *
 * UNE LIGNE PAR INGREDIENT, et la meme grille pour les ajouts et les
 * retraits : le champ a gauche, le nom, le prix pousse a droite.
 */

.comptoir-ing-fiche {
	--ing-trait: #D8CEBE;
	--ing-doux: #5C5145;
	--ing-encre: #241E17;

	margin: 20px 0;
}

.comptoir-ing-fiche__bloc {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.comptoir-ing-fiche__bloc > legend,
.comptoir-ing-fiche__bloc > label:first-child {
	display: block;
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	color: var(--ing-doux);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* LA LIGNE. C est elle qui remplace la rangee unique. */
.comptoir-ing-fiche__ligne {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--ing-trait);
	color: var(--ing-encre);
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
}

.comptoir-ing-fiche__ligne:last-of-type { border-bottom: 0; }

/* Le nom prend la place restante : le prix se retrouve a droite, aligne
   d une ligne a l autre sans qu on ait a le caler. */
.comptoir-ing-fiche__ligne > span { flex: 1 1 auto; }

.comptoir-ing-fiche__ligne > em {
	flex: 0 0 auto;
	color: var(--ing-doux);
	font-style: normal;
	font-variant-numeric: tabular-nums;
}

.comptoir-ing-fiche__ligne input[type="number"] {
	flex: 0 0 auto;
	width: 4.5em;
	min-height: 40px;
	margin: 0;
	padding: 4px 6px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.comptoir-ing-fiche__ligne input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
}

.comptoir-ing-fiche textarea {
	display: block;
	width: 100%;
	margin: 6px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--ing-trait);
	border-radius: 6px;
	/* Sous 16 px, iOS zoome tout seul a la mise au point. */
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	resize: vertical;
}

.comptoir-ing-fiche small {
	display: block;
	margin: 8px 0 0;
	color: var(--ing-doux);
	font-size: 12.5px;
	font-style: italic;
	line-height: 1.45;
}

/*
 * La ligne des allergenes : une phrase, pas un tableau. Le libelle en
 * gras, la liste a la suite, sur la meme ligne tant qu elle tient.
 */
.comptoir-allergenes-fiche {
	margin: 18px 0 0;
	padding: 12px 14px;
	border-left: 3px solid var(--ing-trait, #D8CEBE);
	background: rgba( 216, 206, 190, 0.16 );
	font-size: 14px;
	line-height: 1.5;
}

.comptoir-allergenes-fiche b { margin-right: 4px; }

.comptoir-allergenes-fiche em {
	display: block;
	margin-top: 4px;
	color: #5C5145;
	font-size: 13px;
}

/*
 * LE TOTAL DU PLAT. Il se met a jour quand le client coche, et il est
 * le dernier chiffre qu il lit avant d appuyer sur « Ajouter ». Il se
 * detache donc du reste du bloc, sans crier : un filet au-dessus, le
 * montant en gras, aligne a droite.
 */
.comptoir-ing-fiche__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 14px 0 0;
	padding: 12px 0 0;
	border-top: 2px solid var(--ing-trait);
}

.comptoir-ing-fiche__total > span {
	color: var(--ing-doux);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.comptoir-ing-fiche__total > b {
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}