/* =========================================================================
   Batiself — Services page (premium, visual, timeline-driven).
   Pairs with page-services.php + assets/script/services.js.

   Structure:
     1. .bs-services-hero       sober hero
     2. .bs-services-trust      4-arg trust strip
     3. .bs-services-timeline   sticky numbered timeline (parcours de lecture)
     4. .bs-services-family     one section per family, image-led card grid
     5. .bs-services-cta        final CTA band

   Reuses tokens / .home-container / .home-btn from home.css.
   ========================================================================= */

.batiself-services { background: #fff; }

/* ---------- 1. Hero --------------------------------------------------- */
.bs-services-hero {
	background: var(--bs-color-bg-alt);
	border-bottom: 1px solid var(--bs-color-border);
	padding: var(--bs-space-lg) 0 var(--bs-space-lg);
}
.bs-services-hero__crumbs {
	margin-bottom: var(--bs-space-md);
}
.bs-services-hero__eyebrow {
	margin: 0 0 var(--bs-space-xs);
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-services-hero__title {
	margin: 0 0 var(--bs-space-sm);
	max-width: 880px;
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h1-size);
	font-weight:    var(--bs-type-h1-weight);
	line-height:    var(--bs-type-h1-leading);
	letter-spacing: var(--bs-type-h1-tracking);
	text-transform: var(--bs-type-h1-case);
}
.bs-services-hero__lead {
	margin: 0;
	max-width: 720px;
	color: var(--bs-color-text);
	font-size:      var(--bs-type-lead-size);
	font-weight:    var(--bs-type-lead-weight);
	line-height:    var(--bs-type-lead-leading);
}

/* ---------- 2. Trust strip -------------------------------------------- */
.bs-services-trust {
	background: #fff;
	padding: var(--bs-space-lg) 0;
	border-bottom: 1px solid var(--bs-color-border);
}
.bs-services-trust__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bs-space-md);
}
.bs-services-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--bs-space-sm);
	min-width: 0;
}
.bs-services-trust__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bs-color-bg-alt);
	color: var(--bs-color-primary);
	border-radius: 12px;
}
.bs-services-trust__title {
	display: block;
	margin: 0 0 2px;
	color: var(--bs-color-primary-dark);
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-weight-bold);
	line-height:    var(--bs-leading-snug);
}
.bs-services-trust__desc {
	display: block;
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-body-sm-size);
	line-height:    var(--bs-type-body-sm-leading);
}

/* =========================================================================
   3. Numbered timeline (parcours de lecture)
   ---------------------------------------------------------------------------
   Horizontal sticky bar with numbered nodes connected by a line. Each node
   is an anchor link to a family section. The active node (driven by the
   IntersectionObserver in services.js) is filled and slightly larger.
   ========================================================================= */
.bs-services-timeline {
	position: sticky;
	/* Stuck DIRECTLY under the header — top row (var(--bs-header-h) = 80px)
	   + mega row (56px) = 136px. No extra buffer so the timeline reads as
	   visually attached to the header bottom. */
	top: calc( var(--bs-header-h) + 56px );
	z-index: 20;
	background: #fff;
	border-bottom: 1px solid var(--bs-color-border);
	box-shadow: 0 4px 16px rgba(16, 54, 86, .04);
}
/* Logged-in users: the fixed WP admin bar (32px desktop) pushes the fixed
   header down, so the sticky timeline must clear it too — otherwise its top
   edge tucks under the header and gets cut. */
.admin-bar .bs-services-timeline { top: calc( var(--bs-header-h) + 56px + 32px ); }
/* ≤900px the mega bar is hidden → header is only --bs-header-h tall. */
@media (max-width: 900px) {
	.bs-services-timeline { top: var(--bs-header-h); }
	.admin-bar .bs-services-timeline { top: calc( var(--bs-header-h) + 32px ); }
}
@media (max-width: 782px) {
	.admin-bar .bs-services-timeline { top: calc( var(--bs-header-h) + 46px ); }
}
.bs-services-timeline__list {
	list-style: none;
	margin: 0;
	/* Generous top padding (28px) so the .is-active halo + scale never touch
	   the header above; bottom padding tighter since labels already provide
	   visual buffer. */
	padding: 28px 0 18px;
	display: flex;
	align-items: flex-start;   /* circles align by their TOP, labels reserve same row */
	gap: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.bs-services-timeline__item {
	flex: 1 1 0;
	min-width: 140px;
	position: relative;
	display: flex;
	justify-content: center;
	scroll-snap-align: start;
}
/* Connecting line between nodes — sits at the vertical center of the
   circle (top: 28px padding + half of 36px circle = 46px from the list's
   border-box top). Pinned to the actual circle Y so it stays straight
   even when labels wrap to 2 lines. */
.bs-services-timeline__item::before {
	content: '';
	position: absolute;
	top: 18px;          /* center of the 36px circle inside the link */
	left: 0;
	right: 0;
	height: 2px;
	background: var(--bs-color-border);
	z-index: 0;
}
.bs-services-timeline__item:first-child::before { left: 50%; }
.bs-services-timeline__item:last-child::before  { right: 50%; }

.bs-services-timeline__link {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	text-decoration: none;
	color: var(--bs-color-muted);
	text-align: center;
	transition: color .2s ease;
}
.bs-services-timeline__link:hover { color: var(--bs-color-primary); }

.bs-services-timeline__num {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--bs-color-muted);
	border: 2px solid var(--bs-color-border);
	border-radius: 50%;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-tight);
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.bs-services-timeline__label {
	display: block;
	max-width: 140px;
	color: inherit;
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
	line-height:    var(--bs-leading-snug);
	/* Reserve 2 lines so labels with 1 line and labels that wrap to 2 lines
	   take the same vertical space — the count + connecting line stay
	   aligned across the whole timeline regardless of wording length. */
	min-height: calc( var(--bs-text-xs) * var(--bs-leading-snug) * 2 );
}
.bs-services-timeline__count {
	color: var(--bs-color-muted);
	font-size: 10px;
	font-weight: var(--bs-weight-regular);
}

