/**
 * « Mes consignes » dans l'espace client.
 * Les jetons reprennent ceux du catalogue ; la portee reste dans .rcs-compte.
 */

.rcs-compte {
	--rcs-corail:     #CA4A3C;
	--rcs-encre:      #1A1D3E;
	--rcs-encre-2:    #3A4059;
	--rcs-doux:       #5B6178;
	--rcs-trait:      #E3E6ED;
	--rcs-trait-fort: #CBD1DC;
	--rcs-fond:       #FFFFFF;
	--rcs-fond-2:     #F5F5F7;
	--rcs-titre: var(--rn-police-titre, 'Fredoka', system-ui, -apple-system, sans-serif);
	--rcs-texte: var(--rn-police-texte, 'Fredoka', system-ui, -apple-system, sans-serif);
	color: var(--rcs-encre-2);
	font-family: var(--rcs-texte);
}

.rcs-vide {
	background: var(--rcs-fond-2);
	border-radius: 10px;
	color: var(--rcs-doux);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
	padding: 16px 18px;
}

/* ------------------------------------------------------------- Le bandeau */

.rcs-bandeau {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 26px;
}

.rcs-chiffre {
	background: #fdf1ef;
	border: 1px solid #f2cdc7;
	border-radius: 12px;
	flex: 1 1 240px;
	padding: 18px 20px;
}

.rcs-chiffre--attente {
	background: #eef4ff;
	border-color: #cfdcf7;
}

.rcs-chiffre-valeur {
	color: var(--rcs-encre);
	display: block;
	font-family: var(--rcs-titre);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
}

.rcs-chiffre-libelle {
	color: var(--rcs-doux);
	display: block;
	font-size: 13px;
	line-height: 1.45;
	margin-top: 6px;
}

/* -------------------------------------------------------------- Le tableau */

.rcs-table {
	border-collapse: collapse;
	margin: 0 0 30px;
	width: 100%;
}

.rcs-table th {
	border-bottom: 1px solid var(--rcs-trait-fort);
	color: var(--rcs-doux);
	font-family: var(--rcs-titre);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 0 12px 8px 0;
	text-align: left;
	text-transform: uppercase;
}

.rcs-table td {
	border-bottom: 1px solid var(--rcs-trait);
	font-size: 14px;
	padding: 13px 12px 13px 0;
	vertical-align: middle;
}

.rcs-qte { color: var(--rcs-doux); }

.rcs-etat {
	border-radius: 999px;
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .01em;
	padding: 3px 10px;
	text-transform: uppercase;
	white-space: nowrap;
}

.rcs-etat--due        { background: #fcf3e3; color: #8a6116; }
.rcs-etat--rendue     { background: #e7eefb; color: #1d4ed8; }
.rcs-etat--remboursee { background: #e8f5ec; color: #1c6b34; }
.rcs-etat--annulee    { background: #f0f0f1; color: #646970; }

.rcs-precision {
	color: var(--rcs-doux);
	display: block;
	font-size: 12px;
	margin-top: 4px;
}

/* ----------------------------------------------------------- Les conditions */

.rcs-conditions h2 {
	color: var(--rcs-encre);
	font-family: var(--rcs-titre);
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 10px;
}

.rcs-conditions p {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 12px;
	max-width: 72ch;
}

.rcs-etapes {
	background: var(--rcs-fond-2);
	border-radius: 12px;
	counter-reset: rc;
	font-size: 14px;
	line-height: 1.55;
	list-style: none;
	margin: 0 0 14px;
	padding: 16px 18px;
}

.rcs-etapes li {
	counter-increment: rc;
	padding-left: 30px;
	position: relative;
}

.rcs-etapes li + li { margin-top: 10px; }

.rcs-etapes li::before {
	background: var(--rcs-corail);
	border-radius: 50%;
	color: #fff;
	content: counter(rc);
	font-size: 11px;
	font-weight: 600;
	height: 20px;
	left: 0;
	line-height: 20px;
	position: absolute;
	text-align: center;
	top: 1px;
	width: 20px;
}

.rcs-adresse { font-size: 14px; line-height: 1.55; }
.rcs-adresse span { color: var(--rcs-doux); display: block; font-size: 12px; text-transform: uppercase; }

@media (max-width: 720px) {

	.rcs-table thead { display: none; }

	.rcs-table tr {
		border-bottom: 1px solid var(--rcs-trait);
		display: block;
		padding: 12px 0;
	}

	.rcs-table td {
		border: 0;
		display: flex;
		gap: 14px;
		justify-content: space-between;
		padding: 4px 0;
	}

	.rcs-table td::before {
		color: var(--rcs-doux);
		content: attr(data-titre);
		font-size: 12px;
		text-transform: uppercase;
	}
}

/* ==========================================================================
   LA CONSIGNE AU PANIER ET A LA COMMANDE
   --------------------------------------------------------------------------
   Deux choses a dire, et pas une de plus : que cette ligne est une caution, et
   qu'elle revient au client s'il rapporte la vieille matiere. Le montant, lui,
   est deja la : il est rendu par le panier comme celui de n'importe quelle
   ligne, puisque c'en est une.

   La portee de ces regles est volontairement etroite. Elles vivent sur la page
   du panier et sur celle de la commande, ou la feuille est chargee, et ne
   dependent d'aucun jeton du tunnel : ce module doit pouvoir etre lu seul.
   ========================================================================== */

.rcs-mention {
	display: block;
	margin-top: 3px;
	color: #6B7089;
	font-size: max(0.75rem, 12px);
	font-weight: 400;
	line-height: 1.4;
}

/* Un filet discret sur le bord de la ligne : la consigne se distingue de la
   piece qu'elle accompagne sans changer de couleur de fond, ce qui la ferait
   passer pour une promotion ou une alerte. */
.woocommerce-cart-form .cart_item.rcs-ligne-consigne .product-name {
	border-left: 2px solid #E4E6F0;
	padding-left: 12px;
}

/* Le rappel sous le sous-total. C'est une mention, pas un montant a ajouter :
   il se lit comme la ligne de TVA, en retrait, jamais en gras. */
.cart_totals tr.rcs-total-consigne th,
.cart_totals tr.rcs-total-consigne td {
	color: #6B7089;
	font-size: max(0.8125rem, 13px);
	font-weight: 400;
}

.cart_totals tr.rcs-total-consigne td { text-align: right; }