/* Pages du maillage territorial.
   Bâti sur les tokens de global.css. Les seules valeurs locales sont celles des
   graphiques, validées (ΔE OKLab + simulation CVD) :

     --viz-emphase  #E85A00  contraste 3,56:1 sur blanc
     --viz-contexte #A79C90  contraste 2,69:1 sur blanc
     paire : ΔE 18,1 en vision normale (plancher 15), pire cas CVD 12,7 (cible 8)

   La paire orange/rouge de la première version échouait : ΔE 9,2 en vision
   normale — indistinguable même sans déficience. Le rouge a donc disparu des
   graphiques ; l'emphase F/G passe par l'orange + une légende écrite. */

.terr-page {
  --viz-emphase: #E85A00;
  --viz-contexte: #A79C90;
  --viz-surface: #FFFFFF;
}

.terr-conteneur {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* ---------- Fil d'Ariane ----------
   Le composant partagé (partials/breadcrumbs.html) fait foi : <ol>, microdonnées
   BreadcrumbList, aria-current. On ne redéfinit que la largeur du conteneur —
   le composant est calé sur les 1200 px du site, ces pages sur 1040 px, et
   l'écart de 84 px se voyait immédiatement sous le fil. */
.terr-fil-cadre .breadcrumbs .container {
  max-width: 1040px;
}

/* ---------- Hero ---------- */
.terr-hero {
  background:
    radial-gradient(1200px 400px at 12% -10%, rgba(255, 110, 20, .10), transparent 60%),
    linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-warm) 100%);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-2xl) 0;
}
.terr-hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: var(--spacing-2xl);
  align-items: center;
}
.terr-surtitre {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-sm);
}
.terr-hero h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 var(--spacing-lg);
  color: var(--color-text-primary);
  max-width: 20ch;
}

.terr-prix {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--spacing-md);
  border-left: 4px solid var(--color-primary);
  margin-bottom: var(--spacing-md);
}
.terr-prix__valeur {
  font-size: clamp(2.5rem, 5.5vw, 3.6rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
}
.terr-prix__valeur small { font-size: .34em; font-weight: var(--font-weight-semibold); }
.terr-prix__mention {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  max-width: 46ch;
}
.terr-hero__accroche {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-lg);
  max-width: 48ch;
}

/* ---------- Boutons ---------- */
.terr-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.terr-bouton svg { width: 18px; height: 18px; flex-shrink: 0; }
.terr-bouton--primaire {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(232, 90, 0, .28);
}
.terr-bouton--primaire:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 90, 0, .34);
  color: #fff;
}
.terr-bouton--secondaire {
  background: var(--color-bg-white);
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}
.terr-bouton--secondaire:hover { background: var(--color-bg-secondary); }
.terr-bouton--fantome {
  background: transparent;
  color: var(--color-primary-dark);
  border-color: var(--color-border);
  font-size: var(--font-size-base);
  padding: 0.6rem 1.1rem;
  margin-top: var(--spacing-md);
}
.terr-bouton--fantome:hover { background: var(--color-bg-secondary); }
.terr-bouton--compact { padding: 0.55rem 1.1rem; font-size: var(--font-size-base); }
.terr-bouton:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.terr-lien {
  display: inline-block;
  margin-top: var(--spacing-sm);
  color: var(--color-primary-dark);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.terr-cta { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.terr-cta__mention {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--spacing-md) 0 0;
  max-width: 52ch;
}

/* ---------- Carte ---------- */
.terr-hero__carte { display: flex; flex-direction: column; gap: var(--spacing-md); }
.terr-carte-zone {
  height: 320px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  z-index: 0;
}
.terr-carte-zone .leaflet-container { font-family: inherit; background: var(--color-bg-secondary); }
.terr-carte__faits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}
.terr-carte__faits li {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
}
.terr-carte__faits--large { grid-column: 1 / -1; }
.terr-carte__faits span {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}
.terr-carte__faits strong { font-size: var(--font-size-base); color: var(--color-text-primary); }

