/* =========================================================
   Polmar Theme — Design tokens (charte validée)
   Ne jamais hardcoder une couleur/police en dehors de ces variables.
   Traitement visuel : SaaS moderne (grands radius, glass, dégradés doux).
   ========================================================= */
:root {
	--navy: #0F314C;
	--navy-dark: #0C2030;
	--dark: #0C2030;
	--navy-mid: #104366;
	--pink: #C17FB5;
	--pink-dark: #A5629A;
	--pink-light: #E7CBE2;
	--white: #FFFFFF;
	--g50: #F5F7FA;
	--g100: #E8EDF4;
	--g200: #CBD5E1;
	--g400: #8FA3B8;
	--g600: #4A6070;
	--text: #1A2D3D;

	--ff: 'General Sans', -apple-system, sans-serif;
	--ff-cond: 'General Sans', -apple-system, sans-serif;
	--fc: var(--ff-cond);
	--ff-num: 'General Sans', sans-serif;

	--radius: 14px;
	--radius-lg: 24px;
	--radius-xl: 32px;
	--radius-pill: 100px;
	--shadow-sm: 0 2px 10px rgba(15,49,76,.07);
	--shadow-md: 0 12px 32px rgba(15,49,76,.12);
	--shadow-lg: 0 24px 70px rgba(15,49,76,.18);
	--shadow-pink: 0 16px 40px rgba(193,127,181,.35);
	--transition: .25s cubic-bezier(.4,0,.2,1);
	--container: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }

body {
	margin: 0;
	font-family: var(--ff);
	font-size: 16px;
	font-weight: 500;
	color: var(--text);
	background: var(--white);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'kern' 1, 'liga' 1;
	/* Le tiroir de nav mobile (position:fixed, translate:100% hors-écran à
	   droite) débordait horizontalement et rognait tout le contenu sur mobile.
	   overflow-x:clip coupe ce débordement SANS créer de conteneur de
	   défilement (contrairement à hidden), donc le header sticky reste intact. */
	overflow-x: clip;
}

body.nav-open { overflow: hidden; }

/* General Sans : grotesque au caractère plus marqué que Geist, tracking
   négatif sur les grands corps — rendu "display" plus premium/distinctif. */
h1, h2, h3, .kicker {
	font-family: var(--ff-cond);
	color: var(--navy);
	margin: 0 0 .45em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.2rem, 3.6vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
}
h2 {
	font-size: clamp(1.7rem, 2.4vw, 2.2rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
}
h3 {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}

p { margin: 0 0 1em; color: var(--g600); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

/* Kicker = pill badge, façon SaaS, plutôt qu'un simple label souligné.
   Reste en Montserrat (police texte) : en Barlow Condensed tout en majuscules
   à cette taille, les lettres se collaient les unes aux autres. */
/* Kicker = petit sur-titre rose précédé d'un trait (façon staging), PAS une
   pastille pleine (les pastilles roses pleines rendaient mal). Trait + texte
   en majuscules espacées. Rose soutenu sur fond clair pour un bon contraste. */
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ff);
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pink-dark);
	background: none;
	padding: 0;
	margin-bottom: 18px;
}
.kicker::before {
	content: '';
	width: 26px;
	height: 2px;
	background: var(--pink);
	flex-shrink: 0;
}
/* Sur les section-head centrées, le trait + texte reste centré comme un bloc. */
.section-head .kicker { justify-content: center; }

.section-head { max-width: 620px; margin: 0 auto 36px; text-align: center; }
.section-head p { color: var(--g600); font-size: 1.05rem; line-height: 1.65; }

/* Gros chiffres (stats, badges) : traitement à part, chiffres tabulaires,
   poids fort, tracking légèrement resserré pour un effet "métrique SaaS". */
.stat-figure {
	font-family: var(--ff-num);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	line-height: 1;
}

/* =========================================================
   Boutons
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: .95rem;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
	white-space: nowrap;
}
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-mid); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--white { background: var(--white); color: var(--navy); }
.btn--white:hover { background: var(--g50); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ow { background: transparent; color: var(--navy); border-color: var(--g200); }
.btn--ow:hover { border-color: var(--navy); transform: translateY(-2px); }
.btn--on { background: rgba(255,255,255,.06); color: var(--white); border-color: rgba(255,255,255,.35); }
.btn--on:hover { border-color: var(--white); background: rgba(255,255,255,.12); transform: translateY(-2px); }
.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--pink); border-color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-pink); }
.btn--sm { padding: 11px 22px; font-size: .85rem; }
.btn:active { transform: scale(.96); }

/* =========================================================
   Header — flottant, façon app SaaS
   ========================================================= */
/* position:sticky établit déjà un bloc de positionnement pour les
   descendants absolus : le méga-menu (plus bas) s'ancre donc ici, centré
   sous le header entier — jamais sous le lien survolé lui-même, ce qui le
   ferait déborder de l'écran pour les items proches des bords. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	border-bottom: 3px solid var(--pink);
	transition: box-shadow var(--transition);
}
/* Le flou verre dépoli est isolé sur un pseudo-élément : un backdrop-filter
   posé directement sur .site-header créerait un containing block qui piège
   le tiroir mobile (position: fixed) dans la hauteur du header au lieu du
   plein écran. */
.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(15,49,76,.08); }

/* =========================================================
   Barre d'annonce dynamique (sous la barre rose du header)
   Rendu par inc/annonce-bar.php, pilotée depuis le Personnalisateur.
   Placée après le header sticky : elle défile avec la page (comportement
   habituel des bandeaux e-commerce) et réapparaît en haut de page.
   ========================================================= */
.annonce-bar {
	background: var(--navy);
	color: var(--white);
	font-size: .84rem;
}
.annonce-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 9px clamp(16px, 3vw, 52px);
	text-align: center;
}
.annonce-bar__message { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.annonce-bar__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	padding: 4px 12px;
	background: rgba(255,255,255,.12);
	border-radius: var(--radius-pill);
	color: var(--white);
	font-weight: 800;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	transition: background-color var(--transition), transform var(--transition);
}
.annonce-bar__link:hover { background: var(--pink); transform: translateY(-1px); }
.annonce-bar__link svg { transition: transform var(--transition); }
.annonce-bar__link:hover svg { transform: translateX(2px); }

/* Mobile : le message peut être long, on autorise le retour à la ligne et on
   resserre. Le lien reste sur sa propre ligne pour rester tapable. */
