/* ═══════════════════════════════════════════════════════════════════
   TRANSACTIONS IMMOBILIÈRES · RIVE GAUCHE
   La page-outil du marché. Deux principes tenus partout :
   · un seul geste à la fois — les filtres sont des pastilles, pas un
     formulaire à valider ; la carte et les tableaux réagissent seuls ;
   · la donnée avant la décoration — pas d'ombre ni de dégradé qui ne
     serve à lire un chiffre.
   ═══════════════════════════════════════════════════════════════ */

.r5-transactions {
	--tx-navy:  #14213F;
	--tx-green: #1E4D3E;
	--tx-gold:  #8B6F47;
	--tx-cream: #F6F4EF;
	--tx-line:  rgba(20, 38, 70, .10);
	--tx-ink:   #5A5A56;
}

/* ── 1. Hero ─────────────────────────────────────────────────────
   Deux visuels alternent lentement derrière le titre. Le voile navy
   est CONSTANT : les deux images ont des tonalités opposées (nuit et
   clair) et sans lui, le contraste du texte clignoterait toutes les
   trois secondes. Le fond respire, le plan de lecture ne bouge pas. */
.tx-hero { position: relative; overflow: hidden; background: var(--tx-cream);
	padding: calc(var(--r5-header-h) + 56px) 0 68px !important; }
.tx-hero.has-visuels { background: #0E1830; }
.tx-hero-bg { position: absolute; inset: 0; z-index: 0; }
/* L'image de la première diapositive remplit son conteneur exactement
   comme le faisait le fond CSS : même cadrage, même recouvrement. Le
   fondu et la dérive restent sur .tx-slide, qui n'a pas changé. */
.tx-slide-img { position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center; display: block; }
.tx-slide { position: absolute; inset: 0; background-size: cover; background-position: center;
	opacity: 0; transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1);
	transform: scale(1.04); }
.tx-slide.on { opacity: 1; animation: tx-derive 9s ease-out forwards; }
@keyframes tx-derive { from { transform: scale(1.04); } to { transform: scale(1.10); } }
.tx-hero-voile { position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(96deg, rgba(14, 24, 48, .95) 0%, rgba(14, 24, 48, .86) 34%,
			rgba(14, 24, 48, .60) 62%, rgba(14, 24, 48, .48) 100%),
		linear-gradient(to bottom, rgba(14, 24, 48, .55) 0%, rgba(14, 24, 48, 0) 26%,
			rgba(14, 24, 48, 0) 72%, rgba(14, 24, 48, .62) 100%); }
.tx-hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Le texte passe en clair dès qu'il y a un visuel — et lui seul :
   le reste de la page ne change pas. */
.tx-hero.has-visuels .tx-bc,
.tx-hero.has-visuels .tx-bc a { color: rgba(255, 255, 255, .62); }
.tx-hero.has-visuels .tx-bc a:hover { color: #C7B08A; }
.tx-hero.has-visuels .tx-kicker { color: #C7B08A; }
.tx-hero.has-visuels h1 { color: #fff; }
.tx-hero.has-visuels h1 em { color: rgba(255, 255, 255, .48); }
.tx-hero.has-visuels .tx-rule { background: #C7B08A; }
.tx-hero.has-visuels .tx-lede { color: rgba(255, 255, 255, .80); }
.tx-hero.has-visuels .tx-kpi { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16);
	backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.tx-hero.has-visuels .tx-kpi strong { color: #fff; }
.tx-hero.has-visuels .tx-kpi span { color: rgba(255, 255, 255, .60); }
.tx-bc { font-size: 12px; letter-spacing: .04em; color: var(--text-quiet); margin-bottom: 26px; }
.tx-bc a { color: var(--text-quiet); text-decoration: none; }
.tx-bc a:hover { color: var(--tx-gold); }
.tx-bc span[aria-hidden] { margin: 0 7px; }
.tx-d, .tx-kicker { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-gold); }
.tx-hero h1 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400; letter-spacing: -.01em;
	font-size: clamp(34px, 5.4vw, 62px); line-height: 1.05; color: var(--tx-navy); margin: 16px 0 0; }
.tx-hero h1 em { font-style: normal; color: rgba(20, 38, 70, .42); display: block; }
.tx-rule { width: 76px; height: 1px; background: var(--tx-gold); margin: 26px 0; }
.tx-lede { max-width: 720px; font-size: 17px; line-height: 1.72; color: var(--tx-ink); margin: 0 0 34px; }
.tx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; max-width: 900px; }
.tx-kpi { background: #fff; border: 1px solid var(--tx-line); border-radius: 12px; padding: 20px 22px; }
.tx-kpi strong { display: block; font-family: var(--r5-serif, Georgia, serif); font-size: 32px;
	font-weight: 400; color: var(--tx-navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tx-kpi span { display: block; margin-top: 5px; font-size: 12px; letter-spacing: .05em; color: var(--text-quiet); }

/* ── 2. Ce que vous regardez ────────────────────────────────────── */
.tx-intro { padding: 88px 0; background: #fff; }
.tx-intro-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px;
	display: grid; grid-template-columns: 1.25fr .85fr; gap: 60px; align-items: start; }
.tx-intro h2 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400; font-size: clamp(26px, 3.2vw, 38px);
	color: var(--tx-navy); margin: 14px 0 22px; line-height: 1.2; }
.tx-intro p { color: var(--tx-ink); line-height: 1.78; margin: 0 0 18px; max-width: 62ch; }
.tx-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tx-line); }
.tx-facts li { display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
	padding: 15px 0; border-bottom: 1px solid var(--tx-line); }
.tx-facts span { font-size: 12px; letter-spacing: .05em; color: var(--text-quiet); flex: none; }
.tx-facts strong { font-weight: 500; color: var(--tx-navy); text-align: right; font-size: 14px; }

/* ── 3. Carte ───────────────────────────────────────────────────── */
.tx-map-sec { padding: 84px 0 72px; background: var(--tx-cream); }
.tx-map-head { max-width: 1180px; margin: 0 auto 30px; padding: 0 24px; }
.tx-map-head h2 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 40px);
	color: var(--tx-navy); margin: 14px 0 14px; line-height: 1.15; }
