/* Bloosat front-end styles — recreates the Claude Design "Accueil BLOOSAT" system on top of WordPress block markup. */

:root {
	--bloosat-subtle: #E2E5E8;
	--bloosat-grad: linear-gradient(120deg, #001864 0%, #0E5FB6 55%, #46A8E5 100%);
	--bloosat-shadow: 0 18px 40px rgba(0, 24, 100, .12);
	--bloosat-filigree: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g fill='none' stroke='%23FFFFFF' stroke-width='1'><path d='M0 32 L32 0 L64 32 L32 64 Z'/><path d='M16 32 L32 16 L48 32 L32 48 Z'/></g></svg>");
}

html[data-theme="dark"] {
	--wp--preset--color--bg: #000B2E;
	--wp--preset--color--surface: #001864;
	--wp--preset--color--surface-2: #001243;
	--wp--preset--color--ink: #FEFEFD;
	--wp--preset--color--muted: #A9B6CE;
	--wp--preset--color--line: rgba(255, 255, 255, .18);
	--wp--preset--color--blue: #7BC2F0;
	--bloosat-subtle: rgba(255, 255, 255, .07);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
	/* Stops the elastic rubber-band bounce on mobile browsers when scrolling
	   past the top/bottom -- without it, that bounce can momentarily shift
	   the whole page's content down, exposing blank space above position:
	   fixed elements like the header, which then snaps back once released. */
	overscroll-behavior-y: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	-webkit-font-smoothing: antialiased;
	/* clip, not hidden — "hidden" turns body into a scroll container in some
	   browsers, which breaks position:sticky on the header below. */
	overflow-x: clip;
}

::selection { background: #46A8E5; color: #001864; }

:focus-visible { outline: 2px solid #46A8E5; outline-offset: 3px; }

/* ---------- Layout helpers ---------- */

.bloosat-section {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(56px, 7vw, 96px) 20px;
}
.bloosat-section-tight { padding: clamp(34px, 4vw, 52px) 20px; }

.bloosat-gradient {
	background: var(--bloosat-grad);
	color: #FEFEFD;
	position: relative;
	overflow: hidden;
}
.bloosat-gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--bloosat-filigree);
	opacity: .1;
	pointer-events: none;
}
.bloosat-gradient a { color: #FEFEFD; }

/* Hero: full-bleed photo background with a left-to-right navy scrim so the
   text column stays legible on the left while the subject on the right
   side of the photo stays visible. No line-drawn signal animation here —
   just the photograph. */
.bloosat-hero-photo {
	position: relative;
	background-image:
		linear-gradient(100deg, rgba(0, 24, 100, .95) 0%, rgba(0, 24, 100, .88) 32%, rgba(0, 24, 100, .45) 58%, rgba(0, 24, 100, .12) 80%),
		url("../images/hero-bg.jpg");
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	color: #FEFEFD;
}
.bloosat-hero-photo a { color: #FEFEFD; }

.bloosat-hero-slogan {
	position: absolute;
	top: clamp(20px, 4vw, 40px);
	right: clamp(20px, 4vw, 48px);
	margin: 0;
	max-width: 280px;
	text-align: right;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.35;
	letter-spacing: .01em;
	color: #FEFEFD;
	text-shadow: 0 2px 12px rgba(0, 10, 45, .5);
	padding-right: 18px;
	border-right: 2px solid var(--wp--preset--color--accent);
	z-index: 1;
}
@media (max-width: 700px) {
	.bloosat-hero-slogan { display: none; }
}
.bloosat-hero-photo .bloosat-section {
	min-height: 620px;
	display: flex;
	align-items: center;
}
.bloosat-hero-text { max-width: 620px; }

.bloosat-hero-cta-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 26px;
	padding: 11px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .4);
	color: #FEFEFD;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	backdrop-filter: blur(6px);
	animation: bloosat-hero-cta-pulse 2.8s ease-in-out infinite;
	transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.bloosat-hero-cta-tag:hover {
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .65);
	transform: translateY(-2px);
}
.bloosat-hero-cta-tag strong { color: var(--wp--preset--color--accent); font-weight: 800; }
.bloosat-hero-cta-tag-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #3ECF8E;
	flex: 0 0 auto;
}
.bloosat-hero-cta-tag-arrow { flex: 0 0 auto; transition: transform .3s ease; }
.bloosat-hero-cta-tag:hover .bloosat-hero-cta-tag-arrow { transform: translateX(3px); }
@keyframes bloosat-hero-cta-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .22); }
	50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}
@media (max-width: 480px) {
	.bloosat-hero-cta-tag { font-size: 12.5px; padding: 9px 14px; }
}

/* Real-photo slots throughout the page (about, offers intro, resellers,
   news, quote form) — same rounded-card treatment as the hero photo, so
   uploaded photography reads as one consistent system. */
.bloosat-photo-card {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 20px;
	box-shadow: 0 16px 44px rgba(0, 24, 100, .18);
}

/* Devis section photo — cropped taller than its natural ratio so it reads
   at roughly the same height as the quote-form panel beside it. */
.bloosat-devis-photo {
	height: 280px !important;
	object-fit: cover;
	margin-bottom: clamp(20px, 3vw, 32px);
}
@media (min-width: 800px) {
	.bloosat-devis-photo { height: 620px !important; }
}
@media (max-width: 700px) {
	.bloosat-hero-photo {
		/* The source photo is wide and short (subject roughly centre-right).
		   On a narrow, tall mobile box, "cover" scales it up to match the
		   box's height, which -- combined with the old .95/.9 opacity scrim
		   and "center right" anchor -- left only an unrecognisable, near-black
		   sliver of the image visible. Lighter stops plus an anchor tuned to
		   the subject keep him and the skyline actually visible while the
		   text above still reads clearly. */
		background-image:
			linear-gradient(180deg, rgba(0, 24, 100, .72) 0%, rgba(0, 24, 100, .65) 55%, rgba(0, 24, 100, .4) 100%),
			url("../images/hero-bg.jpg");
		background-position: 80% 20%;
	}
	.bloosat-hero-photo .bloosat-section { min-height: 420px; }
}

.bloosat-kicker {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ocre);
	margin-bottom: 12px !important;
}
.bloosat-gradient .bloosat-kicker,
.bloosat-on-navy .bloosat-kicker { color: var(--wp--preset--color--accent); }

.bloosat-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.bloosat-lead {
	font-size: clamp(16px, 1.6vw, 20px);
	line-height: 1.55;
	opacity: .92;
}

.bloosat-on-navy h3 {
	color: #FEFEFD;
	font-size: clamp(22px, 2.8vw, 32px);
}
.bloosat-offer-card h3 {
	font-size: clamp(20px, 2.2vw, 25px);
	font-weight: 800;
	letter-spacing: -.015em;
}

.bloosat-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 99px;
	background: var(--wp--preset--color--accent);
	display: inline-block;
}

/* ---------- Buttons (liquid pill) ---------- */

.bloosat-btn,
.wp-block-button__link {
	border-radius: 999px !important;
	font-weight: 700 !important;
	padding: 16px 30px !important;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: transform .5s cubic-bezier(.34, 1.4, .5, 1), box-shadow .45s ease;
}
.bloosat-btn:hover,
.wp-block-button__link:hover { transform: translateY(-2px) scale(1.035); }
.bloosat-btn:active,
.wp-block-button__link:active { transform: translateY(0) scale(.955); transition-duration: .12s; }
.bloosat-btn::before,
.wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(42% 42% at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
	filter: blur(10px);
	opacity: 0;
	transition: opacity .55s ease;
}
.bloosat-btn:hover::before,
.wp-block-button__link:hover::before { opacity: 1; }

.wp-block-button.is-style-fill .wp-block-button__link {
	background: var(--bloosat-grad) !important;
	color: #FEFEFD !important;
	box-shadow: 0 6px 18px rgba(0, 24, 100, .22);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid rgba(255, 255, 255, .55) !important;
}
.wp-block-button.is-style-white .wp-block-button__link {
	background: #FEFEFD !important;
	color: #001864 !important;
}

/* ---------- Bordered "blueprint" grid boxes (facts / stats) ---------- */

