/*
 * Gîte de la Barre — page redesign
 *
 * Tokens mirrored from the "Flex UI" design system used in the Claude Design
 * project (La Barre page redesign). Only the subset the page uses is copied
 * here; the page is otherwise self-contained and does not depend on
 * templatemo-style.css / gites.css.
 */

:root {
	--think-primary-light: #4A8FD8;
	--think-primary: #005EB8;
	--think-primary-dark: #003D7A;

	--think-secondary-light: #5fb7b7;
	--think-secondary: #298787;
	--think-secondary-dark: #005a5a;

	--think-bg: #f4f6f8;
	--think-paper: #ffffff;

	--fg-1: #263238;
	--fg-2: #546e7a;
	--fg-body: #37474f;

	--divider: rgba(0, 0, 0, 0.12);
	--action-hover: rgba(0, 0, 0, 0.04);

	--font-sans: Helvetica, Arial, sans-serif;

	--radius-1: 4px;
	--radius-full: 9999px;

	--shadow-1: 0 0 0 1px rgba(63,63,68,0.05), 0 1px 2px 0 rgba(63,63,68,0.15);
	--shadow-2: 0 0 1px 0 rgba(0,0,0,0.31), 0 2px 2px -2px rgba(0,0,0,0.25);
	--shadow-5: 0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25);
	--shadow-8: 0 0 1px 0 rgba(0,0,0,0.31), 0 5px 8px -2px rgba(0,0,0,0.25);
	--shadow-12: 0 0 1px 0 rgba(0,0,0,0.31), 0 7px 16px -4px rgba(0,0,0,0.25);
	--shadow-24: 0 0 1px 0 rgba(0,0,0,0.31), 0 24px 36px -8px rgba(0,0,0,0.25);

	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-short: 195ms;
	--duration-standard: 300ms;
}

/* ---------------------------------------------------------------- */
/* Base                                                             */
/* ---------------------------------------------------------------- */

.brd {
	font-family: var(--font-sans);
	color: var(--fg-1);
	background: var(--think-paper);
	-webkit-font-smoothing: antialiased;
}
.brd * { box-sizing: border-box; }
.brd img { max-width: 100%; }
.brd a { color: var(--think-primary); text-decoration: none; }
.brd a:hover { color: var(--think-primary-dark); text-decoration: underline; }

/* Read out but never drawn: the state of a calendar day, which the tint and the
   line through the number carry for everyone else. */
.brd-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.brd .ms {
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

.brd .overline {
	text-transform: uppercase;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1px;
	color: var(--think-secondary);
	margin-bottom: 16px;
}

.brd-wrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

@keyframes brd-fade-in { from { opacity: 0 } to { opacity: 1 } }

/* ---------------------------------------------------------------- */
/* Header                                                           */
/* ---------------------------------------------------------------- */

.brd-header {
	position: sticky;
	top: 0;
	z-index: 40;
	height: 64px;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var(--divider);
	display: flex;
	align-items: center;
}
.brd-header .brd-wrap { display: flex; align-items: center; gap: 32px; }

.brd-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	text-decoration: none;
}
.brd-brand:hover { text-decoration: none; }
.brd-brand .ms { font-size: 26px; color: var(--think-secondary); }
.brd-brand span:last-child {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.2px;
	color: var(--fg-1);
}

.brd-nav { display: flex; align-items: center; gap: 4px; }
.brd-nav a {
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--fg-2);
	border-radius: var(--radius-1);
	text-decoration: none;
}
.brd-nav a:hover {
	background: var(--action-hover);
	color: var(--fg-1);
	text-decoration: none;
}
.brd-nav a.active {
	color: var(--think-primary);
	background: rgba(0, 94, 184, 0.08);
}
.brd-nav a.brd-nav-cta {
	margin-left: 12px;
	padding: 9px 18px;
	color: #ffffff;
	background: var(--think-primary);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.brd-nav a.brd-nav-cta:hover { background: var(--think-primary-dark); color: #ffffff; }

.brd-menu-toggle { display: none; }

/* ---------------------------------------------------------------- */
/* Buttons                                                          */
/* ---------------------------------------------------------------- */

.brd-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	border-radius: var(--radius-1);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
}
.brd-btn:hover { text-decoration: none; }
.brd .brd-btn-primary { background: var(--think-primary); color: #ffffff; }
.brd .brd-btn-primary:hover { background: var(--think-primary-dark); color: #ffffff; }
.brd .brd-btn-ghost {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.5);
	color: #ffffff;
}
.brd .brd-btn-ghost:hover { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
.brd .brd-btn-white { background: #ffffff; color: var(--think-primary); padding: 14px 26px; }
.brd .brd-btn-white:hover { background: var(--think-bg); color: var(--think-primary-dark); }
.brd .brd-btn-outline {
	border-color: rgba(255, 255, 255, 0.6);
	color: #ffffff;
	padding: 14px 26px;
}
.brd .brd-btn-outline:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
/* The outlined variant for a light surface, where brd-btn-outline draws on a photo. */
.brd .brd-btn-line {
	background: var(--think-paper);
	border-color: var(--think-primary);
	color: var(--think-primary);
}
.brd .brd-btn-line:hover { background: rgba(0, 94, 184, 0.06); color: var(--think-primary-dark); }

/* ---------------------------------------------------------------- */
/* Hero                                                             */
/* ---------------------------------------------------------------- */

.brd-hero {
	position: relative;
	height: 640px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--fg-1);
}
.brd-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: none;
}
.brd-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,32,45,0.45) 0%, rgba(15,32,45,0.10) 35%, rgba(15,32,45,0.82) 100%);
}
.brd-hero-body { position: relative; padding-bottom: 56px; }

.brd-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--radius-full);
	color: #ffffff;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.brd-pill .ms { font-size: 16px; }

.brd-hero h1 {
	font-size: 64px;
	font-weight: 300;
	letter-spacing: -1.5px;
	color: #ffffff;
	margin: 0 0 16px;
	line-height: 1.05;
}
.brd-hero-sub {
	font-size: 20px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.92);
	max-width: 620px;
	margin: 0 0 32px;
	text-wrap: pretty;
}
.brd-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------------------------------------------------------------- */
/* Stat strip                                                       */
/* ---------------------------------------------------------------- */

