/* ==========================================================================
   C.Locaz 2026 — Design system "Premium sombre"
   ========================================================================== */

:root {
	--color-bg: #0b0b10;
	--color-bg-elevated: #15151d;
	--color-bg-card: #1b1b26;
	--color-bg-card-hover: #21212f;
	--color-border: #2a2a37;
	--color-border-light: #383848;
	--color-text: #f5f5f8;
	/* Contraste renforcé (2026-07-24, demande client : "gris sur noir pas
	   assez lisible") : #a3a3b0 sur fond #0b0b10 ≈ 6.3:1 ; #c2c2cf ≈ 8.7:1,
	   plus confortable pour de longs paragraphes de texte SEO. */
	--color-text-muted: #c2c2cf;
	--color-text-dim: #91919f;
	--color-purple: #7c3aed;
	--color-purple-light: #a377f5;
	--color-purple-dark: #5b2a9e;
	--color-green: #8dc63f;
	--color-green-light: #a6d868;
	--color-green-dark: #6fa62c;
	--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--radius: 12px;
	--radius-lg: 20px;
	--container-width: 1200px;
	--header-height: 76px;
	--shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35);
	--shadow-card-hover: 0 20px 44px rgba(0, 0, 0, 0.5);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-base);
	line-height: 1.5;
	font-size: 16px;
}

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

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

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

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

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
	background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
	color: #fff;
	box-shadow: 0 0 24px rgba(124, 58, 237, 0.35);
}

.btn-accent {
	background: var(--color-green);
	color: #0b0b10;
	box-shadow: 0 0 24px rgba(141, 198, 63, 0.3);
}

.btn:hover {
	transform: translateY(-1px);
}

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(11, 11, 16, 0.85);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	gap: 24px;
}

.site-logo img {
	height: 40px;
	width: auto;
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	flex: 1;
	justify-content: center;
}

.main-nav ul {
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav a {
	position: relative;
	display: inline-block;
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 8px 2px;
	transition: color 0.15s ease;
}

/* Petit "peps" ajouté au menu (demande client 2026-07-23) : soulignement animé
   en accent vert sous chaque lien au survol / sur la page active, au lieu
   d'un simple changement de couleur de texte. */
.main-nav a::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--color-green);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}

.main-nav a:hover,
.main-nav .current-menu-item > a {
	color: var(--color-green);
}

.main-nav a:hover::after,
.main-nav .current-menu-item > a::after {
	transform: scaleX(1);
}

/* Numéro de téléphone transformé en véritable bouton d'appel (au lieu d'un
   simple texte + puce), pour être davantage mis en avant dans l'en-tête,
   comme demandé par le client ("le numéro n'est peut-être pas assez mis en
   avant"). */
.header-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dark) 100%);
	color: #0b0b10;
	font-weight: 700;
	font-size: 0.92rem;
	white-space: nowrap;
	padding: 10px 18px;
	border-radius: 999px;
	box-shadow: 0 0 20px rgba(141, 198, 63, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.header-phone:hover {
	color: #0b0b10;
	transform: translateY(-1px);
	box-shadow: 0 0 26px rgba(141, 198, 63, 0.5);
}

.header-phone .phone-icon {
	display: inline-flex;
	font-size: 1rem;
	line-height: 1;
}

.header-phone .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #0b0b10;
	flex-shrink: 0;
	animation: clocaz2026-pulse 1.8s ease-in-out infinite;
}

@keyframes clocaz2026-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	color: var(--color-text);
	padding: 8px 12px;
	font-size: 1.2rem;
	cursor: pointer;
}

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

.hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--color-border);
	background: radial-gradient(circle at 20% 20%, rgba(124, 58, 237, 0.25), transparent 45%),
		radial-gradient(circle at 80% 60%, rgba(141, 198, 63, 0.15), transparent 45%),
		var(--color-bg);
}

.hero__inner {
	padding: 72px 20px 56px;
	text-align: center;
}

.hero h1 {
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height: 1.15;
	margin: 0 0 12px;
}

.hero h1 .accent {
	color: var(--color-green);
}

.hero p.lead {
	color: var(--color-text-muted);
	max-width: 640px;
	margin: 0 auto 32px;
	font-size: 1.05rem;
}

/* Le conteneur .vehicle-cta est un flex en display:block par défaut (largeur
   100% du parent) : sur la fiche véhicule (single.php) il doit rester aligné
   à gauche (colonne d'infos), mais dans le hero de l'accueil, ses boutons
   doivent être centrés comme le H1/le lead au-dessus (signalé par le client). */
.hero .vehicle-cta {
	justify-content: center;
}

.trust-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin-top: 32px;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.trust-badges span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.trust-badges .dotsep {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-purple);
	display: inline-block;
}

/* ---------- Filter bar ---------- */

.filter-bar {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin: 0 auto -40px;
	max-width: var(--container-width);
	position: relative;
	top: -24px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.filter-bar select {
	flex: 1;
	min-width: 140px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	padding: 12px 14px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.9rem;
}

.filter-bar select:focus {
	outline: 2px solid var(--color-purple);
}

/* ---------- Vehicle grid ---------- */

.section {
	padding-top: 88px;
	padding-bottom: 40px;
}

.section-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 28px;
}

.section-title h2 {
	font-size: 1.6rem;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.section-title h2::before {
	content: "";
	width: 4px;
	height: 22px;
	background: var(--color-green);
	display: inline-block;
	border-radius: 2px;
}

.vehicle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

.vehicle-card {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.2s ease, border-color 0.2s ease;
	display: flex;
	flex-direction: column;
}

.vehicle-card:hover {
	transform: translateY(-4px);
	border-color: var(--color-purple);
}

.vehicle-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #000;
	overflow: hidden;
}

.vehicle-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vehicle-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--color-purple);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}

.vehicle-card__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.vehicle-card__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	color: var(--color-text);
}

.vehicle-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

.vehicle-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--color-border);
}

.vehicle-card__price {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--color-green);
}

.vehicle-card__link {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text);
}

.vehicle-card__link:hover {
	color: var(--color-green);
}

.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--color-text-muted);
}

/* Bandeau "véhicule non trouvé -> contact", affiché sous la grille de
   véhicules (catégories + résultats de recherche), que des résultats soient
   trouvés ou non (demande client 2026-07-28). */
.not-found-banner {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
	background: var(--color-bg-elevated);
	border: 1px dashed var(--color-border-light, var(--color-border));
	border-radius: var(--radius-lg);
	padding: 24px 28px;
}

.not-found-banner__icon {
	font-size: 1.6rem;
	flex-shrink: 0;
}

.not-found-banner p {
	margin: 0;
	color: var(--color-text-muted);
	max-width: 520px;
}

/* ---------- Single vehicle page ---------- */

.vehicle-hero {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 32px;
	align-items: start;
	padding-top: 40px;
	padding-bottom: 40px;
}

@media (max-width: 860px) {
	.vehicle-hero {
		grid-template-columns: 1fr;
	}
}

.vehicle-gallery {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
}

.vehicle-gallery__main {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #000;
	overflow: hidden;
}

.vehicle-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: zoom-in;
}

.vehicle-gallery__zoom {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(11, 11, 16, 0.72);
	backdrop-filter: blur(4px);
	color: var(--color-text);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.vehicle-gallery__zoom:hover {
	background: rgba(11, 11, 16, 0.9);
	border-color: var(--color-green);
	color: var(--color-green);
}

/* ---------- Lightbox photo véhicule ---------- */

.lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(6, 6, 10, 0.95);
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.lightbox.is-open {
	display: flex;
}

.lightbox__image {
	max-width: 100%;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.lightbox__close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--color-text);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox__close:hover {
	background: var(--color-green);
	color: #0b0b10;
	transform: scale(1.06);
}

.lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--color-text);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.lightbox__nav:hover {
	background: var(--color-green);
	border-color: var(--color-green);
	color: #0b0b10;
}

.lightbox__prev {
	left: 16px;
}

.lightbox__next {
	right: 16px;
}

.lightbox__counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.85rem;
	background: rgba(255, 255, 255, 0.08);
	padding: 6px 14px;
	border-radius: 999px;
}

@media (max-width: 640px) {
	.lightbox {
		padding: 16px;
	}

	.lightbox__nav {
		width: 42px;
		height: 42px;
		font-size: 1.6rem;
	}

	.vehicle-gallery__zoom span {
		display: none;
	}
}

.vehicle-gallery__thumbs {
	display: flex;
	gap: 8px;
	padding: 10px;
	overflow-x: auto;
}

.vehicle-gallery__thumbs img {
	width: 72px;
	height: 54px;
	object-fit: cover;
	border-radius: 6px;
	cursor: pointer;
	border: 2px solid transparent;
	opacity: 0.7;
}

.vehicle-gallery__thumbs img.active,
.vehicle-gallery__thumbs img:hover {
	border-color: var(--color-green);
	opacity: 1;
}

.vehicle-info h1 {
	font-size: 1.9rem;
	margin: 0 0 4px;
}

.vehicle-info .subtitle {
	color: var(--color-text-muted);
	margin-bottom: 18px;
	display: block;
}

.vehicle-price {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--color-green);
	margin: 0 0 20px;
}

.vehicle-specs {
	display: grid;
	/* `auto-fit` (et non `auto-fill`) : quand il y a peu d'éléments (ex. la
	   liste "Couleur ext./int./Garantie" dans Caractéristiques, en
	   pleine largeur de page), les colonnes vides sont supprimées et les
	   éléments réels s'étirent pour occuper toute la ligne, au lieu de rester
	   bloqués à gauche avec un grand vide à droite (bug signalé le
	   2026-07-24, même cause que le correctif `.stat-strip` du même jour). */
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.vehicle-specs div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 0.92rem;
}

.vehicle-specs div span:first-child {
	color: var(--color-text-muted);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.vehicle-specs div span:last-child {
	color: var(--color-text);
	font-weight: 700;
}

.vehicle-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.vehicle-details {
	margin-top: 40px;
	margin-bottom: 40px;
	border-top: 1px solid var(--color-border);
	padding-top: 30px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Chaque bloc (Caractéristiques / Options / Financement) est visible d'emblée
   — plus d'onglets à cliquer (demande client 2026-07-29). Fond légèrement
   plus sombre que les petites fiches `.vehicle-specs div` pour le contraste. */
.vehicle-details__section {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 28px 32px;
	color: var(--color-text-muted);
	line-height: 1.7;
}

.vehicle-details__section h2 {
	margin: 0 0 16px;
	font-size: clamp(1.15rem, 2vw, 1.35rem);
	color: var(--color-text);
	font-weight: 700;
}

.vehicle-details__section > p {
	margin: 0 0 16px;
}

.vehicle-details__section > .btn {
	margin-top: 4px;
}

.vehicle-options {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 20px 22px;
}

.vehicle-options ul {
	margin: 0;
	padding-left: 1.2em;
}

.vehicle-options li {
	margin-bottom: 6px;
}

.vehicle-options li:last-child {
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.vehicle-details__section {
		padding: 22px 18px;
	}
}

/* ---------- Trust / reviews / map section ---------- */

.trust-section {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	padding-top: 30px;
	padding-bottom: 60px;
}

@media (max-width: 900px) {
	.trust-section {
		grid-template-columns: 1fr;
	}
}

/* ---------- Cartes "infos pratiques" (accueil + contact) ----------
   Demande client 2026-07-24 : les blocs "Nous contacter" / "Où nous trouver"
   / "Comment venir en bus ?" reprenaient le même style que les cartes d'avis
   clients ("ça reprend les blocs des avis, j'aime pas"). Nouveau composant
   visuellement distinct : liseré dégradé en haut, médaillon-icône, plus clair
   à lire, avec un picto dédié pour chaque carte (dont le bus demandé). */
.info-card {
	position: relative;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 28px 26px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.info-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-purple), var(--color-green));
}

/* Photo illustrant un info-card (ex. arrêt de bus) : bleed pleine largeur en
   haut de la carte, malgré le padding du `.info-card` (marges négatives). */
.info-card__photo {
	margin: -28px -26px 4px;
	width: calc(100% + 52px);
	max-width: none;
	height: 160px;
	object-fit: cover;
	display: block;
}

.info-card__icon {
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(141, 198, 63, 0.16));
}

.info-card h3 {
	margin: 0;
	font-size: 1.1rem;
}

.info-card p {
	color: var(--color-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* ---------- Page Contact (gabarit dédié page-contact.php) ---------- */

.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 32px;
	padding: 48px 0 60px;
	align-items: start;
}

@media (max-width: 860px) {
	.contact-layout {
		grid-template-columns: 1fr;
	}
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contact-form-wrap.page-content {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 32px;
	padding-top: 32px;
	padding-bottom: 32px;
	max-width: none;
	margin: 0;
}

.contact-form-wrap h2 {
	margin-top: 0;
	font-size: 1.3rem;
}

/* Bloc « Nos coordonnées » : adresse / téléphone / e-mail / horaires
   clairement séparés, avec pictos pour les moyens de contact
   (demande client 2026-07-29). */
.contact-card {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.contact-card > h3 {
	margin: 0;
}

.contact-card__block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-card__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.contact-card__address {
	margin: 0;
	color: var(--color-text);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.45;
}

.contact-card .contact-list {
	gap: 12px;
	padding: 4px 0;
}

.contact-card .contact-list a {
	width: 100%;
	padding: 12px 14px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	gap: 14px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.contact-card .contact-list a:hover {
	border-color: rgba(141, 198, 63, 0.45);
	background: rgba(141, 198, 63, 0.06);
	color: var(--color-text);
}

.contact-card .contact-list__icon {
	width: 40px;
	height: 40px;
	font-size: 1rem;
}

.contact-list__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.contact-list__caption {
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.contact-list__value {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--color-text);
	word-break: break-word;
}

.contact-card .contact-list a:hover .contact-list__value {
	color: var(--color-green);
}

.contact-card__hours {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-card__hours li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: baseline;
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 0.92rem;
	color: var(--color-text-muted);
}

.contact-card__hours li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.contact-card__hours .days {
	font-weight: 650;
	color: var(--color-text);
}

.contact-card__hours .range {
	text-align: right;
	white-space: nowrap;
}

.contact-hours-note {
	margin: 8px 0 0;
	font-size: 0.82rem;
	color: var(--color-text-muted);
	line-height: 1.5;
}

.contact-hours-note a {
	display: inline-block;
	margin-top: 4px;
	color: var(--color-green);
	font-weight: 600;
}

/* Section "Venir à l'agence" (carte + bus) — séparée du duo
   coordonnées/formulaire pour que l'accès bus ne soit plus un 3e
   info-card empilé (photo + emoji + texte), jugé trop grossier. */
.contact-access {
	padding: 48px 0 56px;
	border-top: 1px solid var(--color-border);
}

.contact-access__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

@media (max-width: 860px) {
	.contact-access__grid {
		grid-template-columns: 1fr;
	}
}

.contact-access__map {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.contact-access__map .map-embed {
	width: 100%;
	height: 280px;
	border: 0;
	border-radius: 0;
	display: block;
	flex: 1;
	min-height: 220px;
}

.contact-access__address {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 16px 20px;
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: 0.92rem;
	line-height: 1.45;
}

.contact-access__address strong {
	color: var(--color-text);
	font-weight: 650;
}

/* Bandeau accès bus : photo + texte côte à côte (plus d'emoji
   médaillon ni de photo pleine largeur collée en haut d'une card). */
.bus-access {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 100%;
}

@media (max-width: 620px) {
	.bus-access {
		grid-template-columns: 1fr;
	}
}

.bus-access__media {
	position: relative;
	min-height: 200px;
	background: var(--color-bg-card);
}

.bus-access__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	inset: 0;
}

@media (max-width: 620px) {
	.bus-access__media {
		min-height: 160px;
	}

	.bus-access__media img {
		position: absolute;
	}
}

.bus-access__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 28px 26px;
}

.bus-access__badge {
	display: inline-flex;
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-green);
	background: rgba(141, 198, 63, 0.12);
	border: 1px solid rgba(141, 198, 63, 0.28);
}

.bus-access__body h3 {
	margin: 0;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
}

.bus-access__body p {
	margin: 0;
	color: var(--color-text-muted);
	line-height: 1.65;
	font-size: 0.95rem;
}

.bus-access__body strong {
	color: var(--color-text);
	font-weight: 650;
}

.trust-card {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.google-rating {
	display: flex;
	align-items: center;
	gap: 14px;
}

.google-rating .score {
	font-size: 1.8rem;
	font-weight: 800;
}

.google-rating .stars {
	color: var(--color-green);
	letter-spacing: 2px;
}

/* Carte Google Maps "classique" (2026-07-23, demande client : l'ancien filtre
   CSS grayscale+invert donnait un effet négatif/bizarre à la carte — retiré
   pour afficher une vraie carte Google Maps avec ses couleurs et son pin
   d'origine, cohérent sur tout le site : accueil, contact et pied de page). */
.map-embed {
	border-radius: 8px;
	overflow: hidden;
	border: 0;
	width: 100%;
	height: 100%;
	min-height: 220px;
	display: block;
}

.trust-card .map-embed {
	min-height: 220px;
}

.trust-card__address {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-text-muted);
}

/* Liste "Nous contacter" (téléphone / e-mail) avec pictos ronds accentués,
   demande client du 2026-07-23 pour un rendu "plus sympa" qu'un simple texte. */
.contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.contact-list a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--color-text);
	font-weight: 600;
}

.contact-list a:hover {
	color: var(--color-green);
}

.contact-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(141, 198, 63, 0.12);
	color: var(--color-green);
	font-size: 0.95rem;
}

/* ---------- Page Carte grise (gabarit dédié page-carte-grise.php) ---------- */

.cg-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--color-border);
	background: radial-gradient(circle at 85% 10%, rgba(124, 58, 237, 0.22), transparent 45%),
		radial-gradient(circle at 10% 90%, rgba(141, 198, 63, 0.12), transparent 45%),
		var(--color-bg);
}

.cg-hero__inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 40px;
	align-items: start;
	padding: 48px 20px 60px;
}

@media (max-width: 900px) {
	.cg-hero__inner {
		grid-template-columns: 1fr;
	}
}

.cg-hero__text h1 {
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	margin: 14px 0 16px;
	line-height: 1.2;
}

.cg-hero__kicker {
	color: var(--color-text-muted);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.6;
	margin: 0 0 18px;
}

.cg-hero__text .lead {
	color: var(--color-text);
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0 0 14px;
}

.cg-hero__text p {
	color: var(--color-text-muted);
	line-height: 1.65;
}

.cg-trust-points {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;
	margin: 20px 0 28px;
	padding: 0;
}

.cg-trust-points li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-text);
	font-size: 0.92rem;
	font-weight: 600;
}

.cg-hero__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Emplacement du futur visuel "carte grise" fourni par le client — en
   attendant, un repère visuel neutre (dégradé + pictogramme) cohérent avec le
   thème, sans utiliser d'image tierce. À remplacer par une vraie photo/
   illustration dès réception de l'asset (voir PROJECT.md). */
.cg-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(141, 198, 63, 0.18));
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 32px 20px;
	min-height: 120px;
}

.cg-visual__icon {
	font-size: 2.4rem;
	line-height: 1;
}

.cg-visual__label {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	font-weight: 600;
}

.cg-form-card {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 28px;
}

.cg-form-card h2 {
	margin-top: 0;
	font-size: 1.25rem;
}

.cg-form-card > p {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin-bottom: 18px;
}

/* ---------- CMS pages ---------- */

.page-hero {
	padding: 56px 0 40px;
	border-bottom: 1px solid var(--color-border);
	background: radial-gradient(circle at 15% 0%, rgba(124, 58, 237, 0.2), transparent 50%), var(--color-bg);
	text-align: center;
}

.page-hero h1 {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	margin: 12px 0 0;
}

/* IMPORTANT : ne jamais utiliser le raccourci `padding` ici (il écraserait le
   padding gauche/droite de `.container` déjà présent sur le même élément dans
   tous les templates — c'était la cause du bug "texte collé à gauche" signalé
   par le client sous les listings véhicules et sur l'accueil). */
.page-content {
	padding-top: 48px;
	padding-bottom: 60px;
	max-width: 820px;
	margin: 0 auto;
}

/* Variante "pleine largeur" (page carte grise). Demande client du
   2026-07-24 ("je n'ai pas envie que les textes soient en deux colonnes") :
   on repasse en une seule colonne pleine largeur (1200px, au lieu de 820px),
   mais le texte est désormais découpé en blocs/sections visuellement
   différenciés (voir .cg-section ci-dessous) plutôt qu'un long pavé de texte
   continu — c'est ce qui structure la lecture, pas un jeu de colonnes. */
.page-content--wide {
	max-width: var(--container-width);
}

.page-content--wide .pricing-card {
	margin: 0 0 32px;
}

@media (max-width: 900px) {
	.page-content--wide {
		max-width: 820px;
	}
}

.page-content h1 {
	font-size: 2rem;
	margin-bottom: 24px;
}

/* Neutralise les anciens styles en ligne (surlignages colorés, tailles
   fantaisistes) hérités du contenu WordPress historique, SANS modifier le
   texte lui-même : seule la présentation change, les mots restent identiques. */
.page-content h2,
.page-content h3 {
	color: var(--color-text);
	font-size: 1.35rem;
	line-height: 1.4;
	margin: 40px 0 16px;
	padding-left: 14px;
	border-left: 3px solid var(--color-green);
	background: none !important;
}

.page-content h3 {
	font-size: 1.1rem;
}

.page-content h2 span,
.page-content h3 span,
.page-content span[style] {
	background: none !important;
	color: inherit !important;
}

.page-content strong {
	color: var(--color-text);
}

.page-content ul {
	padding-left: 20px;
	margin: 0 0 20px;
}

.page-content li {
	margin-bottom: 10px;
	color: var(--color-text-muted);
}

.page-content li::marker {
	color: var(--color-green);
}

.page-content li a {
	color: var(--color-green);
}

/* Formulaires (Forminator / Contact Form 7) intégrés dans le contenu :
   restylés pour s'intégrer au thème sombre, sans changer les champs/labels.
   Les mêmes règles s'appliquent à `.cg-form-card` (hero de la page carte
   grise, gabarit dédié page-carte-grise.php) pour une cohérence totale. */
.page-content .wpcf7,
.page-content .forminator-custom-form {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 28px;
	margin: 24px 0;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.cg-form-card .forminator-custom-form {
	padding: 0;
	margin: 0;
	max-width: none;
}

/* !important nécessaire car les CSS des plugins de formulaire (Forminator,
   Contact Form 7) sont chargés après le style du thème et imposent sinon
   leurs couleurs claires par défaut, illisibles sur fond sombre. */
.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="tel"],
.page-content input[type="number"],
.page-content input[type="url"],
.page-content textarea,
.page-content select,
.page-content .forminator-input,
.page-content .forminator-textarea,
.page-content .forminator-select,
.cg-form-card input[type="text"],
.cg-form-card input[type="email"],
.cg-form-card input[type="tel"],
.cg-form-card input[type="number"],
.cg-form-card input[type="url"],
.cg-form-card textarea,
.cg-form-card select,
.cg-form-card .forminator-input,
.cg-form-card .forminator-textarea,
.cg-form-card .forminator-select {
	display: block;
	width: 100% !important;
	background: var(--color-bg) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
	padding: 12px 14px !important;
	border-radius: 8px !important;
	font-family: inherit;
	font-size: 0.95rem;
	margin-bottom: 14px;
	box-shadow: none !important;
}

.page-content input::placeholder,
.page-content textarea::placeholder,
.cg-form-card input::placeholder,
.cg-form-card textarea::placeholder {
	color: var(--color-text-muted);
}

.page-content input:focus,
.page-content textarea:focus,
.page-content select:focus,
.page-content .forminator-input:focus,
.cg-form-card input:focus,
.cg-form-card textarea:focus,
.cg-form-card select:focus,
.cg-form-card .forminator-input:focus {
	outline: 2px solid var(--color-purple) !important;
}

.page-content label,
.page-content .forminator-label,
.cg-form-card label,
.cg-form-card .forminator-label {
	color: var(--color-text-muted) !important;
	font-size: 0.85rem;
	display: block;
	margin-bottom: 6px;
}

.page-content .forminator-required,
.cg-form-card .forminator-required {
	color: var(--color-green) !important;
}

.page-content button[type="submit"],
.page-content input[type="submit"],
.page-content .forminator-button-submit,
.page-content .forminator-button,
.cg-form-card button[type="submit"],
.cg-form-card input[type="submit"],
.cg-form-card .forminator-button-submit,
.cg-form-card .forminator-button {
	background: var(--color-green) !important;
	color: #0b0b10 !important;
	border: none !important;
	padding: 12px 28px !important;
	border-radius: 999px !important;
	font-weight: 700;
	cursor: pointer;
	font-size: 0.95rem;
}

.page-content button[type="submit"]:hover,
.page-content input[type="submit"]:hover,
.page-content .forminator-button-submit:hover,
.cg-form-card button[type="submit"]:hover,
.cg-form-card input[type="submit"]:hover,
.cg-form-card .forminator-button-submit:hover {
	transform: translateY(-1px);
}

/* Le contenu de certaines pages (ex. "Qui sommes-nous ?" injectée sur l'accueil)
   contient d'anciennes images/icônes prévues pour s'afficher en ligne les unes
   à côté des autres (ex. rangée d'icônes). La règle globale `img { display:block }`
   les empilait verticalement : on restaure ici le comportement en ligne standard
   pour tout contenu WordPress classique (the_content), sans toucher au texte. */
.page-content img,
.entry-content img {
	display: inline-block;
	vertical-align: middle;
}

.page-content a {
	color: var(--color-green);
	text-decoration: underline;
}

/* Bug corrigé (2026-07-24, signalé par le client : bouton "sans texte") :
   la règle générique `.page-content a` ci-dessus (couleur verte + souligné)
   s'appliquait aussi aux boutons `.btn` insérés dans le contenu (ex. CTA du
   bloc tarif), rendant leur texte invisible (texte vert sur fond vert pour
   `.btn-accent`). On redonne explicitement la priorité aux styles `.btn`. */
.page-content a.btn,
.page-content .btn {
	text-decoration: none;
}

.page-content .btn-accent {
	color: #0b0b10;
}

.page-content .btn-primary {
	color: #fff;
}

.page-content p {
	margin: 0 0 16px;
}

.pricing-card {
	position: relative;
	overflow: hidden;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 28px;
	margin: 32px 0;
}

/* Halo violet ancré à gauche (correction 2026-07-24 : le dégradé partait
   visuellement du centre du bloc, demande client de le faire partir de la
   gauche). Taille explicite en px (plutôt que "circle" seul) pour éviter que
   le calcul par défaut ("farthest-corner") ne l'étire de façon disproportion-
   née sur un bloc très large. */
.pricing-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 520px 320px at 0% 0%, rgba(124, 58, 237, 0.28), transparent 70%);
	pointer-events: none;
}

.pricing-card > * {
	position: relative;
	z-index: 1;
}

.pricing-highlight {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--color-border);
}

.pricing-highlight .pricing-label {
	color: var(--color-text);
	font-weight: 700;
	flex: 1 0 100%;
}

.pricing-highlight .pricing-amount {
	color: var(--color-green);
	font-size: 1.8rem;
	font-weight: 800;
}

.pricing-highlight .pricing-note {
	color: var(--color-text-muted);
	font-size: 0.88rem;
}

/* CTA carte grise dans la colonne texte de l'accueil.
   Redesign 2026-07-28 : l'ancienne version (médaillon violet + gros bouton
   vert + gradient/glow) était trop "billboard" dans une colonne de prose —
   le client l'a jugée grossière. Nouvelle version : callout éditorial sobre,
   barre d'accent à gauche, lien texte discret (pas de pastille verte). */
.home-cta-banner {
	margin: 28px 0;
}

.home-cta-banner a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 12px 24px;
	padding: 18px 20px 18px 22px;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-green);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.home-cta-banner a:hover {
	background: var(--color-bg-card);
	border-color: var(--color-border-light);
	border-left-color: var(--color-green);
}

.home-cta-banner a > span:first-child {
	display: block;
	min-width: 0;
	flex: 1;
}

.home-cta-banner strong {
	display: block;
	color: var(--color-text);
	font-size: 1.05rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	margin-bottom: 4px;
	line-height: 1.3;
}

.home-cta-banner span.detail {
	display: block;
	color: var(--color-text-muted);
	font-size: 0.88rem;
	line-height: 1.45;
}

.home-cta-banner a > span:last-child,
.home-cta-banner .home-cta-banner__action {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-green);
	font-size: 0.88rem;
	font-weight: 600;
	white-space: nowrap;
	background: none;
	border: none;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
}

.home-cta-banner a:hover > span:last-child,
.home-cta-banner a:hover .home-cta-banner__action {
	color: var(--color-text);
}

@media (max-width: 520px) {
	.home-cta-banner a {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

.home-quicklinks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 0;
}

.home-quicklinks a {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.home-quicklinks a:hover {
	border-color: var(--color-green);
	color: var(--color-green);
}

.seo-text {
	color: var(--color-text-muted);
	max-width: 900px;
	margin: 36px auto 0;
	line-height: 1.7;
	font-size: 0.95rem;
}

/* Description libre du véhicule (étape 4 du formulaire d'ajout, admin) :
   contenu existant en base pour la plupart des véhicules mais jamais affiché
   jusqu'ici (2026-07-24) — ajout sans risque, purement additif pour le SEO
   et l'information des visiteurs. */
.vehicle-description {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 28px 32px;
}

.vehicle-description h2 {
	margin: 0 0 16px;
	font-size: 1.25rem;
}

.vehicle-description p {
	color: var(--color-text-muted);
	line-height: 1.7;
	margin: 0 0 14px;
}

.vehicle-description p:last-child {
	margin-bottom: 0;
}

.seo-text h2,
.seo-text h3 {
	color: var(--color-text);
	font-size: 1.1rem;
	margin: 0 0 10px;
}

/* ==========================================================================
   Refonte design "plus clinquant" (2026-07-24, demande client) : blocs/cartes
   avec relief, contenus en pleine largeur mais restructurés en colonnes pour
   rester lisibles, effets de lumière plus marqués, meilleur contraste texte.
   ========================================================================== */

/* Petit libellé coloré au-dessus des titres de section — repère visuel
   "premium" utilisé sur les sites de concessions automobiles. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-green);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
}

.eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--color-green);
	display: inline-block;
	border-radius: 2px;
}

.section-heading {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}

.section-heading.align-left {
	margin-left: 0;
	text-align: left;
}

.section-heading h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 12px;
}

.section-heading p {
	color: var(--color-text-muted);
	line-height: 1.7;
	margin: 0;
}

/* Alternance de fond entre sections pour casser l'effet "fond noir uniforme"
   signalé par le client, sans sortir de la charte sombre. */
.section--alt {
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015) 15%, rgba(255, 255, 255, 0.015) 85%, transparent);
	position: relative;
}

.section--glow {
	position: relative;
	overflow: hidden;
}

.section--glow::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 12% 10%, rgba(124, 58, 237, 0.16), transparent 40%),
		radial-gradient(circle at 88% 90%, rgba(141, 198, 63, 0.12), transparent 40%);
	pointer-events: none;
}

.section--glow > * {
	position: relative;
	z-index: 1;
}

/* ---------- Bandeau de chiffres clés (accueil) ---------- */

/* `auto-fit` + `1fr` (plutôt que `repeat(4, 1fr)` fixe) : les items se
   répartissent en largeur égale quel que soit leur nombre (4 sur l'accueil,
   3 sur la page contact), et restent donc bien centrés dans leur conteneur —
   correction demandée le 2026-07-24 ("centre les 3 blocs sous contact"). */
.stat-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 20px;
	margin: 40px 0;
}

@media (max-width: 760px) {
	.stat-strip {
		grid-template-columns: repeat(2, 1fr);
	}
}

.stat-strip__item {
	text-align: center;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 22px 16px;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-strip__item:hover {
	transform: translateY(-3px);
	border-color: var(--color-green);
}

.stat-strip__number {
	display: block;
	font-size: 1.9rem;
	font-weight: 800;
	background: linear-gradient(135deg, var(--color-green-light), var(--color-green));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.2;
}

.stat-strip__label {
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

/* ---------- Contenu large restructuré (SEO catégories / carte grise) ----------
   Le client veut que ces textes "prennent la largeur" du conteneur (1200px)
   plutôt que d'être bridés à 820px, tout en restant confortables à lire.
   Demande du 2026-07-24 (2e passage) : les 2 blocs ("Le spécialiste..." et
   "Comment bien choisir...") ne doivent plus être côte à côte mais chacun sur
   une ligne complète, en une seule colonne — .seo-stack (ex ".seo-columns")
   les empile désormais verticalement, chaque carte gardant sa pleine largeur
   pour un rendu "beau" plutôt qu'un simple bloc de texte compressé. Aucun mot
   du contenu n'est supprimé, uniquement la mise en forme change. */
.content-wide {
	max-width: var(--container-width);
	margin: 0 auto;
}

.seo-block {
	margin-top: 40px;
}

.seo-block__intro {
	max-width: 820px;
	margin: 0 auto 32px;
	color: var(--color-text-muted);
	line-height: 1.75;
	font-size: 1rem;
	text-align: center;
}

.seo-block__intro strong {
	color: var(--color-text);
}

.seo-stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 28px;
}

.seo-card {
	position: relative;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 34px 38px;
	box-shadow: var(--shadow-card);
	transition: border-color 0.2s ease, transform 0.2s ease;
	overflow: hidden;
}

.seo-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-purple), var(--color-green));
}

.seo-card:hover {
	border-color: var(--color-purple);
	transform: translateY(-2px);
}

.seo-card h3 {
	margin: 0 0 16px;
	font-size: 1.3rem;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 12px;
}

.seo-card__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(141, 198, 63, 0.16));
}

.seo-card p,
.seo-card li {
	color: var(--color-text-muted);
	line-height: 1.7;
}

.seo-card > p:last-child {
	margin-bottom: 0;
}

/* Carte "spécialiste" : simple bloc de texte pleine largeur, un peu plus
   confortable à lire (colonne bridée) même si la carte occupe toute la ligne. */
.seo-card--intro p {
	max-width: 900px;
}

/* Carte "comment bien choisir" : liste à puces réorganisée en grille interne
   à 2 colonnes sur grand écran (la carte reste UNE seule ligne/bloc pleine
   largeur ; seul le contenu de la liste, à l'intérieur, exploite mieux
   l'espace disponible plutôt que de s'étirer sur une hauteur inutile). */
.seo-card--checklist ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 8px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.seo-card--checklist li {
	position: relative;
	padding: 10px 0 10px 30px;
}

.seo-card--checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 9px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(141, 198, 63, 0.16);
	color: var(--color-green);
	font-size: 0.75rem;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.seo-card li a,
.seo-card p a {
	color: var(--color-green);
}

/* Section "Guide d'achat" (pages catégories) : fond en pleine largeur de
   l'écran (comme .hero), et non plus seulement derrière le bloc de texte —
   correction demandée le 2026-07-24 ("le fond ne prend pas toute la
   largeur... on n'a pas de marge"). */
.guide-section {
	border-top: 1px solid var(--color-border);
}

.seo-block__outro {
	max-width: 820px;
	margin: 0 auto;
	color: var(--color-text-muted);
	line-height: 1.75;
	text-align: center;
}

.seo-block__outro a {
	color: var(--color-green);
}

/* Bandeau CTA en bas de page (catégories) vers carte grise / contact. */
.bottom-cta {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (max-width: 760px) {
	.bottom-cta {
		grid-template-columns: 1fr;
	}
}

.bottom-cta__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 24px 28px;
	position: relative;
	overflow: hidden;
}

.bottom-cta__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 90% 0%, rgba(124, 58, 237, 0.22), transparent 55%);
	pointer-events: none;
}

.bottom-cta__card > * {
	position: relative;
	z-index: 1;
}

.bottom-cta__text strong {
	display: block;
	font-size: 1.1rem;
	color: var(--color-text);
	margin-bottom: 4px;
}

.bottom-cta__text span {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

/* ---------- Emplacements photo (accueil : "photo agence" / "photo parc") ---------- */

.photo-frame {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-card);
	aspect-ratio: 4 / 3;
	background: var(--color-bg-card);
}

.photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-frame__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px 18px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
}

/* Repère neutre tant qu'une vraie photo n'a pas été fournie par le client —
   jamais d'image tierce utilisée sans autorisation. */
.photo-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	color: var(--color-text-dim);
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 12px, transparent 12px 24px), var(--color-bg-card);
	border: 1px dashed var(--color-border-light);
}

.photo-placeholder__icon {
	font-size: 2.2rem;
	opacity: 0.7;
}

.photo-placeholder__label {
	font-size: 0.85rem;
	font-weight: 600;
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: center;
}

@media (max-width: 900px) {
	.about-grid {
		grid-template-columns: 1fr;
	}
}

.about-grid__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.about-grid__photos .photo-frame:first-child,
.about-grid__photos .photo-placeholder:first-child {
	grid-column: 1 / -1;
}

.about-grid__text .page-content {
	max-width: none;
	padding: 0;
	margin: 0;
	text-align: left;
}

/* ---------- CTA bannière refaite (accueil : "Service cartes grises") ---------- */

.cta-banner-v2 {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	background: linear-gradient(120deg, rgba(124, 58, 237, 0.22), rgba(141, 198, 63, 0.12)), var(--color-bg-card);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	padding: 36px 40px;
	margin: 40px 0;
	box-shadow: var(--shadow-card);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cta-banner-v2::after {
	content: "";
	position: absolute;
	top: -60%;
	right: -10%;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(141, 198, 63, 0.35), transparent 70%);
	pointer-events: none;
}

.cta-banner-v2:hover {
	transform: translateY(-3px);
	border-color: var(--color-green);
	box-shadow: var(--shadow-card-hover);
}

.cta-banner-v2__icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
	box-shadow: 0 0 24px rgba(124, 58, 237, 0.45);
}

.cta-banner-v2__body {
	flex: 1;
	min-width: 220px;
	position: relative;
	z-index: 1;
}

.cta-banner-v2__body .eyebrow {
	margin-bottom: 8px;
}

.cta-banner-v2__body strong {
	display: block;
	color: var(--color-text);
	font-size: 1.35rem;
	margin-bottom: 6px;
}

.cta-banner-v2__body span {
	color: var(--color-text-muted);
	font-size: 0.95rem;
}

.cta-banner-v2__action {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

/* ---------- Avis clients (accueil) ---------- */

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 32px;
}

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

@media (max-width: 620px) {
	.reviews-grid {
		grid-template-columns: 1fr;
	}
}

.review-card {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: var(--shadow-card);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.review-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-green);
}

.review-card__stars {
	color: var(--color-green);
	letter-spacing: 2px;
	font-size: 0.95rem;
}

.review-card p {
	color: var(--color-text);
	line-height: 1.6;
	font-size: 0.95rem;
	margin: 0;
	flex: 1;
}

.review-card__author {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-text-muted);
	font-size: 0.85rem;
	font-weight: 600;
}

.review-card__avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-purple), var(--color-green));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 800;
	color: #0b0b10;
	flex-shrink: 0;
}

.reviews-source {
	text-align: center;
	margin-top: 24px;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

/* ---------- Bloc tarif carte grise (vrai CTA) ---------- */

.page-content .pricing-card {
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(141, 198, 63, 0.08)), var(--color-bg-card);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 32px 36px;
}