.bloosat-line-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 0;
}
.bloosat-line-grid.is-narrow { grid-template-columns: repeat(auto-fit, minmax(min(50%, 150px), 1fr)); }
.bloosat-line-grid > * {
	border: 1px solid var(--wp--preset--color--line);
	margin: -0.5px;
	padding: 18px 20px;
}

/* ---------- Partner logos: infinite horizontal marquee ---------- */

.bloosat-partner-marquee {
	overflow: hidden;
	margin-top: 20px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.bloosat-partner-track {
	display: flex;
	align-items: center;
	gap: 20px;
	width: max-content;
	/* the track holds the logo set twice back to back, so translating by
	   exactly half its width loops seamlessly into the duplicate copy */
	animation: bloosat-partner-scroll 38s linear infinite;
}
.bloosat-partner-marquee:hover .bloosat-partner-track { animation-play-state: paused; }
.bloosat-partner-card {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 74px;
	padding: 12px 18px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
}
.bloosat-partner-card img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .7;
	transition: filter .3s ease, opacity .3s ease;
}
.bloosat-partner-card:hover img { filter: grayscale(0); opacity: 1; }
@keyframes bloosat-partner-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.bloosat-partner-track { animation: none; }
	.bloosat-partner-marquee { overflow-x: auto; }
}

/* ---------- "Ils nous font confiance": modern logo grid ---------- */

.bloosat-trust-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 14px;
	margin-top: 20px;
}
.bloosat-trust-card {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 84px;
	padding: 14px 18px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease, opacity .6s ease;
	/* staggered entrance as the section scrolls into view, timed off the
	   --i index each card carries; falls back to 0 (no delay) if unset */
	opacity: 0;
	transform: translateY(16px) scale(.96);
	transition-delay: calc(var(--i, 0) * 45ms);
}
.bloosat-reveal.is-visible .bloosat-trust-card { opacity: 1; transform: none; }
.bloosat-trust-card:hover {
	border-color: var(--wp--preset--color--sky);
	box-shadow: 0 14px 28px rgba(0, 24, 100, .14);
	transform: translateY(-5px) scale(1.03);
}
.bloosat-trust-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
	.bloosat-trust-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.bloosat-fact-grid,
.bloosat-stat-grid,
.bloosat-perk-grid,
.bloosat-partner-grid { display: grid; gap: 0; }
.bloosat-fact-grid > *,
.bloosat-stat-grid > *,
.bloosat-perk-grid > *,
.bloosat-partner-grid > * {
	border: 1px solid var(--wp--preset--color--line);
	margin: -0.5px;
	padding: 18px 20px;
}

.bloosat-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(14px, 1.6vw, 20px);
}

.bloosat-two-col {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(32px, 5vw, 64px);
}
.bloosat-two-col > * { flex: 1 1 320px; min-width: 0; }
.bloosat-two-col.is-reversed { flex-direction: row-wrap; }
.bloosat-two-col.is-reversed > *:first-child { order: 2; }

.bloosat-coverage-intro { max-width: 620px; margin: 0 auto; text-align: center; }

/* Dotted Cameroon-map watermark for the plain/light sections — literal to
   what Bloosat actually covers, reusing the same dot/signal visual
   language as the decorative illustrations instead of a generic pattern. */
#comment, #offres, #pourquoi, #equipements, #devis {
	/* z-index:0 (not just position:relative) is required so this section
	   establishes its OWN stacking context — otherwise the ::after's
	   z-index:-1 below escapes past this section entirely to the page's
	   root stacking context instead of just tucking behind this section's
	   own content. */
	position: relative;
	z-index: 0;
	overflow: hidden;
}
#comment::after, #offres::after, #pourquoi::after, #equipements::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -40px;
	width: 320px;
	height: 410px;
	background-image: url("../images/watermark-map.svg");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: .1;
	pointer-events: none;
	z-index: -1;
}
/* Contact: same dotted Cameroon watermark, but tucked at the top of the
   section (left side) instead of the bottom-right corner used elsewhere,
   so it doesn't fight with the photo/form below it. */
#devis::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 380px;
	height: 486px;
	background-image: url("../images/watermark-map.svg");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: .12;
	pointer-events: none;
	z-index: -1;
}

/* Blogsat archive page: same dotted-map watermark motif as the sections
   above, bottom-right corner -- ties the blog's background to the rest of
   the site instead of sitting on a plain, unbranded white background. */
#blog {
	position: relative;
	z-index: 0;
	overflow: hidden;
}
#blog::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -40px;
	width: 320px;
	height: 410px;
	background-image: url("../images/watermark-map.svg");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: .1;
	pointer-events: none;
	z-index: -1;
}

.bloosat-surface2 { background: var(--wp--preset--color--surface-2); }
.bloosat-on-navy { background: #001864; color: #FEFEFD; position: relative; overflow: hidden; }
.bloosat-on-navy a { color: #FEFEFD; }
.bloosat-border-top { border-top: 1px solid var(--bloosat-subtle); }
.bloosat-border-y { border-top: 1px solid var(--bloosat-subtle); border-bottom: 1px solid var(--bloosat-subtle); }

.bloosat-header-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(28px, 4vw, 44px);
}
.bloosat-header-row .bloosat-header-row-note { max-width: 34ch; margin: 0 !important; color: var(--wp--preset--color--muted); font-size: 13.5px; }
.bloosat-header-row h2 { max-width: 26ch; }

#apropos { position: relative; }
#apropos::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 80% at 80% 10%, rgba(70, 168, 229, .35), transparent 60%);
	pointer-events: none;
}
.bloosat-offers-intro { position: relative; }
.bloosat-offers-intro::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(90% 70% at 20% 20%, rgba(70, 168, 229, .3), transparent 65%);
	pointer-events: none;
}

/* ---------- Actualités: Blogsat / Facebook tabs ---------- */

.bloosat-actu-tabs {
	display: flex;
	gap: 8px;
	margin: 32px 0 28px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.bloosat-actu-tab {
	padding: 12px 4px;
	margin-bottom: -1px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: color .3s ease, border-color .3s ease;
}
.bloosat-actu-tab + .bloosat-actu-tab { margin-left: 20px; }
.bloosat-actu-tab:hover { color: var(--wp--preset--color--ink); }
.bloosat-actu-tab.is-active { color: var(--wp--preset--color--blue); border-color: var(--wp--preset--color--blue); }
.bloosat-actu-panel[hidden] { display: none; }
.bloosat-actu-fb-link { margin: 20px 0 0 !important; }

/* Blogsat tab, mobile only: the same grid becomes a horizontal, swipeable/
   auto-scrolling row (see bloosatHorizontalCarousel() in main.js) instead
   of stacking cards vertically, matching the Facebook tab's carousel. */
@media (max-width: 680px) {
	.bloosat-actu-panel[data-bloosat-actu-panel="blogsat"] .bloosat-blog-grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 18px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		cursor: grab;
		padding: 4px 4px 12px;
	}
	.bloosat-actu-panel[data-bloosat-actu-panel="blogsat"] .bloosat-blog-grid::-webkit-scrollbar { display: none; }
	.bloosat-actu-panel[data-bloosat-actu-panel="blogsat"] .bloosat-blog-grid.is-dragging { cursor: grabbing; scroll-behavior: auto; }
	.bloosat-actu-panel[data-bloosat-actu-panel="blogsat"] .bloosat-blog-card {
		flex: 0 0 min(78vw, 300px);
		width: min(78vw, 300px);
		scroll-snap-align: start;
	}
}

/* Live Facebook feed (actualités), via the Smash Balloon "Custom Facebook
   Feed" plugin's [custom-facebook-feed] shortcode. .cff-posts-wrap/.cff-item
   (the actual post list) become a horizontal, swipeable/auto-scrolling row
   matching the drag-to-scroll carousels already used elsewhere on the page,
   and .cff-visual-header (page name/avatar/cover) is restyled to the
   WhatsApp-style "avatar centred, straddling the bottom edge of the cover
   photo" layout instead of the plugin's default small-avatar-top-left-of-
   text row. !important is needed throughout because the plugin's own
   stylesheet (cff-style.min.css) targets the same classes at equal or
   higher specificity and may load after ours. */
.bloosat-fb-carousel { width: 100%; }

/* Profile header: centred, rounded-square avatar straddling the cover
   photo's bottom edge, name centred underneath -- WhatsApp's business
   profile layout, instead of the plugin's small circular avatar floated
   to the left of the name. */