.tx-map-head p { max-width: 760px; color: var(--tx-ink); line-height: 1.72; margin: 0; }

/* Barre compacte, celle de l'historique : mêmes commandes, moins de
   place, et pas de champ de recherche — il vit en haut de page. */
.tx-filters.is-compact { max-width: none; margin: 22px 0 30px; padding: 16px 18px;
	background: var(--tx-cream); border-radius: 12px; gap: 18px 26px; }
.tx-filters.is-compact .tx-chip { padding: 7px 14px; font-size: 12px; }
.tx-filters.is-compact label { margin-bottom: 7px; }
.tx-f label em { font-style: normal; color: var(--tx-gold); letter-spacing: .04em; text-transform: none; }
.tx-filters { max-width: 1180px; margin: 0 auto 20px; padding: 20px 22px; background: #fff;
	border: 1px solid var(--tx-line); border-radius: 14px;
	display: flex; flex-wrap: wrap; gap: 22px 30px; align-items: flex-end; }
.tx-f label, .tx-f summary { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--text-quiet); margin-bottom: 9px; }
.tx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tx-chip { appearance: none; border: 1px solid var(--tx-line); background: #fff; color: var(--tx-navy);
	border-radius: 50px; padding: 9px 17px; font-size: 13px; cursor: pointer; font-family: inherit;
	transition: background .25s ease, color .25s ease, border-color .25s ease; }
.tx-chip:hover { border-color: var(--tx-gold); color: var(--tx-gold); }
.tx-chip.on { background: var(--tx-green); border-color: var(--tx-green); color: #fff; }
.tx-f-com { flex: 1 1 240px; min-width: 210px; }
#tx-search { width: 100%; padding: 11px 18px; border: 1px solid var(--tx-line); border-radius: 50px;
	font-size: 14px; font-family: inherit; background: #fff; color: var(--tx-navy); }
#tx-search:focus { outline: none; border-color: var(--tx-gold); }
.tx-f-list { position: relative; }
.tx-f-list summary { cursor: pointer; padding: 11px 18px; border: 1px solid var(--tx-line); border-radius: 50px;
	margin: 0; background: #fff; color: var(--tx-navy); text-transform: none; letter-spacing: 0; font-size: 13px;
	list-style: none; }
.tx-f-list summary::-webkit-details-marker { display: none; }
.tx-f-list summary::after { content: ' ▾'; color: var(--text-quiet); }
.tx-f-list[open] summary { border-color: var(--tx-gold); }
.tx-comgrid { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: min(560px, 84vw);
	background: #fff; border: 1px solid var(--tx-line); border-radius: 14px; padding: 16px;
	box-shadow: 0 22px 54px rgba(20, 38, 70, .14);
	display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 14px;
	max-height: 320px; overflow-y: auto; }
/* LE PANNEAU S'OUVRE DU CÔTÉ OÙ IL Y A DE LA PLACE.
   Ancré à gauche en toutes circonstances, il partait vers la droite —
   or la page porte DEUX barres de filtres, et celle de droite s'ouvre à
   1108 px. Sur un écran de 1440, le panneau courait jusqu'à 1668 : 228 px
   coupés, soit près de la moitié des communes inaccessibles, et le
   visiteur n'avait aucun moyen de s'en douter. Le site rogne le
   dépassement horizontal (body overflow-x: clip), ce qui masquait le
   défaut au lieu de le signaler.
   La bascule est posée par assets/js/transactions.js, qui mesure avant
   d'ouvrir. Constaté et corrigé le 01/09/2026. */
.tx-comgrid.tx-vers-gauche { left: auto; right: 0; }
.tx-com { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx-navy);
	text-transform: none; letter-spacing: 0; margin: 0; cursor: pointer; padding: 4px 0; }
.tx-comact { grid-column: 1 / -1; display: flex; gap: 14px; padding-top: 10px; margin-top: 6px;
	border-top: 1px solid var(--tx-line); }
.tx-link { appearance: none; border: 0; background: none; color: var(--tx-gold); font-size: 12px;
	cursor: pointer; padding: 0; font-family: inherit; text-decoration: underline; }
.tx-reset { appearance: none; border: 0; background: none; color: var(--text-quiet); font-size: 12px; cursor: pointer;
	font-family: inherit; text-decoration: underline; padding: 11px 0; }
