/*
 * Tunnel de commande en page unique — habillage.
 *
 * Les valeurs viennent du design system Sapins de Bois Guillaume (tokens
 * couleurs, rayons, ombres) et sont recopiees ici en dur plutot que lues dans
 * le kit Elementor : la page de commande ne charge plus le kit, et un tunnel
 * qui perd ses couleurs parce qu'une feuille a saute est un tunnel qui ne vend
 * plus. Le kit reste prioritaire quand il est present, par les variables
 * jetons du theme (--sbg-*) poses en premier.
 *
 * Aucun !important. Le kit Elementor habille tout `button` en pastille verte
 * par une regle de specificite 0,1,1 ; la remise a zero est bornee a `.sbg-co`
 * (0,2,1) et nos propres boutons montent a 0,3,0. Empiler des :not() ferait
 * peser la remise a zero plus lourd que le re-stylage, et elle s'ecraserait
 * elle-meme.
 *
 * Mobile d'abord : l'essentiel du trafic arrive par des liens partages en
 * messagerie. Bascule a 768 px, comme la specification.
 */

.sbg-co {
	--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-500: var(--sbg-berry, #f02848);
	--sbg-red-50: #fff0f3;
	--sbg-rose-600: #c32c53;

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

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

	--sbg-card: 18px;
	--sbg-soft: 14px;
	--sbg-tile: 12px;
	--sbg-field: 10px;
	--sbg-pill: 999px;

	--sbg-shadow: 0 6px 24px rgba(4, 104, 101, 0.07);
	--sbg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	background: var(--sbg-paper);
	color: var(--sbg-ink-700);
	font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	min-height: 100vh;
	padding-bottom: 120px;
}

.sbg-co-body {
	background: #fafffa;
	margin: 0;
}

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

	/* Remise a zero bornee : le kit Elementor transforme sinon les trente et une
   cases du calendrier en autant de pastilles vertes. */
.sbg-co button {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: left;
	text-transform: none;

	/* Le theme pose « white-space: nowrap » sur tout bouton. Nos cartes de
	   mode en sont : sans cette remise a zero, la phrase « au pied de
	   l'immeuble » sort de la carte au lieu de passer a la ligne. */
	white-space: normal;
}

.sbg-co input,
.sbg-co select,
.sbg-co textarea {
	font-family: inherit;
}

.sbg-co a {
	color: var(--sbg-pine-700);
	text-decoration: none;
}

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

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

.sbg-co .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

	/* --- En-tete ------------------------------------------------------- */

.sbg-co .sbg-co__head {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--sbg-line);
	position: sticky;
	top: 0;
	z-index: 5;
}

.sbg-co .sbg-co__head-inner {
	align-items: center;
	display: flex;
	gap: 12px;
	margin: 0 auto;
	max-width: 1140px;
	padding: 12px 16px;
}

.sbg-co .sbg-co__logo {
	display: block;
	height: 34px;
	width: auto;
}

/* Le logo est cliquable et ramene a la boutique. Le lien ne doit rien ajouter
   visuellement : ni soulignement, ni couleur, ni hauteur de ligne. */
.sbg-co .sbg-co__logo-lien {
	display: block;
	flex: none;
	line-height: 0;
	border: 0;
	text-decoration: none;
	border-radius: 6px;
	transition: opacity 160ms ease;
}

.sbg-co .sbg-co__logo-lien:hover {
	opacity: 0.78;
}

