/*
Theme Name: usausausa
Theme URI: https://uscarskuntz.com
Author: Creative Agency
Description: US Cars Kuntz theme - light showroom. American car specialist in Dachstein, Alsace, trading since 1994. Reuses the vehicules post type, the marques / etats taxonomies and the ACF fields of the previous antigone theme.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: usausausa
Tags: custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   1. Self-hosted fonts (no request to Google Fonts)
   ========================================================================= */

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/spacegrotesk-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/spacegrotesk-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   2. Tokens
   ========================================================================= */

:root {
	/* The theme is light only; stop iOS and Android reinterpreting it as dark. */
	color-scheme: light only;

	--bg: #f5f3f0;
	--bg-alt: #efece7;
	--surface: #ffffff;
	--surface-hover: #faf8f5;
	--plate-top: #ffffff;
	--plate-bottom: #eeeae4;
	--photo-bg: #e6e2dc;

	--ink: #14141a;
	--ink-soft: #2b2b33;
	--ink-70: #5c5b58;
	--ink-55: #6b6a68;
	--ink-45: #3d3c3a;
	--ink-35: #9b9995;

	--accent: #c2352b;
	--accent-dark: #a92c23;
	--accent-soft: #e8a09a;

	--hairline: rgba(20, 20, 26, 0.14);
	--hairline-soft: rgba(20, 20, 26, 0.1);
	--hairline-strong: rgba(20, 20, 26, 0.25);
	--hairline-input: rgba(20, 20, 26, 0.2);
	--rule: rgba(20, 20, 26, 0.12);

	--on-dark: rgba(245, 243, 240, 0.72);
	--on-dark-70: rgba(245, 243, 240, 0.7);
	--on-dark-45: rgba(245, 243, 240, 0.45);
	--on-dark-40: rgba(245, 243, 240, 0.4);
	--on-dark-rule: rgba(245, 243, 240, 0.12);

	--display: 'Space Grotesk', 'Archivo', Helvetica, Arial, sans-serif;
	--ui: 'Archivo', Helvetica, Arial, sans-serif;

	--gutter: clamp(18px, 4vw, 32px);
	--maxw: 1560px;
	--radius: 3px;
	--radius-sm: 2px;

	--shadow-card: 0 18px 40px -28px rgba(20, 20, 26, 0.45);
	--transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;

	/* Utility bar plus the main header row. */
	--header-h: 132px;
}

/* =========================================================================
   3. Base
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* The colour shown in the rubber-band area at the top of the page on iOS.
	   Safari samples it to tint the status bar. */
	background-color: #ffffff;
}

/*
 * The document background is white, not ivory. iOS Safari tints the status bar
 * from the body background colour (theme-color alone is not enough), and the
 * page starts with the white header anyway. The ivory lives on <main>, which
 * wraps every section, so nothing changes visually.
 */
body {
	margin: 0;
	background: #ffffff;
	color: var(--ink);
	font-family: var(--ui);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

img, svg, iframe, video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--ink);
	text-decoration: none;
	transition: var(--transition);
}

a:hover {
	color: var(--accent);
}

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	transition: var(--transition);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Anchor links (#stock, #marques) must land below the sticky header rather
   than behind it. */
section[id],
[id^="uck-"] {
	scroll-margin-top: calc(var(--header-h) + 12px);
}

.uck-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.uck-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ink);
	color: #fff;
	padding: 12px 20px;
}

.uck-skip:focus {
	left: 8px;
	top: 8px;
	color: #fff;
}

/* Carries the ivory page background for every section between header and footer. */
#uck-main {
	background: var(--bg);
}

/* =========================================================================
   4. Utilitaires de mise en page
   ========================================================================= */

.uck-wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.uck-section {
	padding-top: 88px;
}

.uck-section--sm {
	padding-top: 70px;
}

.uck-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
}

.uck-eyebrow--rule {
	display: flex;
	align-items: center;
	gap: 12px;
}

.uck-eyebrow--rule::before {
	content: "";
	width: 34px;
	height: 2px;
	background: var(--accent);
	display: block;
	flex: 0 0 34px;
}

.uck-h1 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(34px, 4.4vw, 62px);
	line-height: 0.98;
	letter-spacing: -0.03em;
}

.uck-h1--hero {
	font-size: clamp(36px, 4.4vw, 66px);
}

.uck-h1--vehicle {
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.02;
}

.uck-h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1;
	letter-spacing: -0.02em;
}

.uck-h2--stock {
	font-size: clamp(30px, 3.4vw, 50px);
}

.uck-h2--services {
	font-size: clamp(30px, 3.6vw, 58px);
	max-width: 24ch;
}

.uck-h2--band {
	font-size: clamp(30px, 3.6vw, 54px);
	line-height: 1.02;
}

.uck-h2--sm {
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1.1;
	color: var(--ink-45);
}

.uck-h2--cta {
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.05;
}

/* Section header: title left, short line aligned right. */
.uck-sechead {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--hairline);
}

.uck-sechead--plain {
	border-bottom: 0;
	padding-bottom: 40px;
}

