/**
 * AllRoad Automobile — composants.
 *
 * N'utilise QUE des jetons définis dans tokens.css.
 * Aucune couleur, taille ou espacement en dur.
 * Écrit en mobile d'abord : les media queries ajoutent, elles ne corrigent pas.
 */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ar-ground);
	color: var(--ar-text);
	font-family: var(--ar-font);
	font-size: var(--ar-size-body);
	line-height: var(--ar-leading-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
video { max-width: 100%; display: block; height: auto; }

a { color: inherit; }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: var(--ar-weight-bold);
	letter-spacing: var(--ar-track-title);
	line-height: var(--ar-leading-tight);
	text-wrap: balance;
}

h1 { font-size: var(--ar-size-hero); }
h2 { font-size: var(--ar-size-display); }
h3 { font-size: var(--ar-size-heading); font-weight: var(--ar-weight-semi); }

p { margin: 0; }

.lede {
	color: var(--ar-text-muted);
	max-width: var(--ar-measure);
}

.icon {
	width: 1.15em;
	height: 1.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: var(--ar-z-overlay);
	padding: var(--ar-space-3) var(--ar-space-4);
	background: var(--ar-red);
	color: #FFF;
	font-weight: var(--ar-weight-semi);
}

.skip-link:focus {
	left: var(--ar-space-4);
	top: var(--ar-space-4);
}

/* ════════════════════════════════════════════════════════════
   MISE EN PAGE
   ════════════════════════════════════════════════════════════ */
.wrap {
	max-width: var(--ar-max-width);
	margin-inline: auto;
	padding-inline: var(--ar-gutter);
}

.wrap--text { max-width: calc(var(--ar-max-text) + var(--ar-gutter) * 2); }

.section { padding-block: var(--ar-section-y); }
.section--first { padding-top: clamp(32px, 6vw, 64px); }

.section__head {
	display: flex;
	flex-direction: column;
	gap: var(--ar-space-3);
	margin-bottom: var(--ar-space-6);
}

.section__more { margin-top: var(--ar-space-6); }

/* ════════════════════════════════════════════════════════════
   EN-TÊTE
   ════════════════════════════════════════════════════════════ */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--ar-z-header);
	background: rgba(10, 9, 8, 0.85);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--ar-line);
}

.site-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ar-space-5);
	min-height: var(--ar-header-h);
}

.site-header__logo { display: block; flex: 0 0 auto; }

.site-header__logo img,
.site-header__logo .custom-logo {
	height: 28px;
	width: auto;
}

@media (min-width: 768px) {
	.site-header__logo img,
	.site-header__logo .custom-logo { height: 34px; }
}

.site-nav { display: none; }

@media (min-width: 1000px) {
	.site-nav { display: block; }
}

.nav {
	display: flex;
	align-items: center;
	gap: var(--ar-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav a {
	display: block;
	padding-block: var(--ar-space-2);
	border-bottom: 1.5px solid transparent;
	color: var(--ar-text-muted);
	font-size: var(--ar-size-small);
	font-weight: var(--ar-weight-medium);
	text-decoration: none;
	transition: color var(--ar-dur-fast) var(--ar-ease),
	            border-color var(--ar-dur-fast) var(--ar-ease);
}

.nav a:hover { color: var(--ar-text); }

.nav .current-menu-item > a,
.nav a[aria-current] {
	color: var(--ar-text);
	border-color: var(--ar-red);
}

/* ── Bouton hamburger ─────────────────────────────────────── */
.burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: var(--ar-touch-min);
	height: var(--ar-touch-min);
	margin-right: calc(var(--ar-space-3) * -1);
	padding: 0 var(--ar-space-3);
	background: none;
	border: 0;
	cursor: pointer;
}

.burger i {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--ar-text);
	transition: transform var(--ar-dur-base) var(--ar-ease),
	            opacity var(--ar-dur-fast) var(--ar-ease);
}

.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 1000px) {
	.burger { display: none; }
}

/* ── Panneau de menu mobile ───────────────────────────────── */
.menu-panel {
	position: fixed;
	inset: var(--ar-header-h) 0 0;
	z-index: var(--ar-z-sheet);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--ar-space-6);
	padding: var(--ar-space-6) var(--ar-gutter) calc(var(--ar-space-7) + env(safe-area-inset-bottom));
	background: var(--ar-ground);
	overflow-y: auto;
}

.menu-panel[hidden] { display: none; }

.nav-mobile {
	display: flex;
	flex-direction: column;
	gap: var(--ar-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-mobile a {
	display: block;
	padding: var(--ar-space-4) 0;
	border-bottom: 1px solid var(--ar-line);
	color: var(--ar-text);
	font-size: 1.25rem;
	font-weight: var(--ar-weight-semi);
	letter-spacing: -0.015em;
	text-decoration: none;
	min-height: var(--ar-touch-min);
}

.nav-mobile .current-menu-item > a,
.nav-mobile a[aria-current] { color: var(--ar-red-text); }

.menu-panel__contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ar-space-2);
}