/* Active state — driven by services.js IntersectionObserver. */
.bs-services-timeline__link.is-active {
	color: var(--bs-color-primary);
}
.bs-services-timeline__link.is-active .bs-services-timeline__num {
	background: var(--bs-color-primary);
	color: #fff;
	border-color: var(--bs-color-primary);
	transform: scale(1.1);
	box-shadow: 0 0 0 6px rgba(0, 91, 167, .12);
}
.bs-services-timeline__link.is-active ~ * .bs-services-timeline__num,
.bs-services-timeline__item.is-past .bs-services-timeline__num {
	/* Past steps are filled blue but smaller — visual "you came from here" */
}
.bs-services-timeline__item.is-past .bs-services-timeline__num {
	background: var(--bs-color-primary);
	color: #fff;
	border-color: var(--bs-color-primary);
}
.bs-services-timeline__item.is-past::before {
	background: var(--bs-color-primary);
}
.bs-services-timeline__item.is-past + .bs-services-timeline__item.is-active::before {
	background: linear-gradient(90deg, var(--bs-color-primary) 0%, var(--bs-color-primary) 50%, var(--bs-color-border) 50%);
}

/* ---------- 4. Family section ----------------------------------------- */
.bs-services-family {
	padding: var(--bs-space-xl) 0;
	border-bottom: 1px solid var(--bs-color-border);
	/* Anchor offset: header (80 + mega 56 = 136) + sticky timeline ≈ 110px. */
	scroll-margin-top: calc( var(--bs-header-h) + 56px + 110px );
}
.bs-services-family:nth-of-type(even) {
	background: var(--bs-color-bg-alt);
}
.bs-services-family__header {
	display: flex;
	align-items: center;
	gap: var(--bs-space-md);
	margin-bottom: var(--bs-space-lg);
	flex-wrap: wrap;
}
.bs-services-family__step {
	flex-shrink: 0;
	font-family:    var(--bs-font-family);
	font-size:      clamp(48px, 5vw, 72px);
	font-weight:    var(--bs-weight-black);
	line-height:    var(--bs-leading-flat);
	letter-spacing: var(--bs-tracking-tight);
	color: transparent;
	-webkit-text-stroke: 1.5px var(--bs-color-primary);
}
.bs-services-family__title-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bs-services-family__title {
	margin: 0;
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h2-size);
	font-weight:    var(--bs-type-h2-weight);
	line-height:    var(--bs-type-h2-leading);
	letter-spacing: var(--bs-type-h2-tracking);
	text-transform: var(--bs-type-h2-case);
}
.bs-services-family__count {
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-services-family__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bs-space-md);
}
@media (max-width: 1100px) { .bs-services-family__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .bs-services-family__grid { grid-template-columns: 1fr; } }

/* ---------- Service card (image-led, compact) -------------------------- */
.bs-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--bs-color-border);
	border-radius: 0;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, transform .25s ease;
	/* Anchor-link arriving from a home-page service rail: skip past the
	   sticky site header + sticky services timeline so the card lands fully
	   visible at the top of the viewport. */
	scroll-margin-top: 140px;
}
/* Briefly highlight the targeted card so the user sees where they landed.
   2s pulse on URL fragment match, then fades to neutral. */
.bs-service-card:target {
	border-color: var(--bs-color-primary);
	box-shadow: 0 0 0 3px rgba(0, 91, 167, .18);
	animation: bs-svc-target-pulse 1.6s ease-out 1;
}
@keyframes bs-svc-target-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(0, 91, 167, .55); }
	60%  { box-shadow: 0 0 0 14px rgba(0, 91, 167, 0); }
	100% { box-shadow: 0 0 0 3px rgba(0, 91, 167, .18); }
}
.bs-services-family:nth-of-type(even) .bs-service-card { background: #fff; }
.bs-service-card:hover {
	border-color: var(--bs-color-primary);
	box-shadow: 0 12px 32px rgba(16, 54, 86, .08);
}
.bs-service-card.is-expanded {
	border-color: var(--bs-color-primary);
	box-shadow: 0 12px 32px rgba(16, 54, 86, .08);
}

/* Media — cover photo with subtle zoom-in on hover. */
.bs-service-card__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bs-color-bg-alt);
}
.bs-service-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.bs-service-card:hover .bs-service-card__img { transform: scale(1.04); }