.bloosat-fb-carousel .cff-visual-header .cff-header-img {
	/* .cff-header-img is absolutely positioned inside .cff-header-inner-wrap,
	   which sits right after (not inside) the cover photo -- so its "top:0"
	   already lines up with the cover's bottom edge. A negative top pulls it
	   up to straddle that boundary; "bottom" instead measures from the
	   inner-wrap's OWN bottom, which depends on the text below it, and put
	   the avatar in the wrong place entirely (name rendering above it). */
	top: -48px !important;
	bottom: auto !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
}
.bloosat-fb-carousel .cff-visual-header .cff-header-img img {
	width: 96px !important;
	height: 96px !important;
	border-radius: 22px !important;
	border: 4px solid var(--wp--preset--color--surface) !important;
	box-shadow: 0 8px 20px rgba(0, 24, 100, .22);
	object-fit: cover;
}
/* The plugin's own compound selector for this same element chains 3
   classes on the ancestor plus the descendant class (specificity 0,4,0),
   which beat the plain 3-class version of this rule regardless of
   !important -- two !important declarations still fall back to specificity,
   not source order. Matching that exact chain (plus our own wrapper class)
   guarantees this wins. */
.bloosat-fb-carousel .cff-visual-header.cff-has-name.cff-has-cover .cff-header-text {
	float: none !important;
	display: block !important;
	margin: 0 !important;
	padding: 60px 16px 0 !important;
	text-align: center;
}
.bloosat-fb-carousel .cff-visual-header .cff-header-name {
	float: none !important;
	display: inline-block !important;
	padding: 0 !important;
}
.bloosat-fb-carousel .cff-posts-wrap {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
	padding: 4px 4px 12px;
}
.bloosat-fb-carousel .cff-posts-wrap::-webkit-scrollbar { display: none; }
.bloosat-fb-carousel .cff-posts-wrap.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.bloosat-fb-carousel .cff-item {
	float: none !important;
	width: min(85vw, 340px) !important;
	flex: 0 0 min(85vw, 340px) !important;
	scroll-snap-align: start;
	margin: 0 !important;
	padding: 16px !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 16px;
	box-shadow: 0 10px 26px rgba(0, 24, 100, .08);
	overflow: hidden;
	transition: box-shadow .3s ease, transform .3s ease;
}
.bloosat-fb-carousel .cff-item:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 24, 100, .14); }

.bloosat-form-panel button[type="submit"] { width: 100%; }

.bloosat-fact-number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--sky);
	margin: 0 0 4px !important;
}

.bloosat-stat-value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(40px, 5.6vw, 68px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.035em;
	margin: 0 0 10px !important;
	background: var(--bloosat-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bloosat-partner-grid > * {
	height: 78px;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	text-align: center;
	transition: color .4s ease, background .4s ease;
}
.bloosat-partner-grid > *:hover {
	color: var(--wp--preset--color--blue);
	background: var(--wp--preset--color--surface-2);
}

/* ---------- Cards ---------- */

.bloosat-card {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	padding: clamp(24px, 2.6vw, 32px);
	height: 100%;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease, border-color .4s ease;
}
.bloosat-card:hover {
	transform: translateY(-5px);
	border-color: var(--wp--preset--color--sky);
}

.bloosat-step-card { position: relative; }
.bloosat-step-num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
	letter-spacing: .1em;
}

.bloosat-offer-card { display: flex; flex-direction: column; gap: 12px; min-height: 340px; }
.bloosat-offer-card:hover { box-shadow: var(--bloosat-shadow); }
.bloosat-offer-kind {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 !important;
}
.bloosat-offer-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8A4A22;
	background: #F6E7DB;
	border: 1px solid #E8C7AC;
	padding: 5px 9px;
	float: right;
}
.bloosat-offer-price-label {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 18px 0 2px !important;
	border-top: 1px solid var(--bloosat-subtle);
	padding-top: 18px;
}
.bloosat-offer-price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0 0 16px !important;
}
.bloosat-offer-price .unit { font-size: 13px; font-weight: 600; color: var(--wp--preset--color--muted); }
.bloosat-offer-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bloosat-offer-card ul li {
	position: relative;
	padding-left: 22px;
	font-size: 13.5px;
}
.bloosat-offer-card ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 12px;
	height: 12px;
	border-left: 2.2px solid var(--wp--preset--color--sky);
	border-bottom: 2.2px solid var(--wp--preset--color--sky);
	transform: rotate(-45deg);
}

/* var(--surface), not a hardcoded white -- it needs to switch to the dark
   card colour in dark mode along with its text (which already follows
   --ink), otherwise dark mode leaves white text on a white card. */
.bloosat-gear-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); transition: box-shadow .5s ease, background .3s ease; }
.bloosat-gear-card:hover { box-shadow: 0 16px 36px rgba(0, 24, 100, .1); }
.bloosat-gear-card figure { margin: 0; border-bottom: 1px solid var(--bloosat-subtle); }
.bloosat-gear-card figure img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.bloosat-gear-card .bloosat-gear-body { padding: 22px 24px 26px; }

/* ---------- BLOOSTAR plan / kit pricing (official Book Commercial catalogue) ---------- */

.bloosat-plan-category { margin-bottom: clamp(30px, 3.4vw, 44px); }
.bloosat-plan-category:last-child { margin-bottom: 0; }
.bloosat-plan-category-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-bottom: 16px !important;
}
.bloosat-plan-category-head h3 { margin: 0 !important; font-size: clamp(18px, 2vw, 22px); }
.bloosat-plan-category-note { margin: 0 !important; font-size: 13px; color: var(--wp--preset--color--muted); }
.bloosat-plan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr));
	gap: 12px;
}
.bloosat-plan-card {
	position: relative;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	padding: 18px 17px;
	cursor: pointer;
	transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.bloosat-plan-card:hover { border-color: var(--wp--preset--color--sky); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 24, 100, .1); }
/* Cards inside the bestseller carousel inherit "grab" from the scrollable
   grid they sit in (it's draggable) -- they're clickable too, so they need
   their own "pointer" back. */