.sbg-co .sbg-co__logo-lien:focus-visible {
	outline: 2px solid var(--sbg-co-pine, #046865);
	outline-offset: 3px;
}

.sbg-co .sbg-co__head-titles {
	flex: 1;
	min-width: 0;
}

.sbg-co .sbg-co__head-title {
	color: var(--sbg-pine-700);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.sbg-co .sbg-co__head-baseline {
	display: none;
}

.sbg-co .sbg-co__hold {
	color: var(--sbg-ink-500);
	font-size: 11px;
	line-height: 1.4;
	margin: 0;
}

.sbg-co .sbg-co__head-side {
	align-items: flex-end;
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 3px;
}

.sbg-co .sbg-co__secure {
	align-items: center;
	color: var(--sbg-pine-700);
	display: flex;
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
	margin: 0;
}

.sbg-co .sbg-co__secure span,
.sbg-co .sbg-co__head-side .sbg-co__hold {
	display: none;
}

	/* --- Trame --------------------------------------------------------- */

.sbg-co .sbg-co__messages {
	margin: 0 auto;
	max-width: 1140px;
	padding: 0 16px;
}

.sbg-co .sbg-co__messages:empty {
	display: none;
}

.sbg-co .sbg-co__notice {
	border-radius: var(--sbg-tile);
	font-size: 14px;
	margin: 12px 0 0;
	padding: 12px 16px;
}

.sbg-co .sbg-co__notice--error,
.sbg-co .woocommerce-error {
	background: var(--sbg-red-50);
	color: var(--sbg-rose-600);
}

.sbg-co .sbg-co__notice--info,
.sbg-co .sbg-co__notice--success,
.sbg-co .woocommerce-message,
.sbg-co .woocommerce-info {
	background: var(--sbg-pine-50);
	color: var(--sbg-pine-800);
}

.sbg-co .woocommerce-error,
.sbg-co .woocommerce-message,
.sbg-co .woocommerce-info {
	border: 0;
	border-radius: var(--sbg-tile);
	font-size: 14px;
	list-style: none;
	margin: 12px 0 0;
	padding: 12px 16px;
}

.sbg-co .sbg-co__grid {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 auto;
	max-width: 1140px;
	padding: 12px 16px 0;
}

.sbg-co .sbg-co__main {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	width: 100%;
}

.sbg-co .sbg-co__aside {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	order: -1;
	width: 100%;
}

.sbg-co .sbg-co__hidden {
	display: none;
}

	/* --- Bloc --------------------------------------------------------- */

.sbg-co .sbg-co__block {
	background: var(--sbg-white);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(4, 104, 101, 0.06);
	padding: 18px 16px;
}

.sbg-co .sbg-co__block-head {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 4px;
}

.sbg-co .sbg-co__num {
	align-items: center;
	background: var(--sbg-pine-700);
	border-radius: var(--sbg-pill);
	color: #fff;
	display: flex;
	flex: none;
	font-size: 13px;
	font-weight: 900;
	height: 24px;
	justify-content: center;
	width: 24px;
}

.sbg-co .sbg-co__title {
	color: var(--sbg-pine-700);
	font-family: inherit;
	font-size: 17px;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.sbg-co .sbg-co__lead {
	color: var(--sbg-ink-500);
	font-size: 14px;
	line-height: 1.45;
	margin: 0 0 14px;
}

.sbg-co .sbg-co__indent {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

	/* --- Champs -------------------------------------------------------- */

.sbg-co .sbg-co__fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sbg-co .sbg-co__row {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

.sbg-co .sbg-co__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.sbg-co .sbg-co__label {
	font-size: 14px;
	font-weight: 600;
}

.sbg-co .sbg-co__optional {
	color: var(--sbg-ink-500);
	font-weight: 400;
}

.sbg-co .sbg-co__field input,
.sbg-co .sbg-co__field select,
.sbg-co .sbg-co__field textarea {
	background: var(--sbg-white);
	border: 1.5px solid var(--sbg-line);
	border-radius: var(--sbg-field);
	color: var(--sbg-ink-700);
	font-size: 16px;
	outline: none;
	padding: 14px;
	width: 100%;
}

.sbg-co .sbg-co__field textarea {
	resize: none;
}

.sbg-co .sbg-co__field input::placeholder,
.sbg-co .sbg-co__field textarea::placeholder {
	color: var(--sbg-ink-300);
}

.sbg-co .sbg-co__field input:focus,
.sbg-co .sbg-co__field select:focus,
.sbg-co .sbg-co__field textarea:focus {
	border-color: var(--sbg-pine-500);
}

.sbg-co .sbg-co__field.is-invalid input {
	border-color: var(--sbg-rose-600);
}

.sbg-co .sbg-co__hint {
	color: var(--sbg-ink-500);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

.sbg-co .sbg-co__error {
	color: var(--sbg-rose-600);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

.sbg-co .sbg-co__actions {
	align-items: center;
	display: flex;
	gap: 12px;
}

.sbg-co .sbg-co__button {
	background: var(--sbg-pine-700);
	border-radius: var(--sbg-pill);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 600;
	min-height: 48px;
	padding: 11px 22px;
	text-align: center;
	transition: background-color 140ms var(--sbg-ease);
}

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

.sbg-co .sbg-co__button--small {
	font-size: 14px;
	min-height: 44px;
	padding: 11px 18px;
}

.sbg-co .sbg-co__link {
	color: var(--sbg-pine-700);
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.sbg-co .sbg-co__link:hover {
	color: var(--sbg-red-500);
}

	/* --- Bloc 1 : resume des coordonnees -------------------------------- */

.sbg-co .sbg-co__summary-card {
	background: var(--sbg-pine-50);
	border-radius: var(--sbg-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 14px 16px;
}

.sbg-co .sbg-co__summary-icon {
	color: var(--sbg-pine-700);
	flex: none;
	line-height: 0;
}

.sbg-co .sbg-co__summary-body {
	flex: 1;
	font-size: 15px;
	line-height: 1.55;
	min-width: 160px;
}

.sbg-co .sbg-co__summary-name {
	font-weight: 700;
	margin: 0;
}

.sbg-co .sbg-co__summary-line {
	color: var(--sbg-ink-500);
	margin: 0;
}

.sbg-co .sbg-co__edit {
	align-self: center;
	color: var(--sbg-pine-700);
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.sbg-co .sbg-co__edit:hover {
	color: var(--sbg-red-500);
}

	/* --- Bloc 2 : cartes de mode ---------------------------------------- */

.sbg-co .sbg-co__modes {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sbg-co .sbg-co__mode {
	align-items: center;
	background: var(--sbg-white);
	border: 2px solid var(--sbg-line);
	border-radius: var(--sbg-tile);
	column-gap: 12px;
	cursor: pointer;
	display: grid;
	grid-template-areas:
		"icon title  price"
		"icon text   radio"
		"icon reason reason";
	grid-template-columns: auto minmax(0, 1fr) auto;
	min-height: 60px;
	padding: 14px;
	row-gap: 2px;
	transition: border-color 140ms var(--sbg-ease), background-color 140ms var(--sbg-ease);
}

.sbg-co .sbg-co__mode[aria-checked="true"] {
	background: var(--sbg-pine-50);
	border-color: var(--sbg-pine-700);
}

.sbg-co .sbg-co__mode.is-empty {
	cursor: default;
	/* La carte s'efface, mais pas au point qu'on ne puisse plus lire la raison
	   pour laquelle elle est fermée. */
	opacity: 0.62;
}

/* Un mode fermé dit pourquoi. « complet » n'expliquait rien — et se trompait
   dès que la cause était le secteur de livraison plutôt que le remplissage. */
.sbg-co .sbg-co__mode-reason {
	grid-area: reason;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--sbg-line);
	color: var(--sbg-ink-500);
	font-size: 12px;
	line-height: 1.45;
	text-align: left;
	text-wrap: pretty;
}

.sbg-co .sbg-co__mode-icon {
	align-self: center;
	color: var(--sbg-pine-700);
	grid-area: icon;
	line-height: 0;
}

.sbg-co .sbg-co__mode-title {
	font-size: 15px;
	font-weight: 700;
	grid-area: title;
	line-height: 1.3;
}

.sbg-co .sbg-co__mode-text {
	color: var(--sbg-ink-500);
	font-size: 13px;
	grid-area: text;
	line-height: 1.4;
}

.sbg-co .sbg-co__mode-price {
	color: var(--sbg-pine-700);
	font-size: 15px;
	font-weight: 700;
	grid-area: price;
	text-align: right;
	white-space: nowrap;
}

.sbg-co .sbg-co__mode-count {
	color: var(--sbg-ink-500);
	font-size: 13px;
	grid-area: text;
	justify-self: start;
	line-height: 1.4;
}

	/* Sur telephone le compteur suit la phrase sur la meme ligne, comme dans la
   maquette : « au pied de l'immeuble · 5 dates ». */
.sbg-co .sbg-co__mode-text {
	display: inline;
}

.sbg-co .sbg-co__mode-count::before {
	content: " · ";
}

.sbg-co .sbg-co__mode-count {
	display: inline;
}

.sbg-co .sbg-co__radio {
	border: 2px solid var(--sbg-pine-300);
	border-radius: var(--sbg-pill);
	flex: none;
	grid-area: radio;
	height: 18px;
	justify-self: end;
	position: relative;
	width: 18px;
}

.sbg-co .sbg-co__radio::after {
	background: var(--sbg-pine-700);
	border-radius: var(--sbg-pill);
	content: "";
	height: 9px;
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 140ms var(--sbg-ease);
	width: 9px;
}

.sbg-co [aria-checked="true"] > .sbg-co__radio {
	border-color: var(--sbg-pine-700);
}

.sbg-co [aria-checked="true"] > .sbg-co__radio::after {
	opacity: 1;
}

.sbg-co .sbg-co__locked-note {
	color: var(--sbg-ink-500);
	font-size: 13px;
	margin: 10px 0 0;
}

	/* --- Bloc 2 : dates -------------------------------------------------- */

.sbg-co .sbg-co__dates {
	border-top: 1px solid var(--sbg-line);
	margin-top: 18px;
	padding-top: 16px;
}

.sbg-co .sbg-co__dates-head {
	margin-bottom: 12px;
}

.sbg-co .sbg-co__dates-title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 3px;
}

.sbg-co .sbg-co__dates-hint {
	color: var(--sbg-ink-500);
	font-size: 13px;
	line-height: 1.45;
	margin: 0 0 12px;
}

.sbg-co .sbg-co__tabs {
	background: var(--sbg-pine-50);
	border-radius: var(--sbg-pill);
	display: flex;
	padding: 3px;
}

.sbg-co .sbg-co__tab {
	align-items: center;
	border-radius: var(--sbg-pill);
	color: var(--sbg-pine-700);
	cursor: pointer;
	display: flex;
	flex: 1;
	font-size: 15px;
	font-weight: 600;
	justify-content: center;
	min-height: 40px;
	transition: background-color 140ms var(--sbg-ease), color 140ms var(--sbg-ease);
}

.sbg-co .sbg-co__tab.is-on {
	background: var(--sbg-pine-700);
	color: #fff;
}

	/* Carrousel horizontal, bord a bord : le debordement volontaire hors des
   marges du bloc dit qu'on peut faire defiler. */
.sbg-co .sbg-co__chips {
	display: flex;
	gap: 8px;
	margin: 0 -16px;
	overflow-x: auto;
	padding: 0 16px 4px;
	scrollbar-width: none;
}

.sbg-co .sbg-co__chips::-webkit-scrollbar {
	height: 0;
}

.sbg-co .sbg-co__chip {
	background: var(--sbg-white);
	border: 2px solid var(--sbg-line);
	border-radius: var(--sbg-tile);
	cursor: pointer;
	display: block;
	flex: none;
	min-width: 118px;
	padding: 12px 14px;
	transition: border-color 140ms var(--sbg-ease), background-color 140ms var(--sbg-ease);
}

.sbg-co .sbg-co__chip[aria-checked="true"] {
	background: var(--sbg-pine-50);
	border-color: var(--sbg-pine-700);
}

.sbg-co .sbg-co__chip-weekday {
	color: var(--sbg-ink-500);
	display: block;
	font-size: 13px;
}

.sbg-co .sbg-co__chip-day {
	color: var(--sbg-pine-700);
	display: block;
	font-size: 19px;
	font-weight: 900;
	line-height: 1.2;
}

.sbg-co .sbg-co__chip-window {
	color: var(--sbg-ink-500);
	display: block;
	font-size: 12px;
	margin-top: 2px;
}

.sbg-co .sbg-co__chip-left {
	color: var(--sbg-rose-600);
	display: block;
	font-size: 12px;
	font-weight: 600;
}

.sbg-co .sbg-co__empty {
	color: var(--sbg-ink-500);
	font-size: 14px;
	margin: 0;
}

	/* --- Bloc 2 : calendrier -------------------------------------------- */

.sbg-co .sbg-co__month-head {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 8px;
}

.sbg-co .sbg-co__month-nav {
	align-items: center;
	border-radius: var(--sbg-pill);
	color: var(--sbg-pine-700);
	cursor: pointer;
	display: flex;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.sbg-co .sbg-co__month-nav[disabled] {
	color: var(--sbg-ink-300);
	cursor: default;
}

.sbg-co .sbg-co__month-label {
	color: var(--sbg-pine-700);
	font-size: 15px;
	font-weight: 900;
	margin: 0;
	min-width: 140px;
	text-align: center;
	text-transform: uppercase;
}

.sbg-co .sbg-co__weekdays {
	color: var(--sbg-ink-500);
	display: grid;
	font-size: 11px;
	font-weight: 600;
	gap: 2px;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 2px;
	text-align: center;
}

.sbg-co .sbg-co__grid-days {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(7, 1fr);
}

.sbg-co .sbg-co__cell {
	border: 2px solid transparent;
	border-radius: 9px;
	cursor: pointer;
	display: block;
	min-height: 56px;
	padding: 5px 1px 4px;
	text-align: center;
	transition: border-color 140ms var(--sbg-ease), background-color 140ms var(--sbg-ease);
}

.sbg-co .sbg-co__cell.is-mine {
	border-color: var(--sbg-pine-100);
}

.sbg-co .sbg-co__cell[aria-pressed="true"] {
	background: var(--sbg-pine-50);
	border-color: var(--sbg-pine-700);
}

.sbg-co .sbg-co__cell.is-closed {
	cursor: default;
	opacity: 0.32;
}

.sbg-co .sbg-co__cell--void {
	display: block;
}

.sbg-co .sbg-co__cell-number {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.sbg-co .sbg-co__cell-icons {
	display: flex;
	gap: 2px;
	justify-content: center;
	margin-top: 3px;
	min-height: 12px;
}

.sbg-co .sbg-co__cell-icon {
	color: var(--sbg-ink-300);
	line-height: 0;
}

.sbg-co .sbg-co__cell-icon.is-current {
	color: var(--sbg-pine-700);
}

.sbg-co .sbg-co__cell-price {
	color: var(--sbg-pine-700);
	display: block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 2px;
}

.sbg-co .sbg-co__legend {
	color: var(--sbg-ink-500);
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 10px;
	margin-top: 12px;
}

.sbg-co .sbg-co__legend-item {
	align-items: center;
	display: flex;
	gap: 5px;
}

	/* --- Bloc 2 : encadre du jour --------------------------------------- */

.sbg-co .sbg-co__daybox {
	background: var(--sbg-pine-50);
	border-radius: var(--sbg-tile);
	margin-top: 14px;
	padding: 14px 16px;
}

.sbg-co .sbg-co__daybox.is-warn {
	background: var(--sbg-red-50);
}

.sbg-co .sbg-co__daybox-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.sbg-co .sbg-co__daybox-text {
	color: var(--sbg-ink-500);
	font-size: 13px;
	line-height: 1.45;
	margin: 3px 0 0;
}

.sbg-co .sbg-co__alts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.sbg-co .sbg-co__alt {
	align-items: center;
	background: var(--sbg-white);
	border: 1.5px solid var(--sbg-pine-300);
	border-radius: var(--sbg-pill);
	color: var(--sbg-pine-700);
	cursor: pointer;
	display: flex;
	font-size: 15px;
	font-weight: 600;
	justify-content: center;
	min-height: 46px;
	padding: 0 16px;
	text-align: center;
	transition: background-color 140ms var(--sbg-ease);
}

.sbg-co .sbg-co__alt:hover {
	background: var(--sbg-pine-100);
}

.sbg-co .sbg-co__note-toggle {
	margin-top: 12px;
}

.sbg-co .sbg-co__note {
	margin-top: 4px;
}

	/* --- Bloc 3 : services ---------------------------------------------- */

.sbg-co .sbg-co__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sbg-co .sbg-co__option {
	align-items: flex-start;
	background: var(--sbg-white);
	border: 2px solid var(--sbg-line);
	border-radius: var(--sbg-tile);
	cursor: pointer;
	display: flex;
	gap: 12px;
	padding: 14px;
	transition: border-color 140ms var(--sbg-ease), background-color 140ms var(--sbg-ease);
}

.sbg-co .sbg-co__option[aria-checked="true"] {
	background: var(--sbg-pine-50);
	border-color: var(--sbg-pine-700);
}

.sbg-co .sbg-co__option--inline {
	align-items: center;
	padding: 13px 14px;
}

.sbg-co .sbg-co__option > .sbg-co__radio,
.sbg-co .sbg-co__option > .sbg-co__check {
	margin-top: 2px;
}

.sbg-co .sbg-co__option--inline > .sbg-co__radio {
	margin-top: 0;
}

.sbg-co .sbg-co__option-body {
	flex: 1;
	min-width: 0;
}

.sbg-co .sbg-co__option-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.sbg-co .sbg-co__option-text {
	color: var(--sbg-ink-500);
	display: block;
	font-size: 13px;
	line-height: 1.4;
}

.sbg-co .sbg-co__option-price {
	color: var(--sbg-pine-700);
	flex: none;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.sbg-co .sbg-co__option-price.is-gift {
	color: var(--sbg-rose-600);
}

.sbg-co .sbg-co__check {
	border: 2px solid var(--sbg-pine-300);
	border-radius: 5px;
	flex: none;
	height: 18px;
	position: relative;
	width: 18px;
}

.sbg-co .sbg-co__check::after {
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	content: "";
	height: 4px;
	left: 3px;
	opacity: 0;
	position: absolute;
	top: 4px;
	transform: rotate(-45deg);
	width: 8px;
}

.sbg-co [aria-checked="true"] > .sbg-co__check {
	background: var(--sbg-pine-700);
	border-color: var(--sbg-pine-700);
}

.sbg-co [aria-checked="true"] > .sbg-co__check::after {
	opacity: 1;
}

.sbg-co .sbg-co__access {
	background: var(--sbg-pine-50);
	border-radius: var(--sbg-tile);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px 16px;
}

.sbg-co .sbg-co__access input,
.sbg-co .sbg-co__access select {
	border-color: var(--sbg-pine-100);
	padding: 13px;
}

	/* --- Bloc 4 : paiement ----------------------------------------------- */

.sbg-co .sbg-co__wallets:empty {
	display: none;
}

.sbg-co .sbg-co__wallets #wc-stripe-express-checkout-element {
	margin-top: 0 !important;
}

	/* Stripe pose son propre separateur « — OR — » : le notre le remplace, en
   francais et a la bonne place. */
.sbg-co #wc-stripe-express-checkout-button-separator {
	display: none !important;
}

.sbg-co .sbg-co__sep {
	align-items: center;
	color: var(--sbg-ink-500);
	display: flex;
	font-size: 13px;
	gap: 12px;
	margin: 16px 0;
}

.sbg-co .sbg-co__sep::before,
.sbg-co .sbg-co__sep::after {
	background: var(--sbg-line);
	content: "";
	flex: 1;
	height: 1px;
}

.sbg-co .sbg-co__review {
	margin-top: 4px;
}

.sbg-co .sbg-co__terms {
	color: var(--sbg-ink-500);
	font-size: 12px;
	line-height: 1.5;
	margin: 12px 0 0;
	text-align: center;
}

	/* Le formulaire de paiement de WooCommerce, repeint. */
.sbg-co .wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sbg-co .wc_payment_method {
	border-bottom: 1px solid var(--sbg-line);
	padding: 0;
}

.sbg-co .wc_payment_methods li:last-child {
	border-bottom: 0;
}

.sbg-co .wc_payment_method > label {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 15px;
	font-weight: 600;
	gap: 10px;
	min-height: 48px;
	padding: 4px 0;
}

.sbg-co .wc_payment_method > input[type="radio"] {
	accent-color: var(--sbg-pine-700);
	height: 18px;
	margin: 0;
	width: 18px;
}

.sbg-co .payment_box {
	background: transparent;
	border-radius: var(--sbg-tile);
	color: var(--sbg-ink-700);
	font-size: 14px;
	margin: 0 0 12px;
	padding: 0;
}

.sbg-co .payment_box::before {
	display: none;
}

.sbg-co .wc_payment_methods li:only-child > label {
	display: none;
}

.sbg-co .place-order {
	margin: 0;
	padding: 0;
}

.sbg-co .woocommerce-terms-and-conditions-wrapper {
	display: none;
}

.sbg-co #place_order {
	background: var(--sbg-cta, var(--sbg-pine-700));
	border: 0;
	border-radius: var(--sbg-pill);
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 17px;
	font-weight: 700;
	min-height: 52px;
	padding: 14px 18px;
	text-align: center;
	transition: filter 140ms var(--sbg-ease), transform 80ms var(--sbg-ease);
	width: 100%;
}

.sbg-co #place_order:hover {
	filter: brightness(0.92);
}

.sbg-co #place_order:active {
	transform: scale(0.99);
}

	/* --- Recapitulatif ---------------------------------------------------- */

.sbg-co .sbg-co__recap {
	background: var(--sbg-white);
	border-radius: var(--sbg-soft);
	box-shadow: 0 4px 16px rgba(4, 104, 101, 0.06);
	overflow: hidden;
}

.sbg-co .sbg-co__recap-toggle {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	width: 100%;
}

.sbg-co .sbg-co__thumb {
	align-items: center;
	background: var(--sbg-pine-50);
	border-radius: 10px;
	color: var(--sbg-pine-700);
	display: flex;
	flex: none;
	height: 40px;
	justify-content: center;
	overflow: hidden;
	width: 40px;
}

.sbg-co .sbg-co__thumb img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.sbg-co .sbg-co__recap-head {
	flex: 1;
	min-width: 0;
}

.sbg-co .sbg-co__recap-name {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sbg-co .sbg-co__recap-sub {
	color: var(--sbg-ink-500);
	display: block;
	font-size: 13px;
}

.sbg-co .sbg-co__recap-more {
	color: var(--sbg-ink-500);
	display: block;
	font-size: 13px;
}

.sbg-co .sbg-co__recap-total {
	color: var(--sbg-pine-700);
	flex: none;
	font-size: 18px;
	font-weight: 900;
}

.sbg-co .sbg-co__recap-body {
	display: none;
	padding: 0 16px 14px;
}

.sbg-co .sbg-co__recap[data-open="true"] .sbg-co__recap-body {
	display: block;
}

.sbg-co .sbg-co__recap-items,
.sbg-co .sbg-co__recap-lines {
	list-style: none;
	margin: 0;
	padding: 12px 0 0;
}

.sbg-co .sbg-co__recap-items li,
.sbg-co .sbg-co__recap-lines li {
	display: flex;
	font-size: 14px;
	gap: 12px;
	justify-content: space-between;
	padding: 4px 0;
}

.sbg-co .sbg-co__recap-lines li span:first-child {
	color: var(--sbg-ink-500);
}

.sbg-co .sbg-co__recap-lines li span:last-child {
	font-weight: 600;
	white-space: nowrap;
}

.sbg-co .sbg-co__recap-sum {
	align-items: baseline;
	border-top: 1px solid var(--sbg-line);
	display: flex;
	justify-content: space-between;
	margin: 12px 0 0;
	padding-top: 12px;
}

.sbg-co .sbg-co__recap-sum span {
	color: var(--sbg-pine-700);
	font-size: 17px;
	font-weight: 900;
	text-transform: uppercase;
}

.sbg-co .sbg-co__recap-sum strong {
	color: var(--sbg-pine-700);
	font-size: 24px;
	font-weight: 900;
}

.sbg-co .sbg-co__recap-tax {
	color: var(--sbg-ink-500);
	font-size: 12px;
	margin: 4px 0 0;
}

.sbg-co .sbg-co__recap-when {
	background: var(--sbg-pine-50);
	border-radius: var(--sbg-tile);
	margin-top: 16px;
	padding: 14px 16px;
}

.sbg-co .sbg-co__recap-mode {
	color: var(--sbg-pine-700);
	font-size: 14px;
	font-weight: 700;
	margin: 0;
}

.sbg-co .sbg-co__recap-date {
	color: var(--sbg-ink-500);
	font-size: 13px;
	margin: 2px 0 0;
}

.sbg-co .sbg-co__promo {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.sbg-co .sbg-co__promo input {
	background: var(--sbg-white);
	border: 1.5px solid var(--sbg-line);
	border-radius: var(--sbg-field);
	flex: 1;
	font-size: 16px;
	min-width: 0;
	outline: none;
	padding: 12px;
}

.sbg-co .sbg-co__promo input:focus {
	border-color: var(--sbg-pine-500);
}

.sbg-co .sbg-co__promo .sbg-co__error {
	flex-basis: 100%;
}

.sbg-co .sbg-co__codes {
	color: var(--sbg-ink-500);
	font-size: 13px;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.sbg-co .sbg-co__codes li {
	align-items: center;
	display: flex;
	gap: 8px;
}

.sbg-co .sbg-co__codes .sbg-co__link {
	font-size: 13px;
	min-height: 0;
}

.sbg-co .sbg-co__trust {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 4px 4px 0;
}

.sbg-co .sbg-co__trust-line {
	align-items: center;
	color: var(--sbg-ink-500);
	display: flex;
	font-size: 13px;
	gap: 8px;
	margin: 0;
}

.sbg-co .sbg-co__trust-line svg {
	color: var(--sbg-pine-700);
	flex: none;
}

	/* --- Barre de paiement fixe (telephone) ------------------------------ */

.sbg-co .sbg-co__paybar {
	align-items: center;
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.94);
	border-top: 1px solid var(--sbg-line);
	bottom: 0;
	display: flex;
	gap: 12px;
	left: 0;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 18px));
	position: fixed;
	right: 0;
	z-index: 8;
}

.sbg-co .sbg-co__paybar-total {
	flex: none;
}

.sbg-co .sbg-co__paybar-label {
	color: var(--sbg-ink-500);
	display: block;
	font-size: 11px;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-transform: uppercase;
}

.sbg-co .sbg-co__paybar-total strong {
	color: var(--sbg-pine-700);
	font-size: 20px;
	font-weight: 900;
	line-height: 1.1;
}

.sbg-co .sbg-co__pay {
	align-items: center;
	background: var(--sbg-cta, var(--sbg-pine-700));
	border-radius: var(--sbg-pill);
	color: #fff;
	cursor: pointer;
	display: flex;
	flex: 1;
	font-size: 17px;
	font-weight: 700;
	justify-content: center;
	min-height: 52px;
	text-align: center;
	transition: filter 140ms var(--sbg-ease), transform 80ms var(--sbg-ease);
}

.sbg-co .sbg-co__pay:active {
	transform: scale(0.99);
}

	/* Un seul point de validation sur telephone : le bouton de WooCommerce est
   masque, la barre fixe le declenche. */
.sbg-co .place-order {
	display: none;
}

	/* Pendant qu'une requete est en vol.
   La page entiere passait auparavant a 55 % d'opacite et cessait de repondre
   au doigt : chaque clic devenait une attente de trois cents millisecondes,
   sur un parcours ou l'on clique dix fois. Ce qui reste vrai pendant
   l'aller-retour reste donc lisible et cliquable ; seuls les montants, que le
   serveur peut contredire, s'estompent — et un filet de progres dit que
   quelque chose se passe. */

.sbg-co.is-syncing [data-sbg-total],
.sbg-co.is-syncing [data-sbg-total-mobile],
.sbg-co.is-syncing [data-sbg-lines],
.sbg-co.is-syncing [data-sbg-cta] {
	opacity: 0.5;
	transition: opacity 120ms var(--sbg-ease);
}

.sbg-co.is-syncing::after {
	animation: sbg-co-progress 900ms linear infinite;
	background: linear-gradient(90deg, transparent, var(--sbg-pine-500), transparent);
	content: "";
	height: 2px;
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 20;
}

@keyframes sbg-co-progress {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

	/* =====================================================================
   Au-dela de 768 px — la mise en scene de la maquette de bureau.
   ===================================================================== */

@media (min-width: 768px) {

.sbg-co {
		padding-bottom: 80px;
	}

.sbg-co .sbg-co__head {
		background: var(--sbg-white);
		position: static;
	}

.sbg-co .sbg-co__head-inner {
		gap: 18px;
		padding: 14px 20px;
	}

.sbg-co .sbg-co__logo {
		height: 52px;
	}

.sbg-co .sbg-co__head-title {
		font-size: 15px;
	}

.sbg-co .sbg-co__head-baseline {
		color: var(--sbg-ink-500);
		display: block;
		font-size: 13px;
		line-height: 1.4;
		margin: 0;
	}

.sbg-co .sbg-co__head-titles > .sbg-co__hold {
		display: none;
	}

.sbg-co .sbg-co__secure span,
.sbg-co .sbg-co__head-side .sbg-co__hold {
		display: block;
	}

.sbg-co .sbg-co__head-side .sbg-co__hold {
		font-size: 12px;
	}

.sbg-co .sbg-co__messages {
		padding: 0 20px;
	}

.sbg-co .sbg-co__grid {
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 24px;
		padding: 28px 20px 0;
	}

.sbg-co .sbg-co__main {
		flex: 1 1 620px;
		gap: 20px;
		width: auto;
	}

.sbg-co .sbg-co__aside {
		flex: 0 1 340px;
		gap: 14px;
		min-width: 260px;
		order: 0;
		position: sticky;
		top: 24px;
		width: auto;
	}

.sbg-co .sbg-co__block {
		border-radius: var(--sbg-card);
		box-shadow: var(--sbg-shadow);
		padding: 24px clamp(18px, 3vw, 30px);
	}

.sbg-co .sbg-co__block-head {
		gap: 14px;
		margin-bottom: 6px;
	}

.sbg-co .sbg-co__num {
		font-size: 15px;
		height: 30px;
		width: 30px;
	}

.sbg-co .sbg-co__title {
		font-size: 21px;
	}

.sbg-co .sbg-co__lead {
		font-size: 15px;
		margin: 0 0 16px 44px;
	}

.sbg-co .sbg-co__indent {
		margin-left: 44px;
	}

.sbg-co .sbg-co__summary-card {
		gap: 18px;
		padding: 18px 20px;
	}

.sbg-co .sbg-co__summary-body {
		min-width: 180px;
	}

.sbg-co .sbg-co__fields {
		gap: 14px;
	}

.sbg-co .sbg-co__row {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 14px;
	}

.sbg-co .sbg-co__row--address {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	}

.sbg-co .sbg-co__field input,
.sbg-co .sbg-co__field select,
.sbg-co .sbg-co__field textarea {
		font-size: 15px;
		padding: 13px 14px;
	}

.sbg-co .sbg-co__field textarea {
		resize: vertical;
	}

.sbg-co .sbg-co__button {
		font-size: 15px;
		min-height: 0;
		padding: 11px 22px;
	}

.sbg-co .sbg-co__link {
		font-size: 14px;
		min-height: 0;
	}

.sbg-co .sbg-co__edit {
		border-bottom: 1.5px solid var(--sbg-pine-300);
		font-size: 14px;
		min-height: 0;
	}

	/* Les trois cartes de mode en colonnes, comme dans la maquette. */
	.sbg-co .sbg-co__modes {
		display: grid;
		gap: 12px;
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	}

.sbg-co .sbg-co__mode {
		align-items: stretch;
		border-radius: var(--sbg-soft);
		column-gap: 8px;
		grid-template-areas:
			"icon   radio"
			"title  title"
			"text   text"
			"price  count"
			"reason reason";
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 16px;
		row-gap: 8px;
		transition: transform 160ms var(--sbg-ease), border-color 140ms var(--sbg-ease), background-color 140ms var(--sbg-ease);
	}

.sbg-co .sbg-co__mode:hover:not(.is-empty) {
		transform: translateY(-3px);
	}

.sbg-co .sbg-co__mode-icon {
		align-self: start;
		justify-self: start;
	}

.sbg-co .sbg-co__radio {
		align-self: start;
		height: 20px;
		width: 20px;
	}

.sbg-co .sbg-co__radio::after {
		height: 10px;
		width: 10px;
	}

.sbg-co .sbg-co__mode-title {
		font-size: 16px;
	}

.sbg-co .sbg-co__mode-text,
.sbg-co .sbg-co__mode-count {
		display: block;
	}

.sbg-co .sbg-co__mode-count::before {
		content: none;
	}

.sbg-co .sbg-co__mode-price {
		align-self: end;
		grid-area: price;
		justify-self: start;
		text-align: left;
	}

.sbg-co .sbg-co__mode-count {
		align-self: end;
		font-size: 12px;
		grid-area: count;
		justify-self: end;
		text-align: right;
	}

.sbg-co .sbg-co__dates {
		margin-top: 24px;
		padding-top: 20px;
	}

.sbg-co .sbg-co__dates-head {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		justify-content: space-between;
		margin-bottom: 14px;
	}

.sbg-co .sbg-co__dates-title {
		font-size: 16px;
	}

.sbg-co .sbg-co__dates-hint {
		margin-bottom: 0;
		margin-top: 2px;
	}

.sbg-co .sbg-co__tabs {
		flex: none;
	}

.sbg-co .sbg-co__tab {
		flex: none;
		font-size: 14px;
		min-height: 0;
		padding: 7px 16px;
	}

	/* En grille, plus en carrousel : sur grand ecran on compare des dates,
	   on ne les fait pas defiler. */
	.sbg-co .sbg-co__chips {
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		margin: 0;
		overflow: visible;
		padding: 0;
	}

.sbg-co .sbg-co__chip {
		min-width: 0;
	}

.sbg-co .sbg-co__chip-weekday,
.sbg-co .sbg-co__chip-day {
		color: var(--sbg-ink-700);
		display: inline;
		font-size: 15px;
		font-weight: 700;
	}

.sbg-co .sbg-co__chip-window {
		font-size: 13px;
	}

.sbg-co .sbg-co__month-head {
		gap: 16px;
		margin-bottom: 10px;
	}

.sbg-co .sbg-co__month-label {
		font-size: 16px;
	}

.sbg-co .sbg-co__weekdays,
.sbg-co .sbg-co__grid-days {
		gap: 4px;
	}

.sbg-co .sbg-co__weekdays {
		font-size: 12px;
		margin-bottom: 4px;
	}

.sbg-co .sbg-co__cell {
		border-radius: 10px;
		min-height: 62px;
		padding: 6px 2px 5px;
	}

.sbg-co .sbg-co__cell-number {
		font-size: 15px;
	}

.sbg-co .sbg-co__cell-icons {
		gap: 3px;
		margin-top: 4px;
		min-height: 14px;
	}

.sbg-co .sbg-co__legend {
		font-size: 12px;
		gap: 16px;
		margin-top: 14px;
	}

.sbg-co .sbg-co__legend-item {
		gap: 6px;
	}

.sbg-co .sbg-co__daybox {
		margin-top: 16px;
		padding: 16px 18px;
	}

.sbg-co .sbg-co__daybox-text {
		font-size: 14px;
		line-height: 1.5;
	}

.sbg-co .sbg-co__alts {
		flex-direction: row;
		flex-wrap: wrap;
	}

.sbg-co .sbg-co__alt {
		font-size: 14px;
		min-height: 0;
		padding: 9px 16px;
	}

.sbg-co .sbg-co__note-toggle {
		margin-top: 14px;
	}

.sbg-co .sbg-co__note {
		margin-top: 10px;
	}

.sbg-co .sbg-co__option {
		align-items: center;
		padding: 15px 18px;
	}

.sbg-co .sbg-co__option > .sbg-co__radio,
.sbg-co .sbg-co__option > .sbg-co__check {
		margin-top: 0;
	}

.sbg-co .sbg-co__check {
		border-radius: 6px;
		height: 20px;
		width: 20px;
	}

.sbg-co .sbg-co__check::after {
		height: 5px;
		left: 3px;
		top: 4px;
		width: 9px;
	}

.sbg-co .sbg-co__option-price {
		font-size: 15px;
	}

.sbg-co .sbg-co__access {
		display: grid;
		gap: 14px;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		padding: 16px 18px;
	}

.sbg-co .sbg-co__access input,
.sbg-co .sbg-co__access select {
		padding: 11px 14px;
	}

.sbg-co .sbg-co__sep {
		gap: 14px;
	}

	/* Le recapitulatif de bureau est toujours ouvert : c'est une colonne,
	   pas un bandeau qu'on deplie. */
	.sbg-co .sbg-co__recap {
		border-radius: var(--sbg-card);
		box-shadow: var(--sbg-shadow);
	}

.sbg-co .sbg-co__recap-toggle {
		border-bottom: 1px solid var(--sbg-line);
		cursor: default;
		gap: 14px;
		padding: 24px 24px 18px;
	}

.sbg-co .sbg-co__thumb {
		border-radius: 12px;
		height: 56px;
		width: 56px;
	}

.sbg-co .sbg-co__recap-name {
		white-space: normal;
	}

.sbg-co .sbg-co__recap-more,
.sbg-co .sbg-co__recap-total {
		display: none;
	}

.sbg-co .sbg-co__recap-body {
		display: block;
		padding: 0 24px 24px;
	}

.sbg-co .sbg-co__recap-items,
.sbg-co .sbg-co__recap-lines {
		padding-top: 16px;
	}

.sbg-co .sbg-co__recap-lines li {
		padding: 0;
	}

.sbg-co .sbg-co__recap-lines {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-bottom: 16px;
	}

.sbg-co .sbg-co__recap-sum {
		margin-top: 0;
		padding-top: 16px;
	}

.sbg-co .sbg-co__trust {
		gap: 10px;
		padding: 4px 8px;
	}

.sbg-co .sbg-co__trust-line {
		font-size: 13px;
		gap: 10px;
	}

	/* Sur grand ecran le bouton de paiement revient dans le bloc paiement,
	   et la barre fixe disparait. */
	.sbg-co .sbg-co__paybar {
		display: none;
	}

.sbg-co .place-order {
		display: block;
	}

.sbg-co #place_order {
		font-size: 18px;
		min-height: 0;
		padding: 18px;
	}
}

@media (min-width: 1024px) {

.sbg-co .sbg-co__wallets {
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}
}

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

.sbg-co *,
.sbg-co *::before,
.sbg-co *::after {
		transition-duration: 1ms !important;
	}

.sbg-co .sbg-co__mode:hover {
		transform: none;
	}

.sbg-co.is-syncing::after {
		animation: none;
		opacity: 0.6;
	}
}

	/* =====================================================================
   Cohabitation avec le thème et avec WooCommerce.

   Ces règles viennent en dernier : à spécificité égale, c'est l'ordre
   d'écriture qui tranche, et il n'y a donc pas un « !important » dans
   toute la feuille. Le thème garde la main s'il veut la reprendre.
   ===================================================================== */

	/* Le kit Elementor pose « display: flex » sur des classes que nous cachons
   par l'attribut hidden. Un résumé d'adresse vide restait alors affiché
   sous le formulaire ouvert, avec son lien « Modifier » et rien dedans. */
.sbg-co [hidden] {
	display: none;
}

	/* Le logo est carré ; sans borne de hauteur il s'affiche à sa taille
   naturelle, soit trois cents pixels d'en-tête. */
.sbg-co .sbg-co__logo {
	height: 34px;
	max-height: 34px;
	object-fit: contain;
	width: auto;
}

	/* Le séparateur « ou par carte » n'a de sens qu'au-dessous de quelque
   chose : sans portefeuille disponible, il annonce une rangée vide. */
.sbg-co .sbg-co__wallets:empty + .sbg-co__sep {
	display: none;
}

	/* Le bloc de paiement de WooCommerce arrive avec son fond gris, son
   liseré et sa petite flèche. La maquette n'en veut rien : le champ de
   carte de Stripe se pose à même la carte blanche. */
.sbg-co #payment,
.sbg-co #payment ul.payment_methods,
.sbg-co #payment div.form-row,
.sbg-co #payment .wc_payment_method .payment_box {
	background: transparent;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

/* WooCommerce dessine une petite fleche grise au-dessus de l'encart du moyen
   de paiement, et la colore en dur. Elle designait un onglet qui n'existe
   plus ici : le moyen de paiement est unique, et sa description se lit a
   meme la carte. */
.sbg-co #payment .wc_payment_method .payment_box::before,
.sbg-co #payment .wc_payment_method .payment_box::after {
	border: 0;
	content: none;
	display: none;
}

.sbg-co #payment .payment_box p {
	color: var(--sbg-ink-500);
	font-size: 14px;
	margin: 0 0 12px;
}

.sbg-co #payment ul.payment_methods > li {
	background: transparent;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sbg-co #payment ul.payment_methods > li + li {
	border-top: 1px solid var(--sbg-line);
}

.sbg-co #payment .wc-stripe-upe-element,
.sbg-co #payment .wc_payment_method .payment_box {
	margin-bottom: 12px;
}

	/* La phrase du mode ne doit pas pousser sa colonne : sans borne, elle
   déborde de la carte au lieu de passer à la ligne. */
.sbg-co .sbg-co__mode-text,
.sbg-co .sbg-co__mode-title,
.sbg-co .sbg-co__option-body,
.sbg-co .sbg-co__recap-head {
	min-width: 0;
	overflow-wrap: anywhere;
}

	/* Le champ de carte de Stripe, repeint aux couleurs de la boutique.
   L'intérieur du cadre appartient à Stripe (c'est une iframe, et c'est
   très bien ainsi) ; l'API « appearance » s'en charge, cf. TunnelModule. */
.sbg-co .wc-stripe-upe-element,
.sbg-co #wc-stripe-upe-element {
	background: var(--sbg-white);
	border: 1.5px solid var(--sbg-line);
	border-radius: var(--sbg-field);
	padding: 12px 14px;
}

@media (min-width: 768px) {

	.sbg-co .sbg-co__logo {
		height: 52px;
		max-height: 52px;
	}
}

/* =====================================================================
   Mise en scène mobile — les trois écarts de la maquette téléphone.
   ===================================================================== */

/* L'en-tête tient sur deux rangées : logo + titre + cadenas, puis le
   compteur sous le titre. Au-delà de 768 px le compteur repasse à droite,
   sous « Paiement sécurisé », comme sur la maquette de bureau. */
.sbg-co .sbg-co__head-inner {
	align-items: center;
	column-gap: 12px;
	display: grid;
	grid-template-areas:
		"logo titles secure"
		"logo hold   hold";
	grid-template-columns: auto minmax(0, 1fr) auto;
	row-gap: 2px;
}

.sbg-co .sbg-co__logo,
.sbg-co .sbg-co__logo-lien {
	grid-area: logo;
}

.sbg-co .sbg-co__head-titles {
	grid-area: titles;
}

.sbg-co .sbg-co__secure {
	grid-area: secure;
}

.sbg-co .sbg-co__hold {
	grid-area: hold;
}

/* Le cadenas seul au téléphone : le mot « Paiement sécurisé » y prend la
   moitié de la rangée pour dire ce que le cadenas dit déjà. */
.sbg-co .sbg-co__secure span {
	display: none;
}

/* La phrase du mode et son compteur sur une seule ligne : « au pied de
   l'immeuble · 5 dates ». La rareté se lit avant le clic. */
.sbg-co .sbg-co__mode-line {
	color: var(--sbg-ink-500);
	display: block;
	font-size: 13px;
	grid-area: text;
	line-height: 1.4;
	min-width: 0;
}

.sbg-co .sbg-co__mode-text,
.sbg-co .sbg-co__mode-count {
	display: inline;
}

.sbg-co .sbg-co__mode-count::before {
	content: " · ";
}

/* Le récapitulatif remonte en tête de page, les réassurances descendent en
   pied : « display: contents » dissout la colonne de droite pour que ses
   deux morceaux se placent séparément dans la pile. */
.sbg-co .sbg-co__aside {
	display: contents;
}

.sbg-co .sbg-co__recap {
	order: -1;
}

.sbg-co .sbg-co__trust {
	order: 9;
}

@media (min-width: 768px) {

	.sbg-co .sbg-co__head-inner {
		grid-template-areas:
			"logo titles secure"
			"logo titles hold";
		row-gap: 3px;
	}

	.sbg-co .sbg-co__secure {
		align-self: end;
		justify-self: end;
	}

	.sbg-co .sbg-co__hold {
		align-self: start;
		justify-self: end;
	}

	.sbg-co .sbg-co__secure span {
		display: inline;
	}

	/* La colonne de droite redevient une vraie colonne collante. */
	.sbg-co .sbg-co__aside {
		display: flex;
	}

	.sbg-co .sbg-co__recap,
	.sbg-co .sbg-co__trust {
		order: 0;
	}

	/* Le compteur de dates rejoint le pied de carte, en face du prix. */
	.sbg-co .sbg-co__mode-line {
		display: contents;
	}

	.sbg-co .sbg-co__mode-text {
		display: block;
		grid-area: text;
	}

	.sbg-co .sbg-co__mode-count {
		display: block;
		grid-area: count;
	}

	.sbg-co .sbg-co__mode-count::before {
		content: none;
	}
}

/* Le thème met `display: flex` sur tout `form.checkout`. Notre formulaire en
   est un : la grille devenait alors un élément flexible dimensionné par son
   contenu, prenait ses 1140 px de largeur maximale et débordait de l'écran au
   téléphone. Le formulaire est un simple bloc ; c'est la grille qui range. */
/* Le thème met `display: flex` sur tout `form.checkout`, en `!important`, et
   notre formulaire en est un — la classe `checkout` est exigée par le script
   de commande de WooCommerce, on ne peut pas la retirer.

   Plutôt que de surenchérir en `!important`, la grille se comporte en bon
   élément flexible : elle prend toute la largeur disponible et ne se laisse
   plus dimensionner par son contenu. Sans cela elle atteignait ses 1140 px de
   largeur maximale et débordait de l'écran au téléphone. */
.sbg-co form.checkout.sbg-co__form {
	display: block;
	width: 100%;
}

.sbg-co .sbg-co__grid {
	flex: 1 1 0%;
	min-width: 0;
	width: 100%;
}

.sbg-co .sbg-co__main {
	min-width: 0;
}