.uck-sechead--news {
	padding-bottom: 34px;
}

.uck-cards--spaced {
	padding-top: 34px;
}

.uck-section--visit {
	padding-bottom: 96px;
}

.uck-sechead__note {
	font-size: 15px;
	color: var(--ink-55);
	max-width: 29ch;
	text-align: right;
	margin-left: auto;
}

.uck-sechead__link {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-left: auto;
}

/* =========================================================================
   5. Boutons et puces
   ========================================================================= */

.uck-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 28px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--ui);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	text-align: center;
}

.uck-btn--dark {
	background: var(--ink);
	color: #fff;
}

.uck-btn--dark:hover {
	background: var(--ink-soft);
	color: #fff;
}

.uck-btn--red {
	background: var(--accent);
	color: #fff;
}

.uck-btn--red:hover {
	background: var(--accent-dark);
	color: #fff;
}

.uck-btn--outline {
	background: var(--surface);
	color: var(--ink);
	border-color: var(--hairline);
}

.uck-btn--outline:hover {
	border-color: var(--ink);
	background: rgba(20, 20, 26, 0.06);
	color: var(--ink);
}

/* Light button sitting on a dark photo band. */
.uck-btn--white {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
}

.uck-btn--white:hover {
	background: rgba(255, 255, 255, 0.84);
	border-color: rgba(255, 255, 255, 0.84);
	color: var(--ink);
}

/* Light button on a dark CTA card: it inverts on hover. */
.uck-btn--white-invert {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
}

.uck-btn--white-invert:hover {
	background: var(--ink-soft);
	border-color: var(--ink-soft);
	color: #fff;
}

.uck-btn--ghost {
	background: transparent;
	color: var(--ink-70);
	font-size: 13px;
}

.uck-btn--ghost:hover {
	color: var(--accent);
}

.uck-btn--sm {
	padding: 13px 22px;
	font-size: 13px;
}

/* Disabled button (sold vehicle): greyed out, not clickable, no hover effect. */
.uck-btn[disabled],
.uck-btn[disabled]:hover,
.uck-btn[disabled]:focus,
.uck-btn[disabled]:active {
	background: var(--ink-35);
	border-color: var(--ink-35);
	color: #fff;
	cursor: not-allowed;
	box-shadow: none;
}

.uck-btn--strong {
	font-weight: 700;
	letter-spacing: 0.1em;
}

.uck-btn__icon {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.uck-chip {
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 11px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hairline-input);
	background: transparent;
	color: var(--ink-70);
	cursor: pointer;
}

.uck-chip:hover {
	border-color: var(--ink);
	color: var(--ink);
}

.uck-chip.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.uck-badge {
	position: absolute;
	top: 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	z-index: 2;
}

.uck-badge--brand {
	left: 12px;
	background: var(--ink);
	color: var(--bg);
}

.uck-badge--year {
	right: 12px;
	background: #fff;
	color: var(--ink);
	letter-spacing: 0.14em;
}

/* State badge on the vehicle page: same position as the year badge. */
.uck-badge--state {
	right: 14px;
	top: 14px;
	padding: 7px 11px;
}

.uck-badge--red {
	background: var(--accent);
	color: #fff;
}

.uck-badge--dark {
	background: var(--ink);
	color: var(--bg);
}

.uck-link-arrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

/* =========================================================================
   6. Header
   ========================================================================= */

/* Careful: no ancestor of the header may have overflow-x hidden, or
   position: sticky stops working. */
.uck-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--rule);
}

.uck-utility {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 8px var(--gutter);
	background: var(--ink);
	color: rgba(255, 255, 255, 0.72);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.uck-utility a {
	color: var(--bg);
}

.uck-utility a:hover {
	color: var(--accent-soft);
}

.uck-header__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 18px var(--gutter);
}

.uck-logo img {
	height: 48px;
	width: auto;
}

.uck-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.uck-nav a {
	color: var(--ink);
}

.uck-nav a:hover,
.uck-nav .current-menu-item > a,
.uck-nav .current_page_item > a,
.uck-nav a.is-current {
	color: var(--accent);
}

/* The call button is a button, not a menu link. Without this rule
   .uck-nav a:hover - more specific than .uck-btn--red:hover - repaints the
   label red on a red background. */
.uck-nav .uck-btn,
.uck-nav .uck-btn:hover,
.uck-nav .uck-btn:focus,
.uck-nav .uck-btn:active {
	color: #fff;
}

.uck-nav .uck-btn--red:hover,
.uck-nav .uck-btn--red:focus,
.uck-nav .uck-btn--red:active {
	background: var(--ink);
	border-color: var(--ink);
}

.uck-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
}

/* Sub-menus are flattened away; the design does not use them. */
.uck-nav .sub-menu {
	display: none;
}

/* "Fermer le menu" entry inherited from the old theme's mobile drawer. It has
   no link and no purpose here. Safe to delete under Apparence > Menus. */
.uck-nav .close-menu-mobile {
	display: none;
}

/* =========================================================================
   7. Hero (accueil)
   ========================================================================= */

.uck-hero {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--rule);
}