.bloosat-bestseller-grid .bloosat-plan-card,
.bloosat-bestseller-hero { cursor: pointer; }
.bloosat-plan-card.is-popular {
	border: 1.5px solid var(--wp--preset--color--sky);
	box-shadow: 0 14px 32px rgba(0, 24, 100, .14);
}
.bloosat-plan-card.is-popular:hover { transform: translateY(-4px); }
.bloosat-plan-tag {
	position: absolute;
	top: -11px;
	left: 14px;
	background: var(--bloosat-grad);
	color: #FEFEFD;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 4px 10px;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(0, 24, 100, .3);
}
.bloosat-plan-name { margin: 0 !important; font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.bloosat-plan-name-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px !important; }
.bloosat-plan-icon {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 60% 40% 55% 45% / 45% 58% 42% 55%;
	background: linear-gradient(135deg, #0E5FB6 0%, #2E86D6 48%, #FFC94A 130%);
	box-shadow: 0 4px 10px rgba(0, 24, 100, .2);
	color: #FEFEFD;
	overflow: hidden;
}
.bloosat-plan-icon::before {
	content: "";
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .4), transparent 55%),
		radial-gradient(circle at 85% 90%, rgba(255, 201, 74, .6), transparent 55%);
	mix-blend-mode: overlay;
}
.bloosat-plan-icon svg { position: relative; z-index: 1; width: 15px; height: 15px; display: block; }
html[data-theme="dark"] .bloosat-plan-icon { box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.bloosat-plan-speed { margin: 0 !important; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 19px; color: var(--wp--preset--color--blue); }
.bloosat-plan-speed .unit { font-size: 10.5px; font-weight: 600; color: var(--wp--preset--color--muted); text-transform: uppercase; letter-spacing: .04em; margin-left: 3px; }
.bloosat-plan-desc { margin: 6px 0 0 !important; font-size: 12px; color: var(--wp--preset--color--muted); line-height: 1.4; }
.bloosat-plan-price {
	margin: 12px 0 0 !important;
	padding-top: 12px;
	border-top: 1px solid var(--bloosat-subtle);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 15.5px;
}
.bloosat-plan-price .unit { font-size: 11px; font-weight: 600; color: var(--wp--preset--color--muted); text-transform: none; }
.bloosat-plan-footnote { margin: 12px 0 0 !important; font-size: 11.5px; line-height: 1.5; color: var(--wp--preset--color--muted); }

.bloosat-plan-family {
	display: none;
	margin: 0 0 6px !important;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ---------- Best-sellers carousel ---------- */

.bloosat-bestsellers { padding: clamp(28px, 3.6vw, 40px) clamp(20px, 3vw, 30px); border-radius: 22px; }
.bloosat-bestsellers-head { position: relative; z-index: 1; margin-bottom: 22px !important; }
.bloosat-bestsellers-head h3 { color: #FEFEFD; margin: 0 0 6px !important; }
.bloosat-bestsellers-head p:last-child { margin: 0 !important; font-size: 14px; color: rgba(254, 254, 253, .82); }

.bloosat-bestsellers-layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: 20px;
	align-items: stretch;
}
@media (max-width: 780px) {
	.bloosat-bestsellers-layout { grid-template-columns: 1fr; }
}

/* The cheapest best-seller, alone in its own bigger card on the left. */
.bloosat-bestseller-hero {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	padding: 28px 24px;
	transition: background .3s ease, color .3s ease;
}
.bloosat-bestseller-hero .bloosat-plan-family { display: block; }
.bloosat-bestseller-hero .bloosat-plan-name { font-size: 18px; }
.bloosat-bestseller-hero .bloosat-plan-icon { width: 44px; height: 44px; }
.bloosat-bestseller-hero .bloosat-plan-icon svg { width: 20px; height: 20px; }
.bloosat-bestseller-hero .bloosat-plan-speed { font-size: 30px; }
.bloosat-bestseller-hero .bloosat-plan-desc { font-size: 13px; }
.bloosat-bestseller-hero .bloosat-plan-price { margin-top: auto !important; font-size: 21px; }

/* The rest of the best-sellers, 2 per row, vertically swipeable. */
.bloosat-bestseller-grid-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; }
.bloosat-bestseller-grid {
	width: 100%;
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(200px, 1fr);
	gap: 16px;
	overflow-y: auto;
	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
	max-height: 424px;
	padding: 4px 4px 4px 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
}
.bloosat-bestseller-grid::-webkit-scrollbar { display: none; }
.bloosat-bestseller-grid.is-dragging { cursor: grabbing; scroll-behavior: auto; }
@media (max-width: 780px) {
	/* The narrower 2-up columns at this width wrap plan family labels/names
	   onto extra lines, and grid-auto-rows' "auto" max doesn't actually grow
	   a row to fit that (Chromium keeps every row pinned to the 200px
	   minimum here regardless of content), so price/text spilled out past
	   the card's own bottom edge into whatever sat below it. The tallest
	   card measured at 243px of real content; 260px covers every current
	   plan with a little headroom. This has to come after the unqualified
	   rule above -- same specificity, so source order decides, and a media
	   query adds no specificity of its own to win against it from earlier
	   in the file. */
	.bloosat-bestseller-grid { grid-auto-rows: minmax(260px, 1fr); }
}
/* var(--surface)/var(--ink), not a hardcoded white card + black text -- the
   surrounding gradient panel stays the same blue in both themes, but the
   card itself needs to switch to the dark surface colour (with its border,
   already inherited from .bloosat-plan-card, giving it a visible edge
   against the panel) so it doesn't stay a stray white card once everything
   else on the page has gone dark. */
.bloosat-bestseller-grid .bloosat-plan-card {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	transition: transform .5s cubic-bezier(.17, .89, .32, 1.35), box-shadow .45s ease, background .3s ease, color .3s ease;
}
.bloosat-bestseller-grid .bloosat-plan-name,
.bloosat-bestseller-grid .bloosat-plan-price { color: var(--wp--preset--color--ink); }
.bloosat-bestseller-grid .bloosat-plan-price { margin-top: auto !important; }
.bloosat-bestseller-grid .bloosat-plan-card:hover,
.bloosat-bestseller-grid .bloosat-plan-card:focus-within {
	transform: scale(1.03);
	box-shadow: 0 18px 38px rgba(0, 10, 45, .35);
}
.bloosat-bestseller-grid .bloosat-plan-family { display: block; }

/* Best-sellers already imply "most chosen" -- the per-card tag is redundant
   here and hidden; it stays visible on the same plans in the full
   catalogue below once "Voir plus d'offres" is expanded. */
#bloosat-bestsellers .bloosat-plan-tag { display: none; }

.bloosat-carousel-nav {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .4);
	color: #FEFEFD;
	cursor: pointer;
	transition: background .3s ease, transform .3s ease;
}
.bloosat-carousel-nav:hover { background: rgba(255, 255, 255, .28); transform: scale(1.08); }

/* ---------- Offers expand / collapse toggle ---------- */

.bloosat-offers-toggle-wrap { display: flex; justify-content: center; margin: 28px 0 30px; }
/* While the catalogue is open, the button sticks just below the fixed
   header as you scroll through it, so it can be closed from anywhere
   instead of scrolling all the way back up. It naturally settles back
   into place once collapsed, or once you scroll back above it, since
   sticky positioning can't escape its own parent's box. */
.bloosat-offers-toggle-wrap.is-sticky {
	position: sticky;
	top: calc(var(--bloosat-header-h, 90px) + 32px);
	z-index: 40;
}
/* #offres normally clips its bottom-right watermark bleed via overflow:hidden
   (see the shared #comment/#offres/#pourquoi/#equipements/#devis rule above),
   but that also blocks position:sticky for any descendant -- including the
   toggle button above. The watermark is low-opacity decoration; any bleed
   past this section's edge is painted over by the next section's own
   background, so it's safe to let it overflow here. */
#offres { overflow: visible; }
/* With #offres no longer clipping, its own watermark copy (right:-60px in
   the shared rule) is left to bleed straight past the viewport's right
   edge instead of just past the section's. body's overflow-x:clip (see the
   note near the top of this file) clips content painted past body's own
   box, but doesn't stop the viewport itself from being dragged sideways by
   that same 60px on touch devices -- overflow:hidden would stop that too,
   but turns body into its own scroll container, breaking the sticky toggle
   above for the same reason overflow:hidden couldn't stay on #offres. Pull
   just this one copy back inside the section instead of relying on any
   ancestor to clip it. */
#offres::after { right: 0; bottom: 0; }
.bloosat-offers-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1.5px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.bloosat-offers-toggle:hover {
	border-color: var(--wp--preset--color--sky);
	box-shadow: 0 10px 22px rgba(0, 24, 100, .12);
	transform: translateY(-2px);
}
.bloosat-offers-toggle-icon { display: grid; place-items: center; animation: bloosat-toggle-bounce 2.2s ease-in-out infinite; }
.bloosat-offers-toggle-icon svg { display: block; transition: transform .4s ease; }
.bloosat-offers-toggle.is-expanded .bloosat-offers-toggle-icon { animation: none; }
.bloosat-offers-toggle.is-expanded .bloosat-offers-toggle-icon svg { transform: rotate(180deg); }
@keyframes bloosat-toggle-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(3px); }
}

/* ---------- Offers full list show / hide ---------- */

#bloosat-offers-full.is-collapsed { display: none; }
#bloosat-offers-full .bloosat-plan-category { transition: opacity .5s ease, transform .5s ease; }
#bloosat-offers-full.is-populating .bloosat-plan-category { opacity: 0; transform: translateY(14px); }
#bloosat-offers-full .bloosat-plan-category:nth-child(2) { transition-delay: .05s; }
#bloosat-offers-full .bloosat-plan-category:nth-child(3) { transition-delay: .1s; }
#bloosat-offers-full .bloosat-plan-category:nth-child(4) { transition-delay: .15s; }
#bloosat-offers-full .bloosat-plan-category:nth-child(5) { transition-delay: .2s; }

/* Draw attention to the Home 5 plan reached from the hero price link. */
#bloosat-offers-full .bloosat-plan-card.is-hero-highlighted {
	border-color: var(--wp--preset--color--sky);
	box-shadow: 0 0 0 5px rgba(0, 158, 224, .26), 0 18px 36px rgba(0, 24, 100, .2);
	animation: bloosat-offer-highlight 1.2s ease-in-out 2;
}
@keyframes bloosat-offer-highlight {
	50% { box-shadow: 0 0 0 11px rgba(0, 158, 224, .12), 0 18px 36px rgba(0, 24, 100, .2); }
}
@media (prefers-reduced-motion: reduce) {
	#bloosat-offers-full .bloosat-plan-card.is-hero-highlighted { animation: none; }
}

