/*
 * Espace client — habillage.
 *
 * Meme regime que checkout.css et confirmation.css : les valeurs viennent du
 * design system Sapins de Bois Guillaume et sont recopiees en dur, les jetons du
 * theme (--sbg-pine, --sbg-berry, --sbg-encre) restant prioritaires quand ils
 * sont poses. Le constructeur de pages a ete retire en septembre 2026 ; ces
 * variables pointaient jusque-la sur le kit Elementor.
 *
 * Une difference de taille avec les deux autres ecrans : celui-ci garde
 * l'en-tete et le pied du theme. La feuille du site est donc chargee en meme
 * temps que celle-ci, et tout ce qui suit est borne a `.sbg-ac` — y compris la
 * remise a zero des boutons, que le kit habille en pastille verte par une regle
 * de specificite 0,1,1. Nos composants montent a 0,2,0 et passent devant sans
 * un seul !important.
 *
 * Mobile d'abord. La barre laterale passe en pleine largeur sous 900 px et
 * cesse d'etre collante : sur telephone, un menu colle mange le tiers de
 * l'ecran pour une page qu'on parcourt de haut en bas.
 */

.sbg-ac {
	--sbg-pine-900: #033b39;
	--sbg-pine-800: #044f4c;
	--sbg-pine-700: var(--sbg-pine, #046865);
	--sbg-pine-500: #2a8c87;
	--sbg-pine-300: #8fc4c0;
	--sbg-pine-100: #d3e8e6;
	--sbg-pine-50: #eff9ef;

	--sbg-red-600: #cb0000;
	--sbg-red-500: var(--sbg-berry, #f02848);
	--sbg-red-50: #fff0f3;
	--sbg-pink-300: #ffcad4;

	--sbg-ink-900: #14211f;
	--sbg-ink-700: var(--sbg-encre, #372d33);
	--sbg-ink-500: #5a716d;

	--sbg-line: #e3efec;
	--sbg-white: #ffffff;
	--sbg-paper: #fafffa;

	--sbg-card: 18px;
	--sbg-soft: 14px;
	--sbg-pill: 999px;

	--sbg-shadow: 0 6px 24px rgba(4, 104, 101, 0.07);

	color: var(--sbg-ink-700);
	font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	margin: 0 auto;
	max-width: 1120px;
	padding: 24px 0 48px;
	text-align: left;
}

.sbg-ac *,
.sbg-ac *::before,
.sbg-ac *::after {
	box-sizing: border-box;
}

/* Remise a zero bornee : le kit habille tout `button` en pastille verte, et
   nos pastilles a nous doivent pouvoir etre grises, rouges ou bordees. */

.sbg-ac button {
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: normal;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-transform: none;
}

.sbg-ac a {
	color: var(--sbg-pine-700);
	text-decoration: none;
	transition: color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sbg-ac a:hover {
	color: var(--sbg-red-500);
}

.sbg-ac :focus-visible {
	outline: 2px solid var(--sbg-pine-700);
	outline-offset: 2px;
}

.sbg-ac .sbg-ico {
	flex: none;
}

	/* --- Ossature -------------------------------------------------------- */

.sbg-ac .sbg-ac__grid {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
}

.sbg-ac .sbg-ac__side {
	display: flex;
	flex: 1 1 240px;
	flex-direction: column;
	gap: 14px;
	min-width: 240px;
}

.sbg-ac .sbg-ac__main {
	display: flex;
	flex: 1 1 420px;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.sbg-ac .sbg-ac__card {
	background: var(--sbg-white);
	border-radius: var(--sbg-card);
	box-shadow: var(--sbg-shadow);
	padding: 22px 24px;
}

.sbg-ac .sbg-ac__title {
	color: var(--sbg-pine-700);
	font-size: 26px;
	font-weight: 900;
	line-height: 1.15;
	margin: 0;
	text-transform: uppercase;
}

.sbg-ac .sbg-ac__lead {
	color: var(--sbg-ink-500);
	font-size: 16px;
	line-height: 1.55;
	margin: 0;
	max-width: 60ch;
}

.sbg-ac .sbg-ac__muted {
	color: var(--sbg-ink-500);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

.sbg-ac .sbg-ac__empty {
	color: var(--sbg-ink-500);
	font-size: 15px;
	margin: 0;
}

.sbg-ac .sbg-ac__eyebrow {
	color: var(--sbg-ink-500);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.sbg-ac .sbg-ac__eyebrow--red {
	color: var(--sbg-red-500);
}

	/* --- Barre laterale --------------------------------------------------- */

.sbg-ac .sbg-ac__nav {
	padding: 20px 18px;
}

.sbg-ac .sbg-ac__who {
	align-items: center;
	border-bottom: 1px solid var(--sbg-line);
	display: flex;
	gap: 12px;
	padding-bottom: 16px;
}

.sbg-ac .sbg-ac__avatar {
	align-items: center;
	background: var(--sbg-pine-50);
	border-radius: var(--sbg-pill);
	color: var(--sbg-pine-700);
	display: flex;
	flex: none;
	font-size: 17px;
	font-weight: 900;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.sbg-ac .sbg-ac__avatar--small {
	font-size: 13px;
	height: 34px;
	width: 34px;
}

.sbg-ac .sbg-ac__who-text {
	min-width: 0;
}

.sbg-ac .sbg-ac__who-name {
	color: var(--sbg-pine-700);
	display: block;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
}

.sbg-ac .sbg-ac__who-since {
	color: var(--sbg-ink-500);
	display: block;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sbg-ac .sbg-ac__links {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.sbg-ac .sbg-ac__link {
	align-items: center;
	border-radius: 10px;
	color: var(--sbg-ink-700);
	display: flex;
	font-size: 15px;
	font-weight: 600;
	gap: 11px;
	padding: 10px 12px;
	transition: background 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sbg-ac .sbg-ac__link > svg {
	color: var(--sbg-ink-500);
}

.sbg-ac .sbg-ac__link:hover {
	background: var(--sbg-pine-50);
	color: var(--sbg-pine-700);
}

.sbg-ac .sbg-ac__link.is-current {
	background: var(--sbg-pine-50);
	color: var(--sbg-pine-700);
}

.sbg-ac .sbg-ac__link.is-current > svg {
	color: var(--sbg-pine-700);
}

.sbg-ac .sbg-ac__link-label {
	flex: 1;
}

.sbg-ac .sbg-ac__badge {
	background: var(--sbg-red-500);
	border-radius: var(--sbg-pill);
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	padding: 2px 8px;
}

.sbg-ac .sbg-ac__logout {
	border-top: 1px solid var(--sbg-line);
	margin: 12px 0 0;
	padding-top: 12px;
}

.sbg-ac .sbg-ac__link--muted {
	color: var(--sbg-ink-500);
}

.sbg-ac .sbg-ac__help {
	background: var(--sbg-pine-50);
	border-radius: var(--sbg-soft);
	color: var(--sbg-ink-500);
	font-size: 13px;
	line-height: 1.55;
	margin: 0;
	padding: 15px 16px;
}

.sbg-ac .sbg-ac__help a {
	font-weight: 600;
}

	/* --- Boutons ---------------------------------------------------------- */

.sbg-ac .sbg-ac__cta {
	background: var(--sbg-pine-700);
	border: 0;
	border-radius: var(--sbg-pill);
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	text-align: center;
	transition: background 140ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sbg-ac .sbg-ac__cta:hover {
	background: var(--sbg-pine-800);
	color: #fff;
}

.sbg-ac .sbg-ac__cta:active {
	transform: scale(0.97);
}

.sbg-ac .sbg-ac__cta--red {
	background: var(--sbg-red-500);
	font-size: 15px;
	padding: 13px 24px;
	white-space: nowrap;
}

.sbg-ac .sbg-ac__cta--red:hover {
	background: var(--sbg-red-600);
}

.sbg-ac .sbg-ac__pill {
	background: none;
	border: 1.5px solid var(--sbg-pine-300);
	border-radius: var(--sbg-pill);
	color: var(--sbg-pine-700);
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	text-align: center;
	transition: background 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sbg-ac .sbg-ac__pill:hover {
	background: var(--sbg-pine-50);
	color: var(--sbg-pine-700);
}

.sbg-ac .sbg-ac__pill--red {
	border-color: var(--sbg-pink-300);
	color: var(--sbg-red-500);
}

.sbg-ac .sbg-ac__pill--red:hover {
	background: var(--sbg-red-50);
	color: var(--sbg-red-500);
}

.sbg-ac .sbg-ac__chipbtn {
	align-items: center;
	background: var(--sbg-pine-50);
	border-radius: var(--sbg-pill);
	color: var(--sbg-pine-700);
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	padding: 9px 16px;
	transition: background 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sbg-ac .sbg-ac__chipbtn:hover {
	background: var(--sbg-pine-100);
	color: var(--sbg-pine-700);
}

	/* --- Messages --------------------------------------------------------- */

.sbg-ac .sbg-ac__notice {
	align-items: center;
	background: var(--sbg-pine-50);
	border-radius: var(--sbg-soft);
	color: var(--sbg-pine-800);
	display: flex;
	font-size: 15px;
	gap: 10px;
	margin: 0;
	padding: 14px 16px;
}

.sbg-ac .sbg-ac__notice--error {
	background: var(--sbg-red-50);
	color: var(--sbg-red-500);
}

.sbg-ac .sbg-ac__invite {
	align-items: center;
	background: var(--sbg-red-50);
	border: 1.5px solid var(--sbg-pink-300);
	border-radius: var(--sbg-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 16px 18px;
}

.sbg-ac .sbg-ac__invite > svg {
	color: var(--sbg-red-500);
}

.sbg-ac .sbg-ac__invite-text {
	color: var(--sbg-ink-700);
	flex: 1;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	min-width: 220px;
}

.sbg-ac .sbg-ac__invite .sbg-ac__cta {
	background: var(--sbg-red-500);
}

.sbg-ac .sbg-ac__invite .sbg-ac__cta:hover {
	background: var(--sbg-red-600);
}

.sbg-ac .sbg-ac__invite form {
	margin: 0;
}

	/* --- Tableau de bord --------------------------------------------------- */

.sbg-ac .sbg-ac__hero {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0;
}

.sbg-ac .sbg-ac__hero-text {
	flex: 1 1 320px;
	padding: 26px;
}

.sbg-ac .sbg-ac__hero-title {
	color: var(--sbg-pine-700);
	font-size: 30px;
	font-weight: 900;
	line-height: 1.1;
	margin: 0;
	text-transform: uppercase;
}

.sbg-ac .sbg-ac__hero-line {
	color: var(--sbg-ink-500);
	font-size: 16px;
	margin: 6px 0 0;
}

.sbg-ac .sbg-ac__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
}

.sbg-ac .sbg-ac__hero-photo {
	align-self: stretch;
	display: block;
	flex: 0 1 260px;
	min-height: 190px;
	min-width: 200px;
	object-fit: cover;
}

.sbg-ac .sbg-ac__stats {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.sbg-ac .sbg-ac__stat {
	background: var(--sbg-white);
	border: 1.5px solid var(--sbg-pine-100);
	border-radius: var(--sbg-soft);
	margin: 0;
	padding: 18px;
}

.sbg-ac .sbg-ac__stat-value {
	color: var(--sbg-pine-700);
	display: block;
	font-size: 26px;
	font-weight: 900;
	line-height: 1;
}

.sbg-ac .sbg-ac__stat-label {
	color: var(--sbg-ink-500);
	display: block;
	font-size: 14px;
	line-height: 1.4;
	margin-top: 6px;
}

.sbg-ac .sbg-ac__promo {
	align-items: center;
	background: var(--sbg-red-50);
	border-radius: var(--sbg-card);
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	padding: 24px;
}

.sbg-ac .sbg-ac__promo-text {
	flex: 1 1 300px;
}

.sbg-ac .sbg-ac__promo-title {
	color: var(--sbg-pine-700);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.15;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.sbg-ac .sbg-ac__promo-line {
	color: var(--sbg-ink-500);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

	/* --- Cartes et rangees -------------------------------------------------- */

.sbg-ac .sbg-ac__card-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 14px;
}

.sbg-ac .sbg-ac__card-title {
	align-items: center;
	color: var(--sbg-pine-700);
	display: flex;
	font-size: 17px;
	font-weight: 900;
	gap: 8px;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.sbg-ac .sbg-ac__card-head .sbg-ac__card-title {
	margin: 0;
}

.sbg-ac .sbg-ac__more {
	border-bottom: 1.5px solid var(--sbg-pine-300);
	font-size: 14px;
	font-weight: 600;
}

.sbg-ac .sbg-ac__rows {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sbg-ac .sbg-ac__row {
	align-items: center;
	border-top: 1px solid var(--sbg-line);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 13px 0;
}

.sbg-ac .sbg-ac__row:first-child {
	border-top: 0;
}

.sbg-ac .sbg-ac__row-text {
	flex: 1 1 180px;
	min-width: 0;
}

.sbg-ac .sbg-ac__row-title {
	display: block;
	font-size: 15px;
	font-weight: 600;
}

.sbg-ac .sbg-ac__row-date {
	color: var(--sbg-ink-500);
	display: block;
	font-size: 13px;
}

.sbg-ac .sbg-ac__row-total {
	color: var(--sbg-ink-700);
	font-size: 15px;
	font-weight: 900;
	min-width: 78px;
	text-align: right;
}

.sbg-ac .sbg-ac__chip {
	border-radius: var(--sbg-pill);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 5px 12px;
	text-transform: uppercase;
	white-space: nowrap;
}

.sbg-ac .sbg-ac__chip--done {
	background: var(--sbg-pine-50);
	color: var(--sbg-pine-700);
}

.sbg-ac .sbg-ac__chip--live {
	background: var(--sbg-pine-700);
	color: #fff;
}

.sbg-ac .sbg-ac__chip--cancel {
	background: var(--sbg-paper);
	border: 1px solid var(--sbg-line);
	color: var(--sbg-ink-500);
}

.sbg-ac .sbg-ac__chip--wait {
	background: var(--sbg-red-50);
	color: var(--sbg-red-500);
}

	/* --- Mes commandes ------------------------------------------------------ */

.sbg-ac .sbg-ac__order {
	padding: 20px 22px;
}

.sbg-ac .sbg-ac__order-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 12px;
}

.sbg-ac .sbg-ac__order-ref {
	color: var(--sbg-ink-500);
	flex: 1;
	font-size: 14px;
}

.sbg-ac .sbg-ac__order-total {
	color: var(--sbg-ink-700);
	font-size: 19px;
	font-weight: 900;
}

.sbg-ac .sbg-ac__order-body {
	border-bottom: 1px solid var(--sbg-line);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	padding-bottom: 14px;
}

.sbg-ac .sbg-ac__order-body strong {
	font-weight: 600;
}

.sbg-ac .sbg-ac__order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	padding-top: 14px;
}

	/* --- Parrainage ---------------------------------------------------------- */

.sbg-ac .sbg-ac__code {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 18px;
}

.sbg-ac .sbg-ac__code-value {
	background: var(--sbg-pine-50);
	border-radius: var(--sbg-soft);
	color: var(--sbg-pine-700);
	font-size: clamp(26px, 4vw, 34px);
	font-weight: 900;
	letter-spacing: 0.06em;
	padding: 12px 22px;
	user-select: all;
}

.sbg-ac .sbg-ac__link-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
}

.sbg-ac .sbg-ac__link-value {
	background: var(--sbg-paper);
	border: 1.5px solid var(--sbg-line);
	border-radius: var(--sbg-pill);
	color: var(--sbg-ink-500);
	flex: 1 1 300px;
	font-size: 15px;
	min-width: 0;
	overflow: hidden;
	padding: 12px 18px;
	text-overflow: ellipsis;
	user-select: all;
	white-space: nowrap;
}

.sbg-ac .sbg-ac__share {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0 0 14px;
}

.sbg-ac .sbg-ac__mint {
	background: var(--sbg-pine-50);
	box-shadow: none;
	padding: 24px;
}

.sbg-ac .sbg-ac__steps {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.sbg-ac .sbg-ac__step {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sbg-ac .sbg-ac__step-num {
	align-items: center;
	background: var(--sbg-pine-700);
	border-radius: var(--sbg-pill);
	color: #fff;
	display: flex;
	font-size: 15px;
	font-weight: 900;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.sbg-ac .sbg-ac__step-title {
	color: var(--sbg-ink-700);
	font-size: 16px;
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
}

	/* --- Adresses et informations --------------------------------------------- */

.sbg-ac .sbg-ac__address {
	color: var(--sbg-ink-500);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 14px;
}

.sbg-ac .sbg-ac__address span {
	display: block;
}

.sbg-ac .sbg-ac__form,
.sbg-ac .sbg-ac__fields {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin: 16px 0 0;
}

.sbg-ac .sbg-ac__form > button {
	grid-column: 1 / -1;
	justify-self: start;
}

.sbg-ac .sbg-ac__field {
	margin: 0;
}

.sbg-ac .sbg-ac__field--address_1,
.sbg-ac .sbg-ac__field--address_2 {
	grid-column: 1 / -1;
}

.sbg-ac .sbg-ac__field label {
	color: var(--sbg-ink-500);
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.sbg-ac .sbg-ac__field input {
	background: var(--sbg-paper);
	border: 1.5px solid var(--sbg-line);
	border-radius: 10px;
	color: var(--sbg-ink-700);
	font-size: 16px;
	padding: 12px 14px;
	width: 100%;
}

.sbg-ac .sbg-ac__field input:focus {
	border-color: var(--sbg-pine-300);
	outline: none;
}

.sbg-ac .sbg-ac__field input[readonly] {
	color: var(--sbg-ink-500);
}

.sbg-ac .sbg-ac__prefs {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sbg-ac .sbg-ac__pref {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 12px;
	font-size: 15px;
	line-height: 1.45;
}

.sbg-ac .sbg-ac__pref input {
	accent-color: var(--sbg-pine-700);
	height: 20px;
	margin: 2px 0 0;
	width: 20px;
}

.sbg-ac .sbg-ac__pref-text strong {
	font-weight: 600;
}

.sbg-ac .sbg-ac__prefs > button {
	align-self: flex-start;
	margin-top: 4px;
}

	/* --- Deux colonnes ---------------------------------------------------------- */

@media (min-width: 900px) {

.sbg-ac .sbg-ac__side {
	flex: 0 0 264px;
	position: sticky;
	top: 92px;
}

.sbg-ac .sbg-ac__title {
	font-size: 30px;
}

}

@media (prefers-reduced-motion: reduce) {

.sbg-ac * {
	transition: none !important;
}

.sbg-ac .sbg-ac__cta:active {
	transform: none;
}

}

/* ---------------------------------------------------------------------------
 * Fidelite et ventes groupees.
 *
 * Tout est borne a `.sbg-ac` comme le reste de la feuille, et reprend les
 * memes variables : ces blocs doivent se fondre dans l'espace existant, pas
 * s'y ajouter comme une greffe.
 *
 * Une regle de composition traverse les trois blocs : la BARRE DE PROGRESSION
 * est le seul element qui porte un chiffre, et elle le porte visuellement, pas
 * en texte. Le solde exact n'apparait qu'une fois, dans la vue « Mes
 * avantages », et jamais a cote d'un autre compteur.
 * ------------------------------------------------------------------------ */

.sbg-ac .sbg-loyalty-card,
.sbg-ac .sbg-group-card {
	background: linear-gradient(180deg, var(--sbg-pine-50) 0%, var(--sbg-white) 100%);
	border: 1px solid var(--sbg-pine-100);
}

.sbg-ac .sbg-loyalty-card__badge {
	color: var(--sbg-pine-700);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.sbg-ac .sbg-loyalty-card__goal,
.sbg-ac .sbg-group-card__sentence {
	color: var(--sbg-ink-900);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 16px;
}

.sbg-ac .sbg-group-card__label {
	color: var(--sbg-ink-500);
	font-size: 15px;
	margin: 0 0 4px;
}

/* La barre : un seul composant, trois usages. */
.sbg-ac .sbg-loyalty-card__bar,
.sbg-ac .sbg-loyalty__bar,
.sbg-ac .sbg-group-card__bar,
.sbg-ac .sbg-group__bar {
	background: var(--sbg-pine-100);
	border-radius: var(--sbg-pill);
	height: 10px;
	overflow: hidden;
	width: 100%;
}

.sbg-ac .sbg-loyalty-card__fill,
.sbg-ac .sbg-loyalty__fill,
.sbg-ac .sbg-group-card__fill,
.sbg-ac .sbg-group__fill {
	background: var(--sbg-pine-700);
	border-radius: var(--sbg-pill);
	display: block;
	height: 100%;
	/* La barre s'anime a l'arrivee : c'est le seul mouvement de la page, et il
	   sert a montrer qu'elle mesure quelque chose de vivant. */
	transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sbg-ac .sbg-group-card.is-reached .sbg-group-card__fill,
.sbg-ac .sbg-group__progress-line.is-reached {
	background: var(--sbg-pine-500);
}

.sbg-ac .sbg-loyalty-card__more,
.sbg-ac .sbg-group-card__more {
	margin: 14px 0 0;
}

.sbg-ac .sbg-loyalty-card__more a,
.sbg-ac .sbg-group-card__more a {
	color: var(--sbg-pine-700);
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* « Mes avantages » ------------------------------------------------------ */

.sbg-ac .sbg-loyalty__badge {
	background: var(--sbg-pine-700);
	border-radius: var(--sbg-pill);
	color: var(--sbg-white);
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 5px 14px;
	text-transform: uppercase;
}

.sbg-ac .sbg-loyalty__title { margin: 6px 0 12px; }

.sbg-ac .sbg-loyalty__goal {
	color: var(--sbg-ink-900);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 18px;
}

/* Le solde exact : deuxieme rideau, et il le montre — plus petit que
   l'objectif qui le precede. */
.sbg-ac .sbg-loyalty__balance {
	color: var(--sbg-ink-500);
	font-size: 14px;
	margin: 14px 0 0;
}

.sbg-ac .sbg-loyalty__expiry {
	display: block;
	margin-top: 2px;
}

.sbg-ac .sbg-credits__lead,
.sbg-ac .sbg-rewards__lead,
.sbg-ac .sbg-group-share__lead {
	color: var(--sbg-ink-500);
	font-size: 15px;
	margin: 0 0 16px;
}

.sbg-ac .sbg-credits__list,
.sbg-ac .sbg-rewards__list,
.sbg-ac .sbg-points-history__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sbg-ac .sbg-credits__item {
	align-items: baseline;
	border-top: 1px solid var(--sbg-line);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 0;
}

.sbg-ac .sbg-credits__item:first-child { border-top: 0; }

.sbg-ac .sbg-credits__amount {
	color: var(--sbg-pine-700);
	font-size: 20px;
	font-weight: 700;
}

.sbg-ac .sbg-credits__expiry,
.sbg-ac .sbg-rewards__state {
	color: var(--sbg-ink-500);
	font-size: 13px;
	margin-left: auto;
}

.sbg-ac .sbg-rewards__item {
	align-items: baseline;
	border-top: 1px solid var(--sbg-line);
	display: flex;
	gap: 12px;
	padding: 11px 0;
}

.sbg-ac .sbg-rewards__item:first-child { border-top: 0; }

/* Ce qui est a portee se distingue par la COULEUR et par la graisse, jamais
   par une pastille de plus : neuf pastilles alignees ne se lisent pas. */
.sbg-ac .sbg-rewards__item.is-reachable .sbg-rewards__label {
	color: var(--sbg-pine-700);
	font-weight: 600;
}

.sbg-ac .sbg-rewards__item.is-reachable .sbg-rewards__state {
	color: var(--sbg-pine-700);
}

.sbg-ac .sbg-points-history__item {
	align-items: baseline;
	border-top: 1px solid var(--sbg-line);
	display: flex;
	gap: 12px;
	padding: 10px 0;
}

.sbg-ac .sbg-points-history__item:first-child { border-top: 0; }

.sbg-ac .sbg-points-history__date {
	color: var(--sbg-ink-500);
	flex: 0 0 auto;
	font-size: 13px;
	min-width: 130px;
}

.sbg-ac .sbg-points-history__label { flex: 1 1 auto; font-size: 15px; }

.sbg-ac .sbg-points-history__points {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.sbg-ac .sbg-points-history__points--up { color: var(--sbg-pine-700); }
.sbg-ac .sbg-points-history__points--down { color: var(--sbg-ink-500); }

/* Espace organisateur ---------------------------------------------------- */

.sbg-ac .sbg-group__title { margin: 6px 0 4px; }

.sbg-ac .sbg-group__address {
	color: var(--sbg-ink-500);
	font-size: 15px;
	margin: 0 0 16px;
}

.sbg-ac .sbg-group__progress-line {
	color: var(--sbg-ink-900);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 14px;
}

.sbg-ac .sbg-group-share__text {
	background: var(--sbg-paper);
	border: 1px solid var(--sbg-line);
	border-radius: var(--sbg-soft);
	color: var(--sbg-ink-700);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	padding: 14px 16px;
	resize: vertical;
	width: 100%;
}

.sbg-ac .sbg-group-share__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
}

.sbg-ac .sbg-group-share__code {
	border-top: 1px solid var(--sbg-line);
	color: var(--sbg-ink-500);
	font-size: 14px;
	margin: 18px 0 0;
	padding-top: 14px;
}

.sbg-ac .sbg-group-share__code strong {
	color: var(--sbg-ink-900);
	font-family: "SF Mono", Menlo, Consolas, monospace;
	font-size: 17px;
	letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
	.sbg-ac .sbg-loyalty-card__fill,
	.sbg-ac .sbg-loyalty__fill,
	.sbg-ac .sbg-group-card__fill,
	.sbg-ac .sbg-group__fill {
		transition: none;
	}
}

.sbg-ac .sbg-group-card--invite .sbg-group-card__sentence {
	margin-bottom: 8px;
}

.sbg-ac .sbg-group-card__lead {
	color: var(--sbg-ink-700);
	font-size: 16px;
	margin: 0 0 10px;
}

.sbg-ac .sbg-group-card__note {
	color: var(--sbg-ink-500);
	font-size: 14px;
	margin: 0;
}

.sbg-ac .sbg-group-card__phone {
	color: var(--sbg-ink-500);
	font-size: 15px;
	margin-left: 12px;
}

/* ------------------------------------------------------------------
   Ventes groupées — la page de présentation
   ------------------------------------------------------------------
   Vue par un client qui n'a pas encore de groupe : elle explique le dispositif
   et dit comment en ouvrir un. L'organisateur d'un groupe existant voit, lui,
   les cartes de suivi et de partage plus bas dans le même gabarit.
   ------------------------------------------------------------------ */

.sbg-ac .sbg-groupe-intro__atouts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.sbg-ac .sbg-groupe-intro__atouts li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--sbg-ink-700);
}

.sbg-ac .sbg-groupe-intro__atouts .sbg-ico {
	flex: none;
	margin-top: 3px;
	color: var(--sbg-pine-700);
}

.sbg-ac .sbg-groupe-cas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 16px;
}

.sbg-ac .sbg-groupe-cas__item {
	margin: 0;
}

.sbg-ac .sbg-groupe-cas__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--sbg-pine-50);
	color: var(--sbg-pine-700);
}

.sbg-ac .sbg-groupe-cas__item p {
	margin: 0;
	color: var(--sbg-ink-500);
}

.sbg-ac .sbg-groupe-cas__item .sbg-ac__link {
	display: inline-block;
	margin-top: 12px;
	color: var(--sbg-pine-700);
	font-weight: 600;
}

.sbg-ac .sbg-groupe-ouvrir {
	margin-top: 16px;
}

.sbg-ac .sbg-groupe-ouvrir p {
	color: var(--sbg-ink-500);
}

.sbg-ac .sbg-groupe-ouvrir__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

@media (min-width: 720px) {

	.sbg-ac .sbg-groupe-cas {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Les trois cas de vente groupée : un intitulé de carte, pas un titre de
   section. Sans cela il hérite des capitales en 900 du thème et occupe la
   moitié de la carte. */
.sbg-ac .sbg-groupe-cas__item .sbg-ac__section-title {
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: none;
	line-height: 1.3;
	margin-bottom: 8px;
}

/* ------------------------------------------------------------------
   Ouvrir un groupe soi-même
   ------------------------------------------------------------------
   Le dispositif existait, mais il fallait téléphoner pour y entrer. Le
   formulaire prend la place du bouton « Nous écrire » ; la marche à suivre le
   précède, parce que personne ne remplit cinq champs sans savoir ce qu'il y
   gagne.
   ------------------------------------------------------------------ */

.sbg-ac .sbg-groupe-ouvrir__marche {
	margin: 0 0 var(--sbg-ac-e4, 18px);
	padding-left: 1.35em;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
	line-height: 1.55;
}

.sbg-ac .sbg-groupe-ouvrir__marche strong {
	display: block;
	color: var(--sbg-ac-pine, #046865);
}

.sbg-ac .sbg-groupe-ouvrir__note {
	margin: 0 0 var(--sbg-ac-e4, 18px);
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--sbg-ac-mint, #eff9ef);
	font-size: 14px;
	line-height: 1.55;
	text-wrap: pretty;
}

.sbg-ac .sbg-ac__hint {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--sbg-ac-muted, #5a716d);
}

.sbg-ac .sbg-ac__field--duo {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sbg-ac .sbg-ac__field--duo > span {
	flex: 1 1 8rem;
	min-width: 0;
	display: block;
}

.sbg-ac .sbg-ac__field--duo > span input {
	width: 100%;
}

.sbg-ac .sbg-groupe-form textarea,
.sbg-ac .sbg-groupe-form select,
.sbg-ac .sbg-groupe-form input[type="text"] {
	width: 100%;
}

.sbg-ac .sbg-ac__actions {
	margin: var(--sbg-ac-e4, 18px) 0 0;
}

/* La vue du participant : passive, mais elle porte le message à relayer — c'est
   lui qui relance ses voisins quand il sait qu'il manque deux commandes. */
.sbg-ac .sbg-groupe-membre__aide {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: var(--sbg-ac-e3, 14px) 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sbg-ac-muted, #5a716d);
}

.sbg-ac .sbg-groupe-membre__aide svg {
	flex: none;
	margin-top: 2px;
	color: var(--sbg-ac-pine, #046865);
}