.uck-hero__text {
	flex: 1 1 420px;
	min-width: 0;
	padding: 56px 44px 52px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
}

.uck-hero__lede {
	font-size: 18px;
	line-height: 1.6;
	color: var(--ink-70);
	max-width: 48ch;
}

.uck-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.uck-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	padding-top: 14px;
	margin-top: 8px;
	border-top: 1px solid var(--hairline);
}

.uck-stats__value {
	font-family: var(--display);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.1;
}

.uck-stats__label {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-55);
	margin-top: 4px;
}

.uck-heroBrands {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 62px;
	overflow: hidden;
}

.uck-heroBrands__logo {
	flex: 0 1 108px;
	min-width: 0;
	display: block;
	height: 54px;
}

.uck-heroBrands__logo img {
	height: 54px;
	width: 100%;
	object-fit: contain;
	object-position: left center;
	opacity: 0.75;
	filter: grayscale(1);
	transition: var(--transition);
}

.uck-heroBrands__logo:hover img {
	opacity: 1;
	filter: grayscale(0);
}

.uck-heroBrands__more {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 17px;
	border: 1px solid rgba(20, 20, 26, 0.2);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-70);
	white-space: nowrap;
}

.uck-heroBrands__more:hover {
	border-color: var(--ink);
	color: var(--ink);
}

/* [hidden] has to win over the display: block/flex rules above. */
.uck-heroBrands__logo[hidden],
.uck-heroBrands__more[hidden] {
	display: none;
}

.uck-hero__media {
	position: relative;
	flex: 1 1 420px;
	min-width: 0;
	min-height: 520px;
	background: var(--photo-bg);
}

.uck-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================================
   8. Cartes véhicule
   ========================================================================= */

/* Flexible row: the last line stretches to fill the width, unlike an auto-fit
   grid which would leave gaps. */
.uck-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.uck-card {
	flex: 1 1 330px;
	max-width: 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--hairline);
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--ink);
}

.uck-card:hover {
	box-shadow: 0 0 0 1px var(--accent), var(--shadow-card);
	color: var(--ink);
}

.uck-card.is-hidden {
	display: none;
}

/* White to beige plate plus ground shadow, designed for cut-out PNGs. */
.uck-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(180deg, var(--plate-top) 0%, var(--plate-bottom) 100%);
	overflow: hidden;
}

.uck-card__media::before {
	content: "";
	position: absolute;
	left: 13%;
	right: 13%;
	bottom: 12%;
	height: 8%;
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, rgba(20, 20, 26, 0.3) 0%, rgba(20, 20, 26, 0) 70%);
}

.uck-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Enable once the client supplies background-removed photos. */
.uck-cutouts .uck-card__media img {
	inset: 8% 7% 12%;
	width: auto;
	height: auto;
	max-width: 86%;
	max-height: 80%;
	margin: auto;
	object-fit: contain;
}

.uck-card__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	flex: 1;
}

.uck-card__title {
	font-family: var(--display);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.uck-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 13px;
	color: var(--ink-55);
}

.uck-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding-top: 14px;
	margin-top: auto;
	border-top: 1px solid var(--hairline-soft);
}

.uck-card__price {
	font-family: var(--display);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.02em;
}

/* Upcoming-vehicle card: 16/10 media, description under the title. */
.uck-card--news {
	flex: 1 1 360px;
	max-width: none;
}

.uck-card--news .uck-card__media {
	aspect-ratio: 16 / 10;
	background: var(--photo-bg);
}

.uck-card--news .uck-card__media::before {
	content: none;
}

.uck-card--news .uck-card__title {
	font-size: 20px;
}

.uck-card--news .uck-card__body {
	gap: 10px;
	padding: 22px;
}

.uck-card__text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-55);
}

/* Already-sold thumbnails. */
.uck-sold {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding-top: 28px;
}

.uck-sold__item {
	flex: 1 1 230px;
	min-width: 0;
}

.uck-sold__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.uck-sold__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--photo-bg);
	filter: grayscale(1) contrast(1.03);
}

.uck-sold__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.uck-sold__name {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-70);
}

/* =========================================================================
   9. Filtres (accueil + page stock)
   ========================================================================= */

.uck-brandChips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 26px 0 34px;
}

.uck-filters {
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--hairline);
	border-radius: var(--radius);
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.uck-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.uck-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
}

.uck-filters__group {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.uck-filters__label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-70);
}

.uck-select {
	font-family: var(--ui);
	font-size: 14px;
	padding: 11px 14px;
	border: 1px solid var(--hairline-input);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.uck-select:hover {
	border-color: var(--ink);
}

.uck-filters__results {
	display: flex;
	align-items: center;
	gap: 16px;
}

.uck-filters__count {
	font-family: var(--display);
	font-weight: 700;
	font-size: 16px;
}

.uck-filters__reset {
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 6px 0;
}

.uck-filters__reset:hover {
	color: var(--ink);
}

.uck-empty {
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--hairline);
	border-radius: var(--radius);
	padding: 48px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	text-align: center;
}

.uck-empty[hidden] {
	display: none;
}