@media (max-width: 640px) {
	.annonce-bar__inner { flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
	.annonce-bar { font-size: .8rem; }
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* Header non contraint au conteneur 1280 : sinon gros vide à gauche du logo
	   sur écran large. On garde une marge latérale confortable et symétrique. */
	max-width: none;
	padding: 17px clamp(24px, 3.2vw, 52px);
	transition: padding var(--transition);
}
.is-scrolled .site-header__inner { padding: 12px clamp(24px, 3.2vw, 52px); }

.site-header__logo {
	display: flex;
	align-items: center;
	margin-right: 16px;
	flex-shrink: 0;
}
/* Logo à une échelle proche de la nav. On le remonte légèrement (translateY
   négatif) : à l'œil il paraissait trop bas par rapport au centre de la nav
   (retour Maxime), le centre mathématique ne suffisait pas ici. */
.site-header__logo img { display: block; height: 42px; width: auto; transform: translateY(-1px); transition: height var(--transition); }
.is-scrolled .site-header__logo img { height: 36px; }

.primary-nav { position: relative; display: flex; gap: 1px; list-style: none; margin: 0; padding: 6px; background: var(--g50); border-radius: var(--radius-pill); }
.primary-nav > li { position: relative; }
.primary-nav > li > a {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	--nav-pad-x: 15px;
	padding: 11px var(--nav-pad-x);
	font-weight: 700;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
	border-radius: var(--radius-pill);
	transition: color .25s ease;
}
.primary-nav > li > a:hover { color: var(--navy); }

/* Barre rose au survol : bord à bord avec le padding du lien, donc elle épouse
   toute la largeur du libellé quel que soit son nombre de caractères. */
.primary-nav > li > a::after {
	content: '';
	position: absolute;
	left: var(--nav-pad-x);
	right: var(--nav-pad-x);
	bottom: 4px;
	height: 2px;
	background: var(--pink);
	border-radius: 2px;
	transform: scaleX(0);
	transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.primary-nav > li > a:hover::after { transform: scaleX(1); }

/* Petit chevron sur les items dépliables, qui pivote à l'ouverture */
.primary-nav > li.has-mega-marques > a::before,
.primary-nav > li.has-mega-villes > a::before,
.primary-nav > li.menu-item-has-children > a::before {
	content: '';
	order: 2;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
	flex-shrink: 0;
}
.primary-nav > li.has-mega-marques:hover > a::before, .primary-nav > li.has-mega-marques:focus-within > a::before,
.primary-nav > li.has-mega-villes:hover > a::before, .primary-nav > li.has-mega-villes:focus-within > a::before,
.primary-nav > li.menu-item-has-children:hover > a::before, .primary-nav > li.menu-item-has-children:focus-within > a::before {
	transform: rotate(225deg) translateY(2px);
}

/* Par défaut le panneau se centre sous son item. Mais pour les items proches
   des bords de la nav, centrer déborderait de l'écran et donnerait
   l'impression d'un menu "mal centré" : on bascule alors sur un ancrage par
   le bord (gauche pour le premier item, droit pour le dernier avec enfants),
   qui reste visuellement rattaché au lien sans jamais sortir du viewport. */
.mega-grid {
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	transform: translateX(-50%) scale(.97);
	transform-origin: top center;
	opacity: 0;
	visibility: hidden;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	background: var(--white);
	box-shadow: var(--shadow-lg);
	border-radius: var(--radius-lg);
	padding: 26px;
	min-width: 560px;
	list-style: none;
	margin: 0;
	transition: opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1), visibility .28s;
	border: 1px solid var(--g100);
}
.primary-nav > li:first-child .mega-grid { left: 0; transform: translateY(0) scale(.97); transform-origin: top left; }
.primary-nav > li:first-child:hover .mega-grid { transform: none; }
.primary-nav > li:last-of-type .mega-grid,
.primary-nav > li:nth-last-child(2) .mega-grid { left: auto; right: 0; transform: translateY(0) scale(.97); transform-origin: top right; }
.primary-nav > li:last-of-type:hover .mega-grid,
.primary-nav > li:nth-last-child(2):hover .mega-grid { transform: none; }
.primary-nav > li:hover .mega-grid { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }
.mega-grid li a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 8px;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: .88rem;
	text-align: center;
	background: var(--g50);
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.mega-grid li a:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }

/* =========================================================
   Méga-panneaux pleine largeur (Véhicules neufs / Nos établissements)
   Affichés via :has() — pas de JS nécessaire : le panneau s'ouvre quand
   son item déclencheur (has-mega-marques / has-mega-villes) est survolé
   ou reçoit le focus clavier, où qu'il soit dans le header.
   ========================================================= */
/* Carte flottante centrée et contenue (plutôt qu'un bandeau pleine largeur
   qui paraissait trop imposant). transform:translateX(-50%) centre la carte ;
   la propriété translate (indépendante) porte la micro-animation d'entrée. */
.mega-panel {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	width: min(880px, calc(100vw - 40px));
	background: var(--white);
	border: 1px solid var(--g100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	translate: 0 -6px;
	transition: opacity .2s ease, translate .2s ease, visibility .2s;
	z-index: 150;
	padding: 22px 24px;
}
/* Pont invisible qui comble l'espace entre le header et le panneau : sans lui,
   la souris traverse un vide en descendant et le survol se perd (menu qui se
   ferme). Le pont fait partie du panneau, donc le survoler = survoler le
   panneau, ce qui le maintient ouvert. */
.mega-panel::before {
	content: '';
	position: absolute;
	top: -16px;
	left: 0;
	right: 0;
	height: 16px;
}
/* Le contenu (et non le panneau lui-même) porte le plafond de hauteur + le
   défilement interne : sur les écrans peu hauts, la colonne la plus longue
   (Caen, 14 concessions) dépassait le bas de l'écran sans moyen d'y accéder.
   On scrolle ici, pas sur .mega-panel, pour que le pont ::before (top:-16px,
   qu'un overflow clipperait) reste hors zone de défilement et garde le survol. */
.mega-panel > .container {
	max-width: none;
	padding: 0;
	max-height: calc(100vh - 170px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* Panneau visible quand on survole son item déclencheur OU le panneau
   lui-même (ce dernier permet de naviguer dedans sans qu'il se ferme). */
.site-header:has(.has-mega-marques:hover, .has-mega-marques:focus-within) .mega-panel--marques,
.site-header:has(.has-mega-villes:hover, .has-mega-villes:focus-within) .mega-panel--villes,
.mega-panel--marques:hover,
.mega-panel--villes:hover,
.mega-panel--marques:focus-within,
.mega-panel--villes:focus-within {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
}

.mega-panel__kicker {
	font-family: var(--ff);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pink-dark);
	margin: 0 0 10px;
}
.mega-panel__divider { height: 1px; background: var(--g100); margin-bottom: 14px; }

.mega-brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mega-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--g50);
	border-radius: var(--radius);
	transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.mega-brand:hover { background: var(--pink-light); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.mega-brand__label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ff-cond);
	font-weight: 700;
	font-size: .86rem;
	letter-spacing: .01em;
	color: var(--navy);
}
.mega-brand__badge {
	font-family: var(--ff);
	font-size: .6rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--pink-dark);
	background: var(--pink-light);
	padding: 2px 7px;
	border-radius: var(--radius-pill);
}

.mega-panel__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--g100);
	font-size: .8rem;
	color: var(--g400);
}
.mega-panel__foot--right { justify-content: flex-end; }
.mega-panel__foot a { font-weight: 800; color: var(--pink-dark); text-transform: uppercase; font-size: .76rem; letter-spacing: .03em; }
.mega-panel__foot a:hover { color: var(--pink); }

/* Colonnes des villes : flux CSS multi-colonnes, chaque ville reste groupée
   d'un seul bloc (break-inside: avoid) — les grandes villes (Caen, 14
   concessions) occupent naturellement toute une colonne, les petites se
   répartissent dans les colonnes suivantes. */
.mega-villes__columns { column-count: 3; column-gap: 32px; }
.mega-ville-group { break-inside: avoid; margin-bottom: 16px; }
.mega-ville-group__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ff);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--navy);
	margin: 0 0 6px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--pink);
}
.mega-ville-group__title svg { color: var(--pink-dark); flex-shrink: 0; }
.mega-ville-group ul { list-style: none; margin: 0; padding: 0; }
.mega-ville-group li { margin-bottom: 5px; }
.mega-ville-group a { font-size: .82rem; color: var(--g600); }
.mega-ville-group a:hover { color: var(--pink-dark); }

@media (max-width: 1240px) {
	.mega-panel { display: none; }
}

.site-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Croix de fermeture du tiroir mobile : masquée par défaut, elle n'apparaît
   que dans le tiroir plein écran sous 1240px (voir media query plus bas). */
.nav-close { display: none; }

.hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	transition: transform var(--transition);
}
.hamburger:active { transform: scale(.96); }
.hamburger span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease; margin: 0 auto; }
/* Les 3 barres convergent en croix : décalage vertical = hauteur d'une barre (2px) + le gap (5px) */
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Écrans moyens (laptops standards) : la nav complète tient encore mais on
   resserre pour ne pas écraser le logo ni le CTA. */
@media (max-width: 1420px) {
	.site-header__inner { gap: 10px; padding: 14px 18px; }
	.site-header__logo { margin-right: 4px; }
	.site-header__logo img { height: 38px; }
	.primary-nav > li > a { --nav-pad-x: 11px; padding: 10px var(--nav-pad-x); font-size: .75rem; letter-spacing: .01em; }
	.site-header__actions .btn--primary { padding: 11px 17px; }
}

/* En dessous de 1240px : menu plein écran au clic sur le burger. Le header
   complet (logo + 6 libellés français en majuscules + CTA) mesure ~1225px
   même compressé par le palier 1420px : en dessous, le CTA se faisait
   rogner à droite. */
