/* =========================================================================
   Batiself — Home page styles
   Scope: pages using the « Batiself — Accueil » page template + reused on
   project/category/product pages for shared components (.home-section,
   .home-container, .home-btn, .home-arrow, .home-section__title, etc.).

   TYPOGRAPHY: every text element consumes a role from tokens.css.
   Roles in use here (see tokens.css for the catalog):
     - h2       → .home-section__title, .home-hero__title
     - h3       → .home-essential-card__title, .home-project-card__title,
                  .home-partner-card__title
     - body     → .batiself-home (root), .home-hero__text 
     - body-sm  → .home-reference-card__title, .home-project-card__subtitle,
                  .home-service__subtitle, .home-services__intro,
                  .home-guides__intro, .home-section__intro
     - eyebrow  → .home-guides__eyebrow   
     - button   → .home-btn, .home-tabs__btn, .home-service__title 
     - h4       → (synonym path used by .home-service__title above) 
     - caption  → unused on home (lives on project page)
   ========================================================================= */ 

/* ---------- Layout primitives -------------------------------------------- */ 
.batiself-home {  
	color: var(--bs-color-text);
	background: var(--bs-color-bg); 
	font-family:    var(--bs-font-family);  
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-type-body-weight);
	line-height:    var(--bs-type-body-leading);
	letter-spacing: var(--bs-type-body-tracking);
	font-feature-settings: 'ss01', 'cv11';
	-webkit-font-smoothing: antialiased;
}

/* Force Geist on every text element inside the home, even when Elementor's kit
   targets headings with high-specificity selectors like .elementor-kit-9 h2. */
.batiself-home,
.batiself-home h1,
.batiself-home h2,
.batiself-home h3,
.batiself-home h4,
.batiself-home h5,
.batiself-home h6,
.batiself-home p,
.batiself-home a,
.batiself-home span,
.batiself-home li,
.batiself-home button,
.batiself-home input,
.batiself-home textarea {
	font-family: var(--bs-font-family);
}

.home-container {
	width: 100%;
	max-width: var(--bs-container-w);
	margin: 0 auto;
	padding: 0 var(--bs-container-pad);
	box-sizing: border-box;
}

.home-section {
	padding: var(--bs-section-pad-y) 0;
}

.home-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bs-space-md);
	/* Gap between section header and content — tightened for DIY density. */
	margin-bottom: var(--bs-space-lg);
	flex-wrap: wrap;
}

/* Section title — role: h2. Titles render Blue on white/light bg; dark-band
   variants opt-in to white via .home-section__title--light. */
.home-section__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);
}
.home-section__title strong { font-weight: var(--bs-weight-black); }
.home-section__title--light { color: #fff; }
/* Auto-light variant: any section on a dark band (services, guides, testimonial)
   should not have to opt-in manually — flip to white when nested in a band. */
.home-services .home-section__title,
.home-guides   .home-section__title,
.bs-project-testimonial .home-section__title { color: #fff; }

/* Section intro — role: body-sm (muted color). Constrained width so it
   stays readable next to the title even on wide screens. */
.home-section__intro {
	margin: var(--bs-space-xs) 0 0;
	max-width: 520px;
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}

.home-section__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* =========================================================================
   BREADCRUMB — canonical component (.bs-breadcrumb)
   ---------------------------------------------------------------------------
   Used on category, single-project, single-product, search pages.
   Always horizontal (display: flex), wraps on overflow.
   Default color is muted text; overlay-on-image variants (project hero,
   category hero) flip to white in their own scoped stylesheet.
   ========================================================================= */
.bs-breadcrumb {
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-text-xs);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: none;
	color: var(--bs-color-muted);
}
.bs-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.bs-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: inherit;
}
.bs-breadcrumb__link {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}
.bs-breadcrumb__link:hover {
	color: var(--bs-color-primary);
}
.bs-breadcrumb__current {
	color: var(--bs-color-primary);
	font-weight: var(--bs-weight-bold);
}
.bs-breadcrumb__sep {
	display: inline-flex;
	align-items: center;
	/* Same colour as the breadcrumb text (currentColor on the icon). */
	color: inherit;
}
.bs-breadcrumb__sep-icon {
	display: block;
	width: 13px;
	height: 13px;
}

/* ---------- Buttons & arrows -------------------------------------------- */

/* Pill button — role: button. Slightly taller for a more confident,
   premium feel. Subtle lift on hover via translateY. */
.home-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--bs-space-xs);
	padding: 16px 36px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	line-height:    var(--bs-type-button-leading);
	letter-spacing: var(--bs-type-button-tracking);
	text-transform: var(--bs-type-button-case);
}
.home-btn:hover { /* hover stays stable — no Y movement */ }
.home-btn--primary {
	background: var(--bs-color-primary);
	color: #fff;
}
.home-btn--primary:hover { background: var(--bs-color-primary-dark); }
.home-btn--ghost {
	background: #fff;
	color: var(--bs-color-primary);
}

/* Circular arrow nav — glyph sizing (not a typographic role) */
.home-arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--bs-color-border);
	color: var(--bs-color-text);
	font-size: 22px;  /* glyph sizing — not a typographic role */
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, color .2s, border-color .2s;
}
.home-arrow:hover {
	background: var(--bs-color-primary);
	color: #fff;
	border-color: var(--bs-color-primary);
}

/* The header prev/next arrows are replaced by overlay arrows on the rail
   edges (see .home-rail-arrow, injected by home.js). */
.home-section__actions .home-arrow { display: none; }

/* Overlay prev/next arrows sitting directly on the slider's left/right edges. */
.home-rail-arrow {
	position: absolute;
	top: calc(50% - 24px);          /* offset the ~48px scrollbar gutter at the bottom */
	transform: translateY(-50%);
	z-index: 6;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .96);
	border: 1px solid var(--bs-color-border);
	border-radius: 50%;
	color: var(--bs-color-primary);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(16, 54, 86, .16);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.home-rail-arrow--prev { left: 6px; }