.uck-empty__title {
	font-family: var(--display);
	font-weight: 700;
	font-size: 22px;
}

.uck-empty__text {
	font-size: 15px;
	color: var(--ink-55);
	max-width: 46ch;
}

/* =========================================================================
   10. Marques
   ========================================================================= */

.uck-brands {
	border-top: 1px solid var(--rule);
	margin-top: 88px;
	background: var(--bg-alt);
}

.uck-brands__inner {
	padding-top: 76px;
	padding-bottom: 76px;
}

/* 1px gap plus a hairline per cell, so rules never double up. */
.uck-brandGrid {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
}

.uck-brandGrid__item {
	flex: 1 1 180px;
	min-width: 0;
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--hairline);
}

.uck-brandGrid__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 110px;
	padding: 22px;
	height: 100%;
}

.uck-brandGrid__link:hover {
	background: var(--surface-hover);
}

.uck-brandGrid__link img {
	max-height: 56px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.uck-brandGrid__name {
	font-family: var(--display);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink-70);
	text-align: center;
}

/* =========================================================================
   11. Bandes photo
   ========================================================================= */

.uck-band {
	position: relative;
	overflow: hidden;
}

.uck-band__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.uck-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 20, 26, 0.94) 0%, rgba(20, 20, 26, 0.72) 55%, rgba(20, 20, 26, 0.3) 100%);
}

.uck-band__inner {
	position: relative;
	z-index: 1;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 110px var(--gutter);
	color: var(--bg);
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.uck-band__inner > * {
	max-width: 60ch;
}

.uck-band .uck-eyebrow {
	color: var(--accent-soft);
}

.uck-band__text {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(245, 243, 240, 0.8);
}

.uck-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 6px;
}

/* Dark call-to-action band, rendered as a card. */
.uck-cta {
	background: var(--ink);
	color: var(--bg);
	border-radius: var(--radius);
	padding: 46px 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: center;
	justify-content: space-between;
}

.uck-cta__text {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.uck-cta p {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(245, 243, 240, 0.75);
}

.uck-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.uck-ctaSection {
	padding-top: 70px;
	padding-bottom: 90px;
}

/* Red "call before visiting" band. */
.uck-callFirst {
	background: var(--accent);
	color: #fff;
	border-radius: var(--radius);
	padding: 38px 34px;
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: center;
	justify-content: space-between;
}

.uck-callFirst__text {
	flex: 1 1 460px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.uck-callFirst p {
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.94);
	max-width: 70ch;
}

.uck-callFirst .uck-btn--dark:hover {
	background: var(--accent-dark);
}

/* =========================================================================
   12. Services
   ========================================================================= */

.uck-services {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
}

.uck-service {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--hairline);
	padding: 34px 30px 26px;
	color: var(--ink);
}

.uck-service:hover {
	background: var(--surface-hover);
	color: var(--ink);
}

.uck-service__num {
	font-family: var(--display);
	font-weight: 700;
	font-size: 14px;
	color: var(--accent);
	letter-spacing: 0.1em;
}

.uck-service__title {
	font-family: var(--display);
	font-weight: 600;
	font-size: 25px;
	letter-spacing: -0.01em;
}

.uck-service__text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-70);
}

.uck-service__cta {
	margin-top: auto;
	align-self: flex-end;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.uck-servicesHead {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-bottom: 44px;
}

/* =========================================================================
   13. Visite (garage / horaires / plan)
   ========================================================================= */

.uck-visit {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
}

.uck-panel {
	flex: 1 1 340px;
	min-width: 0;
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--hairline);
	padding: 44px 38px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-content: start;
}

.uck-panel--flush {
	padding: 0;
	position: relative;
	min-height: 360px;
}

.uck-panel--map iframe {
	border: 0;
	width: 100%;
	height: 100%;
	min-height: 360px;
	flex: 1;
	filter: grayscale(0.35) contrast(1.02);
}

.uck-address {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink-70);
}

.uck-contactLines {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
}

.uck-phone {
	font-family: var(--display);
	font-weight: 700;
	font-size: 28px;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.uck-phone--sm {
	font-size: 26px;
}

.uck-contactLines a:not(.uck-phone) {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	color: var(--ink-70);
}

.uck-contactLines a:not(.uck-phone):hover {
	color: var(--accent);
}

.uck-socialRow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}

.uck-socialRow .uck-btn {
	height: 50px;
	padding: 0 24px;
	border-color: var(--hairline-strong);
	background: transparent;
	font-size: 13px;
	letter-spacing: 0.1em;
}

.uck-socialRow .uck-btn:hover {
	border-color: var(--ink);
	background: rgba(20, 20, 26, 0.05);
}

.uck-iconBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius-sm);
	flex: 0 0 50px;
}

.uck-iconBtn:hover {
	border-color: var(--ink);
	background: rgba(20, 20, 26, 0.05);
}

.uck-iconBtn img {
	width: 22px;
	height: 22px;
}

.uck-hours {
	display: flex;
	flex-direction: column;
}

.uck-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--rule);
	font-size: 16px;
}