/* ---------- Navigation / header ---------- */

.bloosat-header {
	/* WordPress always wraps a template part in an auto-height wrapper
	   sized to fit just this element, which leaves position:sticky no room
	   to actually stay stuck for more than its own height of scrolling.
	   position:fixed is positioned purely against the viewport instead,
	   so it isn't affected by that wrapper at all. main.js pads the body
	   down by this element's real rendered height to compensate. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
}
/* Same root cause as the mobile nav overlay and the footer -- "constrained"
   layout insets this from the edges via --wp--style--root--padding-left/
   right, which this theme never defines, so it silently resolves to 0 and
   the logo/buttons sit flush against the screen edge with no gutter at
   all. Pad the actual flex row (the header's direct child), not .bloosat-
   header itself, so the fixed/blurred backdrop still runs full-bleed. */
.bloosat-header > .wp-block-group { padding-left: 20px; padding-right: 20px; }
body.admin-bar .bloosat-header { top: 32px; }
@media screen and (max-width: 782px) {
	/* #wpadminbar stays position:fixed at every width in WP core (only its
	   height changes, 32px -> 46px) -- it does NOT switch to absolute on
	   mobile as previously assumed here. Forcing top:0 in that earlier
	   attempt made this header sit underneath the always-fixed, higher
	   z-index toolbar instead of flush below it, which cut the header off
	   and left a blank gap before the page content. Keep matching its real
	   mobile height instead. */
	body.admin-bar .bloosat-header { top: 46px; }
}
/* WordPress's default root-block spacing adds a top margin to the first
   in-flow block after the header. That was invisible while the header sat
   in-flow (sticky); now that it's fixed/out-of-flow, the margin shows up
   as a visible gap before the hero. Kill it explicitly. */
main.wp-block-group { margin-top: 0 !important; }
/* Same root cause, but between every pair of top-level sections in the page
   content, not just before the first one: WordPress's default block-gap
   spacing adds a margin between siblings (post-content wraps them in its
   own div, so they aren't direct children of <main> — target by tag
   instead of DOM depth), which is invisible for content with its own
   background/margins but shows up as a stray white strip between our
   full-bleed sections, which are meant to sit flush. */
main.wp-block-group section { margin: 0 !important; }
/* Same recurring cause once more, this time WITHIN a section: WordPress's
   default spacing between a heading/paragraph/button-row/etc doesn't match
   the original design's tight, explicit margins, so gaps end up looser
   than intended wherever I didn't hand-set a margin. Normalize the common
   flow elements to one consistent rhythm instead of patching case by case. */
main.wp-block-group :where(h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-bottom: 18px; }
main.wp-block-group :where(p) { margin-top: 0; margin-bottom: 20px; }
main.wp-block-group :where(ul, ol) { margin-top: 0; margin-bottom: 20px; }
main.wp-block-group .wp-block-buttons { margin-top: 0; margin-bottom: 24px; }
main.wp-block-group :where(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-buttons):last-child { margin-bottom: 0; }
/* Same block-gap default one level deeper: it also lands on the CARDS
   themselves wherever a grid/flex row is built from nested wp:group
   blocks (every card but the first gets a stray margin-top, since that's
   WordPress's "space between siblings, skip the first child" rule). A
   margin-top on a grid/flex item doesn't shift the row — it shifts that
   one item within its own cell, which is exactly the misalignment. Spacing
   between items here is already fully owned by grid/flex `gap`, so kill
   any margin on the items outright. */
.bloosat-card-grid > *,
.bloosat-line-grid > *,
.bloosat-two-col > * {
	margin: 0 !important;
}
/* The grids themselves still need breathing room before whatever comes
   next (e.g. the perk grid before "Devenir revendeur") — that's the
   container's own margin, not the per-item one just zeroed above, so it's
   safe to set here without reintroducing the misalignment. */
main.wp-block-group :where(.bloosat-card-grid, .bloosat-line-grid) { margin-top: 0; margin-bottom: 30px; }
main.wp-block-group :where(.bloosat-card-grid, .bloosat-line-grid):last-child { margin-bottom: 0; }
/* The blur glass effect lives on a ::before layer, not on .bloosat-header
   itself. filter/backdrop-filter on an element turns it into the containing
   block for any position:fixed descendant -- and the mobile nav's full-screen
   menu overlay (core/navigation) is exactly that: a fixed-position descendant
   rendered inside <nav> inside this header. With backdrop-filter directly on
   .bloosat-header, that "fixed, full-viewport" overlay was being sized against
   the header's own small box instead of the real viewport, clipping the whole
   mobile menu down to a tiny corner. Keeping the filter on a non-ancestor
   pseudo-element avoids creating that containing block at all. */
.bloosat-header { isolation: isolate; }
.bloosat-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--bg) 80%, transparent);
	backdrop-filter: blur(16px) saturate(1.3);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
}
@media (max-width: 782px) {
	/* backdrop-filter's blur is one of the most GPU-expensive paints there
	   is, and doing it every frame on a position:fixed element during a
	   fast momentum scroll is a well-known cause of that element visually
	   lagging behind / detaching mid-gesture on mobile Safari and Chrome --
	   it self-corrects the instant the scroll settles, which is exactly why
	   it only ever shows up as a stray screenshot mid-scroll and never in
	   an automated (non-touch, non-momentum) test. Dropping the blur on
	   mobile removes the expensive part; a plain, more opaque background
	   keeps the header readable without it. */
	.bloosat-header::before {
		background: color-mix(in srgb, var(--wp--preset--color--bg) 94%, transparent);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}
/* Same trick the footer already uses for its logo on a permanently-navy
   background (brightness(0) invert(1) turns any non-transparent pixel pure
   white) -- applied conditionally here so the header's logo switches to
   that white version in dark mode and back to its normal colours in light
   mode, instead of staying the light-mode logo on a dark header. */
.bloosat-header .custom-logo { transition: filter .3s ease; }
html[data-theme="dark"] .bloosat-header .custom-logo { filter: brightness(0) invert(1); }

.bloosat-header .wp-block-button__link {
	width: 134px !important;
	height: 42px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 12px !important;
	font-size: 13px !important;
	box-sizing: border-box !important;
}
.bloosat-header .wp-block-navigation a {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--ink) !important;
}
.bloosat-header .wp-block-navigation a:hover { color: var(--wp--preset--color--blue) !important; }
.bloosat-header .wp-block-navigation-item.current-menu-item > a,
.bloosat-header .wp-block-navigation-item.bloosat-active > a {
	color: var(--wp--preset--color--blue) !important;
	box-shadow: 0 2px 0 var(--wp--preset--color--sky);
}

.bloosat-theme-toggle {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}
.bloosat-theme-toggle .icon-moon { display: block; }
.bloosat-theme-toggle .icon-sun { display: none; }

.bloosat-lang-toggle {
	height: 42px;
	padding: 0 14px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .04em;
	margin-left: 8px;
	transition: border-color .3s ease, color .3s ease;
}
.bloosat-lang-toggle:hover { border-color: var(--wp--preset--color--sky); color: var(--wp--preset--color--blue); }

html[data-theme="dark"] .bloosat-theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .bloosat-theme-toggle .icon-sun { display: block; }

.bloosat-header-persistent-toggles { display: flex; align-items: center; }
/* Hidden inside the mobile overlay by default -- .bloosat-header-menu-
   toggles (below) is its mobile-only replacement, shown only there. */
.bloosat-header-menu-toggles { display: none; }

/* Below 600px there isn't room for the theme/language toggles alongside the
   logo, hamburger button and Commander pill without squashing the logo
   (nothing else on that row can shrink: the toggles are fixed circles and
   the button is width:134px !important, so the logo -- the only flexible
   item -- absorbed all of it). Move them into the already-spacious mobile
   menu overlay instead of cramming them into the header row. */
@media (max-width: 599px) {
	.bloosat-header-persistent-toggles { display: none; }
	.bloosat-header .wp-block-navigation__responsive-container.is-menu-open .bloosat-header-menu-toggles {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 28px;
		padding-top: 20px;
		border-top: 1px solid var(--wp--preset--color--line);
	}
}