.home-rail-arrow--next { right: 6px; }
.home-rail-arrow:hover { background: var(--bs-color-primary); color: #fff; border-color: var(--bs-color-primary); }
/* Touch devices swipe directly — hide the overlay arrows. */
@media (max-width: 700px) { .home-rail-arrow { display: none; } }

/* ---------- Hero -------------------------------------------------------- */
.home-hero {
	position: relative;
	min-height: clamp(480px, 70vh, 720px);
	background-color: var(--bs-color-bg-alt);
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
/* When the hero runs in slider mode, the bg lives on each .home-hero__slide
   (not on the section). Reset the container so it stays full-bleed and
   doesn't fight Swiper's own width calc. */
.home-hero--swiper {
	background-image: none;
	display: block;
	min-height: 0;
	padding: 0;
}
.home-hero__swiper {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.home-hero__slide {
	position: relative;
	min-height: clamp(480px, 70vh, 720px);
	background-color: var(--bs-color-bg-alt);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}
/* Subtle bottom-darkening on each slide so the title block + text stay
   readable regardless of the underlying image. */
.home-hero__slide::before {
	content: '';
	position: absolute;
	inset: 0;
	/* Light linear BLUE overlay (charte Dark Blue #103656): a soft tint over the
	   whole image, a touch stronger at the bottom where the title/text sit, so
	   the copy stays readable. (Diagonals signature removed on the hero per
	   client request — clean gradient only.) */
	background:
		linear-gradient(180deg, rgba(16,54,86,.32) 0%, rgba(16,54,86,.50) 55%, rgba(16,54,86,.80) 100%);
	pointer-events: none;
}
.home-hero__slide .home-hero__inner { position: relative; z-index: 1; }

/* Discreet prev/next arrows over the hero. Translucent white circles, low
   opacity at rest, clearer on hover/focus. Auto-play (4s) + progress bar
   continue to work alongside them. */
.home-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	cursor: pointer;
	opacity: .7;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	transition: background .2s ease, opacity .2s ease, transform .2s ease;
}
.home-hero__nav:hover,
.home-hero__nav:focus-visible {
	background: rgba(255, 255, 255, .34);
	opacity: 1;
	outline: none;
}
.home-hero__nav:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.home-hero__nav svg { width: 22px; height: 22px; }
.home-hero__nav--prev { left: clamp(8px, 2vw, 28px); }
.home-hero__nav--next { right: clamp(8px, 2vw, 28px); }
@media (max-width: 600px) {
	.home-hero__nav { width: 38px; height: 38px; }
	.home-hero__nav svg { width: 18px; height: 18px; }
	.home-hero__nav--prev { left: 8px; }
	.home-hero__nav--next { right: 8px; }
}

/* Progress bar — full width along the bottom of the slider. */
.home-hero__progress.swiper-scrollbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: rgba(255, 255, 255, .25);
	border-radius: 0;
	z-index: 2;
}
.home-hero__progress.swiper-scrollbar .swiper-scrollbar-drag {
	background: var(--bs-color-accent);
	border-radius: 0;
	height: 3px;
}

.home-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: var(--bs-space-xl);
	padding-bottom: var(--bs-space-xl);
}
.home-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bs-space-md);
	max-width: 640px;
}

/* Hero title — role: h1. Sits in a white block on the cover → Blue.
   Uses width: max-content so the white bg always exactly hugs the text,
   no matter how long it gets. nowrap keeps it on a single line on desktop;
   the mobile media query below re-allows wrapping for narrow screens. */
.home-hero__title {
	margin: 0;
	max-width: 100%;
	/* The white background lives on the inner .home-hero__title-mark, NOT here,
	   so it hugs each wrapped line instead of stretching the full block width
	   into empty space. The title wraps to a 2nd line when it would overrun. */
	color: var(--bs-color-primary);
	white-space: normal;
	overflow-wrap: break-word;
	text-wrap: balance;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-h1-size);
	font-weight:    var(--bs-type-h1-weight);
	/* A touch more leading than the tight h1 role so the per-line white boxes
	   stack cleanly without overlapping. */
	line-height:    1.28;
	letter-spacing: var(--bs-type-h1-tracking);
	text-transform: var(--bs-type-h1-case);
}
/* Per-line white highlight: box-decoration-break clones the background +
   padding onto every wrapped line, so the banner follows the text line by
   line and never trails off into the void. */
.home-hero__title-mark {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background: #fff;
	padding: 0.16em 0.5em;
}
/* Container override: let the title grow as wide as the text requires,
   even if that goes beyond the 640px content max-width. Below it (text +
   button) stays clamped to 640px so the lead reads comfortably. */
.home-hero__content { width: auto; max-width: none; }
.home-hero__content > .home-hero__text,
.home-hero__content > .home-btn { max-width: 640px; }

/* Hero lead text — role: lead (18px / leading-snug). Larger than body
   to anchor the value proposition. */
.home-hero__text {
	margin: 0;
	max-width: 520px;
	color: #fff;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-lead-size);
	font-weight:    var(--bs-type-lead-weight);
	line-height:    var(--bs-type-lead-leading);
	letter-spacing: var(--bs-type-lead-tracking);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.home-hero__text p { margin: 0 0 var(--bs-space-2xs); }
.home-hero .home-btn--primary {
	background: var(--bs-color-primary);
	color: #fff;
}

/* Mobile — compact hero so the text card doesn't dominate the viewport:
   shorter hero, tighter padding, smaller title block + lead. */
@media (max-width: 600px) {
	.home-hero,
	.home-hero__slide {
		min-height: clamp(360px, 58vh, 460px);
	}
	.home-hero__inner {
		padding-top: var(--bs-space-lg);
		padding-bottom: var(--bs-space-lg);
	}
	.home-hero__content { gap: var(--bs-space-sm); }
	/* Title card hugs its text (fit-content) and never spans the full
	   screen: a sensible max-width keeps it compact + balanced. */
	.home-hero__title {
		max-width: 92%;
		white-space: normal;
	}
	.home-hero__text {
		max-width: 88%;
		font-size: var(--bs-type-body-size);
	}
	.home-hero .home-btn--primary { padding: 12px 24px; }
}

/* =========================================================================
   CATEGORY CARD — canonical component (.bs-category-card / .bs-categories-grid)
   ---------------------------------------------------------------------------
   ONE shared markup + visual rendered by template-parts/components/section-
   categories.php, used on home + category pages and ANY future "categories
   showcase" section. Every card on the site that links to a product
   category MUST use this contract.

   Markup:
     <ul class="bs-categories-grid">
       <li class="bs-category-card">
         <a class="bs-category-card__link">
           <div class="bs-category-card__media"><img/></div>
           <span class="bs-category-card__label">Label</span>
         </a>
       </li>
     </ul>

   Visual:
     - square 1:1 footprint (LI drives aspect-ratio so rows align even when
       a term has no thumbnail)
     - bg #f9f9f9, label black bold centered
     - hover: bg fades to white, border becomes Blue
   ========================================================================= */
.bs-categories-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--bs-space-md);
}
/* Home « Références » : exactement 6 cartes par ligne (desktop). Ignoré sous
   900px où la grille devient un slider flex (cf. media query plus bas). */