.uck-hours__day {
	color: var(--ink-55);
}

.uck-hours__value {
	font-weight: 700;
	text-align: right;
}

.uck-hours__value.is-closed {
	color: var(--ink-35);
}

.uck-callout {
	margin-top: 10px;
	background: var(--accent);
	color: #fff;
	padding: 26px;
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.uck-callout__title {
	font-family: var(--display);
	font-weight: 700;
	font-size: 23px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.uck-callout p {
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}

.uck-callout .uck-btn {
	margin-top: 6px;
	padding: 14px 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.uck-callout .uck-btn:hover {
	background: var(--accent-dark);
}

/* Sits in its own section above "Nous rendre visite". 58px + the strip's own
   30px margin keeps the 88px rhythm the other sections use. */
.uck-stripSection {
	padding-top: 58px;
}

.uck-photoStrip {
	flex: 1 1 100%;
	min-width: 0;
	margin-top: 30px;
	position: relative;
	/* 340px + 20%, so more of the photo is visible. */
	min-height: 408px;
	overflow: hidden;
	background: var(--photo-bg);
	box-shadow: 0 0 0 1px var(--hairline);
}

.uck-photoStrip img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.uck-photoStrip::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 26, 0.1) 0%, rgba(20, 20, 26, 0.82) 100%);
}

/* Brand line above the strip caption, in the accent red. */
.uck-photoStrip__brand {
	display: block;
	margin-bottom: 10px;
	font-family: var(--ui);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
}

.uck-photoStrip__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 32px;
	color: var(--bg);
	font-family: var(--display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.02em;
}

/* =========================================================================
   14. Page stock
   ========================================================================= */

.uck-pageHead {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	padding-top: 44px;
}

.uck-pageHead__title {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.uck-filtersSection {
	padding-top: 34px;
}

.uck-cardsSection {
	padding-top: 30px;
}

.uck-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 22px;
	font-size: 13px;
	color: var(--ink-55);
	letter-spacing: 0.04em;
}

.uck-breadcrumb a {
	color: var(--ink-55);
}

.uck-breadcrumb a:hover {
	color: var(--accent);
}

.uck-breadcrumb__current {
	color: var(--ink);
	font-weight: 600;
}

/* =========================================================================
   15. Fiche véhicule
   ========================================================================= */

.uck-vehicle {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	align-items: flex-start;
	padding-top: 26px;
}

.uck-gallery {
	flex: 1 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.uck-gallery__main {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--photo-bg);
}

.uck-gallery__main img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* One scrollable row rather than a wrapped grid: some vehicles carry 40+
   photos, which used to stack into ten rows of thumbnails under the gallery. */
.uck-gallery__thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
	scrollbar-width: thin;
}

/* Carousel arrows over the main photo: they are the signal that more shots
   exist, since the thumbnail strip alone is easy to miss. */
.uck-galleryNav {
	position: absolute;
	bottom: 20%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--hairline);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink);
	cursor: pointer;
	opacity: 0.5;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.uck-galleryNav:hover,
.uck-galleryNav:focus-visible {
	opacity: 1;
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.uck-galleryNav svg {
	width: 22px;
	height: 22px;
}

.uck-galleryNav--prev {
	left: 14px;
}

.uck-galleryNav--next {
	right: 14px;
}

.uck-galleryCount {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 3;
	background: rgba(20, 20, 26, 0.72);
	color: var(--bg);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 6px 12px;
	border-radius: 999px;
}

.uck-gallery__thumbItem {
	display: contents;
}

.uck-gallery__thumb {
	flex: 0 0 110px;
	scroll-snap-align: start;
	min-width: 0;
	position: relative;
	aspect-ratio: 4 / 3;
	border: 0;
	padding: 0;
	cursor: pointer;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--photo-bg);
	box-shadow: 0 0 0 1px rgba(20, 20, 26, 0.18);
	opacity: 0.72;
}

.uck-gallery__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.uck-gallery__thumb:hover {
	opacity: 1;
}

.uck-gallery__thumb.is-active {
	box-shadow: 0 0 0 2px var(--accent);
	opacity: 1;
}

.uck-aside {
	flex: 1 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
	position: sticky;
	top: var(--header-h);
}

.uck-aside__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.uck-aside__summary {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-70);
}

.uck-priceCard {
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--hairline);
	border-radius: var(--radius);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.uck-priceCard__price {
	font-family: var(--display);
	font-weight: 700;
	font-size: 38px;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.uck-priceCard__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.uck-priceCard__actions .uck-btn {
	width: 100%;
}

.uck-reassure {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding-top: 16px;
	border-top: 1px solid var(--rule);
	font-size: 14px;
	color: var(--ink-70);
}

.uck-vehicleBody {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	align-items: flex-start;
	padding-top: 64px;
}

.uck-vehicleDesc {
	flex: 1 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.uck-vehicleDesc h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: 26px;
	letter-spacing: -0.02em;
}

.uck-prose {
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-70);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.uck-prose a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
}

.uck-prose a:hover {
	color: var(--ink);
}