/* Branded placeholder when no photo is uploaded — Batiself logo in pure
   white centred on the brand-blue gradient + diagonals signature. Stays
   consistent visually across every card that lacks a real photo. */
.bs-service-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		linear-gradient(135deg, var(--bs-color-primary) 0%, var(--bs-color-primary-dark) 100%),
		var(--bs-overlay-diagonals-soft);
	background-blend-mode: overlay, normal;
	overflow: hidden;
}
.bs-service-card__placeholder::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--bs-overlay-diagonals-soft);
	mix-blend-mode: overlay;
	opacity: .35;
	pointer-events: none;
}
.bs-service-card__placeholder-logo {
	position: relative;
	z-index: 1;
	max-width:  60%;
	max-height: 50%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	/* Flatten any logo (SVG / colored PNG) to pure white. */
	filter: brightness(0) invert(1);
	opacity: .94;
}
.bs-service-card__placeholder-fallback {
	position: relative;
	z-index: 1;
	color: #fff;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-h3-size);
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-type-h3-tracking);
	text-transform: uppercase;
	opacity: .92;
}
/* LEGACY — kept so older cards still uploaded a service_icon don't break;
   simply hidden under the new logo placeholder. */
.bs-service-card__placeholder-icon { display: none; }
.bs-service-card--no-image .bs-service-card__media { aspect-ratio: 4 / 3; }

/* Flag — "À venir" on upcoming services, top-left of the image. */
.bs-service-card__flag {
	position: absolute;
	top: var(--bs-space-sm);
	left: var(--bs-space-sm);
	z-index: 2;
	padding: 4px 10px;
	background: var(--bs-color-accent);
	color: var(--bs-color-text);
	border-radius: 999px;
	font-size:      10px;
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
}

.bs-service-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--bs-space-xs);
	padding: var(--bs-space-md);
	/* Fill the remaining card height so the "En savoir plus" toggle, which
	   carries margin-top:auto, is pushed to the bottom of every card — all
	   toggles then align across a row regardless of text length. */
	flex: 1 1 auto;
	min-height: 0;
}

.bs-service-card__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bs-service-card__title {
	margin: 0;
	color: var(--bs-color-primary-dark);
	font-size:      var(--bs-type-h3-size);
	font-weight:    var(--bs-type-h3-weight);
	line-height:    var(--bs-type-h3-leading);
	letter-spacing: var(--bs-type-h3-tracking);
}
.bs-service-card__sub {
	margin: 0;
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-medium);
	line-height:    var(--bs-leading-snug);
}
.bs-service-card__teaser {
	margin: 0;
	color: var(--bs-color-text);
	font-size:      var(--bs-type-body-sm-size);
	line-height:    var(--bs-type-body-sm-leading);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
.bs-service-card__stores {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bs-service-card__stores li {
	padding: 3px 10px;
	background: var(--bs-color-bg-alt);
	border-radius: 999px;
	color: var(--bs-color-primary-dark);
	font-size: 11px;
	font-weight: var(--bs-weight-semibold);
}

/* Toggle */
.bs-service-card__toggle {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 0;
	padding: 6px 0;
	color: var(--bs-color-primary);
	cursor: pointer;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
}
.bs-service-card__toggle:hover { color: var(--bs-color-primary-dark); }
.bs-service-card__chevron { transition: transform .2s ease; }
.bs-service-card.is-expanded .bs-service-card__chevron { transform: rotate(180deg); }
.bs-service-card__toggle-label--less { display: none; }
.bs-service-card.is-expanded .bs-service-card__toggle-label--more { display: none; }
.bs-service-card.is-expanded .bs-service-card__toggle-label--less { display: inline; }
/* Once open, drop the bottom-pinning so the toggle + details flow right after
   the content (no empty gap above « Réduire »). */
.bs-service-card.is-expanded .bs-service-card__toggle { margin-top: var(--bs-space-xs); }

/* Details — accordion content */
.bs-service-card__details {
	padding-top: var(--bs-space-sm);
	margin-top: var(--bs-space-xs);
	border-top: 1px solid var(--bs-color-border);
	display: flex;
	flex-direction: column;
	gap: var(--bs-space-sm);
}
.bs-service-card__details[hidden] { display: none; }
.bs-service-card__desc {
	color: var(--bs-color-text);
	font-size:      var(--bs-type-body-sm-size);
	line-height:    var(--bs-type-body-sm-leading);
}
.bs-service-card__desc p { margin: 0 0 6px; }
.bs-service-card__desc p:last-child { margin-bottom: 0; }

.bs-service-card__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bs-service-card__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.bs-service-card__features svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-top: 3px;
	color: var(--bs-color-primary);
	background: var(--bs-color-bg-alt);
	border-radius: 50%;
	padding: 2px;
}
.bs-service-card__features strong {
	display: block;
	color: var(--bs-color-text);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-semibold);
	line-height:    var(--bs-leading-snug);
}
.bs-service-card__features em {
	display: block;
	font-style: normal;
	color: var(--bs-color-muted);
	font-size:      11px;
	line-height:    var(--bs-leading-snug);
	margin-top: 1px;
}