.home-references .bs-categories-grid {
	grid-template-columns: repeat(6, 1fr);
}
/* Tablet + mobile → horizontal scroll-snap slider instead of a tall multi-
   row grid (the "Références" section has many items). CSS-only: native
   scroll = touch + keyboard accessible, no JS, and the flex track scrolls
   INTERNALLY so it never adds page-level horizontal overflow. ~2.3 cards
   peek on tablet, ~1.5 on mobile (shows there's more to swipe). */
@media (max-width: 900px) {
	.bs-categories-grid {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-padding-left: var(--bs-container-pad);
		padding-bottom: 6px;
		scrollbar-width: thin;
	}
	.bs-categories-grid > .bs-category-card {
		flex: 0 0 42%;
		scroll-snap-align: start;
	}
	/* Home « Références » start flush-left, aligned with the section title:
	   the grid already sits inside the padded container, so drop the extra
	   snap inset that was pushing the cards right of the title. */
	.home-references .bs-categories-grid { scroll-padding-left: 0; }
}
@media (max-width: 600px) {
	.bs-categories-grid > .bs-category-card {
		flex-basis: 66%;
	}
	/* Home « Références » — smaller cards so ~2.5 peek per viewport (client
	   request). Scoped to .home-references so category pages keep their size. */
	.home-references .bs-categories-grid > .bs-category-card {
		flex-basis: 38%;
	}
}

.bs-category-card {
	margin: 0;
	min-width: 0;
	/* Square tile — the image fills it and the title sits IN the image. */
	aspect-ratio: 1 / 1;
}
/* New design (client 2026-06): a CLEAN cover image (NO blue overlay, NO diagonal
   bands) with the title shown INSIDE the image as a white box + Blue text —
   exactly like the project cards. Used everywhere the canonical card appears
   (home "Références", "Découvrez nos catégories", search results). */
.bs-category-card__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	overflow: hidden;
	background: var(--bs-color-primary);  /* fallback when no image */
	text-decoration: none;
	box-sizing: border-box;
}
/* Image layer — fills the whole tile, cropped to cover. */
.bs-category-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
/* Force-fill the tile. `!important` because wp_get_attachment_image emits
   width/height HTML attributes that some browsers promote above this rule. */
.bs-category-card__media :is(img, picture > img, .bs-category-card__img) {
	width:  100% !important;
	height: 100% !important;
	max-width:  none;
	max-height: none;
	object-fit:     cover;
	object-position: center center;
	display: block;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.bs-category-card__link:hover .bs-category-card__img {
	transform: scale(1.06);
}
/* No-image category → deep-Blue field + the WHITE Batiself diagonal signature. */
.bs-category-card__media--placeholder {
	background:
		var(--bs-overlay-diagonals),
		linear-gradient(150deg, var(--bs-color-primary) 0%, var(--bs-color-primary-dark) 100%);
}
/* Title — WHITE box with BLUE text, anchored bottom-left INSIDE the image
   (same treatment as the project cards). Inset from the card edges (left +
   bottom margin) + a tighter padding so the white box hugs the text. */
.bs-category-card__label {
	position: absolute;
	left: var(--bs-space-sm);
	bottom: var(--bs-space-sm);
	z-index: 2;
	/* Marge gauche = 16px ; marge droite ≈ 20% de la carte → la boîte ne touche
	   JAMAIS le bord droit, même quand le titre passe sur 2 lignes. */
	max-width: calc(80% - var(--bs-space-sm));
	margin: 0;
	padding: 7px 12px;
	background: #fff;
	color: var(--bs-color-primary);
	text-align: left;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-text-md);
	font-weight:    var(--bs-weight-bold);
	line-height:    var(--bs-leading-tight);
	letter-spacing: var(--bs-tracking-tight);
	text-shadow: none;
}

/* Per-context section backgrounds — only the wrapping section changes
   color, the cards themselves stay identical everywhere. */
.bs-categories-section.home-references {
	background: var(--bs-color-bg-alt);
}

/* ---------- Tabs (Bestsellers + Guides) -------------------------------- */
.home-tabs__nav {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
}

/* Tab button — bigger parallelogram (skewed via ::before so the label stays
   upright). The skew + gap make the tabs read as interlocking parallelograms. */
.home-tabs__btn {
	position: relative;
	z-index: 0;
	background: transparent;
	color: var(--bs-color-text);
	border: 0;
	padding: 16px 46px;
	cursor: pointer;
	transition: color .2s ease;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	line-height:    var(--bs-type-button-leading);
	letter-spacing: var(--bs-type-button-tracking);
	text-transform: var(--bs-type-button-case);
}
.home-tabs__btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bs-color-bg-alt);
	transform: skewX(-12deg);
	transition: background .2s ease;
}
.home-tabs__btn:hover::before { background: var(--bs-color-border); }
.home-tabs__btn.is-active { color: var(--bs-color-text); }
.home-tabs__btn.is-active::before { background: var(--bs-color-accent); }
/* On phones the skewed tabs would clip — let them wrap + shrink padding. */
@media (max-width: 600px) {
	.home-tabs__nav { flex-wrap: wrap; gap: 12px; }
	.home-tabs__btn { padding: 13px 30px; }
}
.home-tabs__panel { display: none; }
.home-tabs__panel.is-active { display: block; }