.tx-reset:hover { color: var(--tx-gold); }

.tx-map-wrap { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
#tx-map { height: clamp(420px, 62vh, 660px); border-radius: 16px; overflow: hidden;
	border: 1px solid var(--tx-line); background: #E9E6DF; }
.tx-map-legend { position: absolute; left: 40px; bottom: 22px; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; }
.tx-lg { background: rgba(255, 255, 255, .94); border: 1px solid var(--tx-line); border-radius: 50px;
	padding: 6px 13px 6px 10px; font-size: 12px; color: var(--tx-navy); display: inline-flex; align-items: center; gap: 7px; }
.tx-lg::before { content: ''; width: 9px; height: 9px; border-radius: 50%; }
.tx-lg-m::before { background: #1E4D3E; }
.tx-lg-a::before { background: #2563EB; }
.tx-map-count { position: absolute; right: 40px; top: 18px; z-index: 5;
	background: rgba(20, 38, 70, .90); color: #fff; border-radius: 50px; padding: 8px 16px; font-size: 13px;
	font-variant-numeric: tabular-nums; }
.tx-map-note { max-width: 1180px; margin: 16px auto 0; padding: 0 24px; font-size: 13px; color: var(--text-quiet); line-height: 1.65; }
.tx-noscript { padding: 18px; color: var(--tx-ink); }

/* Infobulle de la carte */
.tx-pop { font-family: inherit; min-width: 190px; }
.tx-pop b { display: block; font-family: var(--r5-serif, Georgia, serif); font-size: 17px; color: var(--tx-navy); }
.tx-pop .tx-pop-adr { display: block; font-size: 12px; color: var(--text-quiet); margin: 2px 0 9px; }
.tx-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; font-size: 13px; }
.tx-pop dt { color: var(--text-quiet); }
.tx-pop dd { margin: 0; text-align: right; color: var(--tx-navy); font-variant-numeric: tabular-nums; }
.tx-pop dd strong { color: var(--tx-green); }
.maplibregl-popup-content { border-radius: 12px; padding: 15px 17px; box-shadow: 0 16px 40px rgba(20, 38, 70, .18); }
.maplibregl-popup-tip { border-top-color: #fff; }

/* ── 4. Historique des ventes — le clair de la maquette ─────────
   Fond blanc, filets d'un pixel plutôt que des cartes flottantes,
   chiffres en serif, libellés en petites capitales, sous-ligne dorée.
   Rien qui brille : la donnée porte la page. */
.tx-hist { padding: 88px 0; background: #fff; }
.tx-hist-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.tx-hist-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
	flex-wrap: wrap; padding-bottom: 24px; border-bottom: 2px solid var(--tx-navy); }
.tx-hist h2 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400;
	font-size: clamp(25px, 3.2vw, 36px); color: var(--tx-navy); margin: 12px 0 0; line-height: 1.15; }
.tx-hist-meta { font-size: 12px; color: var(--text-quiet); margin: 0 0 4px; font-variant-numeric: tabular-nums; }

/* Les quatre indicateurs */
.tx-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--tx-line); }
.tx-cell { padding: 28px 32px; border-right: 1px solid var(--tx-line); }
.tx-cell:last-child { border-right: 0; }
.tx-cell .v { font-family: var(--r5-serif, Georgia, serif); font-size: clamp(28px, 3.4vw, 38px);
	color: var(--tx-navy); line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.tx-cell .l { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-quiet); margin-bottom: 5px; }
.tx-cell .s { font-size: 11px; color: var(--tx-gold); min-height: 15px; }

/* Répartition dans le temps */
.tx-time { padding: 34px 0 8px; border-bottom: 1px solid var(--tx-line); }
.tx-time-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
	flex-wrap: wrap; margin-bottom: 26px; }
.tx-time-d { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-quiet); }
.tx-time-sub { display: block; font-size: 12px; color: var(--tx-gold); margin-top: 6px; }
.tx-gran .tx-chip { padding: 7px 15px; font-size: 12px; }
.tx-bars { display: flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 18px); min-height: 148px;
	padding-bottom: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tx-bar { flex: 1 1 0; min-width: 26px; display: flex; flex-direction: column; align-items: center;
	justify-content: flex-end; height: 148px; }
.tx-bar .n { font-size: 11px; font-weight: 600; color: var(--tx-navy); margin-bottom: 5px;
	font-variant-numeric: tabular-nums; }
.tx-bar .b { display: block; width: 100%; max-width: 54px; height: var(--h, 4%); min-height: 3px;
	background: var(--tx-navy); opacity: .85; border-radius: 2px 2px 0 0;
	transition: height .5s cubic-bezier(.22, .61, .36, 1); }
.tx-bar:hover .b { opacity: 1; background: var(--tx-green); }
.tx-bar .x { font-size: 10px; color: var(--text-quiet); margin-top: 9px; white-space: nowrap; }

/* Les deux répartitions, en clair */
.tx-donuts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.tx-donutbox { padding: 34px 32px; border-right: 1px solid var(--tx-line); }
.tx-donutbox:last-child { border-right: 0; }
.tx-donutbox h3 { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
	color: var(--text-quiet); margin: 0 0 24px; }