.bs-service-card__conditions,
.bs-service-card__note {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bs-color-muted);
	font-size: 11px;
	font-style: italic;
}
.bs-service-card__conditions svg { color: var(--bs-color-accent); flex-shrink: 0; }

/* Upcoming variant — dimmed image, dashed border. */
.bs-service-card--upcoming { border-style: dashed; }
.bs-service-card--upcoming .bs-service-card__media { filter: grayscale(.4); }
.bs-service-card--upcoming:hover .bs-service-card__media { filter: grayscale(0); }

/* ---------- 5. CTA strip ---------------------------------------------- */
.bs-services-cta {
	background: var(--bs-color-primary);
	color: #fff;
	padding: var(--bs-space-xl) 0;
}
.bs-services-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bs-space-xl);
	flex-wrap: wrap;
}
.bs-services-cta__eyebrow {
	margin: 0 0 var(--bs-space-xs);
	color: var(--bs-color-accent);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-services-cta__title {
	margin: 0 0 var(--bs-space-sm);
	color: #fff;
	font-size:      var(--bs-type-h2-size);
	font-weight:    var(--bs-type-h2-weight);
	line-height:    var(--bs-type-h2-leading);
	letter-spacing: var(--bs-type-h2-tracking);
	text-transform: var(--bs-type-h2-case);
}
.bs-services-cta__title strong { font-weight: var(--bs-weight-black); }
.bs-services-cta__lead {
	margin: 0;
	max-width: 600px;
	color: rgba(255, 255, 255, .85);
	font-size:      var(--bs-type-body-size);
	line-height:    var(--bs-type-body-leading);
}
.bs-services-cta__actions {
	display: flex;
	gap: var(--bs-space-sm);
	flex-wrap: wrap;
}
.bs-services-cta__actions .home-btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6);
}
.bs-services-cta__actions .home-btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px #fff;
}

/* ---------- Empty state ----------------------------------------------- */
.bs-services-empty .home-container { text-align: center; padding: var(--bs-space-xl) 0; }
.bs-services-empty p { max-width: 520px; margin: var(--bs-space-sm) auto 0; color: var(--bs-color-muted); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
	.bs-services-trust__grid { grid-template-columns: repeat(2, 1fr); }
	.bs-services-timeline__item { min-width: 120px; }
	.bs-services-timeline__label { font-size: 10px; }
}

@media (max-width: 900px) {
	.bs-services-timeline { position: static; }
	.bs-services-timeline__list { padding: var(--bs-space-sm) 0; }
	.bs-services-timeline__item { min-width: 110px; }
	.bs-services-family__step { font-size: 44px; }
	.bs-services-cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
	.bs-services-trust__grid { grid-template-columns: 1fr; }
	.bs-services-hero { padding: var(--bs-space-lg) 0 var(--bs-space-md); }
	.bs-services-family { padding: var(--bs-space-lg) 0; }
	.bs-services-timeline__item { min-width: 100px; }
	.bs-services-timeline__num { width: 30px; height: 30px; font-size: 12px; }
	.bs-services-timeline__item::before { top: 15px; }
	.bs-services-family__step { font-size: 36px; }
}

/* =========================================================================
   SERVICE CARD → now links to the detail page (no more inline expand).
   Stretched-link makes the whole card clickable while keeping a visible CTA.
   ========================================================================= */
.bs-service-card__link {
	margin-top: auto;
	padding-top: var(--bs-space-md);   /* breathing room → CTA sits a touch lower */
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bs-color-primary);
	text-decoration: none;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
}
.bs-service-card__link svg { transition: transform .2s ease; }
.bs-service-card__link::after {        /* stretch over the whole card */
	content: "";
	position: absolute;
	inset: 0;
}
.bs-service-card:hover .bs-service-card__link { color: var(--bs-color-primary-dark); }
.bs-service-card:hover .bs-service-card__link svg { transform: translateX(3px); }

/* =========================================================================
   SINGLE SERVICE PAGE (/service/{slug}/)
   ========================================================================= */