/* ---------- Bestsellers / category product slides ---------------------- */
.home-bestsellers .home-product-slide,
[data-home-swiper="cat-products"] .home-product-slide {
	height: auto;
	flex-shrink: 0;
	display: flex;
	align-items: stretch;
}
.home-bestsellers .home-product-slide > *,
[data-home-swiper="cat-products"] .home-product-slide > * {
	flex: 1 1 auto;
	height: auto;
}
.home-bestsellers__swiper .swiper-wrapper,
.home-essentials__swiper .swiper-wrapper,
[data-home-swiper="cat-products"] .swiper-wrapper {
	align-items: stretch;
}
/* Essentials slides match the other product rails: equal height, no shrink,
   the card fills its slide. Without this the image cards rendered at uneven
   heights / odd widths on mobile. */
.home-essentials__swiper .swiper-slide.home-essential-card {
	height: auto;
	flex-shrink: 0;
}

/* ---------- Essentials (image cards) ------------------------------------ */
.home-essentials {
	background: var(--bs-color-bg-alt);
}
.home-essential-card {
	position: relative;
	display: flex;
	align-items: flex-end;   /* title banner sits at the bottom, like project list cards */
	padding: var(--bs-space-md);
	min-height: 320px;
	overflow: hidden;
	background-color: var(--bs-color-primary);
	background-size: cover;
	background-position: center;
	color: #fff;
	text-decoration: none;
	height: auto;
	transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.home-essential-card:hover { /* hover stays stable — no Y movement */ }
.home-essential-card::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Lighter dark gradient (.55 → .40) + Batiself diagonals signature. */
	background:
		linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.40) 100%),
		var(--bs-overlay-diagonals-soft);
}
.home-essential-card__title,
.home-essential-card__cta {
	position: relative;
	z-index: 1;
}

/* Essential card title — role: h3. Blue text on a white banner (client
   request — same treatment as the project list cards). max-width leaves room
   for the CTA circle in the bottom-right corner. */
.home-essential-card__title {
	background: #fff;
	color: var(--bs-color-primary);
	padding: 10px 14px;
	max-width: calc(100% - 48px);
	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);
	text-transform: var(--bs-type-h3-case);
}
.home-essential-card__cta {
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 36px;
	height: 36px;
	background: #fff;
	color: var(--bs-color-primary);
	border-radius: 50%;
	display: grid;
	place-items: center;
	z-index: 2;
}
.home-essential-card--feature { background: var(--bs-color-primary); }
.home-essential-card--feature::after { display: none; }

/* Hover "mise en avant" — same language as the project cards (CTA fills
   Yellow + nudges, overlay deepens). No whole-card Y movement, consistent
   with the rest of the site; the 1.5-peek handles the mobile affordance. */
.home-essential-card__cta {
	transition: background .2s ease, color .2s ease, transform .25s ease;
}
.home-essential-card::after { transition: background .3s ease; }
.home-essential-card:hover .home-essential-card__cta {
	background: var(--bs-color-accent);
	color: var(--bs-color-primary-dark);
	transform: translateX(3px);
}
.home-essential-card:hover::after {
	/* Slight depth on hover, signature stays underneath. */
	background:
		linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.50) 100%),
		var(--bs-overlay-diagonals-soft);
}

/* =========================================================================
   PROJECT CARD — canonical component (.bs-project-card / .bs-projects-swiper)
   ---------------------------------------------------------------------------
   ONE shared markup + visual rendered by template-parts/components/section-
   projects.php, used on home + category + single-project pages.

   Layout: Swiper rail of portrait 2:3 cards (slidesPerView config in
           home.js → home-projects / cat-projects / related-projects).
   Visual:
     - portrait 2:3 silhouette (magazine-style)
     - bg image cover/center, fallback to light-bg color
     - dark gradient overlay (transparent → 65% black) — bottom half only
     - white text inside, h3 title + optional body-sm subtitle
     - outlined arrow circle CTA (40px, 1.5px white border, SVG arrow)
     - hover: CTA fills white, arrow translates +3px
   ========================================================================= */
.bs-projects-swiper {
	overflow: hidden;
	padding-bottom: 48px;
}
.bs-projects-swiper .swiper-slide {
	/* Auto-height per slide; aspect-ratio on each card drives the height. */
	height: auto;
	display: flex;
}

