/* ═══════════════════════════════════════════════════════════════════════
   Le récapitulatif d'une commande.

   Ce qu'on achète, ce qu'on a payé, et les trois promesses qui vont avec.
   Ces règles servaient à la seule page de commande ; la page de
   confirmation montre les mêmes lignes, avec les mêmes vignettes et les
   mêmes promesses, et les dupliquer aurait créé deux vérités pour un même
   composant.

   La feuille est donc commune aux deux pages, et à elles seules : aucune
   autre page du site n'affiche de récapitulatif, et la charger partout
   ferait payer 1 Ko à des visiteurs qui n'achèteront pas aujourd'hui.

   Rien ici ne dépend de FunnelKit, sauf la règle sur la seconde liste,
   nommée et expliquée à sa place.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ce qu'on achète, dans le récapitulatif ─────────────────────────────
   L'image tient dans un carré à filet, comme sur les cartes produit. Elle
   est petite : c'est un rappel de ce qu'on a choisi, pas une vitrine. */

.socle-recap-articles {
	list-style: none;
	margin: 0 0 var(--e4);
	padding: 0;
}

/* FunnelKit rafraîchit le récapitulatif par une requête en arrière-plan,
   qui réinsère la liste à côté de celle déjà présente au lieu de la
   remplacer. La seconde est donc masquée : elles portent le même contenu,
   et c'est la première qui reste à jour. */
.socle-recap-articles ~ .socle-recap-articles {
	display: none;
}

.socle-recap-article {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: var(--e4);
	align-items: center;
	padding: var(--e4) 0;
	border-bottom: 1px solid var(--2h);
}

.socle-recap-article:first-child {
	border-top: 1px solid var(--2h);
}

.socle-recap-image {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border: 1px solid var(--2h);
	background: #fff;
}

.socle-recap-texte {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Le nom tient sur une ligne, coupé net s'il déborde.

   Ces titres font trois lignes une fois repliés, et le pavé qu'ils
   formaient déséquilibrait la colonne : on relit un récapitulatif pour
   vérifier qu'on a pris le bon cahier, pas pour lire à nouveau la fiche
   produit. L'attribut `title` garde le nom entier au survol. */
.socle-recap-nom {
	color: var(--9b);
	font-size: var(--petit-t);
	line-height: var(--petit-i);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.socle-recap-qte {
	color: var(--2b);
	font-size: var(--micro-t);
	line-height: var(--micro-i);
	letter-spacing: var(--micro-l);
}

.socle-recap-prix {
	color: var(--9b);
	font-size: var(--petit-t);
	white-space: nowrap;
}

.socle-recap-soustotal {
	display: flex;
	justify-content: space-between;
	margin: 0 0 var(--e3);
	color: var(--2b);
	font-size: var(--petit-t);
}

/* ── Les promesses, sous le récapitulatif ───────────────────────────────
   Le pictogramme est aligné sur la première ligne du texte : centré, il
   flotterait entre deux lignes dès que la phrase se replie. */

.socle-recap-promesses {
	list-style: none;
	margin: var(--e7) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--e4) var(--e7);
}

.socle-recap-promesses li {
	display: flex;
	gap: var(--e2);
	align-items: center;
	color: var(--2b);
	font-size: var(--petit-t);
	line-height: var(--petit-i);
}

.socle-recap-promesses svg {
	width: 18px;
	height: 18px;
	margin-top: 1px;
}


/* ═══════════════════════════════════════════════════════════════════════
   Un seul récapitulatif sur téléphone
   ═══════════════════════════════════════════════════════════════════════ */

/* Le tunnel en affiche deux : un bandeau qui se déplie en haut de page, et
   un bloc « Résumé de la commande » posé dans le formulaire. Les deux
   disent la même chose — articles, code promo, total — l'un au-dessus de
   l'autre, sur un écran où chaque écran compte.

   C'est le bloc qui disparaît, pas le bandeau : replié, il ne coûte
   qu'une ligne, et il reste à portée de pouce en haut de page.

   **Sur téléphone seulement.** En deux colonnes, le résumé occupe la
   colonne de droite et ne gêne personne : c'est là qu'on vérifie ce qu'on
   achète pendant qu'on remplit ses coordonnées à gauche. */
@media (max-width: 767px) {
	.wfacp_main_form .wfacp-section.wfacp_order_summary_box {
		display: none;
	}
}

/* Le détail, lui, se lit sur fond blanc — comme les champs du formulaire
   et le reste des blocs du tunnel. Il arrivait sur le papier ivoire de la
   page, ce qui le faisait passer pour un fond de page plutôt que pour un
   encart qu'on vient d'ouvrir. */
.wfacp_collapsible_order_summary_wrap,
.wfacp_collapsible_order_summary_wrap .wfacp_order_summary_container,
.wfacp_collapsible_order_summary_wrap .wfacp_form_cart,
.wfacp-order-summary-label {
	background-color: #fff;
}