@media (max-width: 1240px) {
	.primary-nav {
		position: fixed;
		inset: 0;
		top: 0;
		flex-direction: column;
		align-items: stretch;
		background: var(--white);
		padding: 96px 20px 40px;
		gap: 4px;
		border-radius: 0;
		translate: 100% 0;
		transition: translate .32s cubic-bezier(.4,0,.2,1);
		overflow-y: auto;
	}
	.primary-nav.is-open { translate: 0 0; }
	/* Croix de fermeture, injectée en tête du tiroir par main.js. Placée dans la
	   zone de padding haut (96px) du tiroir, alignée à droite. */
	.nav-close {
		position: absolute;
		top: 20px;
		right: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: var(--g50);
		border: none;
		border-radius: 50%;
		color: var(--navy);
		cursor: pointer;
		transition: background-color var(--transition), transform var(--transition);
	}
	.nav-close:hover { background: var(--pink-light); color: var(--pink-dark); }
	.nav-close:active { transform: scale(.94); }
	.primary-nav > li { position: static; width: 100%; }
	.primary-nav > li > a { padding: 16px; font-size: 1rem; border-radius: var(--radius); justify-content: flex-start; }
	.primary-nav > li > a::after { display: none; }
	.mega-grid { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; grid-template-columns: repeat(2, 1fr); min-width: 0; display: none; border: none; padding: 8px 8px 16px; background: transparent; }
	.primary-nav > li.is-expanded .mega-grid { display: grid; }
	/* Sur mobile, "Véhicules neufs" et "Nos établissements" n'ont plus de
	   sous-menu (remplacé par les méga-panels desktop) : ils naviguent
	   directement. Le chevron laisserait croire à tort qu'ils se déplient. */
	.primary-nav > li.has-mega-marques > a::before,
	.primary-nav > li.has-mega-villes > a::before { display: none; }
	.hamburger { display: flex; }
	/* Tiroir ouvert : on masque le burger. Sinon le burger (qui s'anime aussi
	   en croix) et la croix de fermeture du tiroir se superposaient en haut à
	   droite — double croix. On ne garde que la croix dédiée du tiroir. */
	body.nav-open .hamburger { display: none; }
}

/* Très petits écrans : le CTA garde son icône mais perd son libellé pour
   laisser de la place au logo et au burger. */
@media (max-width: 460px) {
	.site-header__inner { padding: 10px 16px; }
	.site-header__actions .btn--primary { padding: 11px; }
	.site-header__actions .btn--primary span,
	.site-header__cta-label { display: none; }
}

/* =========================================================
   Hero — photo plein cadre + recherche intégrée + stats animées
   (inspiré de la home réelle staging.groupe-polmar.fr)
   ========================================================= */
.hero {
	position: relative;
	color: var(--white);
	min-height: min(76vh, 680px);
	display: flex;
	align-items: center;
	padding: 116px 0 64px;
	overflow: hidden;
	isolation: isolate;
	/* Léger zoom lent de la photo de fond : donne de la vie au hero sans
	   bouger le contenu (l'image est portée par ::before, pas par .hero). */
	background: var(--navy-dark);
}
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--hero-photo, var(--navy)) center/cover no-repeat;
	transform: scale(1.06);
	animation: heroZoom 18s ease-out forwards;
}
.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Overlay plus cinématographique : halo rosé en haut à droite (rappel de
	   l'accent de marque), assombrissement directionnel, fondu vers le navy en
	   bas pour une jonction invisible avec la section suivante. */
	background:
		radial-gradient(52% 46% at 82% 6%, rgba(193,127,181,.32) 0%, transparent 62%),
		linear-gradient(180deg, rgba(10,25,38,.48) 0%, rgba(10,25,38,.68) 52%, var(--navy-dark) 100%),
		linear-gradient(90deg, rgba(10,25,38,.55) 0%, transparent 46%, rgba(10,25,38,.32) 100%);
}
/* Trame de points discrète, cohérente avec le bandeau des pages internes */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
.hero__center { position: relative; width: 100%; max-width: 820px; margin: 0 auto; text-align: center; }

@keyframes heroZoom {
	to { transform: scale(1); }
}

/* Entrée en cascade au chargement : chaque bloc monte de 14px en se révélant,
   ease-out marqué, avec un léger décalage successif. Réservé aux appareils
   sans préférence "reduced motion" (motion sickness). */
@media (prefers-reduced-motion: no-preference) {
	.hero__center > * {
		animation: heroRise .8s cubic-bezier(.23,1,.32,1) backwards;
	}
	.hero__center > .kicker      { animation-delay: .05s; }
	.hero__center > h1           { animation-delay: .14s; }
	.hero__center > .lead        { animation-delay: .24s; }
	.hero__center > .hero-search { animation-delay: .34s; }
	.hero__center > .hero__ctas  { animation-delay: .44s; }
	.hero__center > .hero__stats { animation-delay: .54s; }
	/* Le trait sous l'accent s'étire une fois le titre en place */
	.hero h1 .text-accent::after {
		animation: heroUnderline .85s cubic-bezier(.23,1,.32,1) .5s backwards;
	}
}
@keyframes heroRise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
@keyframes heroUnderline {
	from { transform: scaleX(0); opacity: 0; }
	to   { transform: scaleX(1); opacity: 1; }
}
/* Sur fond sombre (hero photo, sections navy, bandeau RH) : texte rose clair
   (pop sur le sombre) + trait rose, toujours sans pastille pleine. */