.bs-project-card,
.swiper-slide.bs-project-card {
	position: relative;
	margin: 0;
	/* Less tall than the previous 2:3 portrait (client request). */
	aspect-ratio: 4 / 5;
	min-height: 340px;
	width: 100%;
	background-color: var(--bs-color-bg-alt);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	list-style: none;
}
.bs-project-card::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Lighter dark gradient (.65 → .48) + Batiself diagonals signature. */
	background:
		linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.48) 100%),
		var(--bs-overlay-diagonals-soft);
	pointer-events: none;
}
.bs-project-card__link {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 24px;
	color: #fff;
	text-decoration: none;
	z-index: 1;
}
.bs-project-card__link,
.bs-project-card__link:hover,
.bs-project-card__link:focus,
.bs-project-card__link:visited { color: #fff; }

.bs-project-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
/* Title — bullet-proof white (avoids Hello Elementor's default h3 color
   leaking in). Uses body-size compaction (cards are tight, full h3 size
   is too big in a 2:3 footprint when a subtitle is also present). */
.bs-project-card .bs-project-card__title,
h3.bs-project-card__title {
	margin: 0;
	color: #fff;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-type-h3-weight);
	line-height:    var(--bs-type-h3-leading);
	letter-spacing: var(--bs-type-h3-tracking);
	text-transform: var(--bs-type-h3-case);
}
.bs-project-card__subtitle {
	display: block;
	color: #fff;
	opacity: .9;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}

/* Projects SHOWCASE sliders (home + category + related): title/subtitle sit in
   a white banner with blue text — same treatment as the projects list cards.
   Scoped to .bs-projects-section so only the slider cards get it. */
.bs-projects-section .bs-project-card__body {
	background: #fff;
	padding: 12px 14px;
	gap: 4px;
	max-width: 100%;
}
.bs-projects-section .bs-project-card .bs-project-card__title,
.bs-projects-section h3.bs-project-card__title {
	color: var(--bs-color-primary);
}
.bs-projects-section .bs-project-card__subtitle {
	color: var(--bs-color-primary-dark);
	opacity: .85;
}
.bs-project-card__cta {
	width: 40px;
	height: 40px;
	background: transparent;
	color: #fff;
	border: 1.5px solid #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .2s ease, color .2s ease, transform .25s ease;
}
.bs-project-card__cta svg { display: block; }
.bs-project-card__link:hover .bs-project-card__cta {
	background: #fff;
	color: var(--bs-color-primary);
	transform: translateX(3px);
}

/* ---------- Services (dark band, 5 cols) -------------------------------- */
.home-services {
	background: var(--bs-color-primary);
	color: #fff;
}
.home-services__header {
	color: #fff;
	margin-bottom: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

/* Services intro — role: body-sm (white-translucent) */
.home-services__intro {
	margin: 8px 0 0;
	color: rgba(255,255,255,.8);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.home-services__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}
@media (max-width: 1100px) { .home-services__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .home-services__list { grid-template-columns: repeat(2, 1fr); } }
/* Service card — image on top, text on a white panel below (dark-blue text).
   No overlay, no movement on hover, no title underline. Flat per the charte. */
.home-service {
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0,0,0,.06);
	transition: box-shadow .2s ease;
}
.home-service__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--bs-color-primary-dark);
	text-decoration: none;
}
.home-service__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bs-color-bg-alt);
}
.home-service__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.home-service--noimg .home-service__media {
	background: linear-gradient(140deg, var(--bs-color-primary) 0%, var(--bs-color-primary-dark) 100%);
}
.home-service__content {
	flex: 1 1 auto;
	padding: 16px 18px;
	background: #fff;
}
.home-service:hover { box-shadow: 0 10px 26px rgba(16,54,86,.12); }
.home-service__link:focus-visible {
	outline: 2px solid var(--bs-color-primary);
	outline-offset: 3px;
}

/* Service title — role: h4 (dark blue on white) */
.home-service__title {
	margin: 0 0 6px;
	color: var(--bs-color-primary-dark);
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	line-height:    var(--bs-type-h4-leading);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
}

/* Service subtitle — role: body-sm (xs override, muted dark) */
/* Service cards display the title only (client request) — hide the subtitle. */
.home-service__subtitle {
	display: none;
}

/* ---------- Partners ---------------------------------------------------- */
.home-partner-card {
	background: #fff;
	min-height: 220px;
	display: grid;
	place-items: center;
	padding: var(--bs-space-sm);
	text-decoration: none;
	height: auto;
	border: 1px solid var(--bs-color-border);
	transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.home-partner-card:hover {
	border-color: var(--bs-color-primary);
}
.home-partner-card__logo {
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
}
.home-partner-card--feature {
	background: var(--bs-color-accent);
	color: var(--bs-color-text);
	border-color: var(--bs-color-accent);
}

/* Partner card title — role: body (centered) */
.home-partner-card__title {
	text-align: center;
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-weight-bold);            /* body weight override */
	line-height:    var(--bs-type-body-leading);
	letter-spacing: var(--bs-type-body-tracking);
}

/* ---------- Guides ------------------------------------------------------ */
.home-guides {
	background: var(--bs-color-primary);
	color: #fff;
}
.home-guides__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: stretch;
}
@media (max-width: 900px) {
	.home-guides__inner { grid-template-columns: 1fr; }
}
.home-guides__visual {
	min-height: 400px;
	background-color: rgba(255,255,255,.08);
	background-size: cover;
	background-position: center;
}
.home-guides__content { display: flex; flex-direction: column; gap: 16px; }

/* Guides eyebrow — role: eyebrow (translucent white) */
.home-guides__eyebrow {
	color: rgba(255,255,255,.7);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-weight-black);           /* eyebrow weight override */
	line-height:    var(--bs-type-eyebrow-leading);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}

/* Guides intro — role: body-sm (white translucent) */
.home-guides__intro {
	margin: 0;
	max-width: 460px;
	color: rgba(255,255,255,.85);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.home-tabs--guides .home-tabs__btn--guide {
	background: #fff;
	color: var(--bs-color-text);
}
.home-tabs--guides .home-tabs__btn--guide.is-active {
	background: var(--bs-color-accent);
}
.home-guides__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.home-guide__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: rgba(255,255,255,.08);
	color: #fff;
	text-decoration: none;
	transition: background .2s;
}
.home-guide__link:hover { background: rgba(255,255,255,.18); }

/* Guide item title — role: body-sm (semibold weight override) */
.home-guide__title {
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-semibold);        /* body-sm weight override */
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.home-guides__empty { color: rgba(255,255,255,.7); font-style: italic; }

/* ---------- Swiper sizing & scrollbar ----------------------------------
   Projects + categories are NO LONGER Swiper rails — they use a canonical
   CSS grid (.bs-projects-grid / .bs-categories-grid) shared across home,
   category and single-project pages. Only product / essentials / partners
   carousels keep the Swiper layout. */
.home-essentials__swiper,
.home-bestsellers__swiper,
.home-partners__swiper {
	overflow: hidden;
	padding-bottom: 48px;
}
.home-essentials__swiper .swiper-slide,
.home-bestsellers__swiper .swiper-slide,
.home-partners__swiper .swiper-slide {
	height: auto;
}

/* Essentials — NEVER a slider (only 4 items): static grid on desktop too.
   (Phones/tablets keep the full-width stacked layout in the ≤900 block below.) */
@media (min-width: 901px) {
	.home-essentials__swiper { overflow: visible; padding-bottom: 0; }
	.home-essentials__swiper .swiper-wrapper {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
		gap: var(--bs-space-md);
		transform: none !important;
	}
	.home-essentials__swiper .swiper-slide.home-essential-card {
		width: auto !important;
		margin: 0 !important;
		min-height: 0;
		aspect-ratio: 4 / 5;
	}
	.home-essentials .swiper-scrollbar,
	.home-essentials .home-arrow,
	.home-essentials .home-rail-arrow { display: none; }
}