/* ════════════════════════════════════════════════════════════
   BOUTONS
   ════════════════════════════════════════════════════════════ */
.btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ar-space-3);
	align-items: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ar-space-2);
	min-height: var(--ar-touch-min);
	padding: 0 var(--ar-space-5);
	border: 1px solid transparent;
	border-radius: var(--ar-radius-sm);
	font-family: inherit;
	font-size: var(--ar-size-small);
	font-weight: var(--ar-weight-semi);
	letter-spacing: var(--ar-track-button);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ar-dur-fast) var(--ar-ease),
	            border-color var(--ar-dur-fast) var(--ar-ease);
}

.btn--primary { background: var(--ar-red); color: #FFF; }
.btn--primary:hover { background: var(--ar-red-hover); }

.btn--ghost {
	background: transparent;
	border-color: var(--ar-line-interactive);
	color: var(--ar-text);
}

.btn--ghost:hover { border-color: var(--ar-text); }

.btn--text {
	padding: 0;
	min-height: 44px;
	background: none;
	color: var(--ar-text);
	text-transform: none;
	letter-spacing: 0;
	font-weight: var(--ar-weight-medium);
}

.btn--text:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ── Barre d'action ───────────────────────────────────────── */
.actionbar {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: var(--ar-space-2);
	align-items: stretch;
}

.act {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 58px;
	min-height: 52px;
	padding: 0 var(--ar-space-3);
	border: 1px solid var(--ar-line-interactive);
	border-radius: var(--ar-radius);
	background: transparent;
	color: var(--ar-text);
	font-size: 0.5625rem;
	font-weight: var(--ar-weight-semi);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color var(--ar-dur-fast) var(--ar-ease),
	            background var(--ar-dur-fast) var(--ar-ease);
}

.act:hover { border-color: var(--ar-text); background: rgba(232, 228, 222, 0.06); }

.act .icon { width: 19px; height: 19px; }

.act--primary {
	flex-direction: row;
	gap: var(--ar-space-2);
	background: var(--ar-red);
	border-color: var(--ar-red);
	color: #FFF;
	font-size: var(--ar-size-small);
	letter-spacing: var(--ar-track-button);
	padding-inline: var(--ar-space-4);
}

.act--primary:hover { background: var(--ar-red-hover); border-color: var(--ar-red-hover); }
.act--primary .icon { width: 17px; height: 17px; stroke-width: 2.1; }

/*
 * Il n'y a qu'UNE barre d'action dans la page. Sur mobile elle quitte le
 * flux et se colle en bas de l'écran, dans la zone du pouce ; au-delà de
 * 900 px elle reprend sa place dans la colonne de droite. Même balisage
 * aux deux largeurs — jamais un second exemplaire masqué par media query.
 */
.actionbar-dock {
	position: fixed;
	inset: auto 0 0;
	z-index: var(--ar-z-header);
	padding: var(--ar-space-2) var(--ar-gutter) calc(var(--ar-space-2) + env(safe-area-inset-bottom));
	background: var(--ar-veil-bar);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--ar-line-strong);
}

.has-actionbar { padding-bottom: var(--ar-thumb-zone); }

@media (min-width: 900px) {
	.actionbar-dock {
		position: static;
		padding: 0;
		background: none;
		backdrop-filter: none;
		border-top: 0;
	}

	.has-actionbar { padding-bottom: 0; }
}

/* ════════════════════════════════════════════════════════════
   ACCUEIL — bandeau vidéo
   ════════════════════════════════════════════════════════════ */
.home-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: min(76vh, 620px);
	overflow: hidden;
}

.home-hero__media { position: absolute; inset: 0; z-index: -2; }

.home-hero__media img,
.home-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(75deg, rgba(10, 9, 8, 0.96) 4%, rgba(10, 9, 8, 0.78) 42%,
		                rgba(10, 9, 8, 0.32) 74%, rgba(10, 9, 8, 0.6) 100%),
		linear-gradient(to top, var(--ar-ground) 1%, transparent 34%);
}

.home-hero__in {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ar-space-5);
	max-width: 700px;
	padding-block: clamp(64px, 13vw, 112px) clamp(40px, 6vw, 60px);
}

.home-hero__title { font-size: var(--ar-size-hero); }

/* ════════════════════════════════════════════════════════════
   TUILE VÉHICULE — un seul composant, toutes largeurs
   ════════════════════════════════════════════════════════════ */
.tiles {
	display: grid;
	gap: var(--ar-space-4);
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ar-card);
	color: var(--ar-ink);
	border-radius: var(--ar-radius-card);
	overflow: hidden;
	box-shadow: var(--ar-shadow-card);
	transition: transform var(--ar-dur-base) var(--ar-ease),
	            box-shadow var(--ar-dur-base) var(--ar-ease);
}