.brd-stats { border-bottom: 1px solid var(--divider); background: var(--think-bg); }
.brd-stats .brd-wrap {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	padding-left: 32px;
	padding-right: 32px;
}
.brd-stat {
	padding: 24px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	border-left: 1px solid var(--divider);
}
.brd-stat:first-child { padding-left: 0; border-left: 0; }
.brd-stat:last-child { padding-right: 0; }
.brd-stat .ms { font-size: 24px; color: var(--think-secondary); }
.brd-stat-value { font-size: 16px; font-weight: 500; }
.brd-stat-label { font-size: 13px; color: var(--fg-2); }

/* ---------------------------------------------------------------- */
/* Alternating feature sections                                     */
/* ---------------------------------------------------------------- */

.brd-feature { max-width: 1200px; margin: 0 auto; padding: 96px 32px 0; }
/* A feature band only pays for the space above it, so a run of them ends flush
   against the next band. That is right when the next band brings its own top
   padding (the gallery, the cards region), and wrong before the blue CTA, which
   would start hard against the last image — so there the run closes itself. A
   block that renders nothing, like the testimonials band with no testimonials to
   show, still leaves its Elemental holder behind, hence the test on the sections
   that actually rendered rather than on the next holder. */
.brd-feature-last,
.brd main > .element:has(.brd-feature):not(:has(~ .element section:not(.brd-cta))) .brd-feature {
	padding-bottom: 96px;
}
.brd-feature-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.brd-feature-img {
	width: 100%;
	height: 480px;
	object-fit: cover;
	border-radius: var(--radius-1);
	box-shadow: var(--shadow-8);
}
.brd-feature-img-tall { height: 520px; }
.brd-feature h2 {
	font-size: 40px;
	font-weight: 300;
	letter-spacing: -1px;
	line-height: 1.1;
	margin: 0 0 20px;
}
.brd-feature-first h2 { font-size: 44px; }
.brd-lead { font-size: 18px; color: var(--fg-body); margin: 0 0 20px; text-wrap: pretty; }
.brd-body { font-size: 16px; color: var(--fg-2); margin: 0; text-wrap: pretty; }
.brd-body-spaced { margin-bottom: 32px; }

.brd-labels {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--divider);
}
.brd-labels img { height: 52px; display: block; }

/* ---------------------------------------------------------------- */
/* Gallery                                                          */
/* ---------------------------------------------------------------- */

.brd-gallery {
	background: var(--think-bg);
	border-top: 1px solid var(--divider);
	border-bottom: 1px solid var(--divider);
}
.brd-gallery .brd-wrap { padding-top: 80px; padding-bottom: 80px; }

.brd-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 40px;
}
.brd-section-head h2 {
	font-size: 40px;
	font-weight: 300;
	letter-spacing: -1px;
	margin: 0;
}
.brd-section-hint {
	font-size: 14px;
	color: var(--fg-2);
	padding-bottom: 8px;
	max-width: 320px;
	text-align: right;
}

.brd-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.brd-gallery-item {
	padding: 0;
	border: 0;
	background: #e0e0e0;
	border-radius: var(--radius-1);
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 4 / 3;
	display: block;
	box-shadow: var(--shadow-1);
}
.brd-gallery-item:hover { box-shadow: var(--shadow-12); }
.brd-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-standard) var(--ease-in-out);
}
.brd-gallery-item:hover img { transform: scale(1.05); }

/* ---------------------------------------------------------------- */
/* Lightbox                                                         */
/* ---------------------------------------------------------------- */

.brd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(15, 32, 45, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: brd-fade-in var(--duration-short) ease;
	cursor: zoom-out;
}
.brd-lightbox[hidden] { display: none; }
.brd-lightbox img {
	max-width: 88vw;
	max-height: 84vh;
	object-fit: contain;
	border-radius: var(--radius-1);
	box-shadow: var(--shadow-24);
}
.brd-lb-btn {
	position: fixed;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.10);
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.brd-lb-btn:hover { background: rgba(255, 255, 255, 0.22); }
.brd-lb-btn .ms { font-size: 26px; }
.brd-lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.brd-lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.brd-lb-close { top: 24px; right: 24px; width: 44px; height: 44px; }
.brd-lb-close .ms { font-size: 22px; }
.brd-lb-counter {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	letter-spacing: 0.5px;
}

/* ---------------------------------------------------------------- */
/* Descriptif                                                       */
/* ---------------------------------------------------------------- */

.brd-descriptif { max-width: 1200px; margin: 0 auto; padding: 96px 32px; }
.brd-descriptif > h2 {
	font-size: 40px;
	font-weight: 300;
	letter-spacing: -1px;
	margin: 0 0 48px;
}

.brd-floors { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.brd-floor {
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	overflow: hidden;
	background: var(--think-paper);
}
.brd-floor > img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
	border-bottom: 1px solid var(--divider);
}
.brd-floor-body { padding: 32px; }
.brd-floor-body h3 {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.06px;
	margin: 0 0 20px;
}
/* The stored label content is a raw <li> list. */
.brd-floor-body ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.brd-floor-body li {
	position: relative;
	padding-left: 36px;
	font-size: 15px;
	color: var(--fg-body);
	line-height: 1.5;
}
.brd-floor-body li::before {
	content: 'check_circle';
	font-family: 'Material Symbols Rounded';
	position: absolute;
	left: 0;
	top: 0;
	font-size: 20px;
	line-height: 1.4;
	color: var(--think-primary);
	-webkit-font-feature-settings: 'liga';
}

.brd-services {
	margin-top: 32px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}
.brd-service {
	border: 1px solid var(--divider);
	border-left: 8px solid var(--think-secondary);
	border-radius: var(--radius-1);
	padding: 24px;
	background: var(--think-paper);
}
.brd-service .ms { font-size: 26px; color: var(--think-secondary); }
.brd-service-text {
	font-size: 14px;
	color: var(--fg-2);
	line-height: 1.5;
	margin-top: 12px;
}