.kicker--light { color: var(--pink); background: none; backdrop-filter: none; padding: 0; }
/* Tiret symétrique après le texte (ex : "...Depuis 2009 —"), même gabarit que le ::before */
.kicker--light::after { content: ''; width: 26px; height: 2px; background: var(--pink); flex-shrink: 0; }
.hero .kicker { color: var(--pink); justify-content: center; font-size: .8rem; letter-spacing: .16em; }
.hero h1 {
	color: var(--white);
	font-size: clamp(2.5rem, 4.4vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -.025em;
	margin: 0 0 .3em;
	text-shadow: 0 2px 30px rgba(10,25,38,.4);
}
/* Accent rose souligné d'un trait dégradé : plus "signé" qu'une simple
   couleur, sans alourdir. Le trait s'étire à l'entrée du hero. */
.hero h1 .text-accent {
	color: var(--pink);
	position: relative;
	white-space: nowrap;
}
.hero h1 .text-accent::after {
	content: '';
	position: absolute;
	left: .02em;
	right: .02em;
	bottom: .04em;
	height: 5px;
	border-radius: 5px;
	background: linear-gradient(90deg, var(--pink) 0%, rgba(193,127,181,.25) 100%);
	transform-origin: left center;
}
.hero p.lead { color: var(--g100); font-size: clamp(1.1rem, 1.8vw, 1.3rem); max-width: 580px; margin: 0 auto; }

/* Recherche intégrée au hero, en carte glass */
.hero-search {
	display: flex;
	align-items: end;
	gap: 12px;
	flex-wrap: wrap;
	background: rgba(255,255,255,.1);
	backdrop-filter: blur(20px) saturate(1.2);
	-webkit-backdrop-filter: blur(20px) saturate(1.2);
	/* Double filet : bord clair en haut (lumière) + ombre portée profonde,
	   pour un verre dépoli qui a du relief plutôt qu'un simple rectangle. */
	border: 1px solid rgba(255,255,255,.22);
	border-radius: var(--radius-lg);
	padding: 16px;
	margin: 44px auto 24px;
	max-width: 720px;
	box-shadow: 0 24px 70px rgba(10,25,38,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.hero-search__field { flex: 1 1 130px; text-align: left; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-search__field label { font-size: .74rem; font-weight: 700; color: var(--g100); padding-left: 4px; }
.hero-search__field select,
.hero-search__field input {
	appearance: none;
	width: 100%;
	font-family: var(--ff);
	font-size: .88rem;
	font-weight: 600;
	color: var(--navy);
	background: var(--white);
	border: 1px solid transparent;
	border-radius: var(--radius);
	padding: 13px 32px 13px 14px;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: var(--transition);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234A6070' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.hero-search__field input { cursor: text; background-image: none; padding: 13px 14px; }
.hero-search__field input::placeholder { color: var(--g400); font-weight: 500; }
.hero-search__field select:hover, .hero-search__field select:focus,
.hero-search__field input:hover, .hero-search__field input:focus { outline: none; box-shadow: 0 0 0 3px rgba(193,127,181,.4); }

/* Variante claire (sur fond blanc/gris, hors hero photo) */
.hero-search--light {
	background: var(--g50);
	border: 1px solid var(--g100);
	box-shadow: var(--shadow-sm);
	backdrop-filter: none;
}
.hero-search--light .hero-search__field label { color: var(--g600); }
.hero-search__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius);
	background: var(--navy);
	color: var(--white);
	cursor: pointer;
	transition: var(--transition);
}
.hero-search__submit:hover { background: var(--pink); border-color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-pink); }

.hero__count { font-size: .9rem; color: var(--g100); margin-bottom: 36px; }
.hero__count strong { color: var(--white); font-weight: 800; }
.hero__count a { color: var(--pink); font-weight: 700; margin-left: 6px; }
.hero__count a:hover { text-decoration: underline; }

.hero__ctas--center { justify-content: center; margin: 28px 0 44px; }
.btn--pink { background: var(--pink); color: var(--white); }
.btn--pink:hover { background: var(--pink-dark); transform: translateY(-2px); box-shadow: var(--shadow-pink); }

.hero__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 640px;
	margin: 0 auto;
	border-top: 1px solid rgba(255,255,255,.15);
	padding-top: 32px;
}
/* Séparateurs verticaux fins entre les chiffres (sauf le premier) pour un
   rendu "tableau de bord" plus soigné qu'une simple rangée espacée. */
.hero__stat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero__stat + .hero__stat::before {
	content: '';
	position: absolute;
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 34px;
	background: rgba(255,255,255,.14);
}
.hero__stat .stat-figure { font-size: clamp(2rem, 3vw, 2.6rem); color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hero__stat span { font-size: .78rem; color: var(--g100); letter-spacing: .01em; }

@media (max-width: 700px) {
	.hero-search { flex-direction: column; align-items: stretch; }
	/* En colonne, flex-basis:180px devient une HAUTEUR : chaque champ était
	   étiré à 180px de haut d'où d'énormes vides entre eux. On les remet à
	   la hauteur de leur contenu. */
	.hero-search__field { flex: 0 0 auto; }
	.hero-search__submit { width: 100%; justify-content: center; }
	.hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* Sections restantes utilisant l'ancienne mise en page hero (image + texte
   côte à côte), ex. bloc "Depuis 2009" plus bas dans la page. */
.hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
/* Bloc "Notre histoire" : texte centré (kicker/titre/paragraphes/CTA) plutôt
   qu'aligné à gauche, à la demande de Maxime. */
/* Paragraphes du bloc "Notre histoire" justifiés (texte aligné des deux
   côtés) plutôt que le drapeau irrégulier par défaut — demande explicite de
   Maxime, uniquement sur ces deux paragraphes (pas le kicker/titre/CTA). */
.hero__text--justify { text-align: justify; text-justify: inter-word; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 44px; }

.hero__visual {
	position: relative;
	aspect-ratio: 4/5;
	border-radius: var(--radius-xl);
	/* Voile très léger seulement : la photo est une vraie façade du groupe
	   (récupérée du live), elle doit rester bien visible. */
	background:
		linear-gradient(155deg, rgba(193,127,181,.12), rgba(16,67,102,.22)),
		var(--hero-photo, linear-gradient(135deg, var(--pink) 0%, var(--navy-mid) 100%)) center/cover;
	box-shadow: var(--shadow-lg);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	padding-bottom: 36px;
}
.hero__visual::after {
	content: '';
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: calc(var(--radius-xl) - 6px);
}
.hero__visual-badge {
	background: rgba(255,255,255,.16);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,.32);
	border-radius: var(--radius-lg);
	padding: 24px 32px;
	text-align: center;
	box-shadow: 0 20px 50px rgba(0,0,0,.2);
}
.hero__visual-badge strong { display: block; font-family: var(--ff-cond); font-size: 2.8rem; color: var(--white); }
.hero__visual-badge span { color: var(--g100); font-size: .85rem; }

@media (max-width: 960px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { aspect-ratio: 16/9; }
}

/* =========================================================
   Moteur de recherche VO — carte flottante à cheval sur le hero
   ========================================================= */
.vo-search-wrap {
	position: relative;
	z-index: 20;
	margin-top: -48px;
}
.vo-search {
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 22px 24px;
	display: flex;
	align-items: end;
	gap: 16px;
	flex-wrap: wrap;
}
.vo-search__field {
	flex: 1 1 180px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.vo-search__field label {
	font-size: .78rem;
	font-weight: 700;
	color: var(--g600);
	padding-left: 4px;
}
.vo-search__field select {
	appearance: none;
	font-family: var(--ff);
	font-size: .95rem;
	font-weight: 600;
	color: var(--navy);
	background: var(--g50);
	border: 1px solid var(--g100);
	border-radius: var(--radius);
	padding: 14px 40px 14px 16px;
	cursor: pointer;
	transition: var(--transition);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234A6070' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}
.vo-search__field select:hover,
.vo-search__field select:focus {
	background-color: var(--white);
	border-color: var(--pink);
	outline: none;
}
.vo-search__submit { flex: 0 0 auto; padding: 14px 30px; }

@media (max-width: 800px) {
	.vo-search { flex-direction: column; align-items: stretch; }
	.vo-search__submit { width: 100%; }
	.vo-search-wrap { margin-top: -32px; }
}

/* =========================================================
   Sections génériques
   ========================================================= */
.section { position: relative; padding: 52px 0; }
.section--alt {
	position: relative;
	background:
		radial-gradient(circle, var(--g200) 1.2px, transparent 1.2px),
		var(--g50);
	background-size: 28px 28px, auto;
}

/* Formes décoratives floutées, posées en fond de section pour casser le plat */
.blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
	opacity: .55;
}
.blob--pink { background: radial-gradient(circle, var(--pink) 0%, transparent 70%); }
.blob--navy { background: radial-gradient(circle, var(--navy-mid) 0%, transparent 70%); }
.section > .container { position: relative; z-index: 1; }
.section--navy {
	background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
	color: var(--white);
	border-radius: var(--radius-xl);
	margin: 0 24px;
	width: auto;
	padding: 60px;
}
.section--navy .container { max-width: var(--container); margin: 0 auto; padding: 0; }
.section--navy h2 { color: var(--white); }
/* Le kicker (fond rose pâle) et le bouton primary (fond navy) sont pensés
   pour un fond blanc : sur une section navy, les deux se fondaient dans le
   fond et devenaient illisibles. On reprend le traitement clair déjà validé
   pour le hero. */
.section--navy .kicker { background: none; color: var(--pink); padding: 0; }
.section--navy .btn--primary { background: var(--white); color: var(--navy); }
.section--navy .btn--primary:hover { background: var(--pink); color: var(--white); border-color: var(--white); }
.section--navy p { color: var(--g100); }

.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 24px;
}

.intent-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 36px 30px;
	transition: var(--transition);
	border: 1px solid var(--g100);
}
/* Les cartes d'une rangée sont à hauteur égale (grille) : on pousse le lien
   en bas pour que tous les « Lire l'article → » / « Découvrir → » s'alignent,
   quelle que soit la longueur du titre ou de la description. */
.intent-card__link { margin-top: auto; }
.intent-card:hover { box-shadow: var(--shadow-md); transform: translateY(-6px); border-color: transparent; }
.intent-card__icon {
	width: 56px; height: 56px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--g50), var(--g100));
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 22px;
	color: var(--navy);
	transition: var(--transition);
}
.intent-card:hover .intent-card__icon { background: linear-gradient(135deg, var(--pink), var(--pink-dark)); color: var(--white); }
.intent-card h3 { margin-bottom: 8px; }
.intent-card p { font-size: .93rem; margin-bottom: 18px; }
.intent-card__link { font-weight: 700; font-size: .88rem; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.intent-card:hover .intent-card__link { color: var(--pink-dark); }

/* Marques — bento cards */
/* Flex centré plutôt que grid : avec 13 marques la dernière rangée est
   incomplète, on la centre au lieu de laisser une tuile orpheline à gauche. */
.brands-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}
.brand-tile {
	flex: 0 0 calc((100% - 5 * 16px) / 6);
	aspect-ratio: 3/2;
	background: var(--white);
	border: 1px solid var(--g100);
	border-radius: var(--radius);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--ff-cond);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--g600);
	transition: var(--transition);
	text-align: center;
	padding: 20px;
}
.brand-tile:hover { border-color: transparent; background: var(--g50); box-shadow: var(--shadow-md); transform: translateY(-4px) scale(1.02); }
/* Logos affichés dans leurs couleurs d'origine (plus de filtre noir) */
.brand-tile img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Bandeau de logos en défilement infini (trust bar façon SaaS) */
.marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
	display: flex;
	gap: 56px;
	width: max-content;
	animation: marquee-scroll 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
	font-family: var(--ff-cond);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--g400);
	white-space: nowrap;
	transition: var(--transition);
}
.marquee__item:hover { color: var(--navy); }
@keyframes marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; }
}

