/*
Theme Name: Baobab Studio
Theme URI: https://baobabstudio.fr
Author: Horizon Factory
Description: Block theme for Baobab Studio — replaces the Elementor build. Editable in the Site Editor, versioned in git.
Version: 0.8.18
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: baobab
*/

/* Design tokens + default heading/body styles live in theme.json (authoritative now that
   Elementor's kit CSS is dequeued on block pages — see functions.php). This file only pins
   the few per-section specifics measured off the live design. Bump Version: after edits. */

:root { --bb-primary:#A36B4E; --bb-dark:#121212; --bb-gold:#CDB289; --bb-cream:#F9E9DA; --bb-sech:600px; }

/* Sticky header — stays pinned to the top on scroll (the template-part wrapper is the body-level
   element, so sticky works across the whole page). */
header.wp-block-template-part { position:sticky; top:0; z-index:999; }

/* No gap between the sticky header and the first section. The root block-gap adds a 24px
   margin above <main>, which showed as a white band under the header (and over the hero).
   Zero it so the hero — and inner-page section starts — sit flush against the terracotta bar. */
.wp-site-blocks > main { margin-top:0; }

/* Header spans full width (flow, not constrained-1172) so the logo group hugs the left gutter
   and the cart hugs the right — aligned with the full-bleed hero/content below, not floating
   inside a centred 1172px box. Gutter scales with the viewport and bottoms out at the 22px
   mobile gutter the rest of the sections use. */
.bb-header { padding-left:clamp(22px,4vw,60px) !important; padding-right:clamp(22px,4vw,60px) !important; }

/* Header sits on the terracotta bar — all its text/links/icons are white (cream on hover). */
.bb-header, .bb-header a, .bb-header .bb-login, .bb-header .wp-block-navigation { color:#fff; }
.bb-header a:hover { color:var(--bb-cream); }

/* Logo artwork is gold — too low-contrast on the terracotta bar. Render it cream/white so
   it reads cleanly in the header and in the (terracotta) overlay menu it shows through into. */
.bb-header .custom-logo { filter:brightness(0) invert(1); }

/* Overlay menu = left half-width drawer (was a full-screen takeover). The remaining half is
   dimmed via a large spread shadow so the drawer reads as a panel. Full width on phones. */
.bb-nav .wp-block-navigation__responsive-container.is-menu-open {
	width:min(50%, 620px); right:auto; box-shadow:0 0 0 100vw rgba(18,18,18,.45);
}
@media (max-width:600px) {
	.bb-nav .wp-block-navigation__responsive-container.is-menu-open { width:100%; box-shadow:none; }
}
.bb-header .bb-login { text-decoration:none; }
/* Site logo is an SVG (no intrinsic px size) — pin its height so it doesn't collapse. */
.bb-header .wp-block-site-logo img, .bb-header img.custom-logo { width:auto !important; height:46px !important; }
.bb-footer .wp-block-site-logo img, .bb-footer img.custom-logo { width:auto !important; height:62px !important; }

/* Footer on the dark bar: everything cream (the WP 'cream' preset doesn't resolve here, so the
   has-cream-color headings were falling back to dark #333 and became unreadable). */
.bb-footer, .bb-footer p, .bb-footer li, .bb-footer h2, .bb-footer h3, .bb-footer h4 { color:var(--bb-cream) !important; }
.bb-footer a { color:var(--bb-cream); text-decoration:none; }
.bb-footer a:hover { color:#fff !important; }
.bb-footer h4 { font-weight:600; }

/* Hero heading: Quicksand (rounded title font) on the brown panel — cream, left. */
.bb-hero h1, .bb-hero h2 {
	font-family:"Quicksand", system-ui, sans-serif;
	font-weight:700; font-size:clamp(32px,3.4vw,50px); line-height:1.08; color:var(--bb-primary); text-align:left; text-transform:uppercase; letter-spacing:.5px;
}
/* Hero subtitle (Happy Flower layout): bold lead line under the title. */
/* Lead line sits in the title group: a small gap above ties it to the title; the body paragraph
   below already supplies its own 24px top margin (flex column = margins don't collapse), so no
   bottom margin here. */
.bb-hero-sub { color:var(--bb-dark) !important; font-weight:700 !important; font-size:clamp(18px,1.7vw,23px) !important; line-height:1.25; margin:16px 0 0 !important; }

/* Section titles: Quicksand 700 / 42px / UPPERCASE / terracotta. Alignment follows the block
   (left on home sections, centered on the À propos "Mission" title). */
.bb-section-title {
	font-family:"Quicksand", system-ui, sans-serif;
	font-weight:700; font-size:42px; line-height:46px;
	text-transform:uppercase; color:var(--bb-primary);
}

/* Offre / pricing card titles: Google Sans Flex 600 / 24px / dark (overrides the terracotta heading default). */
.bb-card h4 { font-family:"Google Sans Flex 120pt", system-ui, sans-serif; font-weight:600; font-size:24px; color:var(--bb-dark); }

/* Hero arch image — the arch shape is baked into the JPG, so show it RAW (no CSS clip). */
.bb-arch img { border-radius:0; width:100%; height:auto; }

/* Promesses list: 24px light text, no bullets, terracotta numbers, hanging indent. */
.bb-promesses-list { list-style:none; padding-left:0; font-weight:300; }
.bb-promesses-list li { display:flex; gap:10px; align-items:baseline; }
.bb-promesses-list li strong { color:var(--bb-primary); font-weight:700; flex-shrink:0; }

/* Hero (§2): brown brand panel on the left (full-bleed), full-height photo on the right. */
.bb-hero { padding:0; }
.bb-hero-panel { display:flex; flex-direction:column; justify-content:center; min-height:760px; background-color:#FBF8F3 !important; padding:48px clamp(28px,4vw,60px) !important; }
.bb-hero-panel > * { max-width:none !important; }
.bb-hero-panel p { color:var(--bb-dark); font-weight:300; font-size:17px; line-height:1.55; }
.bb-hero-panel .wp-block-button__link { background:var(--bb-primary) !important; color:#fff !important; border-radius:0; font-weight:600; }
.bb-hero-panel .wp-block-button__link:hover { background:#8a5a40 !important; color:#fff !important; }
.bb-hero .bb-arch { position:relative; overflow:hidden; min-height:480px; }
.bb-hero .bb-arch .wp-block-image, .bb-hero .bb-arch figure { position:absolute; inset:0; margin:0; height:100%; width:100%; }
.bb-hero .bb-arch img { width:100%; height:100%; object-fit:cover; }
/* À propos story: text on the LEFT starting at the normal page gutter, photo on the RIGHT flush to
   the content edge. No extra side padding, so the text fills the full width of its column. */
.bb-story { padding-left:0; padding-right:0; }
.bb-story-text { font-weight:300; }
.bb-story-text > * { max-width:none !important; }
@media (max-width:781px){
	.bb-story { padding-left:24px; padding-right:24px; }
	.bb-hero-panel { padding:40px 28px !important; }
	.bb-hero .bb-arch img { height:auto; }
}

/* Overlay (burger) menu — matches the original: terracotta panel, logo top-left, big cream Quicksand
   uppercase links, left-aligned, boxed white close. */
.bb-header .wp-block-navigation__responsive-container-open svg,
.bb-header .wp-block-navigation__responsive-container-close svg { fill:#fff; }
.wp-block-navigation__responsive-container.is-menu-open { background-color:var(--bb-primary) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
	padding:56px 72px; gap:16px; width:100%;
}
/* Logo at the top of the menu panel */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content:""; display:block; width:200px; height:70px; margin-bottom:28px;
	background:url(/wp-content/uploads/2026/06/logo-baobab.png) no-repeat left center/contain;
	filter:brightness(0) invert(1); /* gold artwork → cream, for contrast on the terracotta panel */
}
/* Tighter vertical rhythm between the items (they were too spread out). The -14px cancels the pill's
   horizontal padding below so item text still lines up with the logo's left edge. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction:column; align-items:flex-start; gap:0; margin-left:-40px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color:var(--bb-cream) !important; font-family:"Quicksand", system-ui, sans-serif; font-weight:700;
	font-size:clamp(17px,1.8vw,24px); text-transform:uppercase; letter-spacing:1px; line-height:1.1;
	background:transparent; border:0; cursor:pointer; position:relative;
	/* !important: core sets a more specific padding on the overlay item content, zeroing ours.
	   Wide horizontally (big pill) but slim vertically so the items sit close together. */
	padding:8px 40px !important; border-radius:999px; transition:background .18s ease, color .18s ease;
}
/* Hover style = brand-gold pill (echoes the highlighted "Entreprises" button), for mouse + keyboard. */
.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
	background:var(--bb-gold); color:var(--bb-dark) !important;
}
/* …plus a terracotta underline bar under the text (like the "Entreprises" reference), on top-level
   items only. It grows from the centre on hover/focus. Spans the text width (inset = the 40px pad). */
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content:""; position:absolute; left:40px; right:40px; bottom:5px; height:3px; border-radius:3px;
	background:var(--bb-primary); transform:scaleX(0); transform-origin:center; transition:transform .22s ease;
}
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after {
	transform:scaleX(1);
}
/* Same pill + underline on the submenu items (Notre Mission, Blog, …); smaller inset matches their
   20px padding and a slimmer 2px bar suits the smaller text. */
.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content:""; position:absolute; left:20px; right:20px; bottom:3px; height:2px; border-radius:2px;
	background:var(--bb-primary); transform:scaleX(0); transform-origin:center; transition:transform .22s ease;
}
.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after,
.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::after {
	transform:scaleX(1);
}
/* "À propos" / "Ressources" are non-navigating labels (openSubmenusOnClick renders them as <button>).
   Their submenus are hidden by default and revealed on hover / keyboard focus (not always expanded). */
.is-menu-open .wp-block-navigation__submenu-container {
	background:transparent !important; border:0 !important; box-shadow:none !important;
	position:static !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 0 0 20px !important;
	/* Collapsed by default; rolls down on reveal. !important beats core's overlay rule (0,3,0) — core's
	   24px top padding otherwise left a sliver under each submenu parent even while collapsed.
	   max-height (not height:auto) so the open/close transition animates. */
	max-height:0 !important; opacity:0 !important; overflow:hidden !important;
	transform:translateY(-6px); transition:max-height .32s ease, opacity .28s ease, transform .32s ease;
}
.is-menu-open .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.is-menu-open .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
	max-height:240px !important; opacity:1 !important; overflow:visible !important; transform:translateY(0);
}
.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size:clamp(13px,1.3vw,15px) !important; font-weight:600; letter-spacing:.5px; padding:7px 20px !important;
}
/* Keep the chevron as a visible affordance that the label opens a submenu. */
.is-menu-open .wp-block-navigation-submenu .wp-block-navigation__submenu-icon { display:inline-flex; align-items:center; color:var(--bb-cream); }
.wp-block-navigation__responsive-container-close {
	color:#fff !important; top:24px; right:32px; width:44px; height:44px;
	background:transparent; border:0;
}
.wp-block-navigation__responsive-container-close svg { width:30px; height:30px; }