/* ---------------------------------------------------------------- */
/* Planning (js-year-calendar host)                                 */
/* ---------------------------------------------------------------- */

.brd-planning { background: var(--think-bg); border-top: 1px solid var(--divider); }
.brd-planning .brd-wrap { padding-top: 96px; padding-bottom: 96px; }
.brd-planning-card {
	background: var(--think-paper);
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	padding: 24px;
	box-shadow: var(--shadow-1);
	overflow-x: auto;
}
.brd-planning-note { font-size: 14px; color: var(--fg-2); margin: 16px 0 0; }

/* The key reuses the day cell's own padding and radius rather than showing an
   abstract swatch, so what it describes is recognisable in the grid below. */
.calendar-key {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--fg-2);
}
.calendar-key li { display: flex; align-items: center; gap: 8px; }
.calendar-key-day {
	padding: 5px 6px;
	border: 1px solid var(--divider);
	border-radius: 4px;
	color: var(--fg-1);
}

/* ---------------------------------------------------------------- */
/* Tarifs                                                           */
/* ---------------------------------------------------------------- */

.brd-tarifs { background: var(--think-bg); border-top: 1px solid var(--divider); }
.brd-tarifs .brd-wrap { padding-top: 96px; padding-bottom: 96px; }

.brd-year { margin-bottom: 48px; }
.brd-year:last-child { margin-bottom: 0; }
.brd-year-title {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.06px;
	margin: 0 0 24px;
}

.brd-tarif-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.brd-tarif {
	background: var(--think-paper);
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	padding: 24px;
	position: relative;
}
.brd-tarif-featured {
	border-color: var(--think-primary);
	box-shadow: var(--shadow-5);
}
.brd-tarif-flag {
	position: absolute;
	top: -11px;
	left: 24px;
	background: var(--think-primary);
	color: #ffffff;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-1);
}
.brd-tarif-name {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 16px;
	min-height: 40px;
}
.brd-tarif-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.brd-tarif-amount {
	font-size: 36px;
	font-weight: 300;
	letter-spacing: -1px;
}
.brd-tarif-featured .brd-tarif-amount { color: var(--think-primary); }
.brd-tarif-unit { font-size: 13px; color: var(--fg-2); }
.brd-tarif-periods {
	list-style: none;
	margin: 20px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--divider);
	display: grid;
	gap: 8px;
	font-size: 14px;
	color: var(--fg-2);
}

.brd-tarif-options {
	background: var(--fg-1);
	color: #ffffff;
	border-radius: var(--radius-1);
	padding: 24px;
}
.brd-tarif-options .brd-tarif-name { color: #ffffff; }
.brd-tarif-options ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.82);
}
.brd-tarif-options li { line-height: 1.4; }

/* ---------------------------------------------------------------- */
/* CTA band + footer                                                */
/* ---------------------------------------------------------------- */