.batiself-service-single { background: #fff; }

/* ---- Cover hero ---- */
.bs-service-hero {
	position: relative;
	min-height: clamp(340px, 46vh, 480px);
	background-color: var(--bs-color-primary-dark);
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	color: #fff;
}
.bs-service-hero:not(.has-cover) { min-height: clamp(260px, 34vh, 360px); }
.bs-service-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(16, 54, 86, .55) 0%, rgba(16, 54, 86, .35) 40%, rgba(16, 54, 86, .85) 100%),
		var(--bs-overlay-diagonals-soft);
	pointer-events: none;
}
.bs-service-hero__crumbs {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: calc(var(--bs-header-h) + 56px + 24px);
	padding-bottom: 12px;
}
.bs-service-hero__crumbs .bs-breadcrumb,
.bs-service-hero__crumbs .bs-breadcrumb__item,
.bs-service-hero__crumbs .bs-breadcrumb__link,
.bs-service-hero__crumbs .bs-breadcrumb__current { color: #fff; }
.bs-service-hero__crumbs .bs-breadcrumb__link { opacity: .85; }
.bs-service-hero__crumbs .bs-breadcrumb__sep { opacity: 1; }
.bs-service-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bs-space-sm);
	padding-bottom: var(--bs-space-xl);
	margin-top: auto;
}
.bs-service-hero__eyebrow {
	display: inline-block;
	background: var(--bs-color-accent);
	color: var(--bs-color-primary-dark);
	padding: 6px 14px;
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-service-hero__title {
	margin: 0;
	max-width: 900px;
	color: #fff;
	font-size:      var(--bs-type-h1-size);
	font-weight:    var(--bs-type-h1-weight);
	line-height:    var(--bs-type-h1-leading);
	letter-spacing: var(--bs-type-h1-tracking);
	text-transform: var(--bs-type-h1-case);
}
.bs-service-hero__sub {
	margin: 0;
	max-width: 720px;
	color: rgba(255, 255, 255, .9);
	font-size:   var(--bs-type-lead-size);
	line-height: var(--bs-type-lead-leading);
}

/* ---- Body: content + aside ---- */
.bs-service-body__grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: clamp(var(--bs-space-lg), 4vw, var(--bs-space-2xl));
	align-items: start;
}
.bs-service-body__upcoming {
	margin: 0 0 var(--bs-space-md);
	padding: var(--bs-space-sm) var(--bs-space-md);
	background: var(--bs-color-bg-alt);
	border-left: 4px solid var(--bs-color-accent);
	color: var(--bs-color-primary-dark);
	font-size: var(--bs-type-body-sm-size);
}
.bs-service-body__desc {
	color: var(--bs-color-text);
	font-size:   var(--bs-type-body-size);
	line-height: var(--bs-leading-loose);
}
.bs-service-body__desc p { margin: 0 0 var(--bs-space-md); }
.bs-service-body__desc p:last-child { margin-bottom: 0; }
.bs-service-body__heading {
	margin: var(--bs-space-lg) 0 var(--bs-space-sm);
	color: var(--bs-color-primary);
	font-size:   var(--bs-type-h3-size);
	font-weight: var(--bs-type-h3-weight);
	line-height: var(--bs-type-h3-leading);
}
.bs-service-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bs-space-sm);
}
.bs-service-features__item {
	display: flex;
	align-items: flex-start;
	gap: var(--bs-space-sm);
	color: var(--bs-color-text);
	font-size: var(--bs-type-body-size);
	line-height: var(--bs-leading-snug);
}
.bs-service-features__check {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(0, 91, 167, .08);
	color: var(--bs-color-primary);
}
.bs-service-features__item em {
	display: block;
	margin-top: 2px;
	color: var(--bs-color-muted);
	font-size: var(--bs-type-body-sm-size);
	font-style: normal;
}
.bs-service-body__conditions {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: var(--bs-space-lg) 0 0;
	padding: var(--bs-space-sm) var(--bs-space-md);
	background: var(--bs-color-bg-alt);
	color: var(--bs-color-muted);
	font-size: var(--bs-type-body-sm-size);
	line-height: var(--bs-leading-snug);
}
.bs-service-body__conditions svg { flex: 0 0 auto; margin-top: 2px; color: var(--bs-color-primary); }

/* Aside card */
.bs-service-aside {
	position: sticky;
	/* clear the full fixed header (top row 80 + mega 56) + a small buffer */
	top: calc(var(--bs-header-h) + 56px + var(--bs-space-md));
	display: flex;
	flex-direction: column;
	gap: var(--bs-space-sm);
	padding: var(--bs-space-lg);
	background: #fff;
	border: 1px solid var(--bs-color-border);
	border-top: 4px solid var(--bs-color-primary);
	box-shadow: 0 6px 18px rgba(16, 54, 86, .05);
}
.bs-service-aside__label,
.bs-service-aside__cta-label {
	margin: 0;
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
}
.bs-service-aside__stores {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.bs-service-aside__stores li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bs-color-border);
	color: var(--bs-color-text);
	font-size:   var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-medium);
}
.bs-service-aside__stores li:last-child { border-bottom: 0; }
.bs-service-aside__stores svg { color: var(--bs-color-primary); flex: 0 0 auto; }

/* CTA block — separated by a divider from the stores list. */
.bs-service-aside__cta-label {
	margin-top: var(--bs-space-2xs);
	padding-top: var(--bs-space-md);
	border-top: 1px solid var(--bs-color-border);
}
.bs-service-aside .home-btn {
	width: 100%;
	box-sizing: border-box;          /* fix: keep the button inside the card */
	justify-content: center;
	padding-left: var(--bs-space-md);
	padding-right: var(--bs-space-md);
}
.bs-service-aside__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: var(--bs-space-2xs);
	color: var(--bs-color-muted);
	text-decoration: none;
	font-size:   var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-medium);
}
.bs-service-aside__back:hover { color: var(--bs-color-primary); }