/* ---------- Mobile navigation (core/navigation overlay menu) ---------- */

/* The "open menu" button: swap WordPress's plain two-bar glyph for a proper
   rounded hamburger icon and match the circular theme/lang toggle buttons. */
.bloosat-header .wp-block-navigation__responsive-container-open {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	transition: border-color .3s ease, color .3s ease;
}
.bloosat-header .wp-block-navigation__responsive-container-open:hover {
	border-color: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--blue);
}
.bloosat-header .wp-block-navigation__responsive-container-open svg { display: none; }
.bloosat-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 19px;
	height: 13px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6h18M3 12h18M3 18h18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6h18M3 12h18M3 18h18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/></svg>") center / contain no-repeat;
}
/* Core hides this button above 600px with equal selector specificity inside
   its own min-width:600px query, so our later, equally-specific rule above
   was winning the cascade and leaving it visible next to the inline desktop
   nav. Re-declare the same breakpoint so it hides again as intended. */
@media (min-width: 600px) {
	.bloosat-header .wp-block-navigation__responsive-container-open { display: none; }
}

/* The "close" button: same circular treatment, reusing WP's own X icon. */
.bloosat-header .wp-block-navigation__responsive-container-close {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
}
.bloosat-header .wp-block-navigation__responsive-container-close:hover {
	border-color: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--blue);
}
.bloosat-header .wp-block-navigation__responsive-container-close svg { fill: currentColor; width: 18px; height: 18px; }

/* The full-screen overlay itself, once open. The .wp-block-navigation__container
   <ul> and its items are the SAME markup WordPress reuses for the inline
   desktop row, so every rule below is scoped under .is-menu-open (only ever
   present while the mobile modal is actually open) -- otherwise it would
   also restyle the plain horizontal desktop nav. */
.bloosat-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--bg) !important;
	/* Core insets this from the edges via clamp(1rem, var(--wp--style--root--
	   padding-*), 20rem) -- with no root padding defined in theme.json, that
	   var() resolves to nothing and makes the whole clamp() invalid, so the
	   padding falls back to 0 and every link (and the close button, which is
	   positioned against this box's padding edge) sits flush against the
	   phone's screen edge. Set it explicitly instead of depending on a
	   custom property this theme never defines. */
	padding: 20px 24px 32px !important;
}
.bloosat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	align-items: flex-start;
	padding-top: 44px;
}
.bloosat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start !important;
	gap: 6px;
	width: 100%;
}
.bloosat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}
.bloosat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 16px 4px !important;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px !important;
	font-weight: 600;
	color: var(--wp--preset--color--ink) !important;
}
.bloosat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.bloosat-active .wp-block-navigation-item__content {
	color: var(--wp--preset--color--blue) !important;
}

/* ---------- Reveal-on-scroll ---------- */

.bloosat-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1s cubic-bezier(.25, .6, .2, 1), transform 1.1s cubic-bezier(.2, .75, .2, 1);
}
.bloosat-reveal.is-visible { opacity: 1; transform: none; }

/* Decorative illustration animations — draw / pop / rise / unfold play once
   the enclosing .bloosat-reveal section scrolls into view, plus a few
   continuously-looping motions (cloud drift, satellite bob, orbit spin,
   coverage pulse, signal flow) ported from the original design. */
[data-draw] {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	transition: stroke-dashoffset 2.2s cubic-bezier(.45, .05, .2, 1);
}
.bloosat-reveal.is-visible [data-draw] { stroke-dashoffset: 0; }

[data-pop] {
	opacity: 0;
	transform: scale(.72);
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity .7s ease 1.1s, transform .9s cubic-bezier(.3, 1.5, .5, 1) 1.1s;
}
.bloosat-reveal.is-visible [data-pop] { opacity: 1; transform: none; }

[data-unfold] {
	transform: scaleX(.06);
	transform-box: fill-box;
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(.3, .9, .2, 1) .8s;
}
.bloosat-reveal.is-visible [data-unfold] { transform: none; }

[data-rise] {
	opacity: 0;
	transform: translateY(14px);
	transform-box: fill-box;
	transition: opacity .6s ease 1.4s, transform .7s ease 1.4s;
}
.bloosat-reveal.is-visible [data-rise] { opacity: 1; transform: none; }