.brd-cta { background: var(--think-primary); color: #ffffff; }
.brd-cta .brd-wrap {
	padding-top: 72px;
	padding-bottom: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	flex-wrap: wrap;
}
.brd-cta h2 {
	font-size: 40px;
	font-weight: 300;
	letter-spacing: -1px;
	margin: 0 0 12px;
	color: #ffffff;
}
.brd-cta p {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	max-width: 560px;
}
.brd-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.brd-footer { background: var(--think-paper); border-top: 1px solid var(--divider); }
.brd-footer .brd-wrap {
	padding-top: 40px;
	padding-bottom: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.brd-footer-brand { display: flex; align-items: center; gap: 10px; }
.brd-footer-brand .ms { font-size: 22px; color: var(--think-secondary); }
.brd-footer-brand span:last-child { font-size: 14px; color: var(--fg-2); }
.brd-footer-links { display: flex; gap: 20px; font-size: 14px; }

/* ---------------------------------------------------------------- */
/* Responsive                                                       */
/* ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.brd-stats .brd-wrap { grid-template-columns: repeat(3, 1fr); }
	.brd-stat, .brd-stat:first-child {
		padding: 20px 16px;
		border-left: 1px solid var(--divider);
	}
	.brd-tarif-grid { grid-template-columns: repeat(2, 1fr); }
	.brd-gallery-grid { grid-template-columns: repeat(3, 1fr); }
	.brd-hero h1 { font-size: 52px; }
}

@media (max-width: 768px) {
	.brd-wrap { padding: 0 20px; }
	.brd-nav { display: none; }
	.brd-nav.is-open {
		display: flex;
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--think-paper);
		border-bottom: 1px solid var(--divider);
		padding: 8px;
		box-shadow: var(--shadow-8);
	}
	.brd-nav.is-open a { padding: 12px; }
	.brd-nav.is-open a.brd-nav-cta { margin: 8px 0 0; text-align: center; justify-content: center; }
	.brd-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 1px solid var(--divider);
		border-radius: var(--radius-1);
		background: var(--think-paper);
		cursor: pointer;
		color: var(--fg-1);
	}

	.brd-hero { height: 520px; }
	.brd-hero h1 { font-size: 38px; letter-spacing: -1px; }
	.brd-hero-sub { font-size: 17px; }

	.brd-stats .brd-wrap { grid-template-columns: repeat(2, 1fr); }

	.brd-feature { padding: 56px 20px 0; }
	.brd-feature-last,
	.brd main > .element:has(.brd-feature):not(:has(~ .element section:not(.brd-cta))) .brd-feature {
		padding-bottom: 56px;
	}
	.brd-feature-grid { grid-template-columns: 1fr; gap: 28px; }
	.brd-feature-grid .brd-feature-img { order: -1; height: 280px; }
	.brd-feature h2, .brd-feature-first h2 { font-size: 30px; }

	.brd-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.brd-section-head h2 { font-size: 30px; }
	.brd-section-hint { text-align: left; padding-bottom: 0; }

	.brd-gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.brd-gallery .brd-wrap { padding-top: 56px; padding-bottom: 56px; }

	.brd-descriptif { padding: 56px 20px; }
	.brd-descriptif > h2 { font-size: 30px; margin-bottom: 32px; }
	.brd-floors { grid-template-columns: 1fr; gap: 20px; }
	.brd-floor-body { padding: 24px; }

	.brd-planning .brd-wrap,
	.brd-tarifs .brd-wrap { padding-top: 56px; padding-bottom: 56px; }
	.brd-tarif-grid { grid-template-columns: 1fr; }

	.brd-cta .brd-wrap { padding-top: 48px; padding-bottom: 48px; }
	.brd-cta h2 { font-size: 30px; }

	.brd-lb-prev { left: 8px; }
	.brd-lb-next { right: 8px; }
}

/* ---------------------------------------------------------------- */
/* Year calendar                                                    */
/*                                                                  */
/* js-year-calendar brings its own stylesheet and picks the number   */
/* of month columns itself, from the width it measures — hence no    */
/* grid and no breakpoints here, only what ties it to this page.     */
/* Loaded after css/vendor/js-year-calendar.css so these rules win.  */
/* ---------------------------------------------------------------- */

/* The library sets 12px on every cell; the day numbers read as the page's own
   text instead, and the month titles and day headers keep their own sizes. */
.brd-planning-card .calendar table td,
.brd-planning-card .calendar table th { font-size: inherit; }
.brd-planning-card .calendar .months-container .month-container { padding: 10px; }
.brd-planning-card .calendar table.month th.month-title { font-weight: 500; }
.brd-planning-card .calendar table.month th.day-header { color: var(--fg-2); font-weight: 500; }
.brd-planning-card .calendar .calendar-header { border-color: var(--divider); }
.brd-planning-card .calendar .calendar-header table th:hover { background: var(--action-hover); }
.brd-planning-card .calendar .year-title { font-weight: 500; color: var(--fg-1); }

/* A day a booking covers, whatever the booking's status, in the taken-day red
   the old site used (#d95204). The tint carries it at a glance and the line
   through the number says the same thing again without depending on colour,
   which the days before today and the rate periods both already use. The
   period's colour stays visible as the band under the day, so the rate for a
   taken week can still be read. */
.brd-planning-card .calendar table.month td.day .day-content.day-unavailable,
.calendar-key-day-unavailable {
	background-color: rgba(217, 82, 4, 0.14);
	color: rgba(38, 50, 56, 0.8);
	text-decoration: line-through;
	text-decoration-color: rgba(217, 82, 4, 0.85);
	text-decoration-thickness: 2px;
}

/* Hovering a taken day opens a tooltip, so it must not go dead, but nor should
   it offer the pointer and the grey wash the library gives a free day. */
.brd-planning-card .calendar table.month td.day .day-content.day-unavailable:hover {
	background-color: rgba(217, 82, 4, 0.22);
	cursor: not-allowed;
}

/* Tooltips. tippy appends them to the body, so nothing here can be scoped to
   .brd-planning; the theme the calendar asks for is what scopes it instead —
   see js/availability.js. Its own box is dark, this is the card the rest of the
   page uses. */
.tippy-box[data-theme~='presles'] {
	font-family: var(--font-sans);
	font-size: 13px;
	background: var(--think-paper);
	color: var(--fg-1);
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	box-shadow: var(--shadow-12);
}
.tippy-box[data-theme~='presles'] > .tippy-arrow { color: var(--think-paper); }
.tippy-box[data-theme~='presles'] .tippy-content { padding: 8px 12px; }
.tippy-box[data-theme~='presles'] .event-tooltip-content + .event-tooltip-content {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--divider);
}
.tippy-box[data-theme~='presles'] .event-name { font-weight: 500; }
.tippy-box[data-theme~='presles'] .event-details { color: var(--fg-2); }
.tippy-box[data-theme~='presles'] .calendar-unavailable .event-name { color: #b04303; }

@media (max-width: 768px) {
	.brd-planning-card { padding: 16px; }
}

/* ---------------------------------------------------------------- */
/* Home: hero slideshow                                             */
/* ---------------------------------------------------------------- */

.brd-hero-home {
	height: 700px;
	align-items: stretch;
}
.brd-hero-home .brd-hero-scrim {
	background: linear-gradient(180deg, rgba(15,32,45,0.50) 0%, rgba(15,32,45,0.12) 40%, rgba(15,32,45,0.80) 100%);
}
.brd-hero-home .brd-hero-body {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.brd-hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: none;
	opacity: 0;
	transition: opacity 600ms var(--ease-in-out);
}
.brd-hero-slide.is-active { opacity: 1; }

.brd-hero-home .brd-pill { align-self: flex-start; }
.brd-hero-kicker {
	font-size: 18px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 8px;
	min-height: 22px;
}
.brd-hero-home h1 {
	max-width: 900px;
	margin-bottom: 20px;
	text-wrap: pretty;
}
.brd-hero-home .brd-hero-sub { font-size: 19px; }
.brd-hero-home .brd-hero-actions { margin-bottom: 40px; }

.brd-hero-dots { display: flex; align-items: center; gap: 12px; }
.brd-hero-dot {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.brd-hero-dot span {
	display: block;
	width: 40px;
	height: 3px;
	background: rgba(255, 255, 255, 0.40);
	transition: background var(--duration-short) var(--ease-in-out);
}
.brd-hero-dot.is-active span,
.brd-hero-dot:hover span { background: #ffffff; }

/* ---------------------------------------------------------------- */
/* Home: lodging cards                                              */
/* ---------------------------------------------------------------- */

.brd-lodgings {
	background: var(--think-bg);
	border-bottom: 1px solid var(--divider);
}
.brd-lodgings .brd-wrap { padding-top: 96px; padding-bottom: 96px; }

.brd-lodging-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.brd-lodging {
	background: var(--think-paper);
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.brd-lodging-media { position: relative; }
.brd-lodging-media img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
}
.brd-lodging-badges {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.brd-badge {
	background: rgba(255, 255, 255, 0.94);
	color: var(--fg-1);
	font-size: 12px;
	font-weight: 500;
	padding: 5px 10px;
	border-radius: var(--radius-1);
}
.brd-lodging-body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
}
.brd-lodging-body h3 {
	font-size: 28px;
	font-weight: 300;
	letter-spacing: -0.5px;
	margin: 0;
}
.brd-lodging-body > p {
	font-size: 16px;
	color: var(--fg-2);
	margin: 0;
	text-wrap: pretty;
}
.brd-lodging-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	font-size: 14px;
	color: var(--fg-body);
}
.brd-lodging-features li { display: flex; align-items: center; gap: 8px; }
.brd-lodging-features .ms { font-size: 18px; color: var(--think-secondary); flex: none; }

.brd-lodging-foot {
	margin-top: auto;
	padding-top: 24px;
	border-top: 1px solid var(--divider);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.brd-lodging-price-label {
	font-size: 12px;
	color: var(--fg-2);
	text-transform: uppercase;
	letter-spacing: 1px;
}
.brd-lodging-price { display: flex; align-items: baseline; gap: 6px; }
.brd-lodging-price strong {
	font-size: 32px;
	font-weight: 300;
	letter-spacing: -1px;
}
.brd-lodging-price span { font-size: 13px; color: var(--fg-2); }
.brd-lodging-note { font-size: 16px; color: var(--fg-body); }

.brd .brd-btn-line {
	border-color: var(--think-primary);
	color: var(--think-primary);
	background: var(--think-paper);
	padding: 12px 20px;
}
.brd .brd-btn-line:hover { background: rgba(0, 94, 184, 0.06); color: var(--think-primary-dark); }
.brd .brd-btn-compact { padding: 12px 20px; }
.brd-btn-line .brd-airbnb { height: 18px; display: block; }

/* ---------------------------------------------------------------- */
/* Home: availability search                                        */
/* ---------------------------------------------------------------- */

.brd-availability {
	background: var(--think-paper);
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	padding: 24px;
	margin-bottom: 32px;
	display: flex;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
	box-shadow: var(--shadow-1);
}
.brd-availability-field { flex: 1; min-width: 240px; }
.brd-availability-field label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--fg-2);
	margin-bottom: 8px;
}
.brd-availability-input {
	position: relative;
	display: flex;
	align-items: center;
}
.brd-availability-input .ms {
	position: absolute;
	left: 12px;
	font-size: 20px;
	color: var(--fg-2);
	pointer-events: none;
}
.brd-availability-input input {
	width: 100%;
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--fg-1);
	padding: 12px 12px 12px 40px;
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	background: var(--think-paper);
}
.brd-availability-input input:focus {
	outline: 2px solid var(--think-primary);
	outline-offset: -1px;
	border-color: var(--think-primary);
}
.brd-availability-result {
	font-size: 14px;
	color: var(--fg-2);
	flex-basis: 100%;
}
.brd-availability-result.is-free { color: var(--success, #2e7d32); font-weight: 500; }
.brd-availability-result.is-busy { color: var(--error, #d32f2f); font-weight: 500; }

/* ---------------------------------------------------------------- */
/* Home: testimonials                                               */
/* ---------------------------------------------------------------- */

.brd-testimonials { background: var(--think-bg); border-top: 1px solid var(--divider); }
.brd-testimonials .brd-wrap { padding-top: 80px; padding-bottom: 80px; }
.brd-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}
.brd-testimonial {
	background: var(--think-paper);
	border: 1px solid var(--divider);
	border-left: 8px solid var(--think-secondary);
	border-radius: var(--radius-1);
	padding: 24px;
}
.brd-testimonial blockquote {
	margin: 0 0 16px;
	font-size: 16px;
	color: var(--fg-body);
	line-height: 1.6;
	text-wrap: pretty;
}
.brd-testimonial cite {
	font-style: normal;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--fg-2);
}

/* Home feature sections use a shorter image than Barre's */
.brd-feature-img-home { height: 460px; }
.brd-feature h3 {
	font-size: 36px;
	font-weight: 300;
	letter-spacing: -0.8px;
	line-height: 1.15;
	margin: 0 0 20px;
}
.brd-feature-first h2 { letter-spacing: -1.2px; }
.brd-inline-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}
.brd-inline-link:hover { text-decoration: underline; }

@media (max-width: 1024px) {
	.brd-hero-home { height: 620px; }
}

@media (max-width: 768px) {
	.brd-hero-home { height: auto; min-height: 560px; }
	.brd-hero-home .brd-hero-sub { font-size: 17px; }
	.brd-hero-kicker { font-size: 16px; }
	.brd-lodgings .brd-wrap { padding-top: 56px; padding-bottom: 56px; }
	.brd-lodging-grid { grid-template-columns: 1fr; gap: 24px; }
	.brd-lodging-body { padding: 24px; }
	.brd-lodging-media img { height: 220px; }
	.brd-feature-img-home { height: 280px; }
	.brd-feature h3 { font-size: 28px; }
	.brd-testimonials .brd-wrap { padding-top: 56px; padding-bottom: 56px; }
	.brd-availability { padding: 20px; }
}

/* ---------------------------------------------------------------- */
/* Bootstrap 3 shims                                                */
/*                                                                  */
/* The jQuery plugins these pages use were written against Bootstrap */
/* 3, which the old pages pulled in via css/gites.css. The redesign  */
/* deliberately does not load it, so the few declarations the        */
/* plugins genuinely depend on are reproduced here.                 */
/* ---------------------------------------------------------------- */

/*
 * daterangepicker builds <div class="daterangepicker dropdown-menu">, and
 * Bootstrap's .dropdown-menu is what supplied "display: none".
 * daterangepicker.css only styles .daterangepicker.dropdown-menu for
 * max-width and z-index, so without this the panel renders over the page at
 * its stylesheet offset (top: 100px; left: 20px) until the plugin sets an
 * inline display on first interaction. The plugin shows it with jQuery
 * .show(), which writes an inline display and so still wins.
 */
.brd .daterangepicker.dropdown-menu { display: none; }

/*
 * daterangepicker marks up its nav arrows with FontAwesome plus glyphicon
 * classes and relies on that icon font's ::before content. Render them from
 * Material Symbols, which these pages already load, rather than pulling in a
 * second icon font. (The year calendar needs none of this: js-year-calendar
 * draws its own arrows as text.)
 */
.brd .daterangepicker .fa,
.brd .daterangepicker .glyphicon {
	font-family: 'Material Symbols Rounded';
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}
.brd .daterangepicker .fa-chevron-left::before,
.brd .daterangepicker .glyphicon-chevron-left::before { content: 'chevron_left'; }
.brd .daterangepicker .fa-chevron-right::before,
.brd .daterangepicker .glyphicon-chevron-right::before { content: 'chevron_right'; }
.brd .daterangepicker .fa-calendar::before,
.brd .daterangepicker .glyphicon-calendar::before { content: 'calendar_month'; }
.brd .daterangepicker .fa-clock-o::before,
.brd .daterangepicker .glyphicon-time::before { content: 'schedule'; }

/* Match the picker's chrome to the redesign. */
.brd .daterangepicker {
	font-family: var(--font-sans);
	border: 1px solid var(--divider);
	box-shadow: var(--shadow-12);
}
.brd .daterangepicker td.active,
.brd .daterangepicker td.active:hover { background: var(--think-primary); }
.brd .daterangepicker td.in-range { background: rgba(0, 94, 184, 0.08); }
.brd .daterangepicker .btn-primary { background: var(--think-primary); border-color: var(--think-primary); }

/* ---------------------------------------------------------------- */
/* Haut de Presles: Airbnb embed + light overline on dark bands      */
/* ---------------------------------------------------------------- */

.brd-airbnb-embed {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 320px;
}
.brd-airbnb-embed .airbnb-embed-frame { max-width: 100%; }
.brd .overline.brd-overline-light { color: rgba(255, 255, 255, 0.75); }

/* ---------------------------------------------------------------- */
/* Activités: figure pairs, card trio, alternating split cards       */
/* ---------------------------------------------------------------- */

.brd-figures {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--divider);
}
.brd-figure-value {
	font-size: 32px;
	font-weight: 300;
	letter-spacing: -1px;
}
.brd-figure-label { font-size: 13px; color: var(--fg-2); }

.brd-cards {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 32px 96px;
}
.brd-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.brd-card {
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	overflow: hidden;
	background: var(--think-paper);
	display: flex;
	flex-direction: column;
}
.brd-card > img {
	width: 100%;
	aspect-ratio: 2.2 / 1;
	object-fit: cover;
	display: block;
	border-bottom: 1px solid var(--divider);
}
.brd-card-body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.brd-card-head { display: flex; align-items: center; gap: 10px; }
.brd-card-head .ms { font-size: 22px; color: var(--think-secondary); flex: none; }
.brd-card-head h3 {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.06px;
	margin: 0;
}
.brd-card-lead { font-size: 15px; font-weight: 500; color: var(--fg-body); margin: 0; }
.brd-card-text { font-size: 15px; color: var(--fg-2); margin: 0; text-wrap: pretty; }

.brd-splits { display: grid; gap: 32px; }
.brd-split {
	background: var(--think-paper);
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: center;
}
.brd-split.is-reversed { grid-template-columns: 1fr 1.15fr; }
.brd-split > img {
	width: 100%;
	aspect-ratio: 2.2 / 1;
	object-fit: cover;
	display: block;
}
.brd-split-body {
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
}
.brd-split-body .overline { color: var(--fg-2); margin-bottom: 0; }
.brd-split-body h3 {
	font-size: 30px;
	font-weight: 300;
	letter-spacing: -0.6px;
	margin: 0;
}
.brd-split-body p {
	font-size: 16px;
	color: var(--fg-2);
	margin: 0;
	max-width: 620px;
	text-wrap: pretty;
}

.brd-region { background: var(--think-bg); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.brd-region .brd-wrap { padding-top: 96px; padding-bottom: 96px; }
.brd-region .brd-section-head { margin-bottom: 48px; }

.brd-closing { max-width: 1200px; margin: 0 auto; padding: 96px 32px; }
.brd-closing h2 {
	font-size: 40px;
	font-weight: 300;
	letter-spacing: -1px;
	margin: 0 0 24px;
	max-width: 700px;
}
.brd-closing p {
	font-size: 17px;
	color: var(--fg-2);
	margin: 0;
	max-width: 820px;
	text-wrap: pretty;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.brd-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.brd-cards { padding: 40px 20px 56px; }
	.brd-cards-grid { grid-template-columns: 1fr; gap: 24px; }
	.brd-card-body { padding: 24px; }
	.brd-split, .brd-split.is-reversed { grid-template-columns: 1fr; }
	.brd-split-body { padding: 24px; }
	.brd-split-body h3 { font-size: 24px; }
	.brd-split.is-reversed > img { order: -1; }
	.brd-region .brd-wrap { padding-top: 56px; padding-bottom: 56px; }
	.brd-closing { padding: 56px 20px; }
	.brd-closing h2 { font-size: 30px; }
	.brd-figures { gap: 20px; }
}

/* Activités hero is shorter, its stat strip has four cells, and its lead
   image is wide rather than tall. */
.brd-hero-short { height: 560px; }
.brd-stats-4 .brd-wrap { grid-template-columns: repeat(4, 1fr); }
.brd-feature-img-wide {
	height: auto;
	aspect-ratio: 2.2 / 1;
}

@media (max-width: 1024px) {
	.brd-stats-4 .brd-wrap { grid-template-columns: repeat(2, 1fr); }
	.brd-hero-short { height: 500px; }
}
@media (max-width: 768px) {
	.brd-hero-short { height: 460px; }
}

/* ---------------------------------------------------------------- */
/* Contact: detail cards and forms                                  */
/* ---------------------------------------------------------------- */

.brd-contact { max-width: 1200px; margin: 0 auto; padding: 96px 32px; }
.brd-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 64px;
	align-items: start;
}
.brd-contact h2 {
	font-size: 40px;
	font-weight: 300;
	letter-spacing: -1px;
	line-height: 1.1;
	margin: 0 0 16px;
}
.brd-contact-lead { font-size: 18px; color: var(--fg-2); margin: 0 0 32px; text-wrap: pretty; }

.brd-contact-cards { display: grid; gap: 16px; }
.brd-contact-card {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 16px;
	align-items: center;
	padding: 20px 24px;
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	background: var(--think-paper);
	color: inherit;
	text-decoration: none;
}
.brd .a.brd-contact-card:hover,
.brd a.brd-contact-card:hover {
	background: var(--action-hover);
	text-decoration: none;
	color: inherit;
}
.brd-contact-card > .ms { font-size: 26px; color: var(--think-primary); }
.brd-contact-kind {
	font-size: 13px;
	color: var(--fg-2);
	text-transform: uppercase;
	letter-spacing: 1px;
}
.brd-contact-value {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
}
.brd a.brd-contact-card .brd-contact-value { color: var(--think-primary); }
.brd-contact-values { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 2px; }
.brd-contact-values a { font-size: 17px; font-weight: 500; }

/* Forms */
.brd-form-panel {
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	background: var(--think-paper);
	box-shadow: var(--shadow-2);
	padding: 40px;
}
.brd-form-panel h3 {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.06px;
	margin: 0 0 8px;
}
.brd-form-hint { font-size: 14px; color: var(--fg-2); margin: 0 0 28px; }
.brd-form { display: grid; gap: 20px; }
.brd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.brd-form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.brd-form label { display: grid; gap: 6px; }
.brd-form label > span { font-size: 13px; font-weight: 500; color: var(--fg-2); }
.brd-form input,
.brd-form select,
.brd-form textarea {
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--fg-1);
	padding: 10px 12px;
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	background: var(--think-paper);
	width: 100%;
	box-sizing: border-box;
}
.brd-form textarea { resize: vertical; }
.brd-form input:focus,
.brd-form select:focus,
.brd-form textarea:focus {
	outline: none;
	border-color: var(--think-primary);
	box-shadow: 0 0 0 1px var(--think-primary);
}
.brd-form-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 8px;
	border-top: 1px solid var(--divider);
	flex-wrap: wrap;
}
.brd-form-note { font-size: 13px; color: var(--fg-2); }
.brd-form-status { font-size: 14px; }
.brd-form-status.is-ok { color: var(--success, #2e7d32); font-weight: 500; }
.brd-form-status.is-error { color: var(--error, #d32f2f); font-weight: 500; }

/* Nous trouver */
.brd-locate { background: var(--think-bg); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.brd-locate .brd-wrap {
	padding-top: 80px;
	padding-bottom: 80px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.brd-locate h2 {
	font-size: 36px;
	font-weight: 300;
	letter-spacing: -0.8px;
	line-height: 1.15;
	margin: 0 0 20px;
}
.brd-locate-text { font-size: 16px; color: var(--fg-2); margin: 0 0 28px; text-wrap: pretty; }
.brd-locate-lines { display: grid; gap: 12px; }
.brd-locate-line {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--fg-body);
}
.brd-locate-line .ms { font-size: 20px; color: var(--think-secondary); flex: none; }
.brd-panel-plain {
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	background: var(--think-paper);
	padding: 32px;
}
.brd-panel-plain h3 { font-size: 20px; font-weight: 500; margin: 0 0 8px; }

.brd-cta-single .brd-wrap { padding-top: 64px; padding-bottom: 64px; }
.brd-cta-single h2 { margin: 0; }

@media (max-width: 1024px) {
	.brd-contact-grid { grid-template-columns: 1fr; gap: 40px; }
	.brd-locate .brd-wrap { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
	.brd-contact { padding: 56px 20px; }
	.brd-contact h2 { font-size: 30px; }
	.brd-form-panel { padding: 24px; }
	.brd-form-row, .brd-form-row-3 { grid-template-columns: 1fr; }
	.brd-locate .brd-wrap { padding-top: 56px; padding-bottom: 56px; }
	.brd-locate h2 { font-size: 28px; }
}

/* Contact hero is shorter still and carries no action buttons. */
.brd-hero-compact { height: 480px; }
@media (max-width: 768px) { .brd-hero-compact { height: 420px; } }

/* ---------------------------------------------------------------- */
/* Error pages                                                      */
/* ---------------------------------------------------------------- */

.brd-error {
	background: var(--think-bg);
	min-height: 60vh;
	padding: 64px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.brd-error-card {
	width: 100%;
	max-width: 720px;
	background: var(--think-paper);
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	box-shadow: var(--shadow-2);
}
.brd-error-body { padding: 48px 48px 40px; }
.brd-error-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}
.brd-error-kicker .ms { font-size: 28px; color: var(--warning, #ed6c02); }
/* The kicker sits on one line with the icon, where the section overline stacks. */
.brd-error-kicker .overline { color: var(--fg-2); margin-bottom: 0; }
.brd-error h1 {
	font-size: 44px;
	font-weight: 300;
	letter-spacing: -1.2px;
	line-height: 1.1;
	margin: 0 0 20px;
}
.brd-error-prose p {
	font-size: 16px;
	color: var(--fg-2);
	margin: 0 0 12px;
	text-wrap: pretty;
}
/* The opening line carries the news, so it is set larger than what follows. */
.brd-error-prose p:first-child { font-size: 18px; }
.brd-error-prose p:last-child { margin-bottom: 0; }
.brd-error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.brd-error-contact {
	border-top: 1px solid var(--divider);
	background: #fcfcfc;
	padding: 32px 48px;
	display: grid;
	gap: 16px;
}
.brd-error-contact-title {
	font-size: 13px;
	font-weight: 500;
	color: var(--fg-2);
	text-transform: uppercase;
	letter-spacing: 1px;
}
.brd-error-contact-cards { grid-template-columns: 1fr 1fr; }
.brd-error-contact .brd-contact-card {
	grid-template-columns: 36px 1fr;
	gap: 12px;
	padding: 16px 18px;
}
.brd-error-contact .brd-contact-card > .ms { font-size: 22px; }
.brd-error-contact .brd-contact-kind { font-size: 12px; }
.brd-error-contact .brd-contact-value { font-size: 16px; }
.brd-error-note { font-size: 13px; color: var(--grey-500, #9e9e9e); }
.brd-error-code { font-size: 13px; color: var(--grey-500, #9e9e9e); }

@media (max-width: 768px) {
	.brd-error { padding: 40px 20px; }
	.brd-error-body { padding: 32px 24px 28px; }
	.brd-error h1 { font-size: 32px; letter-spacing: -0.8px; }
	.brd-error-prose p:first-child { font-size: 17px; }
	.brd-error-contact { padding: 24px; }
	.brd-error-contact-cards { grid-template-columns: 1fr; }
	.brd-error-actions .brd-btn { flex: 1 1 auto; justify-content: center; }
}

/* The 404 is a way onwards rather than an apology, so it splits: routes on the
   left, and the view you came for on the right. */
.brd-notfound {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.brd-notfound-text { display: flex; align-items: center; justify-content: flex-end; }
.brd-notfound-inner { max-width: 560px; padding: 96px 64px 96px 32px; }
.brd-notfound h1 {
	font-size: 56px;
	font-weight: 300;
	letter-spacing: -1.5px;
	line-height: 1.05;
	margin: 0 0 20px;
}
.brd-notfound-lead p {
	font-size: 18px;
	color: var(--fg-2);
	margin: 0 0 12px;
	text-wrap: pretty;
}
.brd-notfound-lead p:last-child { margin-bottom: 0; }

.brd-notfound-routes { display: grid; gap: 12px; margin: 32px 0; }
.brd-notfound-route {
	display: grid;
	grid-template-columns: 40px 1fr 24px;
	gap: 16px;
	align-items: center;
	padding: 18px 22px;
	border: 1px solid var(--divider);
	border-radius: var(--radius-1);
	background: var(--think-paper);
	color: inherit;
}
.brd a.brd-notfound-route:hover {
	background: var(--action-hover);
	text-decoration: none;
	color: inherit;
}
.brd-notfound-route > .ms { font-size: 24px; color: var(--think-primary); }
.brd-notfound-route-title { font-size: 16px; font-weight: 500; }
.brd-notfound-route-note { font-size: 14px; color: var(--fg-2); }
.brd-notfound-route-go { font-size: 20px; color: var(--grey-500, #9e9e9e); }

.brd-notfound-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	padding-top: 28px;
	border-top: 1px solid var(--divider);
}

.brd-notfound-figure {
	position: relative;
	background: var(--fg-1);
	min-height: 560px;
	overflow: hidden;
}
.brd-notfound-figure img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
/* The caption sits on the darkest part of the photograph, not on the photograph. */
.brd-notfound-figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 32, 45, 0.30) 0%, rgba(15, 32, 45, 0.75) 100%);
}
.brd-notfound-figure-caption {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 40px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.9);
}
.brd-notfound-figure-caption .ms { font-size: 20px; }

@media (max-width: 1024px) {
	.brd-notfound { grid-template-columns: 1fr; }
	.brd-notfound-text { justify-content: flex-start; }
	.brd-notfound-inner { max-width: 720px; padding: 64px 32px; }
	.brd-notfound h1 { font-size: 44px; letter-spacing: -1.2px; }
	.brd-notfound-figure { min-height: 320px; }
}

@media (max-width: 768px) {
	.brd-notfound-inner { padding: 48px 20px; }
	.brd-notfound h1 { font-size: 32px; letter-spacing: -0.8px; }
	.brd-notfound-lead p { font-size: 17px; }
	.brd-notfound-route { grid-template-columns: 32px 1fr; padding: 16px 18px; }
	.brd-notfound-route-go { display: none; }
	.brd-notfound-actions .brd-btn { flex: 1 1 auto; justify-content: center; }
	.brd-notfound-figure { min-height: 260px; }
	.brd-notfound-figure-caption { padding: 24px 20px; }
}

/* ---------------------------------------------------------------- */
/* CMS blocks: markup the legacy pages did not produce              */
/* ---------------------------------------------------------------- */

/*
 * Descriptif lines now carry their own icon element, where the legacy page had
 * one blob of <li> markup and a single icon faked with a ::before. Drop the
 * pseudo-element so the two do not both render.
 */
.brd-floor-body .brd-floor-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.brd-floor-body .brd-floor-list li {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 12px;
	padding-left: 0;
	font-size: 15px;
	color: var(--fg-body);
	line-height: 1.5;
}
.brd-floor-body .brd-floor-list li::before { content: none; }
.brd-floor-body .brd-floor-list li > .ms {
	font-size: 20px;
	color: var(--think-primary);
	line-height: 1.4;
}

.brd-service-heading {
	font-size: 16px;
	font-weight: 500;
	margin: 12px 0 6px;
}
.brd-service .brd-service-text { margin-top: 0; }

/* A Split cards band can sit on white instead of the default grey. */
.brd-region-white { background: var(--think-paper); }

/* Elemental renders blocks with no wrapper, so the first band sits flush. */
.brd main > section:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- */
/* CMS forms                                                        */
/* ---------------------------------------------------------------- */

/* Honeypot: present for bots, never shown to or focusable by people. */
.brd .brd-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
}

/* SilverStripe wraps each field in a holder; make it lay out like the
   hand-written form the design mocked up. */
.brd .brd-form .field {
	display: grid;
	gap: 6px;
	margin: 0;
}
.brd .brd-form .field > label,
.brd .brd-form .field > .left {
	font-size: 13px;
	font-weight: 500;
	color: var(--fg-2);
}
.brd .brd-form .middle { display: block; }
.brd .brd-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 20px; }
.brd .brd-form .btn-toolbar { padding-top: 8px; border-top: 1px solid var(--divider); }
.brd .brd-form .message {
	font-size: 14px;
	padding: 12px 14px;
	border-radius: var(--radius-1);
	border: 1px solid var(--divider);
}
.brd .brd-form .message.good {
	color: var(--success, #2e7d32);
	background: var(--success-bg, #edf7ed);
	border-color: currentColor;
}
.brd .brd-form .message.bad,
.brd .brd-form .message.error,
.brd .brd-form .message.required {
	color: var(--error, #d32f2f);
	background: var(--error-bg, #fdeded);
	border-color: currentColor;
}
.brd .brd-form .field.holder-required > label::after { content: ' *'; color: var(--error, #d32f2f); }

/* The testimonial form sits inside the grey testimonials band. */
.brd-testimonial-form { margin-top: 32px; }

/* Extras card rows are label/value pairs. */
.brd-tarif-options ul li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.brd-tarif-options ul li span:last-child { color: #ffffff; font-weight: 500; }