/* ---- Related services ---- */
.bs-service-related { background: var(--bs-color-bg-alt); }
.bs-service-related__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bs-space-md);
}
.bs-service-rcard {
	background: #fff;
	border: 1px solid var(--bs-color-border);
	overflow: hidden;
	transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.bs-service-rcard:hover { border-color: var(--bs-color-primary); box-shadow: 0 12px 28px rgba(16, 54, 86, .08); }
.bs-service-rcard__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.bs-service-rcard__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--bs-color-bg-alt) center / cover no-repeat;
}
.bs-service-rcard__body {
	display: flex;
	flex-direction: column;
	gap: var(--bs-space-2xs);
	padding: var(--bs-space-md);
	flex: 1 1 auto;
}
.bs-service-rcard__title {
	color: var(--bs-color-primary-dark);
	font-size:   var(--bs-type-h3-size);
	font-weight: var(--bs-type-h3-weight);
	line-height: var(--bs-type-h3-leading);
}
.bs-service-rcard__sub {
	color: var(--bs-color-muted);
	font-size:   var(--bs-type-body-sm-size);
	line-height: var(--bs-leading-snug);
}
.bs-service-rcard__more {
	margin-top: auto;
	color: var(--bs-color-primary);
}

@media (max-width: 980px) {
	.bs-service-body__grid { grid-template-columns: 1fr; }
	.bs-service-aside { position: static; }
	.bs-service-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.bs-service-related__grid { grid-template-columns: 1fr; }
}

/* CTA YesToYou — service Bouqueterie (liens vers les 3 profils) */
.bs-service-yty-badge { margin-top: var(--bs-space-lg); }
.bs-service-yty-badge .home-bouqueterie__chip { margin-bottom: 0; }
.bs-service-yty-badge .home-bouqueterie__badge { width: 240px; }
/* Espace uniforme : même 40px entre badge/texte qu'au-dessus du badge
   (annule le padding de section clamp(56–96px) quand le badge précède). */