/* Cartes d'expertise numérotées */
.intent-card__num {
	position: absolute;
	top: 20px;
	right: 24px;
	font-family: var(--ff-cond);
	font-weight: 800;
	font-size: 2.2rem;
	color: var(--g100);
	line-height: 1;
	z-index: 0;
}
.intent-card { position: relative; overflow: hidden; }
.intent-card > * { position: relative; z-index: 1; }
@media (max-width: 960px) { .brand-tile { flex-basis: calc((100% - 2 * 16px) / 3); } }

/* Villes */
.cities-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.city-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4/3;
	background:
		linear-gradient(190deg, rgba(12,32,48,.15) 30%, rgba(12,32,48,.92) 100%),
		var(--city-photo, linear-gradient(155deg, var(--navy-mid), var(--navy-dark))) center/cover;
	display: flex;
	align-items: flex-end;
	padding: 26px;
	color: var(--white);
	transition: var(--transition);
}
.city-card::before {
	content: '';
	position: absolute;
	top: -30%; right: -20%;
	width: 70%; height: 70%;
	background: radial-gradient(circle, rgba(193,127,181,.35), transparent 70%);
	transition: var(--transition);
}
.city-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.city-card:hover::before { transform: scale(1.2); }
.city-card h3 { color: var(--white); margin: 0; position: relative; }
.city-card span { font-size: .82rem; color: var(--g100); position: relative; }
@media (max-width: 800px) { .cities-grid { grid-template-columns: 1fr 1fr; } }

/* CTA bandeau */
.cta-banner {
	position: relative;
	background: linear-gradient(120deg, var(--pink) 0%, var(--pink-dark) 45%, var(--navy-mid) 100%);
	border-radius: var(--radius-xl);
	padding: 64px;
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	overflow: hidden;
	box-shadow: var(--shadow-pink);
}
.cta-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 55%);
}
.cta-banner > * { position: relative; }
.cta-banner h2 { color: var(--white); margin: 0 0 8px; }
.cta-banner p { color: rgba(255,255,255,.88); margin: 0; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
	background: var(--navy-dark);
	color: var(--g100);
	padding: 64px 0 28px;
	margin-top: 32px;
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 40px;
}
/* min-width:0 : sans lui, une colonne au contenu large (bloc marque) force sa
   piste au-delà de la part 1fr et fait déborder la grille de ~18px sur mobile
   (scroll horizontal parasite sur tout le site). */
.site-footer__grid > * { min-width: 0; }
.site-footer__logo { height: 32px; width: auto; margin-bottom: 18px; }
.site-footer p { color: var(--g400); font-size: .9rem; }
.site-footer h4 {
	color: var(--white);
	font-family: var(--ff-cond);
	font-size: 1.05rem;
	letter-spacing: .02em;
	margin-bottom: 20px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 11px; font-size: .92rem; }
.site-footer a:hover { color: var(--pink); }
.site-footer__socials { display: flex; gap: 12px; margin-top: 22px; }
.site-footer__socials a {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: var(--g100);
	display: flex; align-items: center; justify-content: center;
	transition: var(--transition);
}
.site-footer__socials a svg { width: 18px; height: 18px; }
.site-footer__socials a:hover { background: var(--pink); color: var(--white); transform: translateY(-3px); }

.site-footer__bottom {
	margin-top: 60px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.08);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: .82rem;
	color: var(--g400);
}
.site-footer__bottom a:hover { color: var(--pink); }

@media (max-width: 800px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
	.section--navy { padding: 48px 28px; margin: 0 16px; }
	.section { padding: 48px 0; }
	.section-head { margin-bottom: 32px; }
	.site-footer { padding: 48px 0 24px; }
}

@media (max-width: 500px) {
	.site-footer__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* =========================================================
   Catalogue VO (fallback si le plugin polmar-vehicules
   n'a pas encore de données à afficher)
   ========================================================= */
.vo-empty {
	text-align: center;
	padding: 56px;
	border: 2px dashed var(--g200);
	border-radius: var(--radius-lg);
	color: var(--g400);
	background: var(--g50);
}
.vo-empty a { color: var(--pink-dark); font-weight: 700; }

/* =========================================================
   Grille des vignettes VO utilisées par [pmvo_derniers]
   (le plugin ne stylait que .vo-grid de la page catalogue,
   pas .pmvo-grid utilisé ici — d'où l'affichage en 1 colonne).
   ========================================================= */
.pmvo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (max-width: 1200px) { .pmvo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .pmvo-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 560px)  { .pmvo-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Carrousel Occasion (homepage) : 4 fiches visibles, le reste défile
   horizontalement via les flèches. On transforme la grille en une rangée
   scrollable avec accroche (scroll-snap).
   ========================================================= */
.vo-carousel { position: relative; }
.vo-carousel .pmvo-grid--home {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * 20px) / 4);
	grid-template-columns: none;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.vo-carousel .pmvo-grid--home::-webkit-scrollbar { display: none; }
.vo-carousel .pmvo-grid--home > li { scroll-snap-align: start; }

.vo-carousel__arrow {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: var(--navy);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-md);
	transition: var(--transition);
	z-index: 3;
}
.vo-carousel__arrow:hover { background: var(--pink); transform: translateY(-50%) scale(1.06); }
.vo-carousel__arrow--prev { left: -20px; }
.vo-carousel__arrow--next { right: -20px; }
.vo-carousel__arrow[hidden] { display: none; }

@media (max-width: 1200px) { .vo-carousel .pmvo-grid--home { grid-auto-columns: calc((100% - 2 * 20px) / 3); } }
@media (max-width: 900px)  { .vo-carousel .pmvo-grid--home { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; } }
@media (max-width: 560px)  { .vo-carousel .pmvo-grid--home { grid-auto-columns: 82%; } .vo-carousel__arrow { display: none; } }

/* =========================================================
   Bannières offres constructeurs (home) : le visuel est fourni tel quel
   par la marque, on ne fait que le présenter dans un carrousel 1 slide à
   la fois (contrairement au carrousel VO qui montre plusieurs cartes).
   ========================================================= */
.offers-banner-section { padding-top: 0; }
.offers-banner { position: relative; }
.offers-banner__viewport { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.offers-banner__track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.offers-banner__slide { flex: 0 0 100%; min-width: 0; }
.offers-banner__slide a, .offers-banner__slide img { display: block; width: 100%; }
/* Format bandeau constant : les visuels fournis par les constructeurs ont des
   dimensions très variables (carré, portrait…). Sans hauteur imposée, une
   image verticale occupait tout l'écran. On recadre au centre. */
.offers-banner__slide img {
	height: clamp(170px, 24vw, 320px);
	object-fit: cover;
	object-position: center;
}

.offers-banner__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--navy);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-md);
	transition: var(--transition);
}
.offers-banner__arrow:hover { background: var(--pink); transform: translateY(-50%) scale(1.06); }
.offers-banner__arrow--prev { left: 16px; }
.offers-banner__arrow--next { right: 16px; }

.offers-banner__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.offers-banner__dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: none; background: var(--g200); cursor: pointer; transition: var(--transition); }
.offers-banner__dot.is-active { background: var(--pink); width: 22px; border-radius: 4px; }

@media (max-width: 700px) { .offers-banner__arrow { width: 36px; height: 36px; } }

/* Ville affichée sur la vignette (ajoutée dans card-vehicule.php) */
.vo-card__ville {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--g600);
}
.vo-card__ville svg { width: 12px; height: 12px; flex-shrink: 0; }

/* =========================================================
   Hub concessions (regroupement par ville)
   ========================================================= */
.ville-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.ville-nav__pill {
	font-size: .85rem;
	font-weight: 700;
	color: var(--white);
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.35);
	border-radius: var(--radius-pill);
	padding: 8px 18px;
	transition: var(--transition);
}
.ville-nav__pill:hover { background: rgba(255,255,255,.12); border-color: var(--white); transform: translateY(-2px); }
.ville-nav__pill.is-active {
	color: var(--navy);
	background: var(--white);
	border-color: var(--white);
}