.uck-prose ul,
.uck-prose ol {
	padding-left: 20px;
	list-style: disc;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.uck-prose ol {
	list-style: decimal;
}

.uck-prose h2,
.uck-prose h3,
.uck-prose h4 {
	font-family: var(--display);
	color: var(--ink);
	letter-spacing: -0.02em;
}

.uck-prose h2 {
	font-size: 28px;
}

.uck-prose h3 {
	font-size: 22px;
}

.uck-prose img {
	border-radius: var(--radius);
}

.uck-tagList {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 6px;
}

.uck-tag {
	font-size: 13px;
	color: var(--ink-70);
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--hairline);
	padding: 9px 13px;
	border-radius: var(--radius-sm);
}

.uck-specCard {
	flex: 1 1 380px;
	min-width: 0;
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--hairline);
	border-radius: var(--radius);
	padding: 28px 26px;
}

.uck-specCard h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.02em;
	padding-bottom: 18px;
}

.uck-specCard__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-top: 1px solid var(--rule);
	font-size: 15px;
}

.uck-specCard__row:last-child {
	border-bottom: 1px solid var(--rule);
}

.uck-specCard__row dt {
	color: var(--ink-55);
}

.uck-specCard__row dd {
	font-weight: 600;
	text-align: right;
}

/* =========================================================================
   16. Contact
   ========================================================================= */

.uck-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	align-items: stretch;
	padding-top: 38px;
}

/* Enquiry form at the bottom of the vehicle page. */
.uck-vehicleForm {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	align-items: stretch;
	padding-top: 70px;
}

.uck-formCard {
	flex: 1 1 460px;
	min-width: 0;
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--hairline);
	border-radius: var(--radius);
	padding: 34px 32px 36px;
}

.uck-formCard__title {
	font-family: var(--display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.02em;
	margin-bottom: 18px;
}

.uck-contactSide {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.uck-contactSide .uck-panel {
	flex: 0 0 auto;
	padding: 32px 30px;
	gap: 16px;
}

.uck-contactSide .uck-panel--grow {
	flex: 1;
}

/* --- Contact Form 7 skin (the form itself stays managed in the plugin) --- */

.uck-formCard .wpcf7 form > p,
.uck-formCard .wpcf7-form > p {
	margin: 0 0 18px;
}

.uck-formCard label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-70);
	margin-bottom: 18px;
}

.uck-formCard input[type="text"],
.uck-formCard input[type="email"],
.uck-formCard input[type="tel"],
.uck-formCard input[type="url"],
.uck-formCard input[type="date"],
.uck-formCard input[type="number"],
.uck-formCard select,
.uck-formCard textarea {
	width: 100%;
	font-family: var(--ui);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	padding: 14px;
	border: 1px solid var(--hairline-input);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
}

.uck-formCard textarea {
	resize: vertical;
	min-height: 150px;
}

.uck-formCard input:focus,
.uck-formCard select:focus,
.uck-formCard textarea:focus {
	outline: none;
	border-color: var(--ink);
}

.uck-formCard input[type="checkbox"],
.uck-formCard input[type="radio"] {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	accent-color: var(--accent);
	margin-top: 3px;
}

.uck-formCard .wpcf7-list-item {
	margin: 0;
	display: block;
}

.uck-formCard .wpcf7-acceptance label,
.uck-formCard .wpcf7-checkbox label,
.uck-formCard .wpcf7-radio label {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-70);
	line-height: 1.5;
}

.uck-formCard input[type="submit"],
.uck-formCard button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: #fff;
	border: 0;
	padding: 18px 28px;
	border-radius: var(--radius-sm);
	font-family: var(--ui);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	width: auto;
}

.uck-formCard input[type="submit"]:hover,
.uck-formCard button[type="submit"]:hover {
	background: var(--accent-dark);
}

/* Le contenu du formulaire CF7 n° 209 commence par <span class="close">X</span> :
   c'était le bouton de fermeture de la modale de l'ancien thème. Le formulaire
   est désormais intégré à la page, ce X n'a plus d'objet. */
.uck-formCard .close {
	display: none;
}

.uck-formCard .wpcf7-spinner {
	margin: 0 0 0 12px;
}

.uck-formCard .wpcf7-not-valid-tip {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--accent);
	margin-top: 6px;
}

.uck-formCard .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--hairline-input);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-70);
}

.uck-formCard .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--accent);
	color: var(--ink);
}

.uck-formCard .wpcf7 form.invalid .wpcf7-response-output,
.uck-formCard .wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--accent);
	color: var(--accent);
}

.uck-callFirstSection {
	padding-top: 22px;
}

.uck-mapSection {
	padding-top: 22px;
	padding-bottom: 90px;
}

.uck-mapCard {
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--hairline);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
}

.uck-mapCard iframe {
	border: 0;
	width: 100%;
	min-height: 420px;
	filter: grayscale(0.35) contrast(1.02);
}

/* =========================================================================
   17. Pages éditoriales, recherche, 404
   ========================================================================= */