/* ---------- Tuiles de chiffres-clés ---------- */
.terr-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--spacing-md);
  margin-top: calc(var(--spacing-xl) * -1);
  position: relative;
  z-index: 2;
}
.terr-tuile {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.terr-tuile__label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
}
.terr-tuile__valeur {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.terr-tuile__valeur small { font-size: .5em; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.terr-tuile__detail { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ---------- Corps ---------- */
.terr-corps { padding: var(--spacing-2xl) var(--spacing-lg); }
.terr-section { margin-bottom: var(--spacing-2xl); }
.terr-section h2 {
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--spacing-md);
  color: var(--color-text-primary);
  letter-spacing: -.01em;
}
.terr-intro { color: var(--color-text-secondary); margin: 0 0 var(--spacing-lg); max-width: 64ch; }
.terr-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-sm);
  max-width: 70ch;
}
.terr-note a { color: var(--color-primary-dark); }
.terr-maj { font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: right; }

.terr-avertissement {
  background: var(--color-warning-light);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xl);
}

/* ---------- Jauge de positionnement ---------- */
.terr-jauge-bloc {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}
.terr-jauge__phrase { color: var(--color-text-secondary); margin: 0 0 var(--spacing-xl); max-width: 64ch; }
.terr-jauge { padding-top: var(--spacing-xl); }
.terr-jauge__piste {
  position: relative;
  height: 10px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #F0EBE4 0%, var(--viz-contexte) 55%, var(--viz-emphase) 100%);
}
.terr-jauge__curseur {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--viz-emphase);
  /* Anneau à la couleur de surface : le curseur reste lisible où qu'il tombe
     sur la piste (cf. « surface ring » des specs de marques). */
  box-shadow: 0 0 0 3px var(--viz-surface), 0 2px 6px rgba(0, 0, 0, .2);
  transform: translate(-50%, -50%);
}
.terr-jauge__bulle {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--color-text-primary);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  padding: 3px var(--spacing-sm);
  border-radius: var(--radius-sm);
}
.terr-jauge__bornes {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.terr-jauge__bornes span:nth-child(2) { text-align: center; }
.terr-jauge__bornes span:last-child { text-align: right; }

/* ---------- Constats ---------- */
.terr-constats { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-sm); }
.terr-constat {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  line-height: 1.6;
  max-width: 74ch;
}

/* Constats bornés dans le temps : encadrés sous leur période, pour qu'aucun ne
   se lise comme une description du marché d'aujourd'hui. */
.terr-periode {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}
.terr-periode__entete {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  max-width: 74ch;
}
.terr-periode__puce {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  transform: translateY(-1px);
}
.terr-constat--periode { border-left-color: var(--viz-contexte); }

/* ---------- Figures et graphiques ---------- */
.terr-figure {
  margin: 0;
  background: var(--viz-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}
.terr-figure__legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border-light);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.terr-figure__unite { margin-left: auto; color: var(--color-text-muted); }
.terr-cle { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.terr-cle__pastille {
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--viz-contexte);
  display: inline-block;
}
.terr-cle__pastille--emphase { background: var(--viz-emphase); }