.tx-donut-wrap { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
/* Même principe que les anneaux par commune : le diamètre est une
   variable, et le chiffre du centre en dérive. Le trou fait 142 − 2×25
   = 92 px ; « 1,96 mrd » à 25 px en mesurait 98 et passait à la ligne,
   par-dessus son propre libellé. */
.tx-donut { --tx-rond: 142px;
	position: relative; width: var(--tx-rond); height: var(--tx-rond); flex: none; }
.tx-donut .ring { position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(#1E4D3E 0deg var(--deg, 0deg), #C7B08A var(--deg, 0deg) 360deg);
	transition: background .6s cubic-bezier(.22, .61, .36, 1); }
.tx-donut .hole { position: absolute; inset: calc(var(--tx-rond) * 0.176); border-radius: 50%;
	background: #fff; display: flex; flex-direction: column; align-items: center;
	justify-content: center; text-align: center; }
.tx-donut .hole strong { font-family: var(--r5-serif, Georgia, serif); font-weight: 400;
	/* 0,15 × le diamètre : « 1,96 mrd » y tient en une ligne avec de la
	   marge, à toutes les tailles où le rond est décliné. */
	font-size: calc(var(--tx-rond) * 0.15); white-space: nowrap;
	color: var(--tx-navy); font-variant-numeric: tabular-nums; line-height: 1.05; }
.tx-donut .hole span { font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--text-quiet); white-space: nowrap; }
.tx-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 14px; }
.tx-leg { display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
	padding-left: 14px; border-left: 3px solid #1E4D3E; }
.tx-leg.gold { border-left-color: #C7B08A; }
.tx-leg .n { font-size: 13px; color: var(--tx-ink); }
.tx-leg .x { font-family: var(--r5-serif, Georgia, serif); font-size: 20px; color: var(--tx-navy);
	font-variant-numeric: tabular-nums; }
.tx-leg .x small { display: block; font-size: 11px; color: var(--text-quiet); font-family: inherit; text-align: right; }
.tx-source-line { font-size: 12px; color: var(--text-quiet); margin: 26px 0 0; line-height: 1.6; }

/* ── 5 & 6. Tableaux ────────────────────────────────────────────── */
/* ── Le bloc « D'un coup d'œil » porte sa propre palette ──────────
   Les variables --tx-* sont posées sur `.r5-transactions`, le conteneur
   de CETTE page. Le bloc étant partagé avec la page Estimation depuis le
   28/08, elles y étaient introuvables : bordures invalides, chip active
   sans fond, tableau sans filets. Un composant qui voyage emporte ses
   couleurs. Et `display` est rappelé car page.css, chargée après,
   remet les boutons en bloc. */
.tx-compare {
	--tx-navy:  #14213F;
	--tx-green: #1E4D3E;
	--tx-gold:  #8B6F47;
	--tx-cream: #F6F4EF;
	--tx-line:  rgba(20, 38, 70, .10);
	--tx-ink:   #5A5A56;
	padding: 88px 0; background: #fff;
}
.tx-compare .tx-chip { display: inline-flex; align-items: center; }
.tx-list { padding: 88px 0; background: var(--tx-cream); }
.tx-compare-inner, .tx-list-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.tx-compare h2, .tx-list h2 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400;
	font-size: clamp(26px, 3.4vw, 40px); color: var(--tx-navy); margin: 14px 0 12px; }
.tx-compare-copy { color: var(--tx-ink); margin: 0 0 30px; max-width: 640px; line-height: 1.7; }
/* Le renvoi glossaire suit l'intro et précède le tableau : on le
   rapproche du texte qu'il prolonge et on aère avant le tableau. */
.tx-list-inner .r5-renvoi-glossaire { margin: -12px 0 30px; max-width: 640px; }
.tx-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--tx-line); border-radius: 14px; background: #fff; }
.tx-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.tx-table th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-quiet);
	font-weight: 500; text-align: left; padding: 15px 18px; border-bottom: 2px solid var(--tx-navy); white-space: nowrap; }
.tx-table th[data-sort], .tx-table th[data-rsort] { cursor: pointer; user-select: none; }
.tx-table th[data-sort]:hover, .tx-table th[data-rsort]:hover { color: var(--tx-gold); }
.tx-table th[data-sort]::after, .tx-table th[data-rsort]::after { content: '↕'; opacity: .3; margin-left: 6px; font-size: 10px; }
.tx-table th.asc::after  { content: '↑'; opacity: 1; color: var(--tx-gold); }
.tx-table th.desc::after { content: '↓'; opacity: 1; color: var(--tx-gold); }
.tx-table td { padding: 14px 18px; border-bottom: 1px solid var(--tx-line); font-size: 14px; color: var(--tx-navy); }
.tx-table tbody tr:hover { background: rgba(139, 111, 71, .045); }
.tx-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.tx-table .c a { color: var(--tx-navy); text-decoration: none; border-bottom: 1px solid transparent; }
.tx-table .c a:hover { border-bottom-color: var(--tx-gold); color: var(--tx-gold); }
.tx-table .c small { color: var(--text-quiet); margin-left: 5px; font-size: 12px; }
.tx-table tbody tr:last-child td { border-bottom: 0; }
.tx-empty { padding: 40px 18px; text-align: center; color: var(--text-quiet); }
.tx-more { text-align: center; margin-top: 24px; }
.tx-morebtn { appearance: none; border: 1px solid var(--tx-line); background: #fff; color: var(--tx-navy);
	border-radius: 50px; padding: 13px 30px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
	cursor: pointer; font-family: inherit; transition: border-color .25s ease, color .25s ease; }