.pricing-card__cta {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.pricing-card__cta .btn {
	padding: 14px 30px;
	font-size: 1rem;
}

@media (max-width: 560px) {
	.pricing-card__cta .btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- Page carte grise : blocs/sections différenciés ----------
   Demande client 2026-07-24 : remplacer la lecture en 2 colonnes par une
   seule colonne pleine largeur, mais avec "des différences de blocs, des
   différences de sections" — le contenu (mot pour mot identique) est
   réparti par functions.php (clocaz2026_carte_grise_restructure_sections)
   dans des blocs .cg-section aux traitements visuels distincts. */
.cg-section {
	position: relative;
	margin: 0 0 28px;
	padding: 30px 32px;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-green);
	border-radius: var(--radius-lg);
}

.cg-section:last-child {
	margin-bottom: 0;
}

.cg-section h2 {
	margin: 0 0 16px;
	padding-left: 0;
	border-left: none;
	display: flex;
	align-items: center;
	gap: 10px;
}

.cg-section > *:last-child {
	margin-bottom: 0;
}

/* "Vous venez d'acheter…" : encart d'avertissement (délai légal + amende). */
.cg-section--notice {
	border-left-color: #e2a03f;
	background: linear-gradient(135deg, rgba(226, 160, 63, 0.1), transparent 60%), var(--color-bg-elevated);
}

.cg-section--notice h2::before {
	content: "⚠️";
	font-size: 1.1rem;
}

.cg-section--notice strong {
	color: #f0b95e;
}

/* "Demande de carte grise rapide sur Amiens" : simple bloc d'intro, sans
   carte, pour casser le rythme avec les blocs pleinement encartés. */
.cg-section--intro {
	background: transparent;
	border: none;
	padding: 4px 4px 8px;
}

.cg-section--intro h2 {
	font-size: 1.5rem;
}

/* "Vous êtes un particulier / professionnel ?" : fiches documents. */
.cg-section--docs h2::before {
	content: "📄";
	font-size: 1.1rem;
}

.cg-section--docs-pro {
	border-left-color: var(--color-purple-light);
}

.cg-section--docs-pro h2::before {
	content: "🏢";
}

/* "C.Locaz, leader du service carte grise à Amiens" : bloc premium. */
.cg-section--leader {
	background: linear-gradient(135deg, rgba(141, 198, 63, 0.14), rgba(124, 58, 237, 0.1)), var(--color-bg-elevated);
	border-left-color: var(--color-green);
}

.cg-section--leader h2 {
	padding-right: 130px;
}

.cg-section--leader::after {
	content: "★ Référence locale";
	position: absolute;
	top: 30px;
	right: 32px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-green);
	background: rgba(141, 198, 63, 0.14);
	border: 1px solid rgba(141, 198, 63, 0.3);
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.cg-section--leader::after {
		display: none;
	}
	.cg-section--leader h2 {
		padding-right: 0;
	}
}

/* Bloc de clôture ("Besoin de plus d'informations ?") : vrai CTA final. */
.cg-section--cta {
	text-align: center;
	border-left: none;
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(141, 198, 63, 0.12)), var(--color-bg-elevated);
	border: 1px solid rgba(124, 58, 237, 0.35);
	padding: 40px 32px;
}

.cg-section--cta h2 {
	justify-content: center;
	font-size: 1.4rem;
}

.cg-section__cta-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 24px;
}

@media (max-width: 560px) {
	.cg-section {
		padding: 24px 22px;
	}
	.cg-section__cta-actions .btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- Trust cards : relief ---------- */

.trust-card {
	box-shadow: var(--shadow-card);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.trust-card:hover {
	transform: translateY(-2px);
	border-color: var(--color-border-light);
}

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

.site-footer {
	background: var(--color-bg-elevated);
	border-top: 1px solid var(--color-border);
	padding: 50px 0 24px;
	margin-top: 40px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 32px;
}

@media (max-width: 860px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

.footer-col h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-green);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 16px;
}

.footer-icon {
	font-size: 1rem;
	line-height: 1;
}

.footer-col p,
.footer-col a,
.footer-col address {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	font-style: normal;
	line-height: 1.6;
}

.footer-col a:hover {
	color: var(--color-green);
}

.footer-logo {
	display: inline-flex;
	margin-bottom: 16px;
}

.footer-logo img {
	max-height: 40px;
	width: auto;
}

.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-links a {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.footer-hours {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer-hours li {
	display: flex;
	flex-direction: column;
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.footer-hours .days {
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.85rem;
}

.footer-hours-note,
.contact-hours-note {
	margin: 12px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--color-text-muted);
	opacity: 0.85;
}

.footer-hours-note a,
.contact-hours-note a {
	display: inline-block;
	color: var(--color-green);
	font-weight: 600;
	text-decoration: none;
}

.footer-hours-note a:hover,
.contact-hours-note a:hover {
	text-decoration: underline;
}

.footer-contact a {
	display: block;
	color: var(--color-text-muted);
}

.footer-map {
	margin-top: 12px;
	width: 100%;
	height: 140px;
	border-radius: 8px;
	min-height: 0;
}

.footer-bottom {
	border-top: 1px solid var(--color-border);
	margin-top: 36px;
	padding-top: 18px;
	text-align: center;
	color: var(--color-text-muted);
	font-size: 0.8rem;
}

/* ---------- Utilities / responsive ---------- */

@media (max-width: 760px) {
	.nav-toggle {
		display: inline-flex;
	}
	.main-nav {
		position: absolute;
		top: var(--header-height);
		left: 0;
		right: 0;
		background: var(--color-bg-elevated);
		border-bottom: 1px solid var(--color-border);
		flex-direction: column;
		padding: 16px 20px;
		display: none;
	}
	.main-nav.is-open {
		display: block;
	}
	.main-nav ul {
		flex-direction: column;
		gap: 14px;
	}
	.header-phone span.label {
		display: none;
	}
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
	background: var(--color-purple);
	color: #fff;
	padding: 10px 16px;
	border-radius: 8px;
	z-index: 999;
}