/* Filtre par marque, sous la navigation par ville (fond navy du page-header) */
.marque-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.marque-nav__pill {
	font-size: .78rem;
	font-weight: 600;
	color: rgba(255,255,255,.72);
	background: transparent;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: var(--radius-pill);
	padding: 6px 14px;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.marque-nav__pill:hover { color: var(--white); border-color: rgba(255,255,255,.55); }
.marque-nav__pill.is-active {
	color: var(--navy);
	background: var(--white);
	border-color: var(--white);
	font-weight: 700;
}

.ville-group { margin-bottom: 56px; scroll-margin-top: 100px; }
.ville-group:last-child { margin-bottom: 0; }
/* center et non baseline : le compteur est une pilule, sa boîte débordait sous
   la ligne de base du titre et donnait l'impression de pendre. */
.ville-group__head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
.ville-group__head h2 { margin: 0; scroll-margin-top: 100px; line-height: 1.1; }
.ville-group__count {
	font-size: .85rem;
	font-weight: 700;
	color: var(--g400);
	background: var(--g50);
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	line-height: 1.2;
	white-space: nowrap;
	/* compense le débord optique des jambages du titre */
	transform: translateY(1px);
}

/* Grille centrée : une dernière rangée incomplète ne reste pas collée à
   gauche (cf. les 2 fiches Volkswagen de Caen sur 4 colonnes). */
.concession-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.concession-cards > .concession-card { flex: 0 1 calc((100% - 60px) / 4); max-width: calc((100% - 60px) / 4); }
.concession-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--g100); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); }
/* le corps pousse pour que toutes les cartes d'une rangée finissent pareil */
.concession-card__body { flex: 1 1 auto; }
.concession-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.concession-card__img { aspect-ratio: 4/3; background: var(--g100); overflow: hidden; }
.concession-card__img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.concession-card:hover .concession-card__img img { transform: scale(1.05); }
.concession-card__body { padding: 16px 18px 18px; }
.concession-card__body h3 { margin: 0 0 8px; font-size: 1rem; }
.concession-card__adresse, .concession-card__tel { display: flex; align-items: flex-start; gap: 6px; font-size: .82rem; color: var(--g400); margin: 0; line-height: 1.35; }
.concession-card__adresse + .concession-card__tel { margin-top: 5px; }
.concession-card__adresse svg, .concession-card__tel svg { flex-shrink: 0; margin-top: 2px; color: var(--pink-dark); }
@media (max-width: 1100px) { .concession-cards > .concession-card { flex-basis: calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); } }
@media (max-width: 800px)  { .concession-cards > .concession-card { flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); } }
@media (max-width: 520px)  { .concession-cards > .concession-card { flex-basis: 100%; max-width: 100%; } }

/* =========================================================
   Fiche concession (colonne centrée, contact en pied de page)
   ========================================================= */
.concession-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.concession-photo { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 28px; box-shadow: var(--shadow-md); }
.concession-photo img { width: 100%; height: 320px; object-fit: cover; }

/* Stock VO de la concession (cartes rendues par polmar-vehicules) */
.concession-stock__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.concession-stock__head h2 { margin: 0; }
.concession-stock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1024px) { .concession-stock { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .concession-stock { grid-template-columns: 1fr; } }

/* Carrousel photos de la fiche concession (défilement natif scroll-snap +
   flèches + puces). Fonctionne sans JS (scroll tactile) ; le JS ajoute les
   flèches et la synchro des puces. */
.concession-gallery { position: relative; margin-bottom: 28px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.concession-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.concession-gallery__track::-webkit-scrollbar { display: none; }
.concession-gallery__slide { flex: 0 0 100%; scroll-snap-align: center; }
.concession-gallery__slide img { display: block; width: 100%; height: 380px; object-fit: cover; }

.concession-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.92);
	color: var(--navy);
	border: none;
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: background-color .18s ease, opacity .18s ease;
	z-index: 2;
}
.concession-gallery__arrow:hover { background: var(--white); }
.concession-gallery__arrow[hidden] { display: none; }
.concession-gallery__arrow--prev { left: 14px; }
.concession-gallery__arrow--next { right: 14px; }

.concession-gallery__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 2;
}
.concession-gallery__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,.55);
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}
.concession-gallery__dot.is-active { background: var(--white); transform: scale(1.3); }

@media (max-width: 560px) {
	.concession-gallery__slide img { height: 260px; }
	.concession-gallery__arrow { width: 38px; height: 38px; }
}
.concession-horaires { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.concession-horaires__bloc { background: var(--g50); border: 1px solid var(--g100); border-radius: var(--radius-lg); padding: 20px 24px; }
.concession-horaires__bloc h3 { margin: 0 0 12px; font-size: 1rem; }
.concession-horaires__bloc ul { list-style: none; margin: 0; padding: 0; }
.concession-horaires__bloc li { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--g600); padding: 7px 0; border-top: 1px solid var(--g100); }
.concession-horaires__bloc li:first-child { border-top: none; }
.concession-horaires__bloc li span:first-child { font-weight: 600; color: var(--navy); }
@media (max-width: 640px) { .concession-horaires { grid-template-columns: 1fr; } }

/* Bloc marque distribuée (logo + lien site constructeur) */
.concession-brand {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	background: var(--g50);
	border: 1px solid var(--g100);
	border-radius: var(--radius-lg);
	padding: 20px 24px;
	margin: 28px 0 8px;
}
.concession-brand__logo { width: 90px; height: 54px; object-fit: contain; flex-shrink: 0; }
.concession-brand__body { flex: 1; min-width: 120px; }
.concession-brand__body h3 { margin: 2px 0 0; font-size: 1.3rem; }
.concession-brand__kicker { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pink-dark); }
@media (max-width: 560px) { .concession-brand .btn { width: 100%; justify-content: center; } }

/* Carte Google intégrée */
.concession-map { margin-top: 16px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--g100); line-height: 0; }
.concession-map iframe { display: block; width: 100%; }

/* Autres concessions de la ville (maillage interne) */
.concession-siblings { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.concession-sibling {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--white);
	border: 1px solid var(--g200);
	border-radius: var(--radius-pill);
	font-size: .9rem;
	font-weight: 600;
	color: var(--navy);
	transition: var(--transition);
}
.concession-sibling:hover { border-color: var(--pink); color: var(--pink-dark); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.concession-sibling svg { color: var(--pink); transition: transform .2s ease; }
.concession-sibling:hover svg { transform: translateX(3px); }

/* =========================================================
   Frise historique (page Le Groupe) — scroll horizontal, pur CSS
   ========================================================= */
/* Boutons de sélection d'année au-dessus de la frise */
.timeline-years {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 28px;
}
.timeline-years__pill {
	font-family: var(--ff-num);
	font-weight: 700;
	font-size: .85rem;
	color: var(--navy);
	background: var(--g50);
	border: 1px solid var(--g100);
	border-radius: var(--radius-pill);
	padding: 6px 15px;
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.timeline-years__pill:hover { border-color: var(--pink); color: var(--pink-dark); }
.timeline-years__pill.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); }

.timeline-scroll {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 4px max(24px, calc((100% - var(--container)) / 2 + 24px)) 12px;
}
.timeline-scroll::-webkit-scrollbar { display: none; }
.timeline-card {
	flex: 0 0 300px;
	scroll-snap-align: start;
	background: var(--white);
	border: 1px solid var(--g100);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.timeline-card__img { aspect-ratio: 4/3; background: var(--g100); overflow: hidden; }
.timeline-card__img img { width: 100%; height: 100%; object-fit: cover; }
.timeline-card__body { padding: 20px 22px; }
.timeline-card__annee {
	display: inline-block;
	font-family: var(--ff-num);
	font-weight: 800;
	font-size: .82rem;
	letter-spacing: .04em;
	color: var(--pink-dark);
	background: var(--pink-light);
	border-radius: var(--radius-pill);
	padding: 3px 12px;
	margin-bottom: 10px;
}
.timeline-card__body h3 { font-size: 1.02rem; margin: 0 0 8px; }
.timeline-card__body p { font-size: .88rem; margin: 0; }
@media (max-width: 640px) { .timeline-card { flex-basis: 78%; } }

/* Liste des métiers (page Le Groupe) */
.metiers-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0 0 0;
	padding: 0;
	max-width: 760px;
	margin: 0 auto;
}
.metiers-list li {
	font-size: .85rem;
	font-weight: 600;
	color: var(--navy);
	background: var(--white);
	border: 1px solid var(--g100);
	border-radius: var(--radius-pill);
	padding: 8px 18px;
}

/* =========================================================
   Actualités (blog minimaliste)
   ========================================================= */
/* ── Blog : filtre par thème ── */
.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 auto 36px; max-width: 900px; }
.blog-filter__pill {
	font-size: .82rem;
	font-weight: 600;
	color: var(--g600);
	background: var(--white);
	border: 1px solid var(--g100);
	border-radius: var(--radius-pill);
	padding: 8px 16px;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.blog-filter__pill:hover { color: var(--navy); border-color: var(--g200); }
.blog-filter__pill.is-active { color: var(--white); background: var(--navy); border-color: var(--navy); font-weight: 700; }

/* ── Badge thème + méta (date · temps de lecture) ── */
.blog-badge {
	display: inline-flex;
	align-items: center;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pink-dark);
	background: rgba(193,127,181,.12);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}