.tx-morebtn:hover { border-color: var(--tx-gold); color: var(--tx-gold); }

/* ── 7. CTA ─────────────────────────────────────────────────────── */
.tx-cta { padding: 0 0 88px; background: var(--tx-cream); }
.tx-cta-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tx-cta article { background: var(--tx-navy); color: #fff; border-radius: 16px; padding: 40px 42px; }
.tx-cta article.alt { background: var(--tx-green); }
.tx-cta h3 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400; font-size: 27px; margin: 12px 0 14px; color: #fff; }
.tx-cta p { color: rgba(255, 255, 255, .78); line-height: 1.72; margin: 0 0 26px; }
.tx-btn { display: inline-block; background: var(--tx-gold); color: #fff; text-decoration: none;
	border-radius: 50px; padding: 14px 30px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	transition: background .25s ease; }
.tx-btn:hover { background: #A88B63; }
.tx-btn.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .45); }
.tx-btn.ghost:hover { background: rgba(255, 255, 255, .12); }

/* ── 8. FAQ ─────────────────────────────────────────────────────── */
.tx-faq { padding: 88px 0; background: #fff; }
.tx-faq-inner { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.tx-faq h2 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 40px);
	color: var(--tx-navy); margin: 14px 0 36px; }
.center { text-align: center; }
.tx-faq details { border-bottom: 1px solid var(--tx-line); }
.tx-faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
	font-family: var(--r5-serif, Georgia, serif); font-size: 18px; color: var(--tx-navy); }
.tx-faq summary::-webkit-details-marker { display: none; }
.tx-faq summary span { position: absolute; right: 4px; top: 50%; width: 10px; height: 10px;
	border-right: 1px solid var(--tx-gold); border-bottom: 1px solid var(--tx-gold);
	transform: translateY(-70%) rotate(45deg); transition: transform .3s ease; }
.tx-faq details[open] summary span { transform: translateY(-30%) rotate(-135deg); }
.tx-faq details p { color: var(--tx-ink); line-height: 1.78; margin: 0 0 24px; padding-right: 40px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
	.tx-intro-inner { grid-template-columns: 1fr; gap: 40px; }
	.tx-grid { grid-template-columns: 1fr 1fr; }
	.tx-cell:nth-child(2n) { border-right: 0; }
	.tx-cell:nth-child(-n+2) { border-bottom: 1px solid var(--tx-line); }
	.tx-donuts { grid-template-columns: 1fr; }
	.tx-donutbox { border-right: 0; border-bottom: 1px solid var(--tx-line); }
	.tx-cta-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.tx-hero { padding: calc(var(--r5-header-h) + 34px) 0 48px !important; }
	/* Sur mobile le visuel est vu de face : le voile devient vertical
	   pour garder le titre lisible sur toute la largeur. */
	.tx-hero-voile { background:
		linear-gradient(to bottom, rgba(14, 24, 48, .93) 0%, rgba(14, 24, 48, .82) 45%,
			rgba(14, 24, 48, .88) 100%); }
	.tx-intro, .tx-hist, .tx-compare, .tx-list, .tx-faq { padding: 60px 0; }
	.tx-grid { grid-template-columns: 1fr; }
	.tx-cell { border-right: 0; border-bottom: 1px solid var(--tx-line); padding: 22px 0; }
	.tx-cell:last-child { border-bottom: 0; }
	.tx-donutbox { padding: 28px 0; }
	.tx-bars { gap: 5px; }
	.tx-bar { min-width: 22px; }
	.tx-bar .x { font-size: 9px; }
	.tx-map-sec { padding: 60px 0 48px; }
	.tx-filters { flex-direction: column; align-items: stretch; gap: 18px; padding: 18px; }
	.tx-f-list { position: static; }
	.tx-comgrid { position: static; width: auto; box-shadow: none; margin-top: 8px; max-height: 240px; }
	.tx-comact { position: static; margin-top: 10px; }
	#tx-map { height: 62vh; min-height: 380px; border-radius: 12px; }
	.tx-map-legend { left: 32px; bottom: 14px; }
	.tx-map-count { right: 32px; top: 12px; font-size: 12px; padding: 6px 13px; }
	.tx-donut-wrap { gap: 20px; }
	.tx-cta article { padding: 30px 24px; }
	/* Deux colonnes plutôt que quatre lignes : le hero passait à 974 px
	   de haut sur mobile, soit un écran entier avant le moindre contenu. */
	.tx-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
	.tx-kpi { padding: 15px 16px; }
	.tx-kpi strong { font-size: 24px; }
	.tx-kpi span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.tx-donut .ring, .tx-chip, .tx-faq summary span, .tx-bar .b { transition: none !important; }
	/* Le fond ne dérive plus et ne fond plus : il change, c'est tout. */
	.tx-slide { transition: none !important; animation: none !important; transform: none !important; }
	.tx-slide.on { animation: none !important; }
}

/* ── 5bis. Répartition par commune — vue graphique par défaut ─────
   Deux anneaux et leur classement : on veut que le marché se lise
   d'un regard avant de plonger dans les chiffres. Le tableau reste à
   un clic, pour qui veut trier et comparer colonne par colonne. */