.uck-page {
	padding-top: 48px;
	padding-bottom: 90px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.uck-page__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.uck-page__head--top {
	padding-top: 48px;
}

.uck-page__lede {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink-70);
	max-width: 80ch;
}

.uck-page .uck-prose {
	max-width: 80ch;
}

/* Service page: visual left, text right. No media query needed: the two
   columns stack as soon as there is not enough room. */
.uck-split {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	align-items: flex-start;
}

.uck-split__media {
	flex: 1 1 340px;
	min-width: 0;
	margin: 0;
	position: sticky;
	top: var(--header-h);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--photo-bg);
	box-shadow: 0 0 0 1px var(--hairline);
}

.uck-split__media img {
	width: 100%;
	height: auto;
	max-height: 640px;
	object-fit: cover;
}

.uck-split__text {
	flex: 1 1 460px;
	min-width: 0;
	max-width: 80ch;
}

/* Services hub: photo to the right of the service cards. Text comes first in
   the DOM, so on mobile the columns stack cards-then-photo with no order
   juggling. The cards column keeps the larger basis so they stay readable. */
.uck-split--cards {
	align-items: stretch;
}

.uck-split--cards .uck-split__text {
	flex: 1 1 560px;
	max-width: none;
}

.uck-split--cards .uck-split__media {
	flex: 1 1 260px;
	max-height: none;
}

.uck-split--cards .uck-split__media img {
	height: auto;
	min-height: 260px;
	max-height: 320px;
	object-fit: cover;
	object-position: center;
}

/* Side by side, the photo must never be taller than the cards column. Filling
   an absolutely positioned figure ties its height to the row rather than to
   the image's own proportions - a percentage height against an auto-height
   parent falls back to the natural size, which is what made it overflow on
   wide screens. */
@media (min-width: 836px) {
	.uck-split--cards .uck-split__media {
		position: relative;
		/* Must be reset: the base rule sets top for sticky, and on a relatively
		   positioned box that same offset pushes it 132px down the page. */
		top: auto;
		align-self: stretch;
		min-height: 320px;
		max-height: none;
	}

	.uck-split--cards .uck-split__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
		max-height: none;
	}
}

/* Contact page: half-height photo. object-fit: cover crops the frame rather
   than squashing the picture. */
.uck-split--short .uck-split__media,
.uck-split--short .uck-split__media img {
	max-height: 320px;
}

.uck-split--short .uck-split__media img {
	height: 320px;
	object-fit: cover;
	object-position: center;
}

.uck-childPages {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	padding-top: 20px;
}

.uck-searchForm {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.uck-searchForm input[type="search"] {
	flex: 1 1 260px;
	min-width: 0;
	font-size: 15px;
	padding: 14px;
	border: 1px solid var(--hairline-input);
	border-radius: var(--radius-sm);
	background: var(--surface);
}

.uck-searchForm input[type="search"]:focus {
	outline: none;
	border-color: var(--ink);
}

/* =========================================================================
   18. Footer
   ========================================================================= */

.uck-footer {
	background: var(--ink);
	color: var(--on-dark-70);
	margin-top: 0;
}

.uck-footer a {
	color: var(--on-dark);
}

.uck-footer a:hover {
	color: #fff;
}

.uck-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 44px;
	padding-top: 64px;
	padding-bottom: 32px;
}

.uck-footer__col {
	flex: 1 1 220px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-content: start;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.uck-footer__col--brand {
	flex: 1 1 260px;
	gap: 18px;
	text-transform: none;
	letter-spacing: 0;
}

/* align-self indispensable : dans une colonne flex, un SVG en width:auto est
   étiré sur toute la largeur et se recentre tout seul. */
.uck-footer__logo {
	align-self: flex-start;
	height: 52px;
	width: auto;
	filter: brightness(0) invert(1);
}

.uck-footer__blurb {
	font-size: 14px;
	line-height: 1.6;
	max-width: 32ch;
}

.uck-footer__title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--on-dark-40);
}

.uck-footer__plain {
	text-transform: none;
	letter-spacing: 0.02em;
	color: var(--on-dark);
}

.uck-footer__col a {
	display: block;
}

.uck-footer__whatsapp {
	display: flex !important;
	align-items: center;
	gap: 9px;
}

.uck-footer__social {
	display: flex;
	gap: 14px;
	margin-top: 2px;
}

.uck-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	opacity: 0.72;
}

.uck-footer__social a:hover {
	opacity: 1;
}

.uck-footer__social img {
	width: 18px;
	height: 18px;
	filter: brightness(0) invert(1);
}

.uck-footer__bottom {
	border-top: 1px solid var(--on-dark-rule);
	padding-top: 22px;
	padding-bottom: 44px;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: space-between;
	font-size: 13px;
	color: var(--on-dark-45);
}

.uck-footer__bottom a {
	color: var(--on-dark-45);
}

.uck-footer__legal,
.uck-footer__legal ul {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

/* =========================================================================
   19. Divers
   ========================================================================= */

.uck-note {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 52px;
	font-size: 15px;
	color: var(--ink-55);
}

.uck-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 40px;
	justify-content: center;
}