/* Equal-height pricing cards with buttons pinned to the bottom across a row. */
.bb-cards .wp-block-column { display:flex; }
.bb-card { width:100%; display:flex; flex-direction:column; border:1px solid #ecdcc9; }
/* Button pins to the bottom (margin-top:auto) but always keeps a gap above it (padding-top). */
.bb-card .wp-block-buttons { margin-top:auto; padding-top:20px; }
/* Card content is left-aligned (titles + lists), matching the original. */
.bb-card h4, .bb-card .wp-block-list, .bb-card p { text-align:left; }
.bb-card .wp-block-list { padding-left:1.1em; }
/* The card's constrained layout centers children with margin:auto !important; override it so
   titles/lists fill the padded width (left-aligned) and every button is the same full width. */
.bb-card > * { max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.bb-card .wp-block-buttons, .bb-card .wp-block-button, .bb-card .wp-block-button__link { width:100%; }

/* Ghost button (Réserver): white bg, terracotta text + border, square. */
.bb-btn-ghost .wp-block-button__link {
	background:#fff !important; color:var(--bb-primary) !important;
	border:1px solid var(--bb-primary) !important; border-radius:0;
}
.bb-btn-ghost .wp-block-button__link:hover { background:var(--bb-primary) !important; color:#fff !important; }

/* FAQ accordion (core details) — clean rows with a divider, terracotta question, no plugin. */
.bb-faq-item { border-bottom:1px solid #e3cdb6; padding:18px 4px; }
.bb-faq-item summary { cursor:pointer; font-weight:600; font-size:18px; color:var(--bb-primary); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.bb-faq-item summary::-webkit-details-marker { display:none; }
.bb-faq-item summary::after { content:"+"; font-size:24px; color:var(--bb-primary); line-height:1; }
.bb-faq-item[open] summary::after { content:"–"; }
.bb-faq-item > :not(summary) { margin-top:14px; }

/* Testimonials carousel (À propos) — 3 italic quotes per view, arrows + dots. */
.bb-carousel { position:relative; padding:0 48px; }
.bb-carousel .bb-viewport { overflow:hidden; }
.bb-carousel .bb-track { display:flex; transition:transform .45s ease; }
.bb-carousel .bb-slide { flex:0 0 33.333%; max-width:33.333%; padding:0 24px; box-sizing:border-box; }
.bb-carousel .bb-quote { font-style:italic; font-size:18px; line-height:1.5; color:#333; }
.bb-carousel .bb-cite { display:block; margin-top:14px; color:var(--bb-dark); font-style:normal; }
.bb-carousel .bb-prev, .bb-carousel .bb-next {
	position:absolute; top:38%; transform:translateY(-50%); z-index:2; border:0; background:none;
	font-size:40px; line-height:1; color:var(--bb-primary); cursor:pointer; padding:8px;
}
.bb-carousel .bb-prev { left:0; } .bb-carousel .bb-next { right:0; }
.bb-carousel .bb-prev:disabled, .bb-carousel .bb-next:disabled { opacity:.25; cursor:default; }
.bb-carousel .bb-dots { display:flex; gap:10px; justify-content:center; margin-top:28px; }
.bb-carousel .bb-dot { width:9px; height:9px; border-radius:50%; border:0; background:#d9c4ad; cursor:pointer; padding:0; }
.bb-carousel .bb-dot.is-active { background:var(--bb-primary); }
@media (max-width:781px){ .bb-carousel .bb-slide{ flex-basis:100%; max-width:100%; } }

/* Social list (footer + contact): Instagram-style rows with the IG glyph. */
.bb-social { list-style:none; padding-left:0; margin-top:20px; }
.bb-social li { margin:10px 0; }
.bb-social a { display:inline-flex; align-items:center; gap:9px; }
.bb-social a::before {
	content:""; width:18px; height:18px; flex-shrink:0;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9E9DA' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%23F9E9DA' stroke='none'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* Footer brand column (logo + copyright) centred; contact heading bold. */
.bb-footer-brand { text-align:center; }
.bb-footer-contact { font-weight:600; }
/* Footer link columns: no bullets (plain text rows), like the original. */
.bb-footer-links { list-style:none; padding-left:0; margin-top:16px; }
.bb-footer-links li { margin:11px 0; }

/* Contact form card sits over the cream section; JFB underline inputs in brand tones. */
.bb-contact-card { box-shadow:0 8px 30px rgba(18,18,18,.06); }
.bb-contact-card .jet-form-builder input:not([type=submit]),
.bb-contact-card .jet-form-builder textarea {
	border:0 !important; border-bottom:1px solid #d9c4ad !important; border-radius:0 !important;
	background:transparent !important; padding:8px 0 !important; box-shadow:none !important;
}
.bb-contact-card .jet-form-builder label { color:var(--bb-dark); font-weight:500; }
.bb-contact-card .jet-form-builder__action-button,
.bb-contact-card button[type=submit] {
	background:var(--bb-primary); color:#fff; border:0; border-radius:0; padding:14px 32px; width:100%; font-weight:500;
}
.bb-contact-card .jet-form-builder__action-button:hover { background:var(--bb-dark); }

/* Auth pages (login/register/forgot): centered white card on cream. */
.bb-auth-card { max-width:620px; margin:0 auto; box-shadow:0 8px 30px rgba(18,18,18,.06); border-top-right-radius:60px; }
.bb-auth-card .jet-form-builder input:not([type=submit]),
.bb-auth-card .jet-form-builder textarea {
	border:0 !important; border-bottom:1px solid #d9c4ad !important; border-radius:0 !important;
	background:transparent !important; padding:8px 0 !important; box-shadow:none !important; width:100%;
}
.bb-auth-card .jet-form-builder label { color:var(--bb-dark); font-weight:500; }
.bb-auth-card .jet-form-builder__action-button,
.bb-auth-card button[type=submit] {
	background:var(--bb-primary) !important; color:#fff !important; border:0 !important; border-radius:0 !important;
	padding:14px 32px !important; width:100%; font-weight:500;
}
.bb-auth-card .jet-form-builder__action-button:hover { background:var(--bb-dark) !important; }

/* WooCommerce product grid (A la carte / Abonnement): brand card + terracotta buttons. */
.bb-shop ul.products li.product { background:#fff; border:1px solid #ecdcc9; padding:0 0 20px; text-align:left; }
.bb-shop ul.products li.product img { margin-bottom:16px; }
.bb-shop ul.products li.product .woocommerce-loop-product__title { font-size:20px; font-weight:600; color:var(--bb-dark); padding:0 20px; }
.bb-shop ul.products li.product .price { color:var(--bb-primary); font-weight:700; padding:0 20px; display:block; margin:8px 0 14px; }
.bb-shop ul.products li.product .button,
.bb-shop ul.products li.product .added_to_cart {
	background:var(--bb-primary) !important; color:#fff !important; border-radius:0 !important;
	margin:0 20px; padding:12px 20px !important; font-weight:500;
}
.bb-shop ul.products li.product .button:hover { background:var(--bb-dark) !important; }

/* Member area: appointments tables + account nav (Elementor-free). */
.bb-appts-table { width:100%; border-collapse:collapse; }
.bb-appts-table th { text-align:left; font-weight:600; color:var(--bb-dark); border-bottom:2px solid var(--bb-primary); padding:12px 14px; }
.bb-appts-table td { padding:14px; border-bottom:1px solid #ecdcc9; }
.bb-appt-status { display:inline-block; padding:3px 12px; border-radius:999px; font-size:13px; }
.bb-appt-status--done { background:#e6f4ea; color:#1e7d34; }
.bb-appt-status--cancelled { background:#fbe6e6; color:#b23b3b; }
.bb-appt-status--confirmed,.bb-appt-status--pending { background:var(--bb-cream); color:var(--bb-primary); }
.bb-appts-empty { color:var(--bb-muted,#7a7a7a); padding:24px 0; }
.bb-account-nav ul { list-style:none; padding:0; margin:0; }
.bb-account-nav li { margin:2px 0; }
.bb-account-nav a { display:block; padding:12px 16px; color:var(--bb-dark); text-decoration:none; border-radius:6px; }
.bb-account-nav a:hover, .bb-account-nav li.is-active a { background:var(--bb-cream); color:var(--bb-primary); font-weight:600; }
.bb-account-nav .bb-logout a { color:#b23b3b; }
@media (max-width:781px){ .bb-appts-table thead{display:none;} .bb-appts-table td{display:block;border:0;padding:6px 0;} .bb-appts-table td::before{content:attr(data-label) " : ";font-weight:600;} .bb-appts-table tr{display:block;border-bottom:1px solid #ecdcc9;padding:12px 0;} }

/* ============================================================================
   New pages (§9–15): Mission-start header, Équipe, Témoignages, Blog, Événements.
   Mirrors Happy Flower proportions but Baobab brown/cream + SQUARE corners.
   ========================================================================== */

/* Mission-start header (§10) — page title top-left, centered intro, dividers. */
.bb-page-start .bb-section-title { text-align:left; }
.bb-page-start h1.bb-section-title { font-size:38px; }

/* Notre Équipe (§12) — 3 square white cards, photo + LinkedIn + name/role/bio. */
.bb-team-grid .wp-block-column { display:flex; }
/* Team card matches the home testimonial card: clean white, NO gray border, soft warm shadow. */
.bb-team-card { width:100%; border:0; border-radius:0; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 24px rgba(163,107,78,.10); }
.bb-team-card > * { max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.bb-team-photo { margin:0; }
.bb-team-photo img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.bb-team-body > * { max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.bb-team-li { display:block; text-align:right; color:var(--bb-primary); line-height:0; margin:0 0 6px; }
.bb-team-li:hover { color:var(--bb-dark); }
.bb-team-name { font-family:"Quicksand", system-ui, sans-serif; font-size:20px; color:var(--bb-dark) !important; margin:0; }
.bb-team-role { color:var(--bb-primary); font-weight:600; margin:0; }
.bb-team-bio { color:#5b5b5b; font-weight:300; font-size:15px; line-height:1.55; }

/* Témoignages page (§13) — 2×3 square cards, quote + monogram avatar. */
.bb-tm-grid .wp-block-column { display:flex; margin-bottom:32px; }
.bb-tm-card { width:100%; border:1px solid #ecdcc9; border-radius:0; padding:28px; display:flex; flex-direction:column; gap:18px; }
.bb-tm-card > * { max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.bb-tm-quote { font-style:italic; color:#333; font-size:16px; line-height:1.6; margin:0; }
.bb-tm-meta { display:flex; align-items:center; gap:12px; margin-top:auto; }
.bb-tm-ava { width:46px; height:46px; flex:0 0 46px; border-radius:50%; background:var(--bb-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:"Quicksand", system-ui, sans-serif; overflow:hidden; }
/* Member photo inside the avatar bubble (falls back to the coloured initial when no <img>). */
.bb-tm-ava img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.bb-tm-id { display:flex; flex-direction:column; line-height:1.3; }
.bb-tm-name { color:var(--bb-dark); }
.bb-tm-prog { color:var(--bb-primary); font-size:13px; }

/* Blog (§14) — square cards, brand-beige category chip, hover zoom. */
.bb-blog-grid .wp-block-column { display:flex; margin-bottom:48px; }
.bb-blog-card { width:100%; display:flex; flex-direction:column; gap:12px; }
.bb-blog-card > * { max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.bb-blog-card .bb-blog-img { margin:0; border:1px solid #ecdcc9; border-radius:0; overflow:hidden; }
.bb-blog-card .bb-blog-img img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform .25s ease; }
.bb-blog-card .bb-blog-img:hover img { transform:scale(1.06); }
.bb-blog-cat { display:inline-block; align-self:flex-start; padding:3px 10px; background:var(--bb-cream); border:1px solid #ecdcc9; color:var(--bb-primary); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.bb-blog-title { font-family:"Quicksand", system-ui, sans-serif; font-size:19px; color:var(--bb-dark) !important; margin:0; line-height:1.3; }
.bb-blog-excerpt { color:#5b5b5b; font-weight:300; font-size:15px; line-height:1.55; margin:0; }
.bb-blog-date { color:var(--bb-muted,#7a7a7a); font-size:13px; }

/* Événements (§7 home + §15 page) — square brown cards + tab switcher. */
.bb-events-grid .wp-block-column { display:flex; }
.bb-event-card { width:100%; border-radius:0; display:flex; flex-direction:column; }
.bb-event-card > * { max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.bb-event-card .bb-event-img { margin:0; }
.bb-event-card .bb-event-img img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.bb-event-body { padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; }
.bb-event-body > * { max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.bb-event-title { font-family:"Quicksand", system-ui, sans-serif; font-size:19px; color:#fff !important; margin:0; }
.bb-event-card .bb-event-meta { color:var(--bb-cream); font-size:14px; opacity:.92; }
.bb-event-card .bb-event-desc { color:var(--bb-cream); font-weight:300; font-size:15px; line-height:1.55; }

/* Tabs (Événements page §15) — accessible button toggle, JS-driven. */
.bb-tabs-nav { display:flex; gap:8px; justify-content:center; margin:8px 0 36px; flex-wrap:wrap; }
.bb-tab-btn { border:1px solid var(--bb-primary); background:#fff; color:var(--bb-primary); padding:10px 24px; font-weight:600; cursor:pointer; border-radius:0; font-family:inherit; }
.bb-tab-btn.is-active { background:var(--bb-primary); color:#fff; }
.bb-tab-panel { display:none; }
.bb-tab-panel.is-active { display:block; }

/* Nos Offres (§9) — force the WooCommerce grids: 4-up abonnement, 3-up à la carte,
   square images, equal-height cards with the CTA pinned to the bottom. */
/* Both grids are a left-aligned 4-up of equal-width (1fr) cards, so the À la carte cards line up
   directly under the Abonnements cards. À la carte has 3 real products; a 4th placeholder ("factice")
   card is injected by theme.js to fill the row (see .bb-factice-card). */
.bb-offres-abo ul.products, .bb-offres-carte ul.products { display:grid !important; gap:24px; margin:0; padding:0; grid-template-columns:repeat(4,1fr); }
/* Placeholder 4th card — same footprint as a product card, clearly a soft "coming soon" filler. */
.bb-offres-carte ul.products li.product.bb-factice-card { justify-content:flex-start; border-style:dashed; border-color:#dcc6ad; background:#fff; }
.bb-factice-card .bb-factice-img { aspect-ratio:1/1; margin-bottom:16px; background:var(--bb-cream); display:flex; align-items:center; justify-content:center; }
.bb-factice-card .bb-factice-img span { font-family:"Quicksand", system-ui, sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:14px; color:var(--bb-primary); }
.bb-factice-card .woocommerce-loop-product__title { font-size:20px; font-weight:600; color:var(--bb-dark); padding:0 20px; }
.bb-factice-card .bb-factice-note { color:var(--bb-muted,#7a7a7a); font-weight:300; padding:0 20px; margin:8px 0 14px; display:block; }
.bb-factice-card .button { margin-top:auto !important; }
.bb-offres-abo ul.products::before, .bb-offres-abo ul.products::after,
.bb-offres-carte ul.products::before, .bb-offres-carte ul.products::after { content:none; }
.bb-offres-abo ul.products li.product, .bb-offres-carte ul.products li.product {
	width:auto !important; margin:0 !important; float:none !important; display:flex; flex-direction:column; border-radius:0;
}
.bb-offres-abo ul.products li.product img, .bb-offres-carte ul.products li.product img {
	border-radius:0 !important; aspect-ratio:1/1; object-fit:cover; margin-bottom:16px;
}
.bb-offres-abo ul.products li.product .price, .bb-offres-carte ul.products li.product .price { margin-bottom:16px; }
.bb-offres-abo ul.products li.product .button, .bb-offres-carte ul.products li.product .button { margin-top:auto !important; }
@media (max-width:900px){ .bb-offres-abo ul.products, .bb-offres-carte ul.products { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .bb-offres-abo ul.products, .bb-offres-carte ul.products { grid-template-columns:1fr; } }

/* Full-bleed photo sections must abut their neighbours — kill the 24px flow block-gap margins that
   were showing as white bands above/below the Promesses and Témoignages photos. */
.bb-promesses, .bb-offres, .bb-temoignages-sec, .bb-events-home { margin-top:0 !important; }

/* Align the hero and Promesses split at the SAME 46% line so the hero photo's bottom-left corner
   meets the Promesses photo's top-right corner. Forced flex (0 0 …) stops the hero text / promise
   cards from distorting the column widths (they were drifting to ~50% / ~39%). Desktop only —
   below 782px the columns stack. */
@media (min-width:782px){
	.bb-hero > .bb-hero-panel { box-sizing:border-box !important; flex:none !important; width:46vw !important; min-width:0 !important; }
	.bb-hero > .bb-arch { box-sizing:border-box !important; flex:none !important; width:54vw !important; min-width:0 !important; }
	.bb-promesses-cols > .bb-arch { box-sizing:border-box !important; flex:none !important; width:46vw !important; min-width:0 !important; }
	.bb-promesses-cols > .bb-promesses-right { box-sizing:border-box !important; flex:none !important; width:54vw !important; min-width:0 !important; }
	/* Témoignages photo gets the same fill treatment (46vw, left) as Promesses. */
	.bb-temoignages > .bb-arch { box-sizing:border-box !important; flex:none !important; width:46vw !important; min-width:0 !important; }
	.bb-temoignages > .bb-temoignages-col { box-sizing:border-box !important; flex:none !important; width:54vw !important; min-width:0 !important; }
	/* Hero, Promesses and Témoignages share the same section height so the photos are all equal. */
	.bb-promesses-cols, .bb-temoignages { min-height:760px; }
}

/* Home Promesses (§4) — full-bleed: photo fills the whole block height on the LEFT (diagonally
   opposite the hero photo on the right), content shifted right + vertically centred, and white
   Offres-style cards with a terracotta icon badge instead of the old brown number cards. */
.bb-promesses-cols { align-items:stretch; }
/* Photo column fills top-to-bottom and bleeds to the section's left edge. */
.bb-promesses-cols .bb-arch { position:relative; overflow:hidden; min-height:520px; }
.bb-promesses-cols .bb-arch .wp-block-image, .bb-promesses-cols .bb-arch figure { position:absolute; inset:0; margin:0; height:100%; width:100%; }
.bb-promesses-cols .bb-arch img { width:100%; height:100%; object-fit:cover; }
/* Content column: its own vertical padding gives the section height (photo stretches to match);
   the left padding shifts the content right, and justify-center centres title+cards vertically. */
.bb-promesses-right { display:flex; flex-direction:column; justify-content:center;
	padding:72px clamp(24px,6vw,96px) 72px clamp(28px,5vw,72px); }
.bb-promesses-right .bb-section-title { text-align:left; }
.bb-promesses-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.bb-promesses-grid > * { margin:0 !important; }
/* White card: no border, soft diffuse warm shadow, rounded corners (per the testimonial-card look). */
.bb-promesse { border-radius:16px !important; border:0; box-shadow:0 12px 32px rgba(163,107,78,.13);
	display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:26px 24px; height:100%; }
.bb-promesse > * { max-width:none !important; margin:0 !important; }
/* Icon badge replaces the 01–04 numbers: terracotta glyph on a soft cream disc. */
.bb-promesse-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
	border-radius:50%; background:var(--bb-cream); color:var(--bb-primary); flex-shrink:0; }
.bb-promesse-icon svg { width:26px; height:26px; }
.bb-promesse p { color:var(--bb-dark) !important; font-weight:400; font-size:17px; line-height:1.4; margin:0; }
@media (max-width:900px){ .bb-promesses-right { padding:48px 24px; } }
@media (max-width:781px){
	.bb-promesses-cols .bb-arch { min-height:280px; }
	.bb-promesses-right { padding:36px 4px !important; }
	.bb-hero-panel, .bb-offres .bb-cards { min-height:0 !important; } }

/* Home Témoignages (§6) — constrained section (same margins as Offres/Promesses), photo left fills
   its column, single testimonial CARD per view in the text column. */
.bb-temoignages { align-items:stretch; }
.bb-temoignages .bb-arch { position:relative; overflow:hidden; min-height:480px; }
.bb-temoignages .bb-arch .wp-block-image, .bb-temoignages .bb-arch figure { position:absolute; inset:0; margin:0; height:100%; width:100%; }
.bb-temoignages .bb-arch img { width:100%; height:100%; object-fit:cover; }
.bb-carousel--solo { padding:0 46px; max-width:600px; margin-left:0; }
/* Vertical padding so the card's drop shadow shows above/below (the viewport clips overflow). */
.bb-carousel--solo .bb-viewport { padding:22px 0; }
/* Wide side padding pushes the neighbouring off-screen cards far enough that THEIR shadows don't
   bleed into the visible edges (that was the odd vertical shadow band on the sides). */
.bb-carousel--solo .bb-slide { padding:0 28px; display:flex; flex-direction:column; justify-content:center; }
/* Testimonial card (Baobab theme): clean white card, NO border, soft warm terracotta-tinted shadow.
   Shared by the home (1-up) and Notre Mission (3-up) carousels. */
.bb-carousel .bb-tm-card { box-sizing:border-box; border:0; box-shadow:0 8px 24px rgba(163,107,78,.10); padding:30px 32px; }
.bb-carousel .bb-tm-quote { font-size:18px; line-height:1.6; }
/* Notre Mission — same cards in a 2-up carousel (wide/horizontal): room for the shadow + equal-height cards. */
.bb-temoignages-about .bb-viewport { padding:22px 0; }
.bb-temoignages-about .bb-slide { display:flex; }
.bb-temoignages-about .bb-dots, .bb-temoignages-about .wp-block-buttons { justify-content:center; }
/* Dots + "Plus de témoignages" button centered under the card. */
.bb-temoignages-col .bb-dots { justify-content:center; margin-left:0; }
.bb-temoignages-col .wp-block-buttons { justify-content:center; }
/* Section padding now lives on this column (the section itself is full-bleed with 0 padding), so the
   photo fills the whole block height. Content is centred vertically and shifted right. */
.bb-temoignages-col { display:flex; flex-direction:column; justify-content:center; padding:64px clamp(24px,5vw,72px) 64px clamp(40px,5vw,88px); }

/* Home Événements carousel (§7) — brown square cards in the HF events row. */
.bb-carousel--events .bb-slide { padding:0 12px; }
.bb-carousel--events .bb-event-card { height:100%; }
.bb-carousel--events .bb-event-img { margin:0; }
.bb-carousel--events .bb-event-img img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.bb-carousel--events .bb-event-body { padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; }
@media (max-width:781px){ .bb-carousel--events .bb-slide { padding:0 8px; } }

/* Footer (§8) — social icon row + legal bottom bar. */
.bb-footer-icons { display:flex; gap:16px; margin-top:18px; }
.bb-footer-icons a { color:var(--bb-cream); line-height:0; }
.bb-footer-icons a:hover { color:#fff; }
.bb-footer-legal { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; margin:28px 0 0; padding:20px 0 0; border-top:1px solid rgba(249,233,218,.28); font-size:13px; }

/* === Review pass: Offres uniform cards, event Réserver CTA, Happy-Flower footer === */

/* Offres (§5): roomier cards, all six uniform; rows fill so the section matches the hero height. */
.bb-offres .bb-card { padding:24px 22px !important; }
.bb-offres .bb-cards { min-height:calc((var(--bb-sech) - 258px) / 2); }

/* Event cards: "Réserver" CTA — cream outline on the terracotta card, pinned to the bottom. */
.bb-event-body { display:flex; flex-direction:column; flex:1 1 auto; }
.bb-events-grid .wp-block-column { display:flex; }
.bb-events-grid .bb-event-card { width:100%; height:100%; }
.bb-event-btns { margin-top:auto !important; padding-top:16px; align-self:center; justify-content:center; }
.bb-event-card .wp-block-button__link, a.bb-event-btn {
	display:inline-block; background:transparent; border:1px solid var(--bb-cream); color:var(--bb-cream) !important;
	border-radius:0; padding:9px 26px; font-weight:600; font-size:15px; text-decoration:none;
	font-family:"Quicksand", system-ui, sans-serif; cursor:pointer;
}
a.bb-event-btn { margin-top:auto; align-self:center; }
.bb-event-card .wp-block-button__link:hover, a.bb-event-btn:hover { background:var(--bb-cream); color:var(--bb-primary) !important; }

/* Footer (Happy Flower layout, Baobab colors): centered logo, three columns, social bottom-right. */
.bb-footer .custom-logo { filter:brightness(0) invert(1); }
.bb-footer-top { text-align:center; margin-bottom:40px; }
.bb-footer-top .wp-block-site-logo { display:flex; justify-content:center; margin:0 0 14px; }
.bb-footer-email a { color:var(--bb-cream); font-weight:600; }
.bb-footer-cols { max-width:780px; margin-left:auto !important; margin-right:auto !important; }
/* Center each column's text so the middle column sits visually under the centered logo. */
.bb-footer-cols .wp-block-column, .bb-footer-cols .bb-footer-links { text-align:center; }
.bb-footer-cols h4 a { color:var(--bb-cream); text-decoration:none; }
.bb-footer-cols h4 a:hover { text-decoration:underline; }
.bb-footer-bar { display:flex; flex-direction:column-reverse; align-items:flex-end; gap:12px; margin-top:40px; padding-top:20px; border-top:1px solid rgba(249,233,218,.28); }
.bb-footer-bar .bb-copyright { margin:0; font-size:13px; }
.bb-footer-bar .bb-footer-icons { display:flex; gap:16px; }
.bb-footer-bar .bb-footer-icons a { color:var(--bb-cream); display:inline-flex; }
.bb-footer .bb-footer-legal { justify-content:center; }
@media (max-width:781px){ .bb-footer-bar { justify-content:center; text-align:center; } }
.bb-footer-legal li { margin:0; }
.bb-footer-legal a { color:var(--bb-cream); text-decoration:none; }

/* ===================== Mobile responsive refinements ===================== */
@media (max-width:781px){
	/* No section should force a fixed height on mobile; let content flow. */
	.bb-hero-panel, .bb-promesses-cols, .bb-offres .bb-cards, .bb-promesses-grid { min-height:0 !important; }
	/* Horizontal gutters so constrained sections don't touch the screen edges. */
	.bb-page-start, .bb-promesses, .bb-offres, .bb-faq, .bb-member, .bb-contact { padding-left:22px !important; padding-right:22px !important; }
	/* Offer cards: force a clean one-per-row stack (avoid squish/overflow on phones). */
	.bb-cards { flex-direction:column !important; flex-wrap:nowrap !important; gap:16px; }
	.bb-cards > .wp-block-column { width:100% !important; max-width:100% !important; flex:0 0 auto !important; }
	/* Titles scale to the viewport instead of a fixed 42px. */
	.bb-section-title { font-size:clamp(26px,6.5vw,34px) !important; line-height:1.15; }
	.bb-page-start h1.bb-section-title { font-size:clamp(26px,6.5vw,32px); }
	.bb-hero h1, .bb-hero h2 { font-size:clamp(26px,7vw,34px); }
	.bb-hero-sub { font-size:clamp(16px,4.6vw,20px) !important; }
	.bb-hero-panel p { font-size:16px; }
	/* Hero photo: clean full-width cover below the text (overrides the desktop height:auto). */
	.bb-hero .bb-arch { min-height:300px; }
	.bb-hero .bb-arch figure, .bb-hero .bb-arch .wp-block-image { position:absolute; inset:0; margin:0; }
	.bb-hero .bb-arch img { width:100%; height:100%; object-fit:cover; }
	/* Promesses photo gets a sensible height when stacked above the cards. */
	.bb-promesses-cols .bb-arch { min-height:260px; }
	/* Témoignages: drop the desktop indents so the quote uses the full width. */
	.bb-temoignages-col { padding:36px 4px !important; }
	.bb-temoignages-col .bb-dots { margin-left:0; justify-content:center; }
	.bb-carousel--solo { padding:0 38px; max-width:none; }
	/* Footer bottom bar: stack centered (icons over copyright). */
	.bb-footer-bar { align-items:center; text-align:center; }
}
@media (max-width:600px){
	/* One card per row on phones for the 2×2 Promesses grid. */
	.bb-promesses-grid { grid-template-columns:1fr; }
	.bb-section-title { font-size:clamp(24px,7.5vw,30px) !important; }
	.bb-hero h1, .bb-hero h2 { font-size:clamp(24px,8vw,30px); }
}
.bb-footer-legal a:hover { color:#fff; }