/* Histogramme : marques fines, extrémité arrondie côté données, base carrée */
.terr-histo {
  display: flex;
  align-items: flex-end;
  gap: 2px;              /* l'écart de surface sépare les barres, pas un contour */
  height: 200px;
}
.terr-histo__colonne {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 4px;
  min-width: 0;
}
.terr-histo__barre {
  width: 100%;
  max-width: 24px;
  min-height: 2px;
  background: var(--viz-contexte);
  border-radius: 4px 4px 0 0;
}
.terr-histo__barre--emphase { background: var(--viz-emphase); }
.terr-histo__valeur {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.terr-histo__axe {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.terr-histo__axe--emphase { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.terr-histo--dpe { height: 170px; }
.terr-histo--dpe .terr-histo__barre { max-width: 46px; }

/* Barres horizontales (tranches de surface) */
.terr-barres { display: grid; gap: var(--spacing-md); }
.terr-barres__ligne {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 92px 78px;
  align-items: center;
  gap: var(--spacing-md);
}
.terr-barres__label { font-size: var(--font-size-base); color: var(--color-text-primary); }
.terr-barres__piste { background: var(--color-bg-light); border-radius: var(--radius-full); height: 14px; }
.terr-barres__barre {
  height: 100%;
  background: var(--viz-emphase);
  border-radius: 0 4px 4px 0;
}
.terr-barres__valeur {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.terr-barres__n { font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: right; }

/* ---------- Tableaux ---------- */
.terr-tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.terr-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}
.terr-tableau th, .terr-tableau td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}
.terr-tableau td { font-variant-numeric: tabular-nums; }
.terr-tableau thead th {
  background: var(--color-bg-secondary);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.terr-tableau tbody tr:last-child th,
.terr-tableau tbody tr:last-child td { border-bottom: none; }
.terr-tableau tbody tr:hover { background: var(--color-bg-light); }
.terr-tableau--compact { max-width: 560px; }
.terr-ligne--partielle { color: var(--color-text-muted); }
.terr-partiel {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.terr-vide { color: var(--color-text-muted); font-style: italic; }

/* ---------- Relance intermédiaire ---------- */
.terr-relance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  background: linear-gradient(120deg, var(--color-bg-secondary) 0%, rgba(255, 110, 20, .12) 100%);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}
.terr-relance h2 { font-size: var(--font-size-xl); margin: 0 0 var(--spacing-xs); }
.terr-relance p { margin: 0; color: var(--color-text-secondary); max-width: 60ch; }

/* ---------- Action de clôture ---------- */
.terr-action {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}
.terr-action__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-lg);
}
.terr-action__carte {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.terr-action__carte h3 { margin: 0 0 var(--spacing-xs); font-size: var(--font-size-lg); }
.terr-action__carte p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  margin: 0 0 var(--spacing-lg);
  flex: 1;
}

/* ---------- Communes voisines ---------- */
.terr-voisines {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-sm);
}
.terr-voisines a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-md);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.terr-voisines a:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.terr-voisines__nom { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.terr-voisines__prix { color: var(--color-primary-dark); font-weight: var(--font-weight-semibold); }
.terr-voisines__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ---------- Hub départemental ---------- */
.terr-liste { list-style: none; padding: 0; margin: 0; column-width: 220px; column-gap: var(--spacing-xl); }
.terr-liste li { break-inside: avoid; padding: var(--spacing-xs) 0; }
.terr-liste a { color: var(--color-text-primary); text-decoration: none; }
.terr-liste a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.terr-liste__prix { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---------- Barre d'action collante ---------- */
.terr-barre {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .07);
  z-index: 900;
  padding: var(--spacing-sm) var(--spacing-lg);
}
.terr-barre__contenu {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.terr-barre__info { font-size: var(--font-size-base); color: var(--color-text-secondary); }

/* ---------- Accessibilité ---------- */
.terr-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .terr-bouton, .terr-voisines a { transition: none; }
  .terr-bouton--primaire:hover, .terr-voisines a:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .terr-hero__grille { grid-template-columns: 1fr; gap: var(--spacing-xl); }
  .terr-hero h1 { max-width: none; }
  .terr-carte-zone { height: 240px; }
  .terr-tuiles { margin-top: var(--spacing-lg); }
  .terr-barres__ligne { grid-template-columns: 110px minmax(0, 1fr) 84px; }
  .terr-barres__n { display: none; }
}

@media (max-width: 620px) {
  .terr-corps { padding: var(--spacing-xl) var(--spacing-md); }
  .terr-conteneur { padding: 0 var(--spacing-md); }
  .terr-cta { flex-direction: column; align-items: stretch; }
  .terr-histo { height: 160px; }
  .terr-histo__axe { font-size: 10px; }
  .terr-relance { flex-direction: column; align-items: flex-start; }
  .terr-jauge__bornes span:nth-child(2) { display: none; }
  /* La bottom-nav PWA occupe déjà le bas de l'écran */
  .terr-barre { bottom: 64px; }
}