/* Slider progress-bar — slightly thicker + more contrasted than the
   default so it reads as a clear nav element rather than a hairline. */
.home-section .swiper-scrollbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	width: 100%;
	height: 3px;
	background: rgba(0, 0, 0, .08);
	border-radius: 0;
}
.home-section .swiper-scrollbar-drag {
	background: var(--bs-color-primary);
	border-radius: 0;
	height: 3px;
	cursor: grab;
	transition: background .2s ease;
}
.home-section .swiper-scrollbar-drag:hover,
.home-section .swiper-scrollbar-drag:active {
	background: var(--bs-color-primary-dark);
}

/* Dark-band scrollbar variant for sections on primary blue. */
.home-services .swiper-scrollbar,
.home-guides .swiper-scrollbar {
	background: rgba(255, 255, 255, .15);
}
.home-services .swiper-scrollbar-drag,
.home-guides .swiper-scrollbar-drag {
	background: var(--bs-color-accent);
}

/* =========================================================================
   RESPONSIVE — section CTA moves to the END of the section on mobile
   ---------------------------------------------------------------------------
   Applies to every section using .home-section__header (bestsellers,
   references, projects, services, products, category rails, essentials…).
   On DESKTOP the title sits left and the CTA right (default flex
   space-between). On MOBILE the CTA should not sit beside the title — it
   belongs after the cards, at the very end of the section.

   Technique (no markup change, works for every section):
     • the .home-container becomes a flex column;
     • its .home-section__header becomes display:contents, so the header's
       children (title block + .home-section__actions) are hoisted into the
       container's flex flow, in DOM order, BEFORE the rail/grid;
     • only .home-section__actions is pushed to order:99 → it lands last,
       after the content. Everything else keeps its natural order.
   The swiper prev/next arrows are redundant on touch (you swipe) so they're
   hidden; an actions block that holds only those hidden arrows (no CTA) is
   removed so it never leaves a trailing gap.
   ========================================================================= */
@media (max-width: 700px) {
	.home-container:has(> .home-section__header) {
		display: flex;
		flex-direction: column;
		gap: var(--bs-space-md);
	}
	.home-container > .home-section__header { display: contents; }

	/* CRITICAL: every flex child gets min-width:0 (+ full-width cap). A flex
	   item's default min-width:auto refuses to shrink below its content's
	   intrinsic size — for a Swiper rail that intrinsic size is the sum of
	   ALL slides, so the rail would blow out to a huge width and the product
	   cards would render off-screen / mis-sized. min-width:0 lets the rail be
	   constrained back to the container width so the slides compute correctly. */
	.home-container:has(> .home-section__header) > * {
		min-width: 0;
		max-width: 100%;
	}
	.home-container:has(> .home-section__header) > .swiper { width: 100%; }

	.home-section__actions {
		order: 99;
		width: 100%;
		margin: 0;
	}
	.home-section__actions .home-arrow { display: none; }
	.home-section__actions .home-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
	/* Actions block with no real CTA (only hidden arrows) → drop it. */
	.home-section__actions:not(:has(.home-btn)) { display: none; }
}

/* =========================================================================
   MOBILE/TABLET — essentials + partners drop their slider for a static layout
   ---------------------------------------------------------------------------
   Robust against Swiper: even if Swiper initialised (stale JS, or a tablet
   width above the JS skip), the !important rules neutralise its inline
   transform / per-slide width / margins so NOTHING overflows horizontally.
     • Essentials → full-container-width rectangles, stacked.
     • Partners   → compact white logo cards in a responsive grid (with gaps).
   ========================================================================= */
@media (max-width: 900px) {
	/* Neutralise Swiper completely (it may still be initialised on a stale JS
	   build or a tablet width): clip the rail, force the wrapper to a wrapping
	   flex row at exactly 100% width, and force each slide to an exact fraction.
	   !important beats Swiper's inline width / margin / transform, and
	   box-sizing keeps borders inside the fraction → NOTHING can overflow. */
	.home-essentials__swiper,
	.home-partners__swiper {
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden;
		padding-bottom: 0;
	}
	.home-essentials__swiper .swiper-wrapper,
	.home-partners__swiper .swiper-wrapper {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: var(--bs-space-sm);
		width: 100% !important;
		max-width: 100% !important;
		transform: none !important;
		box-sizing: border-box;
	}
	/* Dead prev/next arrows + scrollbar (Swiper no longer drives these). */
	.home-essentials .home-arrow,
	.home-partners .home-arrow,
	.home-essentials .swiper-scrollbar,
	.home-partners .swiper-scrollbar { display: none; }

	/* --- Essentials: one full-container-width rectangle per row --- */
	.home-essentials__swiper .swiper-slide.home-essential-card {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		min-height: 0;
		aspect-ratio: 16 / 7;
		box-sizing: border-box;
	}

	/* --- Partners: two compact white logo cards per row, with a gap --- */
	.home-partners__swiper .swiper-slide {
		flex: 0 0 calc(50% - (var(--bs-space-sm) / 2)) !important;
		width:    calc(50% - (var(--bs-space-sm) / 2)) !important;
		max-width: calc(50% - (var(--bs-space-sm) / 2)) !important;
		margin: 0 !important;
		box-sizing: border-box;
	}
	.home-partners__swiper .cat-partner-card__link {
		aspect-ratio: 4 / 3;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		background-image: none;
		border: 1px solid var(--bs-color-border);
	}
	.home-partners__swiper .cat-partner-card__link::before { background: none; }
	/* Logo bigger inside the card, but always contained. */
	.home-partners__swiper .cat-partner-card__logo { max-width: 78%; max-height: 64%; }
	.home-partners__swiper .cat-partner-card__name {
		background: transparent;
		color: var(--bs-color-primary);
		padding: 0;
		text-align: center;
	}
}