.tile:hover { transform: translateY(-3px); box-shadow: var(--ar-shadow-raised); }

.tile__shot {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--ar-card-empty);
	overflow: hidden;
}

.tile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ar-dur-slow) var(--ar-ease);
}

.tile:hover .tile__img { transform: scale(1.04); }

.tile__shot--empty {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(115deg, #D4D3CF 0 22px, #CBCAC5 22px 44px);
}

.tile__price {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: var(--ar-space-2) var(--ar-space-4) 9px calc(var(--ar-tag-skew) + var(--ar-space-3));
	background: var(--ar-price-gradient);
	clip-path: polygon(var(--ar-tag-skew) 0, 100% 0, 100% 100%, 0 100%);
	color: #FFF;
	font-size: var(--ar-size-price);
	font-weight: var(--ar-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.tile__price--sold {
	background: linear-gradient(100deg, #3E3A36 0 20%, #4E4945 20% 44%,
	            #423E3A 44% 60%, #585350 60% 80%, #4E4945 80% 100%);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.pill {
	position: absolute;
	top: var(--ar-space-3);
	left: var(--ar-space-3);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px 5px 9px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--ar-radius-pill);
	background: rgba(8, 7, 6, 0.82);
	backdrop-filter: blur(6px);
	font-size: var(--ar-size-label);
	font-weight: var(--ar-weight-medium);
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.pill i { width: 6px; height: 6px; border-radius: 50%; display: block; }

.pill--ok   { color: #5BD3A0; } .pill--ok i   { background: var(--ar-available); }
.pill--res  { color: #F0A167; } .pill--res i  { background: var(--ar-reserved); }
.pill--sold { color: #B3ACA4; } .pill--sold i { background: var(--ar-sold); }

.tile__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 15px var(--ar-space-4) var(--ar-space-3);
}

.tile__name {
	margin: 0;
	font-size: var(--ar-size-subhead);
	font-weight: var(--ar-weight-semi);
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--ar-ink);
}

.tile__link { text-decoration: none; }

/* Toute la tuile est cliquable, mais le lien reste porté par le titre :
   le clavier et les lecteurs d'écran ont une cible réelle. */
.tile__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.tile__link:focus-visible { outline: none; }
.tile:has(.tile__link:focus-visible) { box-shadow: var(--ar-focus-ring); }

.tile__version {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.3em;
	font-size: var(--ar-size-small);
	line-height: 1.4;
	color: var(--ar-ink-muted);
}

.tile__specs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ar-space-2);
	margin: 0;
	padding: var(--ar-space-3) 10px;
	list-style: none;
	background: var(--ar-card-band);
	border-top: 1px solid var(--ar-card-line);
}

.tile__specs li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 0;
	text-align: center;
}

.tile__specs .icon {
	width: 19px;
	height: 19px;
	stroke: var(--ar-ink-soft);
	stroke-width: 1.6;
}

.tile__specs span {
	font-size: var(--ar-size-label);
	font-weight: var(--ar-weight-semi);
	line-height: 1.25;
	color: var(--ar-ink);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.tile__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ar-space-2);
	padding: 10px var(--ar-space-4) var(--ar-space-3);
	background: var(--ar-card-band);
}

.tile__vat,
.tile__warranty {
	font-size: 0.625rem;
	font-weight: var(--ar-weight-medium);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ar-ink-soft);
}

.tile__warranty { display: inline-flex; align-items: center; gap: 6px; }

.tile__warranty::before {
	content: '';
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	background: url('../img/mark.png') center / contain no-repeat;
}

/* ════════════════════════════════════════════════════════════
   FICHE VÉHICULE
   ════════════════════════════════════════════════════════════ */
.vehicule { padding-block: clamp(20px, 4vw, 40px) var(--ar-section-y); }

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ar-space-2);
	margin-bottom: var(--ar-space-5);
	font-size: var(--ar-size-small);
	color: var(--ar-text-muted);
}

.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--ar-text); text-decoration: underline; }

.fiche {
	display: grid;
	gap: var(--ar-space-5);
	margin-bottom: var(--ar-space-6);
}

@media (min-width: 900px) {
	.fiche {
		grid-template-columns: 1.12fr 0.88fr;
		align-items: start;
		gap: var(--ar-space-6);
	}
}

/*
 * `min-width: 0` n'est pas une précaution de principe. Un élément de
 * grille refuse par défaut de descendre sous la largeur de son contenu :
 * il suffit d'une photo illisible — le navigateur affiche alors son texte
 * de remplacement à la largeur qu'il veut — pour que la colonne pousse la
 * page entière hors de l'écran. Vécu en production avec des HEIC d'iPhone.
 */
.fiche__gallery {
	position: relative;
	min-width: 0;
}