.blog-badge--overlay {
	position: absolute;
	top: 12px;
	left: 12px;
	color: var(--white);
	background: rgba(15,49,76,.82);
	backdrop-filter: blur(4px);
}
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.blog-card__date, .blog-card__read { font-size: .78rem; font-weight: 600; color: var(--g400); }
.blog-card__read { position: relative; padding-left: 16px; }
.blog-card__read::before { content: '·'; position: absolute; left: 5px; }

/* ── Article à la une ── */
.blog-featured {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 0;
	background: var(--white);
	border: 1px solid var(--g100);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 40px;
	transition: var(--transition);
}
.blog-featured:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.blog-featured__img { position: relative; min-height: 340px; overflow: hidden; }
.blog-featured__img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.blog-featured:hover .blog-featured__img img { transform: scale(1.04); }
.blog-featured__body { display: flex; flex-direction: column; align-items: flex-start; padding: 36px 40px; }
.blog-featured__flag {
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pink-dark);
	margin-bottom: 14px;
}
.blog-featured__body h2 { font-size: clamp(1.4rem, 2vw, 1.9rem); margin: 0 0 12px; }
.blog-featured__body p { color: var(--g600); font-size: 1rem; line-height: 1.6; margin: 0 0 20px; }
.blog-featured__body .intent-card__link { margin-top: auto; }
@media (max-width: 820px) {
	.blog-featured { grid-template-columns: 1fr; }
	.blog-featured__img { min-height: 220px; }
	.blog-featured__body { padding: 26px 24px; }
}

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card { background: var(--white); border: 1px solid var(--g100); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; }
/* Cartes à hauteur égale dans la grille : le corps s'étire et le lien va en
   bas, pour aligner les « Lire l'article → » quelle que soit la hauteur du
   titre (1 à 3 lignes). */
.news-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.news-card__body .intent-card__link { margin-top: auto; }
/* Cartes blog de l'accueil (.intent-card.news-card) : restaure le flex column
   de .intent-card que le `display:block` ci-dessus écrasait, pour que les
   « Lire l'article → » s'alignent en bas malgré des titres de longueurs
   différentes. Spécificité 2 classes > la règle .news-card seule. */
.intent-card.news-card { display: flex; }
.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.news-card__img { position: relative; aspect-ratio: 16/10; background: var(--g100); overflow: hidden; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.news-card:hover .news-card__img img { transform: scale(1.05); }
/* Repli de marque quand l'article n'a pas d'image à la une : dégradé navy→rose
   + logo centré, plutôt qu'un cadre gris vide. */
.news-card__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 55%, var(--pink-dark) 140%);
}
.news-card__img--placeholder .news-card__logo {
	width: 52%;
	height: auto;
	max-height: 46%;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .92;
	transition: var(--transition);
}
.news-card:hover .news-card__img--placeholder .news-card__logo { transform: scale(1.05); }
.news-card__body { padding: 22px; }
.news-card__date { font-size: .78rem; font-weight: 700; color: var(--pink-dark); text-transform: uppercase; letter-spacing: .04em; }
.news-card__body h3 { margin: 10px 0 12px; font-size: 1.1rem; }
@media (max-width: 960px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.pagination__gap { color: var(--g400); padding: 0 2px; font-weight: 700; }
.pagination__page, .pagination__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	border-radius: var(--radius-pill);
	font-size: .9rem;
	font-weight: 700;
	color: var(--g600);
	background: var(--white);
	border: 1px solid var(--g100);
	transition: var(--transition);
}
.pagination__page:hover, .pagination__arrow:hover { border-color: var(--pink); color: var(--pink-dark); }
.pagination__page.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
/* =========================================================
   Carte de formulaire générique (RDV, alerte comme neuves...)
   ========================================================= */
.form-card {
	max-width: 760px;
	margin: 0 auto;
	background: var(--white);
	border: 1px solid var(--g100);
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-lg);
	padding: 40px;
}
.form-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-card__grid .form-field--full { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field label { font-size: .85rem; font-weight: 700; color: var(--navy); }
.form-field input,
.form-field select,
.form-field textarea {
	font-family: var(--ff);
	font-size: .95rem;
	color: var(--text);
	background: var(--g50);
	border: 1px solid var(--g100);
	border-radius: var(--radius);
	padding: 13px 16px;
	transition: var(--transition);
	resize: vertical;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--pink); background: var(--white); box-shadow: 0 0 0 3px rgba(193,127,181,.15); }
.form-field input[type="file"] { background: var(--white); padding: 10px; }
.form-card__submit { margin-top: 8px; width: 100%; justify-content: center; padding: 16px; font-size: 1rem; }
.form-card .rdv-choice-grid { margin-bottom: 28px; }
.form-card .form-card__grid + .form-card__grid { margin-top: 20px; }
/* Champs après-vente : affichés uniquement quand ce choix est coché, sans JS (cf. méga-menus) */
.concession-atelier-fields { display: none; margin-bottom: 20px; }
.lead-form:has(#conc-type-atelier:checked) .concession-atelier-fields { display: block; }

/* Retour d'envoi des formulaires branchés sur polmar-leads */
.lead-form__feedback { margin-top: 14px; font-size: .88rem; font-weight: 600; text-align: center; min-height: 1.2em; }
.lead-form__feedback--success { color: #2E8B57; }
.lead-form__feedback--error { color: var(--pink-dark); }
/* Mêmes états pour le formulaire de contact des fiches véhicule (plugin VO),
   désormais raccordé au canal leads par le même handler JS. */
.pm-form__feedback--success { color: #2E8B57; }
.pm-form__feedback--error { color: var(--pink-dark); }

@media (max-width: 640px) {
	.form-card { padding: 28px 20px; }
	.form-card__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Formulaire "Prendre rendez-vous" : sélection visuelle,
   étapes, RGPD, honeypot anti-spam
   ========================================================= */
.rdv-form {
	max-width: 820px;
	margin: 0 auto;
	background: var(--white);
	border: 1px solid var(--g100);
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-lg);
	padding: 44px;
}
.rdv-step { margin-bottom: 40px; }
.rdv-step:last-of-type { margin-bottom: 24px; }
.rdv-step__label { font-family: var(--ff-cond); font-weight: 700; font-size: 1.15rem; color: var(--navy); margin-bottom: 18px; }

.rdv-choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rdv-choice {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: 22px 14px;
	border: 2px solid var(--g100);
	border-radius: var(--radius);
	cursor: pointer;
	transition: var(--transition);
	background: var(--g50);
}
.rdv-choice input { position: absolute; opacity: 0; }
.rdv-choice__icon {
	width: 44px; height: 44px;
	border-radius: 12px;
	background: var(--white);
	color: var(--navy);
	display: flex; align-items: center; justify-content: center;
	transition: var(--transition);
}
.rdv-choice__label { font-size: .88rem; font-weight: 700; color: var(--g600); }
.rdv-choice:hover { border-color: var(--g200); transform: translateY(-2px); }
.rdv-choice:has(input:checked) { border-color: var(--pink); background: var(--pink-light); box-shadow: var(--shadow-sm); }
.rdv-choice:has(input:checked) .rdv-choice__icon { background: var(--pink); color: var(--white); }
.rdv-choice:has(input:checked) .rdv-choice__label { color: var(--navy); }
.rdv-choice:has(input:focus-visible) { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Honeypot : invisible pour les humains, seuls les bots remplissent ce champ */
.rdv-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rdv-rgpd {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .85rem;
	color: var(--g600);
	line-height: 1.5;
	margin: 8px 0 20px;
	cursor: pointer;
}
.rdv-rgpd input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--pink); }
.rdv-rgpd a { color: var(--navy); font-weight: 700; }
.rdv-rgpd a:hover { color: var(--pink-dark); }

@media (max-width: 800px) {
	.rdv-form { padding: 28px 20px; }
	.rdv-choice-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Petites animations d'apparition au scroll
   ========================================================= */
.reveal { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; translate: 0 0; }

/* =========================================================
   Bandeau d'en-tête des pages internes (page.php et templates dédiés)
   ========================================================= */
.page-header {
	position: relative;
	background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
	color: var(--white);
	padding: 34px 0 38px;
	overflow: hidden;
	isolation: isolate;
}
/* Double halo (rose + navy-mid) pour une profondeur plus riche qu'un unique
   dégradé plat, et une trame de points en surcouche pour la texture — même
   vocabulaire visuel "SaaS premium" que les cartes flottantes du header. */
.page-header::before {
	content: '';
	position: absolute;
	inset: -30%;
	background:
		radial-gradient(38% 58% at 88% -8%, rgba(193,127,181,.32) 0%, transparent 68%),
		radial-gradient(34% 52% at 6% 112%, rgba(16,67,102,.6) 0%, transparent 70%);
	z-index: -1;
}
.page-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
	background-size: 24px 24px;
	z-index: -1;
}

.page-header__breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: .72rem;
	color: rgba(255,255,255,.55);
	margin-bottom: 16px;
}
.page-header__breadcrumb a,
.page-header__breadcrumb > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color .18s ease;
}
.page-header__breadcrumb a { color: rgba(255,255,255,.55); }
.page-header__breadcrumb a:hover { color: var(--pink-light); }
.page-header__breadcrumb span:last-child { color: rgba(255,255,255,.8); }
.page-header__breadcrumb-sep { padding: 0 3px !important; color: rgba(255,255,255,.28); }
.page-header__breadcrumb-icon { color: rgba(255,255,255,.5); flex-shrink: 0; }