@keyframes bl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bl-cloud { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes bl-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes bl-pulse { 0% { transform: scale(.6); opacity: .85; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes bl-dash { to { stroke-dashoffset: -60; } }
@keyframes bl-wave { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(16deg); } }

.bl-bob { animation: bl-bob 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bl-cloud { animation: bl-cloud 16s ease-in-out infinite alternate; }
.bl-spin { animation: bl-spin 44s linear infinite; transform-box: fill-box; transform-origin: center; }
.bl-flow { stroke-dasharray: 6 10; animation: bl-dash 1.6s linear infinite; }
.bl-wave { animation: bl-wave 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom right; }
.bl-ping { animation: bl-pulse 2.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
	.bloosat-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	[data-draw], [data-pop], [data-unfold], [data-rise] { transition: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
	.bl-bob, .bl-cloud, .bl-spin, .bl-flow, .bl-wave, .bl-ping { animation: none !important; }
}

/* ---------- Quote form ---------- */

.bloosat-action-pending { opacity: .6; cursor: progress !important; }

.bloosat-form-panel {
	position: relative;
	scroll-margin-top: calc(var(--bloosat-header-h, 90px) + 24px);
	overflow: hidden;
	background: var(--bloosat-grad);
	border: none;
	border-radius: 24px;
	padding: clamp(24px, 3vw, 38px);
	color: #FEFEFD;
}
.bloosat-form-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--bloosat-filigree);
	opacity: .12;
	pointer-events: none;
}
.bloosat-form-panel > * { position: relative; z-index: 1; }
.bloosat-form-panel p,
.bloosat-form-panel h3,
.bloosat-form-panel label,
.bloosat-form-panel span:not(.unit) { color: #FEFEFD; }
.bloosat-coverage-step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	padding: 16px 18px;
	margin-bottom: 20px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 14px;
	background: rgba(255, 255, 255, .1);
}
.bloosat-coverage-step-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bloosat-coverage-step strong { font-size: 16px; }
.bloosat-coverage-step a { color: #FEFEFD; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bloosat-form-panel [data-installation-date][hidden] { display: none; }
.bloosat-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; margin-bottom: 16px; }
.bloosat-form-panel label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 700; margin-bottom: 16px; }
.bloosat-form-panel input,
.bloosat-form-panel select,
.bloosat-form-panel textarea {
	padding: 13px 14px;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .12);
	color: #FEFEFD;
	border-radius: 12px;
	font: inherit;
	transition: border-color .3s ease, background .3s ease;
}
.bloosat-form-panel input::placeholder,
.bloosat-form-panel textarea::placeholder { color: rgba(254, 254, 253, .65); }
.bloosat-form-panel select option { color: var(--wp--preset--color--ink); }
.bloosat-form-panel input:focus,
.bloosat-form-panel select:focus,
.bloosat-form-panel textarea:focus { border-color: #FEFEFD; background: rgba(255, 255, 255, .18); outline: none; }
/* Draws the eye to the "Offre souhaitée" select once a plan card jumps the
   visitor straight to this form and auto-fills it (see the offer-card click
   handler in main.js). Finite iteration count (3) so it settles back to a
   normal, un-pulsing border on its own -- no JS cleanup required, though
   main.js still removes the class after it ends for tidiness. */
@keyframes bloosat-field-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(70, 168, 229, .6); border-color: rgba(255, 255, 255, .35); }
	50% { box-shadow: 0 0 0 7px rgba(70, 168, 229, 0); border-color: #46A8E5; }
}
.bloosat-form-panel select.bloosat-field-pulse { animation: bloosat-field-pulse 0.9s ease-out 3; }
.bloosat-form-panel .bloosat-form-error { font-size: 12px; color: #FFD9C2; font-weight: 600; }
.bloosat-form-note { font-size: 12px; color: rgba(254, 254, 253, .75); margin-top: 4px; }
.bloosat-form-success { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

.bloosat-whatsapp-btn {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 20px;
	margin-bottom: 24px;
	background: #25D366;
	color: #FEFEFD;
	font-weight: 700;
	font-size: 15px;
	border-radius: 12px;
	text-decoration: none;
	text-align: center;
	transition: background .25s ease, transform .25s ease;
}
.bloosat-whatsapp-btn:hover { background: #20BD5C; color: #FEFEFD; transform: translateY(-1px); }

.bloosat-tel-group { display: flex; gap: 8px; }
.bloosat-tel-group select {
	flex: 0 0 auto;
	width: auto;
	max-width: 110px;
}
.bloosat-tel-group input { flex: 1 1 auto; min-width: 0; }

/* ---------- Floating widgets ---------- */

.bloosat-floating {
	position: fixed;
	right: clamp(14px, 2.5vw, 26px);
	bottom: clamp(14px, 2.5vw, 26px);
	z-index: 80;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-end;
}
.bloosat-chat-toggle,
.bloosat-scrolltop {
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: var(--bloosat-grad);
	color: #FEFEFD;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(0, 24, 100, .3);
	position: relative;
}
.bloosat-chat-toggle-ping {
	position: absolute;
	inset: -5px;
	border-radius: 999px;
	border: 2px solid var(--wp--preset--color--sky);
	opacity: .65;
	animation: bloosat-chat-ping 2.6s ease-out infinite;
	pointer-events: none;
}
.bloosat-chat-toggle.is-open .bloosat-chat-toggle-ping { display: none; }
.bloosat-chat-icon-close { display: none; }
.bloosat-chat-toggle.is-open .bloosat-chat-icon-open { display: none; }
.bloosat-chat-toggle.is-open .bloosat-chat-icon-close { display: block; }
@keyframes bloosat-chat-ping {
	0% { transform: scale(.88); opacity: .55; }
	70% { transform: scale(1.4); opacity: 0; }
	100% { transform: scale(1.4); opacity: 0; }
}
.bloosat-scrolltop {
	width: 46px;
	height: 46px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 8px 20px rgba(0, 24, 100, .14);
	display: none;
}
.bloosat-scrolltop.is-visible { display: grid; }
.bloosat-chat-panel {
	width: min(88vw, 330px);
	max-height: min(78vh, 560px);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border-radius: 18px;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 24px 60px rgba(0, 24, 100, .28);
	display: none;
	flex-direction: column;
}
.bloosat-chat-panel.is-open { display: flex; }
.bloosat-chat-header {
	flex: 0 0 auto;
	background: var(--bloosat-grad);
	color: #FEFEFD;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-radius: 18px 18px 0 0;
}
.bloosat-chat-header-info { display: flex; align-items: center; gap: 10px; }
.bloosat-chat-avatar {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .16);
	color: #FEFEFD;
}
.bloosat-chat-avatar-sm {
	width: 26px;
	height: 26px;
	background: var(--bloosat-grad);
	box-shadow: 0 4px 10px rgba(0, 24, 100, .2);
}
.bloosat-chat-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #3ECF8E;
	margin-right: 5px;
	vertical-align: middle;
	animation: bloosat-chat-dot-pulse 2s infinite;
}
@keyframes bloosat-chat-dot-pulse {
	0% { box-shadow: 0 0 0 0 rgba(62, 207, 142, .5); }
	70% { box-shadow: 0 0 0 5px rgba(62, 207, 142, 0); }
	100% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0); }
}
.bloosat-chat-close {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .15);
	border: 0;
	border-radius: 999px;
	color: #FEFEFD;
	cursor: pointer;
	flex: 0 0 auto;
}
.bloosat-chat-body { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--wp--preset--color--pale-bg, #F4F7FB); }
.bloosat-chat-messages { display: flex; flex-direction: column; gap: 12px; }
.bloosat-chat-msg { display: flex; align-items: flex-start; gap: 8px; }
.bloosat-chat-bubble {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px 14px 14px 14px;
	padding: 11px 14px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}
.bloosat-chat-msg.is-user { flex-direction: row-reverse; }
.bloosat-chat-msg.is-user .bloosat-chat-bubble {
	background: var(--bloosat-grad);
	color: #FEFEFD;
	border: none;
	border-radius: 14px 4px 14px 14px;
}
.bloosat-chat-typing-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.bloosat-chat-typing-dots span {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--muted);
	animation: bloosat-chat-typing-bounce 1s infinite ease-in-out;
}
.bloosat-chat-typing-dots span:nth-child(2) { animation-delay: .15s; }
.bloosat-chat-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bloosat-chat-typing-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: .4; }
	30% { transform: translateY(-4px); opacity: 1; }
}
.bloosat-chat-suggestion {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	margin-left: 34px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--wp--preset--color--blue);
	background: rgba(70, 168, 229, .1);
	border: 1px solid var(--wp--preset--color--sky);
	border-radius: 999px;
	padding: 8px 14px;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}
.bloosat-chat-suggestion:hover { background: rgba(70, 168, 229, .18); transform: translateX(2px); }
.bloosat-chat-quick-label {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.bloosat-chat-quick { display: flex; flex-direction: column; gap: 8px; }
.bloosat-chat-chip {
	appearance: none;
	width: 100%;
	font: inherit;
	text-align: left;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 10px 15px;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}
.bloosat-chat-chip:hover {
	border-color: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--blue);
	background: rgba(70, 168, 229, .08);
	transform: translateX(2px);
}
.bloosat-chat-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 18px;
	border-radius: 999px;
	background: var(--bloosat-grad);
	color: #FEFEFD;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	margin-top: 2px;
}
.bloosat-chat-form {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--line);
	border-radius: 0 0 18px 18px;
}
.bloosat-chat-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 10px 15px;
	font-size: 13.5px;
	font-family: inherit;
	background: var(--wp--preset--color--pale-bg, #F4F7FB);
	color: var(--wp--preset--color--ink);
}
.bloosat-chat-input:focus { outline: 2px solid var(--wp--preset--color--sky); outline-offset: 1px; }
.bloosat-chat-send {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: var(--bloosat-grad);
	color: #FEFEFD;
	cursor: pointer;
}

/* ---------- Footer ---------- */