.gallery {
	display: flex;
	gap: var(--ar-space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	border-radius: var(--ar-radius-card);
	scrollbar-width: none;
}

.gallery::-webkit-scrollbar { display: none; }

.gallery__item {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	aspect-ratio: 4 / 3;
	background: var(--ar-surface-sunken);
	border-radius: var(--ar-radius-card);
	overflow: hidden;
}

/*
 * Une photo que le navigateur n'arrive pas à décoder reste un rectangle
 * au bon format : elle laisse un trou gris, jamais un débordement.
 */
.gallery__img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	overflow: hidden;
	font-size: var(--ar-size-label);
	color: var(--ar-text-disabled);
}

/*
 * Toute la photo est cliquable — pas une petite loupe dans un coin.
 * Le lien pointe sur le fichier : sans JavaScript, la photo s'ouvre
 * quand même.
 */
.gallery__zoom {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.gallery__cue {
	position: absolute;
	top: var(--ar-space-3);
	right: var(--ar-space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-radius-pill);
	background: var(--ar-veil-badge);
	color: var(--ar-text);
	transition: border-color var(--ar-dur-fast) var(--ar-ease);
}

.gallery__cue .icon { width: 16px; height: 16px; }
.gallery__zoom:hover .gallery__cue { border-color: var(--ar-text); }

.gallery--empty {
	aspect-ratio: 4 / 3;
	background: var(--ar-surface-sunken);
	border-radius: var(--ar-radius-card);
}

.gallery__pill { position: absolute; top: var(--ar-space-3); left: var(--ar-space-3); }

.gallery__count {
	position: absolute;
	right: var(--ar-space-3);
	bottom: var(--ar-space-3);
	z-index: 2;
	padding: 4px 11px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-radius-pill);
	background: var(--ar-veil-badge);
	font-size: var(--ar-size-label);
	font-weight: var(--ar-weight-medium);
	font-variant-numeric: tabular-nums;
}

/* ── Visionneuse plein écran ──────────────────────────────────
   Ouverte par un clic sur n'importe quelle photo de la galerie.
   Le rail reprend l'idiome du site : défilement horizontal par
   accroche, pas de carrousel à flèches.
   ─────────────────────────────────────────────────────────── */
.lightbox {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ar-veil-full);
	color: var(--ar-text);
	overflow: hidden;
}

.lightbox::backdrop { background: var(--ar-veil-full); }

.lightbox[open] { display: flex; flex-direction: column; }

.lightbox__bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ar-space-3);
	padding: calc(env(safe-area-inset-top) + var(--ar-space-2)) var(--ar-gutter) var(--ar-space-2);
}

.lightbox__count {
	font-size: var(--ar-size-label);
	font-weight: var(--ar-weight-medium);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ar-text-muted);
}

.lightbox__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ar-touch-min);
	height: var(--ar-touch-min);
	border: 1px solid var(--ar-line-interactive);
	border-radius: var(--ar-radius-pill);
	background: transparent;
	color: var(--ar-text);
	cursor: pointer;
	transition: border-color var(--ar-dur-fast) var(--ar-ease);
}

.lightbox__close:hover { border-color: var(--ar-text); }
.lightbox__close .icon { width: 19px; height: 19px; }

.lightbox__track {
	flex: 1 1 auto;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior: contain;
	scrollbar-width: none;
}

.lightbox__track::-webkit-scrollbar { display: none; }

.lightbox__frame {
	flex: 0 0 100%;
	display: flex;
	scroll-snap-align: center;
	overflow: auto;             /* sert au déplacement une fois agrandie */
	overscroll-behavior: contain;
}

/*
 * `margin: auto` plutôt que `justify-content: center` : centré tant que la
 * photo tient dans le cadre, et — une fois agrandie — déplaçable jusqu'au
 * bord gauche. Un contenu centré par le conteneur, lui, devient
 * inatteignable dès qu'il déborde.
 */
.lightbox__img {
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: zoom-in;
}

/* Agrandie, la photo déborde de son cadre : c'est le cadre qui défile.
   `flex: 0 0 auto` est indispensable — sans lui, l'élément flex se laisse
   rétrécir jusqu'à la largeur du cadre et le zoom ne se voit pas. */
.lightbox__frame.is-zoomed .lightbox__img {
	flex: 0 0 auto;
	width: 200%;
	height: auto;
	max-width: none;
	max-height: none;
	cursor: zoom-out;
}

/* Tant qu'une photo est agrandie, le rail ne défile plus :
   le geste appartient au cadre, sinon on change de photo en pannant. */
.lightbox.is-zoomed .lightbox__track {
	overflow-x: hidden;
	scroll-snap-type: none;
}

.lightbox__hint {
	flex: 0 0 auto;
	padding: var(--ar-space-2) var(--ar-gutter) calc(env(safe-area-inset-bottom) + var(--ar-space-3));
	text-align: center;
	font-size: var(--ar-size-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ar-text-disabled);
}