.page-header h1 { color: var(--white); margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.page-header__sub { margin: 10px 0 0; color: var(--g100); font-size: 1.05rem; max-width: 560px; }
.page-header__sub strong { color: var(--white); }
.page-header__chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0; }
.page-header__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: var(--radius-pill);
	background: rgba(255,255,255,.06);
	font-size: .82rem;
	font-weight: 600;
	color: var(--g100);
	transition: background .18s ease, transform .18s ease;
}
.page-header__chip:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.page-header__chip svg { color: var(--pink); flex-shrink: 0; }

/* Variante centrée (page catalogue occasion) */
.page-header--center { text-align: center; }
/* Le fil d'Ariane reste calé à gauche même quand le titre est centré :
   discret, aligné sur le bord du contenu, il n'entre pas dans la
   composition centrée du titre. */
.page-header--center .page-header__breadcrumb { display: flex; justify-content: flex-start; text-align: left; }
.page-header--center .page-header__sub { margin-left: auto; margin-right: auto; }
.page-header--center .page-header__chips { justify-content: center; }

/* Catalogue VO : on resserre l'espace entre le hero et la barre de filtres */
.section--catalogue { padding-top: 40px; }

/* Page Nos services : blocs photo/texte alternés */
.service-rows { display: flex; flex-direction: column; gap: 56px; }
.service-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.service-row--reverse .service-row__photo { order: 2; }
.service-row__photo {
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 16/10;
	box-shadow: var(--shadow-md);
}
.service-row__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-row__body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.service-row__body p { color: var(--g600); margin: 0 0 22px; max-width: 46ch; }
@media (max-width: 860px) {
	.service-rows { gap: 40px; }
	.service-row { grid-template-columns: 1fr; gap: 20px; }
	.service-row--reverse .service-row__photo { order: 0; }
}

.entry-content { max-width: 760px; margin-left: auto; margin-right: auto; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 { margin-top: 1.6em; }
/* Blocs de texte justifiés (demande Maxime) : césure activée pour éviter les
   « rivières » de blancs, surtout en colonne étroite sur mobile. */
.entry-content p { font-size: 1.02rem; text-align: justify; hyphens: auto; }
.entry-content ul, .entry-content ol { color: var(--g600); padding-left: 1.3em; }
.entry-content li { margin-bottom: .4em; }

/* Certaines pages (catalogue VO...) affichent le contenu du plugin en pleine
   largeur : on neutralise alors la contrainte de largeur de l'article. */
.entry-content:has(.vo-filterbar) { max-width: none; }

/* Articles "auto-stylés" (art-hero embarqué) : leur hero avait le titre calé à
   gauche, seul en-tête non centré du site. On centre juste le hero (titre +
   catégorie + méta) pour l'aligner sur tous les autres en-têtes, sans toucher
   au corps magazine qui reste lisible à gauche. Portée limitée au wrapper
   .pm-legacy-article pour ne rien affecter d'autre. */
.pm-legacy-article .art-hero__inner { text-align: center; }
.pm-legacy-article .art-hero__meta { justify-content: center; }

/* =========================================================
   Homepage — sections utilitaires réutilisées v2→v4 (2026-07-02)
   ========================================================= */

/* Section head avec CTA aligné à droite (occasions du moment) plutôt que
   toujours centré au-dessus de la grille. */
.section-head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	text-align: left;
	max-width: none;
	margin-bottom: 40px;
}
.section-head--split .kicker, .section-head--split h2, .section-head--split p { text-align: left; margin-left: 0; }
@media (max-width: 700px) {
	.section-head--split { flex-direction: column; align-items: flex-start; }
}

/* Vignette d'article dans une .intent-card (section actualités homepage) */
.intent-card__thumb {
	aspect-ratio: 16/10;
	border-radius: var(--radius);
	overflow: hidden;
	margin: -6px -6px 20px;
}
.intent-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--transition); }
.intent-card:hover .intent-card__thumb img { transform: scale(1.04); }
.intent-card__thumb + .news-card__date { margin-top: -10px; }

/* Carte article (blog) : date au-dessus du titre, titre plus serré */
.news-card__date {
	display: block;
	font-family: var(--ff);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pink-dark);
	margin-bottom: 8px;
}
.news-card h3 { margin-bottom: 16px; }

/* Bloc final "trouver ma concession" : texte + CTA à gauche, liste des
   villes à droite (couverture territoriale, sobre — pas de photo pleine
   largeur ni de slogan abstrait). */
.find-dealer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.find-dealer__cities { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.find-dealer__cities li { border-bottom: 1px solid rgba(255,255,255,.14); }
.find-dealer__cities a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 4px;
	font-family: var(--ff-cond);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--white);
	transition: var(--transition);
}
.find-dealer__cities a:hover { color: var(--pink); padding-left: 10px; }
.find-dealer__desc { font-family: var(--ff); font-weight: 500; font-size: .82rem; color: var(--g100); }

@media (max-width: 800px) {
	.find-dealer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   Bandeau "Nos engagements" — bas de homepage
   ========================================================= */
.engagements {
	position: relative;
	padding: 32px 0 30px;
	/* Fond blanc : la section blog juste au-dessus est en gris pointillé
	   (.section--alt) ; reprendre ce même gris fondait les deux sections en
	   une seule zone. Le site alterne blanc / gris pointillé — engagements
	   passe donc en blanc pour respecter ce rythme et se détacher du blog. */
	background: var(--white);
	border-top: 1px solid var(--g100);
	text-align: center;
}
/* Vrai titre de section : même taille et même couleur navy que les h2 des
   autres sections, avec le trait rose en accent devant (demande Maxime).
   Centré via inline-flex dans la section (text-align:center). */
.engagements__title {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-family: var(--ff);
	font-weight: 800;
	font-size: clamp(1.7rem, 2.4vw, 2.2rem);
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--navy);
	margin: 0 0 18px;
}
.engagements__title::before {
	content: '';
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--pink);
	flex-shrink: 0;
}
.engagements__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px 56px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}
.engagements__list li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.engagements__list svg { color: var(--pink-dark); width: 32px; height: 32px; }
.engagements__list span { font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.engagements__tagline { font-size: .85rem; font-weight: 700; color: var(--navy); margin: 0; }
.engagements__hashtag { color: var(--pink-dark); }
/* Sur mobile : grille 2×2 équilibrée plutôt qu'un flex qui casse en 3+1 */
@media (max-width: 560px) {
	.engagements__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 16px;
	}
}

/* Plan du site */
.sitemap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px 24px;
}
.sitemap-col--wide { grid-column: span 2; }
.sitemap-col h2 {
	font-size: 1.05rem;
	color: var(--navy);
	margin: 0 0 12px;
}
.sitemap-col h3 {
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pink-dark);
	margin: 20px 0 8px;
}
.sitemap-col ul { list-style: none; margin: 0; padding: 0; }
.sitemap-col li { margin-bottom: 8px; }
.sitemap-col a { color: var(--g600); }
.sitemap-col a:hover { color: var(--pink-dark); }
@media (max-width: 700px) {
	.sitemap-col--wide { grid-column: span 1; }
}