/* =========================================================================
   HOME — « Suivez-nous » social feed (TikTok via Trustindex)
   ---------------------------------------------------------------------------
   Soft light band (bg-alt) sitting between the dark guides section and the
   dark-blue footer. The Trustindex widget injects its own markup/styles; we
   only frame it on-brand and reserve height to limit layout shift on load.
   ========================================================================= */
.home-socials {
	background: var(--bs-color-bg-alt);
}
.home-socials__feed {
	margin-top: var(--bs-space-lg);
	min-height: 320px;
}
.home-socials__feed > * {
	max-width: 100%;
}

/* =========================================================================
   HOME — Blog spotlight slider (replaces the old guides tabs)
   ---------------------------------------------------------------------------
   Lives on the .home-guides dark-blue band. Each slide is a white landscape
   card (image + body) auto-rotating every 3s (config `blog` in home.js).
   ========================================================================= */
.home-blog__swiper { margin-top: var(--bs-space-lg); }
.home-blog .swiper-slide { height: auto; }   /* equal-height slides */

.home-blog-slide {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	background: #fff;
	border-radius: 0;
	overflow: hidden;
}
.home-blog-slide__media {
	position: relative;
	display: block;
	min-height: 300px;
	background: var(--bs-color-bg-alt) center / cover no-repeat;
}
.home-blog-slide__media-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(0, 91, 167, .35);
	font-weight: var(--bs-weight-black);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
}
.home-blog-slide__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--bs-space-sm);
	padding: clamp(var(--bs-space-md), 3vw, var(--bs-space-xl));
}
.home-blog-slide__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
}
.home-blog-slide__cat { color: var(--bs-color-primary); }
.home-blog-slide__title {
	margin: 0;
	color: var(--bs-color-primary-dark);
	font-size:   var(--bs-type-h2-size);
	font-weight: var(--bs-weight-bold);
	line-height: var(--bs-type-h3-leading);
}
.home-blog-slide__title a { color: inherit; text-decoration: none; }
.home-blog-slide__title a:hover { color: var(--bs-color-primary); }
.home-blog-slide__excerpt {
	margin: 0;
	color: var(--bs-color-muted);
	font-size:   var(--bs-type-body-size);
	line-height: var(--bs-type-body-leading);
}
.home-blog-slide__cta { align-self: flex-start; margin-top: var(--bs-space-2xs); }

@media (max-width: 820px) {
	.home-blog-slide { grid-template-columns: 1fr; }
	.home-blog-slide__media { min-height: 200px; aspect-ratio: 16 / 9; }
}

/* =========================================================================
   HOME — « Conseils & guides » SPLIT (image ≈50vw + blue panel + auto tabs)
   ========================================================================= */
.home-blog--split { padding: 0; }                 /* full-bleed split, no band */
.home-blog__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: clamp(560px, 66vw, 780px);
}
/* Left — stacked article images, active one cross-fades in. */
.home-blog__media-col { position: relative; overflow: hidden; }
.home-blog__media {
	position: absolute;
	inset: 0;
	background-color: var(--bs-color-bg-alt);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity .5s ease;
	display: grid;
	place-items: center;
}
.home-blog__media.is-active { opacity: 1; }
.home-blog__media-fallback { color: #fff; font-weight: var(--bs-weight-bold); opacity: .6; }

/* Right — blue panel. */
.home-blog__panel {
	background: var(--bs-color-primary);
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: var(--bs-space-lg);
	padding: clamp(32px, 4vw, 72px);
	/* Right padding = the page container's side gutter, so the panel text lines
	   up with the rest of the page's content instead of running to the viewport
	   edge. (The panel starts at mid-viewport, so only the right side aligns.) */
	padding-right: max(var(--bs-space-lg), calc((100vw - var(--bs-container-w)) / 2));
}
.home-blog__title {
	margin: 0;
	display: inline-block;
	align-self: flex-start;
	background: #fff;
	color: var(--bs-color-primary);          /* blue title on a white block */
	padding: 12px 22px;
	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);
}
.home-blog__subtitle { margin: 12px 0 0; color: rgba(255, 255, 255, .82); font-size: var(--bs-type-body-sm-size); }

/* Middle — stacked descriptions, centered, active one cross-fades in. */
.home-blog__panel-body {
	flex: 1 1 auto;
	display: grid;
	align-content: center;
	text-align: center;
}
.home-blog__desc {
	grid-area: 1 / 1;            /* stack all in the same cell */
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 460px;
	margin: 0 auto;
	color: #fff;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility 0s linear .4s;
}
.home-blog__desc.is-active { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.home-blog__desc-title {
	font-size:   var(--bs-type-h3-size);
	font-weight: var(--bs-weight-bold);
	line-height: var(--bs-leading-snug);
}
.home-blog__desc-text { color: rgba(255, 255, 255, .85); line-height: var(--bs-leading-snug); }
.home-blog__desc:hover .home-blog__desc-title { text-decoration: underline; }

/* Bottom — 3 tab buttons that fill progressively while active. */
.home-blog__tabs { display: flex; gap: 12px; }
.home-blog__tab {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 16px 10px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 0;
	color: #fff;
	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-type-button-tracking);
	text-transform: var(--bs-type-button-case);
}
.home-blog__tab-label { position: relative; z-index: 1; white-space: nowrap; }
/* White fill revealed left→right via an animated clip; carries a blue copy of
   the label so the text recolours as the bar fills (matches the reference). */
.home-blog__tab-fill {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	clip-path: inset(0 100% 0 0);
}
.home-blog__tab-fill .home-blog__tab-label { color: var(--bs-color-primary); }
.home-blog__tab.is-active .home-blog__tab-fill {
	animation: home-blog-fill 6000ms linear forwards;
}
@keyframes home-blog-fill {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
	.home-blog__tab.is-active .home-blog__tab-fill { animation: none; clip-path: inset(0 0 0 0); }
}

.home-blog__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	color: #fff;
	text-decoration: none;
	font-weight: var(--bs-weight-semibold);
	font-size: var(--bs-type-body-sm-size);
}
.home-blog__all:hover { color: var(--bs-color-accent); }