.lightbox.is-zoomed .lightbox__hint { visibility: hidden; }

.lightbox__hint--click { display: none; }

@media (pointer: fine) {
	.lightbox__hint--touch { display: none; }
	.lightbox__hint--click { display: inline; }
}

.fiche__aside {
	display: flex;
	flex-direction: column;
	gap: var(--ar-space-3);
	min-width: 0;
}

.fiche-card {
	background: var(--ar-card);
	color: var(--ar-ink);
	border-radius: var(--ar-radius-card);
	overflow: hidden;
}

.fiche-card__head {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: var(--ar-space-4) var(--ar-space-4) var(--ar-space-3);
}

.fiche-card .tile__name { font-size: var(--ar-size-heading); }

.fiche__ref {
	font-size: var(--ar-size-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ar-text-disabled);
}

.legal-mention {
	padding: var(--ar-space-3) var(--ar-space-4);
	border-left: 2px solid var(--ar-red);
	background: var(--ar-red-wash);
	font-size: var(--ar-size-small);
	color: var(--ar-text-muted);
}

/* ── Bande de prix ────────────────────────────────────────── */
.priceband {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ar-space-3);
	padding: var(--ar-space-4) var(--ar-space-4) 15px;
	background: var(--ar-price-gradient);
	color: #FFF;
}

.priceband--sold {
	background: linear-gradient(100deg, #3E3A36 0 20%, #4E4945 20% 44%,
	            #423E3A 44% 60%, #585350 60% 80%, #4E4945 80% 100%);
}

.priceband__amount { display: flex; flex-direction: column; gap: 2px; }
.priceband__amount span { display: flex; align-items: baseline; gap: var(--ar-space-2); }

.priceband__amount b {
	font-size: 1.75rem;
	font-weight: var(--ar-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	line-height: 1;
}

.priceband__amount em {
	font-style: normal;
	font-size: var(--ar-size-label);
	font-weight: var(--ar-weight-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.priceband__amount small {
	font-size: var(--ar-size-label);
	font-weight: var(--ar-weight-medium);
	font-variant-numeric: tabular-nums;
}

.priceband__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: right;
	font-size: 0.625rem;
	font-weight: var(--ar-weight-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.55;
}

/* ── Onglets ──────────────────────────────────────────────── */
.tabs {
	display: flex;
	gap: var(--ar-space-2);
	margin-bottom: var(--ar-space-4);
	padding-bottom: var(--ar-space-1);
	overflow-x: auto;
	scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 0 var(--ar-space-5);
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-radius-pill);
	background: var(--ar-surface-elevated);
	color: var(--ar-text);
	font-family: inherit;
	font-size: var(--ar-size-small);
	font-weight: var(--ar-weight-medium);
	cursor: pointer;
	transition: background var(--ar-dur-fast) var(--ar-ease),
	            border-color var(--ar-dur-fast) var(--ar-ease);
}

.tab:hover { border-color: var(--ar-line-interactive); }

.tab[aria-selected="true"] {
	background: var(--ar-red);
	border-color: var(--ar-red);
	color: #FFF;
	font-weight: var(--ar-weight-semi);
}

.tabpanel {
	padding: var(--ar-space-5);
	background: var(--ar-card);
	color: var(--ar-ink);
	border-radius: var(--ar-radius-card);
	box-shadow: var(--ar-shadow-card);
}

.tabpanel[hidden] { display: none; }

.sheet { display: grid; gap: 0 var(--ar-space-7); margin: 0; }

@media (min-width: 640px) {
	.sheet { grid-template-columns: 1fr 1fr; }
}

.sheet div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ar-space-4);
	padding-block: var(--ar-space-3);
	border-bottom: 1px solid var(--ar-card-line);
}

.sheet dt {
	margin: 0;
	font-size: var(--ar-size-label);
	font-weight: var(--ar-weight-medium);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ar-ink-soft);
}

.sheet dd {
	margin: 0;
	font-size: var(--ar-size-small);
	font-weight: var(--ar-weight-semi);
	color: var(--ar-ink);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ar-space-2) var(--ar-space-4);
	margin: var(--ar-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.badges li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--ar-size-small);
	font-weight: var(--ar-weight-medium);
	color: var(--ar-ink);
}

.badges .icon { width: 15px; height: 15px; stroke: var(--ar-red); stroke-width: 2.4; }

.equip { display: grid; gap: 10px var(--ar-space-6); margin: 0; padding: 0; list-style: none; }

@media (min-width: 640px) {
	.equip { grid-template-columns: 1fr 1fr; }
}

.equip li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--ar-size-small);
	color: var(--ar-ink);
}

.equip li::before {
	content: '';
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-top: 3px;
	background: url('../img/mark.png') center / contain no-repeat;
}

/* ════════════════════════════════════════════════════════════
   SERVICES ET APPEL À L'ACTION
   ════════════════════════════════════════════════════════════ */
.services {
	display: grid;
	gap: var(--ar-space-4);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.service {
	display: flex;
	flex-direction: column;
	gap: var(--ar-space-3);
	align-items: flex-start;
	padding: var(--ar-space-5);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-radius-lg);
	background: var(--ar-surface-elevated);
}

.service p { color: var(--ar-text-muted); font-size: var(--ar-size-small); }

.cta-band { background: var(--ar-surface); }

.cta-band__in {
	display: flex;
	flex-direction: column;
	gap: var(--ar-space-5);
}

@media (min-width: 900px) {
	.cta-band__in {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--ar-space-7);
	}
}

/* ════════════════════════════════════════════════════════════
   CONTENU ÉDITORIAL
   ════════════════════════════════════════════════════════════ */
.prose { max-width: var(--ar-measure); color: var(--ar-text); }
.prose > * + * { margin-top: var(--ar-space-4); }
.prose h2 { margin-top: var(--ar-space-7); font-size: var(--ar-size-title); }
.prose h3 { margin-top: var(--ar-space-6); }
.prose a { color: var(--ar-text); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: var(--ar-space-5); }
.prose li + li { margin-top: var(--ar-space-2); }
.prose img { border-radius: var(--ar-radius-lg); }

.tabpanel .prose { color: var(--ar-ink-muted); }
.tabpanel .prose a { color: var(--ar-ink); }

.page-hero { margin: 0 0 var(--ar-space-6); }
.page-hero img { border-radius: var(--ar-radius-card); }

.post-list { display: flex; flex-direction: column; gap: var(--ar-space-6); }
.post-item { display: flex; flex-direction: column; gap: var(--ar-space-2); }
.post-item__title { font-size: var(--ar-size-title); }
.post-item__title a { text-decoration: none; }
.post-item__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post-item__meta { font-size: var(--ar-size-label); letter-spacing: 0.1em;
                   text-transform: uppercase; color: var(--ar-text-disabled); }
.post-item__excerpt { color: var(--ar-text-muted); max-width: var(--ar-measure); }

.empty {
	display: flex;
	flex-direction: column;
	gap: var(--ar-space-4);
	align-items: flex-start;
	padding: var(--ar-space-7) 0;
}

/* ── Pagination ───────────────────────────────────────────── */
.pagination { margin-top: var(--ar-space-7); }

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ar-space-2);
	align-items: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ar-touch-min);
	min-height: var(--ar-touch-min);
	padding: 0 var(--ar-space-3);
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-radius);
	color: var(--ar-text-muted);
	font-size: var(--ar-size-small);
	font-weight: var(--ar-weight-medium);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.page-numbers:hover { border-color: var(--ar-line-interactive); color: var(--ar-text); }

.page-numbers.current {
	background: var(--ar-red);
	border-color: var(--ar-red);
	color: #FFF;
}

/* ════════════════════════════════════════════════════════════
   PIED DE PAGE
   ════════════════════════════════════════════════════════════ */
.site-footer { margin-top: var(--ar-space-8); }

.site-footer__in {
	display: grid;
	gap: var(--ar-space-6);
	padding-block: var(--ar-space-7);
}

@media (min-width: 768px) {
	.site-footer__in { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--ar-space-7); }
}

.site-footer__brand { display: flex; flex-direction: column; gap: var(--ar-space-3); align-items: flex-start; }
.site-footer__brand img { height: 32px; width: auto; }

.site-footer__title {
	margin-bottom: var(--ar-space-3);
	font-size: var(--ar-size-label);
	font-weight: var(--ar-weight-medium);
	letter-spacing: var(--ar-track-label);
	text-transform: uppercase;
	color: var(--ar-text-muted);
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--ar-space-2);
	font-style: normal;
	font-size: var(--ar-size-small);
	color: var(--ar-text-muted);
}

.site-footer__contact a { text-decoration: none; color: var(--ar-text); }
.site-footer__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

.nav-footer,
.nav-legal {
	display: flex;
	flex-direction: column;
	gap: var(--ar-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--ar-size-small);
}

.nav-footer a,
.nav-legal a { color: var(--ar-text-muted); text-decoration: none; }
.nav-footer a:hover,
.nav-legal a:hover { color: var(--ar-text); }

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--ar-space-3);
	padding-block: var(--ar-space-5);
	border-top: 1px solid var(--ar-line);
	font-size: var(--ar-size-label);
	letter-spacing: 0.06em;
	color: var(--ar-text-disabled);
}

@media (min-width: 768px) {
	.site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
	.nav-legal { flex-direction: row; gap: var(--ar-space-4); }
}

/* ════════════════════════════════════════════════════════════
   FORMULAIRE DE REPRISE
   Cinq écrans posés sur des tuiles claires : la saisie est une
   donnée, elle vit sur le gris comme le reste des données.
   ════════════════════════════════════════════════════════════ */
.reprise { margin-top: var(--ar-space-6); }

.reprise__result {
	margin-bottom: var(--ar-space-4);
	padding: var(--ar-space-4);
	border-left: 3px solid var(--ar-line-interactive);
	background: var(--ar-surface-elevated);
	font-size: var(--ar-size-small);
}

.reprise__result--ok { border-left-color: var(--ar-available); }
.reprise__result--erreur { border-left-color: var(--ar-red); }

/* Le piège à robots : hors écran, jamais masqué par `display: none`,
   qu'un automate reconnaîtrait au premier coup d'œil. */
.reprise__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.reprise__progress {
	display: flex;
	gap: var(--ar-space-2);
	margin: 0 0 var(--ar-space-4);
	padding: 0;
	list-style: none;
}

.reprise__progress li {
	flex: 1 1 0;
	height: 3px;
	background: var(--ar-line-strong);
	border-radius: var(--ar-radius-pill);
	font-size: 0;
}

.reprise__progress li.is-current,
.reprise__progress li.is-done { background: var(--ar-red); }

.reprise__panel {
	margin: 0;
	padding: var(--ar-space-5) var(--ar-space-4);
	border: 0;
	border-radius: var(--ar-radius-card);
	background: var(--ar-card);
	color: var(--ar-ink);
}

.reprise__panel[hidden] { display: none; }
.reprise__panel + .reprise__panel { margin-top: var(--ar-space-4); }

/*
 * Un <legend> est rendu à cheval sur la bordure du <fieldset> : sans ce
 * flottement, le titre de l'écran se retrouve à moitié hors de la tuile.
 * `float` est le seul moyen fiable de le ramener dans le flux, tous
 * navigateurs confondus.
 */
.reprise__legend {
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: var(--ar-space-4);
}

.reprise__legend .reprise__count,
.reprise__legend .reprise__title { display: block; }

.reprise__aide,
.reprise__grid { clear: both; }

.reprise__count {
	font-size: var(--ar-size-label);
	font-weight: var(--ar-weight-medium);
	letter-spacing: var(--ar-track-label);
	text-transform: uppercase;
	color: var(--ar-ink-soft);
}

.reprise__title {
	font-size: var(--ar-size-heading);
	font-weight: var(--ar-weight-semi);
	letter-spacing: -0.018em;
}

.reprise__aide {
	margin-bottom: var(--ar-space-4);
	color: var(--ar-ink-muted);
	font-size: var(--ar-size-small);
	line-height: 1.5;
}

.reprise__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ar-space-4);
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--ar-space-2);
	margin: 0;
}

.field label {
	font-size: var(--ar-size-label);
	font-weight: var(--ar-weight-medium);
	letter-spacing: var(--ar-track-label);
	text-transform: uppercase;
	color: var(--ar-ink-soft);
}

.field__unit { text-transform: none; letter-spacing: 0; }
.req { color: var(--ar-red); }

.field__help {
	font-size: var(--ar-size-small);
	color: var(--ar-ink-muted);
}

/* 16 px au minimum : en dessous, iOS zoome à la mise au point et le
   formulaire se retrouve à moitié hors écran. */
.reprise input[type='text'],
.reprise input[type='tel'],
.reprise input[type='email'],
.reprise input[type='number'],
.reprise select,
.reprise textarea {
	width: 100%;
	min-height: 52px;
	padding: var(--ar-space-3);
	border: 1px solid var(--ar-card-line-interactive);
	border-radius: var(--ar-radius);
	background: #FFF;
	color: var(--ar-ink);
	font-family: inherit;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	appearance: none;
}

.reprise textarea { min-height: 110px; line-height: 1.5; resize: vertical; }

.reprise select {
	background-image: linear-gradient(45deg, transparent 50%, var(--ar-ink-soft) 50%),
	                  linear-gradient(135deg, var(--ar-ink-soft) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: var(--ar-space-8);
}

.reprise input:focus-visible,
.reprise select:focus-visible,
.reprise textarea:focus-visible {
	outline: none;
	border-color: var(--ar-ink);
	box-shadow: var(--ar-focus-ring-light);
}

.reprise input[type='file'] {
	padding: var(--ar-space-3);
	border: 1px dashed var(--ar-card-line-interactive);
	border-radius: var(--ar-radius);
	background: var(--ar-card-band);
	font-family: inherit;
	font-size: var(--ar-size-small);
	color: var(--ar-ink);
}

.field__preview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ar-space-2);
}

.field__preview img {
	width: 72px;
	height: 54px;
	object-fit: cover;
	border-radius: var(--ar-radius-sm);
}

.check {
	display: flex;
	align-items: flex-start;
	gap: var(--ar-space-3);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--ar-size-small);
	color: var(--ar-ink);
	cursor: pointer;
}