.bs-service-yty-badge + .bs-service-body { padding-top: var(--bs-space-lg); }
.bs-service-yestoyou { margin-top: var(--bs-space-xl); }
.bs-service-yestoyou__intro { margin: var(--bs-space-xs) 0 var(--bs-space-md); color: var(--bs-color-muted); }
.bs-service-yestoyou__stores { display: flex; flex-wrap: wrap; gap: var(--bs-space-sm); }
.bs-service-yestoyou__store { padding: 13px 24px; }
.bs-service-yestoyou__store svg { flex: none; }
@media (max-width: 430px) {
	.bs-service-yestoyou__store { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Galerie de réalisations (service_galleries) -----------------
   Galerie carrousel : un rail de photos 3/4 portrait (format natif de 25 des 30
   photos Bouqueterie) qui défile plusieurs vignettes à la fois, flèches en
   surimpression, barre de progression déplaçable, lightbox au clic. Bande bleu
   nuit : la galerie est remontée sous le hero et doit trancher avec la densité
   « quincaillerie » du reste du site. Onglets (.home-tabs__*) et flèches
   (.home-arrow) viennent de home.css, réhabillés ici pour le fond sombre.
   Init Swiper : assets/script/services.js.
   ---------------------------------------------------------------------- */
.bs-service-gallery {
	background: var(--bs-color-primary-dark);
	color: #fff;
	overflow: hidden;
	/* Le padding de section (clamp 56–96px) est calibré pour la densité
	   catalogue : trop serré ici, où un logo ouvre la bande juste sous le hero.
	   Plancher relevé à 64px, plafond à 112px. */
	padding-top: clamp(var(--bs-space-xl), 7vw, 112px);
}
.bs-service-gallery .home-section__title { color: #fff; }
.bs-service-gallery .home-section__title strong { color: var(--bs-color-accent); }

/* Badge YesToYou — au-dessus du titre. Pas de plaque blanche ici (contrairement
   à la home) : son padding horizontal décalait le logo vers la droite alors que
   c'était le bord de la plaque qui s'alignait sur le texte, d'où un logo
   visiblement désaligné du titre. Le logo porte déjà son fond crème et son
   contour foncé, la plaque était un cartouche sur un cartouche. Posé nu, son
   bord gauche tombe exactement sur celui de l'eyebrow et du titre. */
.bs-service-gallery__yty {
	display: block;
	margin-bottom: var(--bs-space-md);
}
.bs-service-gallery__yty .home-bouqueterie__badge {
	/* Un peu plus grand qu'en home : sans la plaque, il a besoin de présence. */
	width: 190px;
}

/* Eyebrow — role: eyebrow (translucent white), même traitement que .home-guides__eyebrow. */
.bs-service-gallery__eyebrow {
	display: block;
	margin-bottom: var(--bs-space-xs);
	color: rgba(255, 255, 255, .55);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-weight-black);
	line-height:    var(--bs-type-eyebrow-leading);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-service-gallery__intro {
	margin: var(--bs-space-sm) 0 0;
	max-width: 46ch;
	color: rgba(255, 255, 255, .75);
	font-size:      var(--bs-type-body-sm-size);
	line-height:    var(--bs-type-body-sm-leading);
}
/* Écart en-tête → rail, mis à l'échelle du padding haut de la section. */
.bs-service-gallery__head { margin-bottom: clamp(var(--bs-space-lg), 4vw, var(--bs-space-xl)); }

/* Onglets : on abandonne le parallélogramme (signature brico) pour un
   soulignement fin — plus « boutique » sur la bande sombre. */
.bs-service-gallery .home-tabs__nav { gap: var(--bs-space-md); margin: 0; }
.bs-service-gallery .home-tabs__btn { padding: var(--bs-space-xs) 2px; color: rgba(255, 255, 255, .55); }
.bs-service-gallery .home-tabs__btn::before {
	inset: auto 0 0 0;
	height: 2px;
	transform: none;
	background: rgba(255, 255, 255, .16);
}
.bs-service-gallery .home-tabs__btn:hover { color: #fff; }
.bs-service-gallery .home-tabs__btn:hover::before { background: rgba(255, 255, 255, .45); }
.bs-service-gallery .home-tabs__btn.is-active { color: #fff; }
.bs-service-gallery .home-tabs__btn.is-active::before { background: var(--bs-color-accent); }

/* Changement d'onglet : les photos apparaissent en cascade, chacune quand elle
   est réellement chargée (services.js pose .is-fade sur le rail, puis
   .is-loaded par vignette avec un décalage de 70 ms). Une cascade purement CSS
   ne réglerait rien : les photos d'un onglet fermé partent en chargement au
   clic, et on verrait les cadres se remplir dans l'ordre d'arrivée réseau.
   L'état masqué est porté par .is-fade, jamais par défaut : sans JS — ou si le
   script casse — les vignettes restent visibles. */
.bs-service-gallery__rail.is-fade .bs-service-gallery__slide {
	opacity: 0;
	transform: translateY(14px);
}
/* La transition est déclarée sur l'état d'arrivée : l'apparition est animée et
   décalée, la remise à zéro (rejeu de la cascade au changement d'onglet) est
   instantanée. Le décalage vit ici plutôt que dans des setTimeout : immunisé au
   bridage des timers en onglet d'arrière-plan, et un seul recalcul de style. */
.bs-service-gallery__rail.is-fade .bs-service-gallery__slide.is-loaded {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .5s ease;
	transition-delay: calc(var(--bs-i, 0) * 70ms);
}
/* Le soulignement jaune et le libellé suivent la même durée. */
.bs-service-gallery .home-tabs__btn { transition: color .3s ease; }
.bs-service-gallery .home-tabs__btn::before { transition: background .3s ease; }

/* --- Rail ------------------------------------------------------------- */
.bs-service-gallery__stage { position: relative; }
.bs-service-gallery__rail {
	position: relative;
	padding-bottom: var(--bs-space-md);
}
.bs-service-gallery__frame {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: rgba(255, 255, 255, .06);
}
.bs-service-gallery__link { display: block; cursor: zoom-in; }
.bs-service-gallery__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
/* Toutes les photos au même niveau : pas d'atténuation des voisines — sur fond
   sombre, une opacité réduite les efface au lieu de les faire reculer. Le zoom
   au survol suffit à désigner celle qu'on va ouvrir. */
.bs-service-gallery__link:hover .bs-service-gallery__img { transform: scale(1.05); }
.bs-service-gallery__frame::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .18);
	opacity: 0;
	transition: opacity .3s ease;
}
.bs-service-gallery__link:hover .bs-service-gallery__frame::after { opacity: 1; }

/* Flèches — .home-arrow réhabillée, à cheval sur les bords du rail. */
.bs-service-gallery__nav {
	position: absolute;
	top: calc(50% - var(--bs-space-md) / 2);
	transform: translateY(-50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, .92);
	border-color: transparent;
}
.bs-service-gallery__nav:hover {
	background: var(--bs-color-accent);
	border-color: var(--bs-color-accent);
	color: var(--bs-color-text);
}
.bs-service-gallery__nav--prev { left: calc(-1 * var(--bs-space-md)); }
.bs-service-gallery__nav--next { right: calc(-1 * var(--bs-space-md)); }
.bs-service-gallery__nav.swiper-button-disabled { opacity: .35; pointer-events: none; }

/* Barre de progression — variante bande sombre (cf. .home-services). */
.bs-service-gallery .swiper-scrollbar { background: rgba(255, 255, 255, .15); }
.bs-service-gallery .swiper-scrollbar-drag { background: var(--bs-color-accent); }
.bs-service-gallery .swiper-scrollbar-drag:hover,
.bs-service-gallery .swiper-scrollbar-drag:active { background: #fff; }

/* Apparition de la section (services.js : .is-anim à l'init, .is-in à l'entrée
   dans le viewport). L'état masqué est porté par .is-anim, jamais par défaut :
   sans JS — ou si le script casse — la galerie reste visible. */
.bs-service-gallery.is-anim .bs-service-gallery__head,
.bs-service-gallery.is-anim .bs-service-gallery__stage {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .8s ease, transform .8s ease;
}
.bs-service-gallery.is-anim.is-in .bs-service-gallery__head,
.bs-service-gallery.is-anim.is-in .bs-service-gallery__stage { opacity: 1; transform: none; }
.bs-service-gallery.is-anim.is-in .bs-service-gallery__stage { transition-delay: .15s; }

/* Repli sans JS : Swiper n'a pas pris la main, le rail se lit au défilement. */
.bs-service-gallery__rail:not(.swiper-initialized) .swiper-wrapper {
	display: flex;
	gap: var(--bs-space-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.bs-service-gallery__rail:not(.swiper-initialized) .bs-service-gallery__slide {
	flex: 0 0 21%;
	scroll-snap-align: center;
}

@media (max-width: 1000px) {
	.bs-service-gallery__rail:not(.swiper-initialized) .bs-service-gallery__slide { flex-basis: 44%; }
}
@media (max-width: 700px) {
	/* Le swipe tactile suffit — les flèches se poseraient sur les photos. */
	.bs-service-gallery__nav { display: none; }
	.bs-service-gallery__rail:not(.swiper-initialized) .bs-service-gallery__slide { flex-basis: 82%; }
}

/* Lightbox — <dialog> natif : Escape + piège de focus gratuits. */
.bs-gallery-lightbox {
	padding: 0;
	border: 0;
	background: transparent;
	max-width: min(92vw, 860px);
	max-height: 92vh;
	overflow: visible;
}
.bs-gallery-lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.bs-gallery-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 92vh;
	width: auto;
	height: auto;
}
.bs-gallery-lightbox__close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--bs-color-text);
	font-size: 26px;   /* glyph sizing — not a typographic role */
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease;
}
.bs-gallery-lightbox__close:hover { background: var(--bs-color-accent); }
@media (max-width: 700px) {
	.bs-gallery-lightbox__close { top: -46px; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bs-service-gallery__rail.is-fade .bs-service-gallery__slide { transition: none; }
	.bs-service-gallery__img { transition: none; }
	.bs-service-gallery__link:hover .bs-service-gallery__img { transform: none; }
	.bs-service-gallery.is-anim .bs-service-gallery__head,
	.bs-service-gallery.is-anim .bs-service-gallery__stage { opacity: 1; transform: none; transition: none; }
}

/* ---------- Vitrine des bouquets (service Bouqueterie) -------------------
   Vraies fiches produit WooCommerce (template-parts/product-card.php) posées
   dans une grille 5 colonnes — les 5 bouquets tiennent sur une ligne. La peau
   des cartes vient de custom.css, chargée sur tout le site : rien à enqueuer
   ici. La grille recopie .bs-product-grid (category.css, 4 colonnes) plutôt
   que de charger category.css sur les pages service pour 10 lignes — le reste
   du fichier (filtres, toolbar, pagination) n'y sert à rien.
   Rendu par template-parts/service/section-bouquets.php.
   ---------------------------------------------------------------------- */
.bs-bouquets { background: #fff; }

/* Mention « composition variable » demandée par le client : sous le titre,
   lue avant les prix. */
.bs-bouquets__intro {
	margin: var(--bs-space-sm) 0 0;
	max-width: 62ch;
	color: var(--bs-color-muted);
	font-size:   var(--bs-type-body-sm-size);
	line-height: var(--bs-type-body-sm-leading);
}

.bs-bouquets__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 32px;
	align-items: stretch;
}
.bs-bouquets__item {
	margin: 0;
	display: flex;
	align-items: stretch;
}
.bs-bouquets__item > .product-card { flex: 1 1 auto; }

/* Photos : cadre 3/4 au lieu du carré catalogue ------------------------
   La carte catalogue enferme la photo dans un carré (custom.css). Sur des
   bouquets tous en portrait, `object-fit: contain` la réduisait à la hauteur
   du carré et laissait deux larges bandes blanches sur les côtés. On rend
   donc le cadre portrait : les photos remplissent la carte en largeur ET en
   hauteur, sans recadrage ni déformation.

   Pourquoi un ratio FIXE et pas la hauteur naturelle de chaque photo : les
   cartes doivent toutes faire la même hauteur (demande client). Un cadre
   libre alignait bien chaque photo sur 100 % de la largeur, mais une photo
   au ratio différent allongeait sa carte et décrochait son titre du rang.

   3/4 = le format de 8 des 9 photos (1536×2048). L'intruse, bouquet-1.jpeg
   en 990×1600 (0.619), est donc affichée un peu moins large, avec deux fines
   bandes sur les côtés — c'est le seul compromis possible sans la rogner.
   La recadrer en 3:4 dans la médiathèque fait disparaître les bandes.
   Tout le reste (positionnement, crossfade, contain) vient de custom.css. */
.bs-bouquets .product-card__image-link { aspect-ratio: 3 / 4; }

/* 5 colonnes ne tiennent plus sous ~1200px : la carte passerait sous les 220px
   où le titre sur 2 lignes et le badge panier se marchent dessus. */
@media (max-width: 1200px) { .bs-bouquets__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (max-width: 700px)  { .bs-bouquets__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }