/**
 * ===== [bcc_traiteur_band] -- homepage "Traiteur pour le bureau" teaser =====
 * Ported verbatim from the reference mockup's #traiteur section (.cat
 * .cwrap two-column band), not the .bcc-b2b__* page layout above.
 */
.bcc-traiteur {
	padding-block: 100px;
}

@media (width < 860px) {
	.bcc-traiteur {
		padding-block: 64px;
	}
}

.bcc-traiteur__wrap {
	width: min(1280px, 100% - 40px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

@media (width < 900px) {
	.bcc-traiteur__wrap {
		grid-template-columns: 1fr;
	}
}

.bcc-traiteur h2 {
	font-family: var(--bcc-font-display) !important;
	font-weight: 900;
	text-transform: uppercase;
	line-height: .88;
	font-size: clamp(3.25rem, 6.6vw, 6.25rem);
	color: var(--bcc-ink) !important;
	margin: 0;
}

.bcc-traiteur__lede {
	font-size: 20px;
	color: var(--bcc-muted);
	max-width: 520px;
	margin: 16px 0 0;
}

.bcc-traiteur__bullets {
	display: grid;
	gap: 8px;
	margin-top: 22px;
	font-family: var(--bcc-font-mono);
	font-size: 14px;
	letter-spacing: .03em;
}

.bcc-traiteur__form {
	display: grid;
	gap: 18px;
}

.bcc-traiteur__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.bcc-traiteur__fgroup {
	display: grid;
	gap: 8px;
}

.bcc-traiteur__fgroup > span {
	font-family: var(--bcc-font-mono);
	font-size: 13px;
	color: var(--bcc-muted);
}

.bcc-traiteur__fgroup input {
	width: 100%;
	min-height: 50px;
	border: var(--bcc-border-width) solid var(--bcc-ink);
	background: var(--bcc-cream);
	color: var(--bcc-ink);
	padding: 10px 12px;
	font-size: 17px;
}

.bcc-traiteur__consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--bcc-muted);
}

.bcc-traiteur__consent input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	flex: none;
}

.bcc-traiteur__status {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	min-height: 1.2em;
}

.bcc-traiteur__status.is-error {
	color: #A03A2E;
}

.bcc-traiteur__status.is-ok {
	color: var(--bcc-purple-700);
}

/**
 * B2B corporate lunch page ([bcc_b2b]). Reuses the hero's CTA classes
 * and the shared .bcc-card token styling for the format cards.
 */
.bcc-b2b {
	max-width: 960px;
	margin: 0 auto;
	padding: calc(var(--bcc-space) * 2) var(--bcc-space);
}

.bcc-b2b__hero {
	text-align: center;
	margin-bottom: calc(var(--bcc-space) * 1.5);
}

.bcc-b2b__hero h1 {
	font-family: var(--bcc-font-display) !important;
	font-weight: 900;
	font-size: clamp(3.375rem, 7.2vw, 7rem);
	line-height: .9;
	text-transform: uppercase;
	color: var(--bcc-ink) !important;
	margin: 0 0 12px;
}

.bcc-b2b__small {
	margin-top: 10px;
	font-size: 14px;
}

.bcc-b2b__small a {
	color: var(--bcc-purple-700);
}

.bcc-b2b__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bcc-space);
	margin-bottom: calc(var(--bcc-space) * 1.5);
}

@media (width < 720px) {
	.bcc-b2b__steps {
		grid-template-columns: 1fr;
	}
}

.bcc-b2b__step {
	text-align: center;
}

.bcc-b2b__step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50% !important;
	background: var(--bcc-purple-900);
	color: var(--bcc-gold-400);
	font-family: var(--bcc-font-display);
	font-weight: 900;
	margin-bottom: 8px;
}

.bcc-b2b__step h3 {
	font-family: var(--bcc-font-display) !important;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1.1rem;
	margin: 4px 0;
	color: var(--bcc-ink) !important;
}

.bcc-b2b__formats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bcc-space);
	margin-bottom: calc(var(--bcc-space) * 2);
}

@media (width < 860px) {
	.bcc-b2b__formats {
		grid-template-columns: 1fr 1fr;
	}
}

@media (width < 560px) {
	.bcc-b2b__formats {
		grid-template-columns: 1fr;
	}
}

.bcc-b2b__format h4 {
	font-family: var(--bcc-font-display) !important;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1.05rem;
	margin: 0 0 8px;
	color: var(--bcc-ink) !important;
}

.bcc-b2b__format p {
	font-size: 14px;
	color: var(--bcc-ink);
	margin: 0 0 12px;
}

.bcc-b2b__price {
	display: inline-block;
	font-family: var(--bcc-font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bcc-purple-700);
}

.bcc-b2b__form {
	background: var(--bcc-cream);
	border-radius: var(--bcc-radius-lg);
	box-shadow: var(--bcc-shadow-card);
	padding: calc(var(--bcc-space) * 1.5);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bcc-b2b__form h2 {
	font-family: var(--bcc-font-display) !important;
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin: 0;
	color: var(--bcc-ink) !important;
}

.bcc-b2b__form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bcc-ink);
}

.bcc-b2b__form input:not([type="checkbox"]),
.bcc-b2b__form select,
.bcc-b2b__form textarea {
	font-family: var(--bcc-font-body) !important;
	font-size: 15px;
	padding: 10px 12px;
	border-radius: var(--bcc-radius-sm);
	border: 1.5px solid rgb(72 57 111 / .3);
	background: #fff;
	color: var(--bcc-ink);
}

.bcc-b2b__form textarea {
	min-height: 80px;
	resize: vertical;
}

.bcc-b2b__restrictions {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
}

.bcc-b2b__restrictions legend {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
	padding: 0;
}

.bcc-b2b__checkbox {
	flex-direction: row !important;
	align-items: center;
	font-weight: 400 !important;
	gap: 8px !important;
}

.bcc-b2b__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.bcc-b2b__legal {
	font-size: 12.5px;
	color: var(--bcc-ink);
	opacity: .75;
	margin: 0;
}

.bcc-b2b__form button {
	align-self: flex-start;
	border: none;
	cursor: pointer;
}

.bcc-b2b__form button:disabled {
	opacity: .6;
	cursor: default;
}

.bcc-b2b__status {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	min-height: 1.2em;
}

.bcc-b2b__status.is-error {
	color: #A03A2E;
}

.bcc-b2b__status.is-ok {
	color: var(--bcc-purple-700);
}