.tx-views { display: flex; gap: 8px; margin: 0 0 30px; }

/* Le masquage par [hidden] est garanti globalement dans base.css. */

.tx-rings { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
	border: 1px solid var(--tx-line); border-radius: 14px; overflow: hidden; }
.tx-ring-box { padding: 30px 28px; border-right: 1px solid var(--tx-line); min-width: 0; }
.tx-ring-box:last-child { border-right: 0; }
.tx-ring-box h3 { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
	color: var(--text-quiet); margin: 0 0 26px; }
.tx-ring-wrap { display: flex; align-items: center; gap: 28px; }
/* La taille de l'anneau est une variable, et tout ce qui vit dedans en
   dérive. Sinon le chiffre garde sa taille quand l'anneau rétrécit : le
   « 1,96 mrd » débordait du trou et écrasait son libellé sous 640 px. */
.tx-ring { --tx-anneau: 180px;
	position: relative; width: var(--tx-anneau); height: var(--tx-anneau); flex: none; }
.tx-ring svg { width: 100%; height: 100%; display: block; }
.tx-arc { transition: opacity .25s ease, stroke-width .25s ease; }
.tx-ring-box.is-focus .tx-arc { opacity: .28; }
.tx-ring-box.is-focus .tx-arc.on { opacity: 1; stroke-width: 31; }
.tx-ring-hole { position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; pointer-events: none;
	/* Le trou réel n'est pas le carré : rayon 68 moins la moitié du trait
	   de 26, soit 55 sur 90 — 61 % du diamètre. On borne le contenu là. */
	padding-inline: calc(var(--tx-anneau) * 0.195); text-align: center; }
.tx-ring-hole strong { font-family: var(--r5-serif, Georgia, serif); font-weight: 400;
	/* 0,14 × le diamètre : « 1,96 mrd », la valeur la plus longue que le
	   formateur produise, mesure alors 99 px pour 110 disponibles. */
	font-size: calc(var(--tx-anneau) * 0.14);
	white-space: nowrap;
	color: var(--tx-navy); line-height: 1.05; font-variant-numeric: tabular-nums; }
.tx-ring-hole span { font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--text-quiet); margin-top: 3px; white-space: nowrap; }

/* Le classement, qui fait office de légende */
.tx-rank { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0;
	max-height: 330px; overflow-y: auto; counter-reset: rang; }
.tx-rank li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center;
	padding: 9px 10px; border-radius: 8px; transition: background .2s ease; }
.tx-rank li:hover { background: rgba(139, 111, 71, .07); }
.tx-rank .p { width: 10px; height: 10px; border-radius: 2px; }
.tx-rank .c { min-width: 0; }
/* Ce lien est en BLOC : il occupe toute la largeur de sa colonne, donc
   la règle des 24 px du critère 2.5.8 s'applique — un lien de bloc n'est
   pas un mot au milieu d'une phrase. Il mesurait 22 px, deux de trop peu.
   Un pixel au-dessus et au-dessous suffit, et la ligne ne bouge pas.
   Mesuré le 01/09/2026. */