/* Mobile/tablet — stack: image on top, panel below. */
@media (max-width: 900px) {
	.home-blog__split { grid-template-columns: 1fr; min-height: 0; }
	.home-blog__media-col { min-height: clamp(220px, 48vw, 340px); }
	.home-blog__panel { gap: var(--bs-space-md); }
}

/* =========================================================================
   PAGE HEROES — bandeau bleu, titre blanc + filet jaune (charte).
   Appliqué à toutes les "grandes" en-têtes de page (services, projets, toutes
   les catégories, magasins, blog, pages légales). !important pour primer sur
   les styles propres à chaque page, quel que soit l'ordre de chargement.
   ========================================================================= */
.bs-services-hero,
.bs-projects-archive-hero,
.bs-catpage-hero,
.bs-blog-archive-hero,
.bs-woo-hero,
.bs-page-hero {
	background: var(--bs-color-primary) !important;
	border-color: rgba(255, 255, 255, .18) !important;
}
.bs-services-hero__title,
.bs-projects-archive-hero__title,
.bs-catpage-hero__title,
.bs-blog-archive-hero__title,
.bs-woo-hero__title,
.bs-page-hero__title {
	position: relative;
	display: inline-block;
	background: #fff !important;
	color: var(--bs-color-primary) !important;
	padding: 10px 22px;
	/* !important : certaines pages (ex. categories.css) imposent une marge plus
	   courte au titre, ce qui faisait mordre le filet jaune sur le texte. */
	margin-bottom: 34px !important;
}
.bs-woo-hero__title strong { color: var(--bs-color-primary) !important; }
/* Filet jaune juste sous le titre. */
.bs-services-hero__title::after,
.bs-projects-archive-hero__title::after,
.bs-catpage-hero__title::after,
.bs-blog-archive-hero__title::after,
.bs-woo-hero__title::after,
.bs-page-hero__title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -16px;
	width: 96px;
	height: 6px;
	background: var(--bs-color-accent);
}
.bs-services-hero__eyebrow,
.bs-projects-archive-hero__eyebrow,
.bs-catpage-hero__eyebrow,
.bs-blog-archive-hero__eyebrow,
.bs-woo-hero__eyebrow,
.bs-page-hero__eyebrow {
	color: rgba(255, 255, 255, .72) !important;
}
.bs-services-hero__lead,
.bs-projects-archive-hero__lead,
.bs-catpage-hero__lead,
.bs-blog-archive-hero__lead,
.bs-woo-hero__intro,
.bs-page-hero__lead {
	color: rgba(255, 255, 255, .88) !important;
}
/* Fil d'Ariane dans ces bandeaux → blanc. */
.bs-services-hero .bs-breadcrumb, .bs-services-hero .bs-breadcrumb__link, .bs-services-hero .bs-breadcrumb__current, .bs-services-hero .bs-breadcrumb__sep,
.bs-woo-hero .bs-breadcrumb, .bs-woo-hero .bs-breadcrumb__link, .bs-woo-hero .bs-breadcrumb__current, .bs-woo-hero .bs-breadcrumb__sep,
.bs-page-hero .bs-breadcrumb, .bs-page-hero .bs-breadcrumb__link, .bs-page-hero .bs-breadcrumb__current, .bs-page-hero .bs-breadcrumb__sep {
	color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE 404 — « introuvable » (404.php)
   Charte Batiself : gros code dégradé Bleu, titre Bleu, filet jaune, recherche
   + raccourcis, signature « diagonales » en filigrane. Chargé via header-
   enqueue.php (is_404()).
   ════════════════════════════════════════════════════════════════════════ */
.batiself-404 .bs-404 {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 9vw, 110px) 0;
	background: var(--bs-color-bg-alt);
}
.batiself-404 .bs-404::after {           /* signature diagonale, en filigrane */
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--bs-overlay-diagonals-soft);
	opacity: .55;
	pointer-events: none;
}
.bs-404__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.bs-404__code {
	margin: 0 0 6px;
	font-size: clamp(4.5rem, 17vw, 10rem);
	font-weight: var(--bs-weight-black);
	line-height: .9;
	letter-spacing: -.02em;
	color: var(--bs-color-primary);
	background: linear-gradient(150deg, var(--bs-color-primary), var(--bs-color-primary-dark));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.bs-404__title {
	margin: 0;
	color: var(--bs-color-primary);
	font-size: var(--bs-type-h2-size);
	font-weight: var(--bs-weight-bold);
	line-height: var(--bs-leading-snug);
}
.bs-404__rule {
	display: block;
	width: 96px;
	height: 6px;
	margin: 22px 0 24px;
	background: var(--bs-color-accent);
}
.bs-404__lead {
	margin: 0 0 28px;
	max-width: 540px;
	color: var(--bs-color-muted);
	font-size: var(--bs-type-body-size);
	line-height: var(--bs-leading-normal);
}
.bs-404__search {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 480px;
	margin: 0 auto 28px;
	background: #fff;
	border: 1px solid var(--bs-color-border);
	overflow: hidden;
}
.bs-404__search-ic { flex: 0 0 auto; margin: 0 4px 0 14px; color: var(--bs-color-muted); }
.bs-404__search input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 13px 12px;
	font-size: var(--bs-type-body-size);
	color: var(--bs-color-text);
}
.bs-404__search input:focus { outline: none; }
.bs-404__search button {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	background: var(--bs-color-primary);
	color: #fff;
	padding: 13px 22px;
	font-weight: var(--bs-weight-bold);
	font-size: var(--bs-type-body-sm-size);
	transition: background-color .15s ease;
}
.bs-404__search button:hover { background: var(--bs-color-primary-dark); }
.bs-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 28px;
}
.bs-404__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--bs-color-muted);
	font-size: var(--bs-type-body-sm-size);
}
.bs-404__links-label { font-weight: var(--bs-weight-medium); }
.bs-404__links a { color: var(--bs-color-primary); text-decoration: none; font-weight: var(--bs-weight-medium); }
.bs-404__links a:hover { text-decoration: underline; }
.bs-404__sep { color: var(--bs-color-border); }