.bloosat-footer {
	background: #001864;
	color: #FEFEFD;
	position: relative;
	overflow: hidden;
	/* Like the mobile nav overlay, WP's "constrained" layout insets this from
	   the edges via the --wp--style--root--padding-* custom properties,
	   which this theme never defines in theme.json -- so it silently
	   resolves to 0 and every column/link sits flush against the screen
	   edge, most visibly on mobile where there's no side gutter at all. */
	padding-left: 20px;
	padding-right: 20px;
}
.bloosat-footer::before { content: ""; position: absolute; inset: 0; background-image: var(--bloosat-filigree); opacity: .06; pointer-events: none; }
.bloosat-footer a { color: rgba(254, 254, 253, .82); }
.bloosat-footer a:hover { color: #FEFEFD; }
.bloosat-footer .bloosat-footer-heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #46A8E5;
	margin-bottom: 16px !important;
}
.bloosat-footer-bottom {
	margin-top: clamp(36px, 5vw, 64px);
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	font-size: 12.5px;
	color: rgba(254, 254, 253, .6);
}
.bloosat-social-row { display: flex; gap: 10px; }
.bloosat-social-row a {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 12px;
}
.bloosat-social-row a:hover { color: #001864; background: #FEFEFD; }

.bloosat-header .wp-block-site-logo { flex-shrink: 0; }
@media (max-width: 599px) {
	.bloosat-header .wp-block-site-logo img { height: 32px; width: auto; }
	/* The header row is flex with nowrap: without flex-shrink:0 above, the
	   logo -- the only item here without a fixed width -- absorbed 100% of
	   the shrinkage whenever the row didn't fit (the Commander button is
	   width:134px !important and the toggle buttons are fixed circles, so
	   neither of THEM shrinks), squashing it down to a sliver a few px
	   wide instead of its real ~108px at this height. Moving the theme/lang
	   toggles into the mobile menu (below) frees enough width that this no
	   longer needs to shrink at all on real phone widths. */
}

/* ---------- Contact rows (footer + devis) ---------- */

.bloosat-contact-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; }
.bloosat-contact-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; flex-wrap: wrap; }
.bloosat-contact-row .bloosat-contact-icon { flex: 0 0 auto; display: flex; opacity: .75; }
.bloosat-contact-text { flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
a.bloosat-contact-text:hover { text-decoration: underline; }
.bloosat-contact-actions { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.bloosat-contact-btn {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	border: 1.5px solid currentColor;
	color: inherit;
	background: transparent;
	flex: 0 0 auto;
	opacity: .85;
	transition: transform .2s ease, opacity .2s ease;
}
.bloosat-contact-btn:hover { transform: translateY(-2px) scale(1.06); opacity: 1; }
.bloosat-contact-btn-wa { border: none; background: #25D366; color: #FFFFFF; opacity: 1; }

/* ---------- Scan-to-contact: QR codes on desktop, tap buttons on mobile ---------- */

.bloosat-qr-contact {
	margin-top: 24px;
	padding: 20px 22px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
}
.bloosat-qr-contact-label {
	margin: 0 0 16px !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--muted);
}
.bloosat-qr-contact-grid { display: flex; justify-content: center; gap: 32px; }
.bloosat-qr-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-size: 13px;
	font-weight: 700;
}
.bloosat-qr-img {
	width: 90px;
	height: 90px;
	padding: 7px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	transition: transform .3s ease, border-color .3s ease;
}
.bloosat-qr-item:hover .bloosat-qr-img { transform: translateY(-3px); border-color: var(--wp--preset--color--sky); }

.bloosat-qr-contact-mobile { display: none; gap: 12px; }
.bloosat-qr-mobile-btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 16px;
	border-radius: 999px;
	border: none;
	background: var(--wp--preset--color--blue, #0E5FB6);
	color: #FEFEFD;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: transform .3s ease, background .3s ease;
}
.bloosat-qr-mobile-btn:hover { transform: translateY(-2px); background: var(--wp--preset--color--navy, #001864); }
.bloosat-qr-mobile-btn-wa { background: #25D366; }
.bloosat-qr-mobile-btn-wa:hover { background: #20BD5C; }

@media (max-width: 680px) {
	.bloosat-qr-contact-label,
	.bloosat-qr-contact-grid { display: none; }
	.bloosat-qr-contact-mobile { display: flex; }
}

/* ---------- Blog: post cards, filters, pagination (homepage preview +
   the full /blog/ page, both rendered by the shortcodes in inc/blog.php) ---------- */

.bloosat-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 24px;
}
.bloosat-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	overflow: hidden;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.bloosat-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(0, 24, 100, .12);
	border-color: var(--wp--preset--color--sky);
}
.bloosat-blog-card-media { display: block; aspect-ratio: 3 / 2; background: var(--wp--preset--color--surface-2); }
.bloosat-blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bloosat-blog-card-media.is-fallback { background: var(--bloosat-grad); }
.bloosat-blog-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.bloosat-blog-card-cat {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ocre);
	text-decoration: none;
}
.bloosat-blog-card-cat:hover { color: var(--wp--preset--color--blue); }
.bloosat-blog-card-title { margin: 0 !important; font-size: 18px; line-height: 1.3; }
.bloosat-blog-card-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.bloosat-blog-card-title a:hover { color: var(--wp--preset--color--blue); }
.bloosat-blog-card-excerpt { margin: 0 !important; font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--muted); flex: 1 1 auto; }
.bloosat-blog-card-date { margin: 8px 0 0 !important; font-size: 12px; color: var(--wp--preset--color--muted); }

/* The single most recent post on the plain, unfiltered first page (see
   bloosat_blog_archive_shortcode()) -- spans the full grid width and
   switches to a side-by-side layout so the listing page opens with one
   clear focal point instead of a flat wall of identical tiles. */
.bloosat-blog-card-featured { grid-column: 1 / -1; }
@media (min-width: 700px) {
	.bloosat-blog-card-featured { flex-direction: row; }
	.bloosat-blog-card-featured .bloosat-blog-card-media {
		flex: 0 0 50%;
		aspect-ratio: auto;
	}
	.bloosat-blog-card-featured .bloosat-blog-card-body {
		flex: 1 1 auto;
		justify-content: center;
		padding: 36px 40px;
	}
	.bloosat-blog-card-featured .bloosat-blog-card-cat { font-size: 12px; }
	.bloosat-blog-card-featured .bloosat-blog-card-title { font-size: clamp(22px, 2.4vw, 28px); }
	.bloosat-blog-card-featured .bloosat-blog-card-excerpt { font-size: 15px; }
}

.bloosat-blog-more { margin-top: 36px; display: flex; justify-content: center; }
.bloosat-blog-empty { color: var(--wp--preset--color--muted); font-size: 15px; }

/* Toolbar: category pills + search box, full /blog/ page only. */
.bloosat-blog-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}
.bloosat-blog-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.bloosat-blog-filter {
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.bloosat-blog-filter:hover { border-color: var(--wp--preset--color--sky); color: var(--wp--preset--color--blue); }
.bloosat-blog-filter.is-active { background: var(--bloosat-grad); border-color: transparent; color: #FEFEFD; }
.bloosat-blog-search {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 4px 6px 4px 16px;
}
.bloosat-blog-search input {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 13.5px;
	min-width: 160px;
	color: var(--wp--preset--color--ink);
}
.bloosat-blog-search input:focus { outline: none; }
.bloosat-blog-search button {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: background .3s ease, color .3s ease;
}
.bloosat-blog-search button:hover { background: var(--bloosat-grad); color: #FEFEFD; }
.bloosat-blog-result-count { margin: -12px 0 20px !important; font-size: 13px; color: var(--wp--preset--color--muted); }

.bloosat-blog-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 40px;
	font-size: 13.5px;
}
.bloosat-blog-page-link {
	padding: 10px 20px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color .3s ease, color .3s ease;
}
.bloosat-blog-page-link:hover { border-color: var(--wp--preset--color--sky); color: var(--wp--preset--color--blue); }
.bloosat-blog-page-count { color: var(--wp--preset--color--muted); }

/* ---------- Single post (templates/single.html) ---------- */

/* Same dotted-map watermark as the rest of the site, one on each side of
   the centred reading column -- the right one mirrored for variety. Only
   shown once there's real margin to put them in (the column itself caps at
   760px), so they never compete with or crowd the article text. */
.bloosat-single-main { position: relative; }
@media (min-width: 1180px) {
	.bloosat-single-main::before,
	.bloosat-single-main::after {
		content: "";
		position: absolute;
		top: 120px;
		width: 240px;
		height: 308px;
		background-image: url("../images/watermark-map.svg");
		background-repeat: no-repeat;
		background-size: contain;
		opacity: .12;
		pointer-events: none;
	}
	.bloosat-single-main::before { left: 24px; }
	.bloosat-single-main::after { right: 24px; transform: scaleX(-1); }
}

.bloosat-single-post { max-width: 760px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.bloosat-single-post-header { text-align: center; margin-bottom: 28px; }
.bloosat-single-post-cat {
	display: inline-block;
	margin-bottom: 14px !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ocre);
}
.bloosat-single-post-cat a { color: inherit; text-decoration: none; }
.bloosat-single-post-header h1 { margin: 0 0 14px !important; }
.bloosat-single-post-meta { justify-content: center; gap: 14px; font-size: 13px; color: var(--wp--preset--color--muted); }
.bloosat-single-post-image {
	margin: 0 0 32px !important;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 16px 44px rgba(0, 24, 100, .16);
}
.bloosat-single-post-image img { width: 100%; height: auto; display: block; }
.bloosat-single-post-content { font-size: 16.5px; line-height: 1.75; }
.bloosat-single-post-content p { margin: 0 0 22px; }
.bloosat-single-post-content h2 { margin: 40px 0 16px; font-size: clamp(22px, 2.6vw, 28px); }
.bloosat-single-post-content h3 { margin: 32px 0 14px; font-size: clamp(18px, 2vw, 22px); }
.bloosat-single-post-content img { border-radius: 14px; margin: 8px 0; }
.bloosat-single-post-content a { color: var(--wp--preset--color--blue); }
.bloosat-single-post-content blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--wp--preset--color--sky);
	font-style: italic;
	color: var(--wp--preset--color--muted);
}
.bloosat-single-post-back { margin-top: 40px !important; }
.bloosat-single-post-back a { font-weight: 700; color: var(--wp--preset--color--blue); text-decoration: none; }
.bloosat-single-post-back a:hover { text-decoration: underline; }