.check input {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	accent-color: var(--ar-red);
}

.field--consent label { text-transform: none; letter-spacing: 0; color: var(--ar-ink); }

.reprise__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ar-space-3);
	margin-top: var(--ar-space-4);
}

.reprise__nav .btn { flex: 1 1 auto; }
.reprise__nav [hidden] { display: none; }

.reprise__rgpd {
	margin-top: var(--ar-space-4);
	font-size: var(--ar-size-label);
	line-height: 1.6;
	color: var(--ar-text-disabled);
}

@media (min-width: 700px) {
	.reprise__panel { padding: var(--ar-space-6); }
	.reprise__grid { grid-template-columns: 1fr 1fr; }
	.field--wide { grid-column: 1 / -1; }
	.reprise__nav .btn { flex: 0 0 auto; }
	.reprise__nav [data-reprise-next],
	.reprise__nav [data-reprise-submit] { margin-left: auto; }
}

/* ════════════════════════════════════════════════════════════
   FAVORIS
   Le cœur est une action : il passe au rouge une fois posé.
   Vide, il reste gris — rien ne doit rivaliser avec le prix.
   ════════════════════════════════════════════════════════════ */
.fav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ar-space-2);
	border: 1px solid var(--ar-line-interactive);
	background: var(--ar-veil-badge);
	color: var(--ar-text);
	font-family: inherit;
	cursor: pointer;
	transition: color var(--ar-dur-fast) var(--ar-ease),
	            border-color var(--ar-dur-fast) var(--ar-ease);
}

.fav[hidden] { display: none; }
.fav .icon { width: 19px; height: 19px; }
.fav.is-on .icon { fill: currentColor; }
.fav.is-on { color: var(--ar-red-text); border-color: var(--ar-red-text); }

/* Sur la tuile : au-dessus du lien qui couvre toute la surface. */
.fav--tile {
	position: absolute;
	top: var(--ar-space-3);
	right: var(--ar-space-3);
	z-index: 4;
	width: var(--ar-touch-min);
	height: var(--ar-touch-min);
	border-radius: var(--ar-radius-pill);
}

.fav--tile .fav__on,
.fav--tile .fav__off {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Sur la fiche : un bouton texte, sous la barre d'action. */
.fav--text {
	align-self: flex-start;
	min-height: var(--ar-touch-min);
	padding: 0 var(--ar-space-4);
	border-radius: var(--ar-radius);
	background: transparent;
	font-size: var(--ar-size-small);
	font-weight: var(--ar-weight-semi);
	letter-spacing: var(--ar-track-button);
	text-transform: uppercase;
}

.fav--text .fav__on { display: none; }
.fav--text.is-on .fav__on { display: inline; }
.fav--text.is-on .fav__off { display: none; }

.favoris__vide {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ar-space-4);
	max-width: var(--ar-measure);
	color: var(--ar-text-muted);
}

.favoris__vide[hidden] { display: none; }
.tile[hidden] { display: none; }
[data-favoris-grid][hidden] { display: none; }

/* ════════════════════════════════════════════════════════════
   ALERTES NOUVEAUX VÉHICULES
   ════════════════════════════════════════════════════════════ */
.alerte {
	padding: var(--ar-space-6) var(--ar-space-5);
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-radius-card);
	background: var(--ar-surface);
}

.alerte__intro { margin-bottom: var(--ar-space-5); }
.alerte__intro h2 { font-size: var(--ar-size-title); }
.alerte__intro .lede { margin-top: var(--ar-space-3); font-size: var(--ar-size-small); }

.alerte__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ar-space-4);
}

/* Sur fond sombre, les libellés reprennent la palette claire. */
.alerte__form label { color: var(--ar-text-muted); }

.alerte__form input[type='email'],
.alerte__form select {
	width: 100%;
	min-height: 52px;
	padding: var(--ar-space-3);
	border: 1px solid var(--ar-line-interactive);
	border-radius: var(--ar-radius);
	background: var(--ar-surface-elevated);
	color: var(--ar-text);
	font-family: inherit;
	font-size: 1rem;
	appearance: none;
}

.alerte__form select {
	background-image: linear-gradient(45deg, transparent 50%, var(--ar-text-muted) 50%),
	                  linear-gradient(135deg, var(--ar-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: var(--ar-space-8);
}

.alerte__form input:focus-visible,
.alerte__form select:focus-visible {
	outline: none;
	border-color: var(--ar-text);
	box-shadow: var(--ar-focus-ring);
}

.alerte__submit { margin: 0; }
.alerte__submit .btn { width: 100%; }
.alerte .reprise__rgpd { grid-column: 1 / -1; margin-top: 0; }

@media (min-width: 700px) {
	.alerte__form { grid-template-columns: 1fr 1fr; align-items: end; }
	.alerte__submit { grid-column: 1 / -1; }
	.alerte__submit .btn { width: auto; }
}