.uck-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--hairline-input);
	border-radius: var(--radius-sm);
	background: var(--surface);
	font-size: 14px;
	font-weight: 600;
}

.uck-pagination .page-numbers.current,
.uck-pagination .page-numbers:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

/* =========================================================================
   20. Mobile adjustments
   ========================================================================= */

/* Hamburger button: hidden on large screens. */
.uck-navToggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 48px;
	height: 48px;
	padding: 0 11px;
	background: transparent;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.uck-navToggle:hover {
	border-color: var(--ink);
	background: rgba(20, 20, 26, 0.05);
}

.uck-navToggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--ink);
	transition: transform .18s ease, opacity .18s ease;
}

/* Turns into a cross while the menu is open. */
.uck-navToggle[aria-expanded="true"] .uck-navToggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.uck-navToggle[aria-expanded="true"] .uck-navToggle__bar:nth-child(2) {
	opacity: 0;
}

.uck-navToggle[aria-expanded="true"] .uck-navToggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --- Collapsible menu ---------------------------------------------------- */
@media (max-width: 835px) {

	/* The black top bar (tagline plus phone) goes away: it eats vertical space
	   while the phone number is already in the menu. The logo and menu row stays
	   pinned to the top while scrolling. */
	.uck-utility {
		display: none;
	}

	/* Solid white header: white at 96% let the ivory background bleed
	   through, which tinted the iPhone status bar slightly beige. */
	.uck-header {
		background: #ffffff;
	}

	/* Header reduced to the logo and menu row alone. */
	section[id],
	[id^="uck-"] {
		scroll-margin-top: 96px;
	}

	/* Lighter hero: the key figures and the brand logo strip add nothing on a
	   narrow screen and push the stock further down. Both blocks exist only in
	   the hero. */
	.uck-stats,
	.uck-heroBrands {
		display: none;
	}

	/* Open menu on a short screen: it scrolls instead of overflowing. */
	.uck-nav.is-open {
		max-height: calc(100vh - 96px);
		overflow-y: auto;
	}

	.uck-navToggle {
		display: flex;
		order: 2;
	}

	.uck-logo {
		order: 1;
	}

	/* The menu drops below the logo, full width. */
	.uck-nav {
		order: 3;
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding-top: 6px;
	}

	.uck-nav.is-open {
		display: flex;
	}

	.uck-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.uck-nav li {
		border-top: 1px solid var(--rule);
	}

	.uck-nav ul a {
		display: block;
		padding: 15px 2px;
	}

	.uck-nav > a:not(.uck-btn) {
		padding: 15px 2px;
		border-top: 1px solid var(--rule);
	}

	.uck-nav .uck-btn {
		margin-top: 12px;
		width: 100%;
	}

	/* Let the utility bar wrap onto two lines without cramping. */
	.uck-utility {
		gap: 6px 16px;
	}
}

/* --- "See all" link moved below the cards -------------------------------- */
@media (max-width: 835px) {

	/* display: contents promotes the title and the link to direct children of
	   the section, so they can be reordered around the cards. A browser that
	   ignores it simply keeps the original layout. */
	.uck-secLinked {
		display: flex;
		flex-direction: column;
	}

	.uck-secLinked .uck-sechead {
		display: contents;
	}

	/* The section rule follows the title. */
	.uck-secLinked .uck-sechead > .uck-h2 {
		order: 1;
		padding-bottom: 22px;
		border-bottom: 1px solid var(--hairline);
	}

	.uck-secLinked .uck-cards,
	.uck-secLinked .uck-sold {
		order: 2;
	}

	.uck-secLinked .uck-sechead__link {
		order: 3;
		align-self: flex-start;
		margin: 24px 0 0;
	}
}

/* --- Service pages: stop pinning the photo once the columns stack -------- */
@media (max-width: 835px) {

	/* Sticky only makes sense side by side. Stacked, the photo would stay
	   pinned at the top while the text scrolled underneath it. */
	.uck-split__media {
		position: static;
		max-height: 320px;
	}

	.uck-split__media img {
		max-height: 320px;
		object-position: center;
	}
}

/* --- "Nos Marques" as a horizontal carousel ------------------------------ */
@media (max-width: 830px) {
	.uck-brandGrid {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 10px;
		/* A 1px gap no longer separates cells once they scroll. */
		gap: 10px;
	}

	/* Narrow enough that the next cell is always partly visible, which is what
	   signals the row scrolls sideways. */
	.uck-brandGrid__item {
		flex: 0 0 132px;
		scroll-snap-align: start;
	}

	.uck-brandGrid__link {
		min-height: 92px;
		padding: 16px;
	}

	.uck-brandGrid__link img {
		max-height: 44px;
	}

	.uck-brandGrid__name {
		font-size: 15px;
	}
}

/* --- Section notes aligned left ------------------------------------------ */
@media (max-width: 700px) {
	.uck-sechead__note {
		text-align: left;
		margin-left: 0;
		max-width: none;
	}

	.uck-sechead__link {
		margin-left: 0;
	}

	.uck-pageHead__title,
	.uck-sechead {
		width: 100%;
	}
}

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}