.tx-rank .c a { color: var(--tx-navy); text-decoration: none; font-size: 14px; display: block;
	padding-block: 1px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-rank .c a:hover { color: var(--tx-gold); }
.tx-rank .c em { display: block; font-style: normal; font-size: 11px; color: var(--text-quiet); margin-top: 1px; }
.tx-rank .v { text-align: right; font-size: 15px; font-weight: 600; color: var(--tx-navy);
	font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-rank .v small { display: block; font-size: 11px; font-weight: 400; color: var(--text-quiet); }
.tx-rank-empty { padding: 34px 10px; color: var(--text-quiet); font-size: 14px; }

@media (max-width: 980px) {
	.tx-rings { grid-template-columns: 1fr; }
	.tx-ring-box { border-right: 0; border-bottom: 1px solid var(--tx-line); }
	.tx-ring-box:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
	.tx-ring-wrap { flex-direction: column; align-items: stretch; gap: 22px; }
	.tx-ring { --tx-anneau: 158px; align-self: center; }
	.tx-ring-box { padding: 26px 18px; }
	.tx-rank { max-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .tx-arc, .tx-rank li { transition: none !important; } }


/* ── Note de plafond du tableau ─────────────────────────────────── */
.tx-more-note { margin: 14px auto 0; max-width: 620px; font-size: 13px; color: var(--text-quiet); line-height: 1.6; }

/* ── 9. PASSER À L'ACTION — le bloc qui ferme la page ─────────────
   Trois intentions, une seule action. Le fond est le visuel de nuit,
   figé et très assombri : il rappelle la carte du haut de page sans
   rejouer l'animation, qui n'aurait plus rien à dire ici. */
.tx-final { position: relative; overflow: hidden; background: #0B1428; padding: 96px 0; }
.tx-final-bg { position: absolute; inset: 0; background-size: cover; background-position: center 38%;
	transform: scale(1.03); }
.tx-final-voile { position: absolute; inset: 0;
	background:
		radial-gradient(120% 90% at 18% 50%, rgba(11, 20, 40, .97) 0%, rgba(11, 20, 40, .82) 45%, rgba(11, 20, 40, .70) 100%),
		linear-gradient(to bottom, rgba(11, 20, 40, .55), rgba(11, 20, 40, .90)); }
.tx-final-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 24px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; }

.tx-final .tx-d { color: #C7B08A; }
.tx-final h2 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400; color: #fff;
	font-size: clamp(30px, 4vw, 50px); line-height: 1.12; letter-spacing: -.01em; margin: 16px 0 22px; }
.tx-final h2 em { font-style: normal; color: rgba(255, 255, 255, .45); }
.tx-final-copy p { color: rgba(255, 255, 255, .72); line-height: 1.78; margin: 0; max-width: 46ch; font-size: 15px; }

.tx-final-q { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	color: rgba(255, 255, 255, .45); margin-bottom: 16px; }
.tx-intents { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.tx-intent { display: flex; align-items: center; gap: 16px; padding: 17px 20px; border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .045);
	text-decoration: none; color: #fff; cursor: pointer;
	transition: border-color .28s ease, background .28s ease, transform .28s ease; }
.tx-intent:hover { border-color: rgba(199, 176, 138, .55); background: rgba(255, 255, 255, .085); transform: translateX(3px); }
.tx-intent.on { border-color: #C7B08A; background: rgba(199, 176, 138, .14); }
.tx-intent:focus-visible { outline: 2px solid #C7B08A; outline-offset: 3px; }
.tx-intent-ic { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .10);
	color: rgba(255, 255, 255, .78); transition: background .28s ease, color .28s ease; }
.tx-intent-ic svg { width: 21px; height: 21px; }
.tx-intent.on .tx-intent-ic { background: #C7B08A; border-color: #C7B08A; color: #0B1428; }
.tx-intent-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tx-intent-txt strong { font-weight: 500; font-size: 15px; }
.tx-intent-txt em { font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .52); }

.tx-final-btn { display: inline-flex; align-items: center; gap: 12px; background: #C7B08A; color: #0B1428;
	text-decoration: none; border-radius: 50px; padding: 16px 32px; font-size: 12px; letter-spacing: .12em;
	text-transform: uppercase; font-weight: 600; transition: background .25s ease, gap .25s ease; }
.tx-final-btn:hover { background: #D9C9AE; gap: 16px; }
.tx-final-btn svg { width: 17px; height: 17px; }
.tx-final-note { margin: 16px 0 0; font-size: 12px; color: rgba(255, 255, 255, .42); letter-spacing: .02em; }

@media (max-width: 980px) {
	.tx-final-inner { grid-template-columns: 1fr; gap: 40px; }
	.tx-final { padding: 72px 0; }
}
@media (max-width: 768px) {
	/* base.css impose « h2 { clamp(20px, 5.5vw, 32px) !important } » à
	   tous les titres de section sur mobile — un filet utile, mais qui
	   ramène la phrase de clôture au rang d'un intertitre. Ce bloc est
	   le dernier mot de la page : il mérite d'être lu comme tel. */
	.tx-final h2 { font-size: clamp(26px, 7vw, 34px) !important; }
}
@media (max-width: 640px) {
	.tx-final { padding: 56px 0; }
	.tx-final-voile { background: linear-gradient(to bottom, rgba(11, 20, 40, .90), rgba(11, 20, 40, .95)); }
	.tx-intent { padding: 14px 16px; gap: 13px; }
	.tx-intent-ic { width: 38px; height: 38px; }
	.tx-final-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.tx-intent, .tx-final-btn { transition: none !important; }
	.tx-intent:hover { transform: none; }
}

/* ── Commentaire de marché écrit par les données ─────────────────── */
.tx-analyse h2 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400;
	font-size: clamp(24px, 3vw, 34px); color: var(--tx-navy); margin: 14px 0 22px; line-height: 1.22; }
.tx-analyse p { color: var(--tx-ink); line-height: 1.82; margin: 0 0 16px; max-width: 64ch; }
.tx-analyse-note { font-size: 13px; color: var(--text-quiet); border-left: 2px solid var(--tx-line);
	padding-left: 14px; margin-top: 22px; line-height: 1.6; }

/* Le bloc « Les temps forts » vit dans assets/css/temps-forts.css :
   il est partagé avec l'accueil depuis le 28/08. */

/* ── Formulaire du bloc de clôture ────────────────────────────────
   Visible par défaut : sans JavaScript, personne ne doit se retrouver
   devant un bouton qui n'ouvre rien. Le script le replie au chargement
   et le déplie au premier clic sur le bouton doré. */
/* Dépliement sans hauteur magique : la grille passe de 0fr à 1fr, donc
   la transition suit la hauteur RÉELLE du contenu. Un `max-height` en
   dur finit toujours par trop couper ou trop attendre — ici un message
   d'erreur qui rallonge le formulaire ne le tronquera jamais. */
.tx-form { display: grid; grid-template-rows: 1fr; margin-top: 22px;
	transition: grid-template-rows .55s cubic-bezier(.22,.61,.36,1), opacity .4s ease, margin-top .4s ease; }
.tx-form > * { min-height: 0; }
.tx-form-corps { overflow: hidden; }
.tx-form.est-replie { grid-template-rows: 0fr; opacity: 0; margin-top: 0; pointer-events: none; }
.tx-final-btn.est-ouvert { background: transparent; color: #C7B08A; border: 1px solid rgba(199,176,138,.45); }
.tx-final-btn.est-ouvert:hover { background: rgba(199,176,138,.12); }
.tx-form-titre { margin: 0 0 16px; font-family: var(--r5-serif, Georgia, serif); font-size: 17px; color: #fff; }
.tx-form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tx-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tx-form label > span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.tx-form-large { grid-column: 1 / -1; }
.tx-form input, .tx-form textarea { width: 100%; background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 12px 14px;
	color: #fff; font-family: inherit; font-size: 14px; transition: border-color .25s ease, background .25s ease; }
.tx-form input:focus, .tx-form textarea:focus { outline: none; border-color: #C7B08A; background: rgba(255,255,255,.11); }
.tx-form textarea { resize: vertical; min-height: 74px; }
.tx-form-envoi { margin-top: 16px; width: 100%; background: #C7B08A; color: #0B1428; border: 0;
	border-radius: 50px; padding: 15px 28px; font-family: inherit; font-size: 12px; letter-spacing: .12em;
	text-transform: uppercase; font-weight: 600; cursor: pointer; transition: background .25s ease; }
.tx-form-envoi:hover { background: #D9C9AE; }
.tx-form-envoi:disabled { opacity: .6; cursor: default; }
.tx-form .r5-form-status { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.72); }
.tx-form .r5-form-status.is-error { color: #E9B4A6; }
.tx-form .r5-form-status.is-success { color: #A7D8BE; }
.tx-form .r5-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .tx-form-grille { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tx-form { transition: none !important; } }

/* Lisibilité mobile (audit 26/08) : ces libellés — mois du graphique et
   légendes au cœur des anneaux — tombaient à 9 px sur téléphone. Ils
   passent à 10,5 px sous 600 px ; les anneaux ont la place, la mesure
   après correction le confirme. */
@media (max-width: 600px) {
	.tx-bar .x { font-size: 10.5px; }
	.tx-donut .hole span,
	.tx-ring-hole span { font-size: 10.5px; }
}

/* ── Affiner : les maisons par terrain ─────────────────────────────
   Au seuil du tableau détaillé, le seul endroit de la page qui affiche
   déjà une colonne « Terrain ». Volontairement plus discret que les
   deux barres de filtres : c'est un affinement, pas un troisième jeu
   de filtres concurrent. Fond crème, pas de bordure blanche, et la
   même grammaire — libellés en capitales fines, or pour l'accent. */
.tx-affiner {
	max-width: 1180px;
	margin: 0 auto 22px;
	padding: 16px 20px;
	background: var(--tx-cream);
	border-radius: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 26px;
}
.tx-affiner-intro { flex: 1 1 100%; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tx-affiner-tag {
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: #fff; background: var(--tx-green);
	border-radius: 50px; padding: 4px 12px; flex: none;
}
.tx-affiner-intro p { margin: 0; font-size: 13px; color: #6F6F6A; }

.tx-af label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--text-quiet); margin-bottom: 9px; }
.tx-af label em { font-style: normal; color: var(--tx-gold); letter-spacing: .04em; text-transform: none; }

/* Le menu des communes reprend la pilule du champ de recherche : deux
   contrôles de même nature ont la même forme. */
#tx-af-com {
	appearance: none;
	min-width: 230px;
	padding: 11px 38px 11px 18px;
	border: 1px solid var(--tx-line);
	border-radius: 50px;
	font-size: 14px; font-family: inherit;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23B08D57' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
	color: var(--tx-navy);
	cursor: pointer;
}
#tx-af-com:focus { outline: none; border-color: var(--tx-gold); }

.tx-af-paire { display: flex; align-items: center; gap: 8px; }
.tx-af-paire input {
	width: 108px;
	padding: 11px 14px;
	border: 1px solid var(--tx-line);
	border-radius: 50px;
	font-size: 14px; font-family: inherit;
	background: #fff; color: var(--tx-navy);
	/* Les chiffres s'alignent : deux bornes se comparent d'un coup d'œil. */
	font-variant-numeric: tabular-nums;
}
.tx-af-paire input:focus { outline: none; border-color: var(--tx-gold); }
.tx-af-tiret { color: var(--text-quiet); }

.tx-af-clear { padding: 11px 0; }

/* Le compte et la note : le compte apparaît quand une borne est posée,
   la note reste toujours — elle dit d'où viennent les bornes. */
.tx-af-bilan, .tx-af-note { flex: 1 1 100%; margin: 0; font-size: 13px; }
.tx-af-bilan { color: var(--tx-navy); font-weight: 500; }
.tx-af-bilan::before { content: "→ "; color: var(--tx-gold); }
.tx-af-note { color: var(--text-quiet); font-size: 12px; }

@media (max-width: 620px) {
	.tx-affiner { gap: 14px 18px; }
	#tx-af-com { min-width: 0; width: 100%; }
	.tx-af-paire input { width: 100%; min-width: 0; }
	.tx-af { flex: 1 1 100%; }
}

/* Le quartier, à côté de sa commune. Plus discret qu'elle : c'est une
   précision, pas une seconde commune. */
.tx-table .tx-quartier { color: var(--tx-gold, #b08d57); white-space: nowrap; }