/* Page « Audit énergétique » : seuls les ajouts propres à la page.
   Tout le reste réutilise les styles communs de style.css. */

.audit-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  max-width: 62rem;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.audit-proof p {
  flex: 1 1 22rem;
  display: flex;
  gap: 0.6rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-2);
  text-wrap: pretty;
}
.audit-proof .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; color: var(--gres); }
.audit-proof .ordre-badge { width: 200px; }

.card--outline { border: 1px solid var(--line-soft); }
.audit-cards { margin-top: var(--s5); }
@media (min-width: 900px) { .audit-cards { grid-template-columns: repeat(3, 1fr); } }

.audit-why-title { max-width: 26ch; margin-bottom: var(--s5); }
.dark .audit-why-title + .card-grid { margin-top: 0; }

.audit-steps { margin-top: var(--s6); }
@media (min-width: 1100px) { .audit-steps { grid-template-columns: repeat(4, 1fr); } }

.prose .text-link { margin-top: var(--s3); }
.prose .note { margin-top: var(--s3); }

.audit-actions-note { margin-top: var(--s3); }

/* ---- Animation « de G à A » : scène fixée pendant le défilement
   Sans JavaScript ou avec « réduire les animations » : maison terminée, textes en liste */
.audit-climb { background: var(--surface); padding-block: var(--s6); }
.climb-grid { display: grid; gap: var(--s4); align-items: center; }
.climb-house { margin: 0; }
.climb-house svg { display: block; width: 100%; height: auto; max-height: 70vh; margin-inline: auto; overflow: visible; }
.climb-warm { fill: #f6d7c8; }
.climb-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.climb-heat { display: none; fill: none; stroke: var(--gres); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 9; }
.climb-heat--small { stroke-width: 2.5; }
.climb-heat--smoke { stroke: var(--muted); }
.climb-new { fill: none; stroke: var(--success); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.climb-new--thin { stroke-width: 4; }
.climb-fan { fill: var(--bg); stroke: var(--success); stroke-width: 3; stroke-linecap: round; }
.climb-side .headline { margin-top: var(--s1); }

.climb-scale { position: relative; margin-top: var(--s3); }
.climb-rows { display: grid; gap: 5px; }
.climb-row { height: 32px; }
.climb-bar {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
}
.climb-bar--a { background: #1d7a46; }
.climb-bar--b { background: #55a35c; }
.climb-bar--c { background: #a8bb4a; color: var(--ink); }
.climb-bar--d { background: #e0b23a; color: var(--ink); }
.climb-bar--e { background: #e0893a; }
.climb-bar--f { background: #d0642f; }
.climb-bar--g { background: #a63f2e; }
.climb-marker { display: none; }

.climb-caps { display: grid; gap: var(--s1); margin-top: var(--s3); }
.climb-caps strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.climb-caps span { display: block; color: var(--ink-2); text-wrap: pretty; }
.climb-note { margin-top: var(--s2); font-size: var(--fs-xs); color: var(--muted); }

@media (min-width: 900px) {
  .climb-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s6); }
}

.audit-climb.is-live { height: 420vh; padding: 0; }
.is-live .climb-stage {
  position: sticky;
  top: var(--header-h);
  display: flex;
  align-items: center;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  overflow: hidden;
}
.is-live .climb-heat { display: block; animation: climb-drift 1.5s linear infinite paused; }
.is-running .climb-heat { animation-play-state: running; }
@keyframes climb-drift { to { stroke-dashoffset: -30; } }
.is-live .climb-new > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-live .climb-blades { transform-box: fill-box; transform-origin: center; animation: climb-spin 1.6s linear infinite paused; }
.is-running .climb-blades { animation-play-state: running; }
@keyframes climb-spin { to { transform: rotate(360deg); } }

.is-live .climb-row { opacity: 0.32; transition: opacity 200ms var(--ease-out); }
.is-live .climb-row.is-active { opacity: 1; }
.is-live .climb-marker {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transition: color 200ms var(--ease-out);
}
.climb-marker svg, .climb-marker span { grid-area: 1 / 1; }
.climb-marker svg { width: 100%; height: 100%; }
.climb-marker span { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: #fff; }

.is-live .climb-caps { gap: 0; }
.is-live .climb-caps li {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.is-live .climb-caps li.is-active { opacity: 1; transform: none; }

@media (max-width: 899px) {
  .audit-climb.is-live { height: 380vh; }
  .is-live .climb-stage { align-items: flex-start; padding-top: var(--s2); }
  .is-live .climb-grid { gap: var(--s1); width: 100%; }
  .is-live .climb-house svg { max-height: 27vh; max-height: 27svh; }
  .is-live .climb-side .eyebrow { display: none; }
  .is-live .climb-side .headline { margin-top: 0; font-size: 1.5rem; }
  .is-live .climb-scale { margin-top: var(--s1); }
  .is-live .climb-rows { gap: 3px; }
  .is-live .climb-row { height: 23px; }
  .is-live .climb-bar { padding-left: 0.5rem; font-size: 0.8125rem; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
  .is-live .climb-marker { width: 32px; height: 32px; }
  .climb-marker span { margin-top: 6px; font-size: 0.8125rem; }
  .is-live .climb-caps { margin-top: var(--s2); }
  .is-live .climb-caps strong { font-size: 1.0625rem; }
  .is-live .climb-caps span { font-size: var(--fs-small); }
  .is-live .climb-note { margin-top: var(--s1); font-size: 0.75rem; }
}
@media (max-height: 600px) { .is-live .climb-note { display: none; } }

/* ---- Photo du haut : regle fine des classes energetiques, le detecteur glisse lentement */
.audit-photo { position: relative; touch-action: pan-y; }
.audit-photo img { object-position: 50% 30%; }
.audit-photo::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 34%;
  background: linear-gradient(to bottom, rgba(16, 16, 18, 0.46), rgba(16, 16, 18, 0));
  pointer-events: none;
}
.gauge { position: absolute; z-index: 1; inset: var(--s4) clamp(1.5rem, 6vw, 5rem) auto; color: #fff; }
.gauge-track { position: relative; padding-top: 1.875rem; }
.gauge-letters { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; }
.gauge-letters li { position: relative; width: 0; height: 1.5rem; display: flex; justify-content: center; align-items: center; }
.gauge-letters b {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  opacity: 0.6;
}
.gauge-chip {
  position: absolute;
  top: 0;
  left: -0.875rem;
  width: 1.75rem;
  height: 1.5rem;
  border-radius: 6px;
  opacity: 0;
}
.gauge-chip--a { background: #1d7a46; }
.gauge-chip--b { background: #55a35c; }
.gauge-chip--c { background: #a8bb4a; }
.gauge-chip--d { background: #e0b23a; }
.gauge-chip--e { background: #e0893a; }
.gauge-chip--f { background: #d0642f; }
.gauge-chip--g { background: #a63f2e; }
/* Grandes graduations une par lettre, petites entre les deux */
.gauge-rule {
  height: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.75);
  border-right: 1px solid rgba(255, 255, 255, 0.85);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 1px, transparent 1px calc(100% / 6)) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 1px, transparent 1px calc(100% / 36)) 0 0 / 100% 6px no-repeat;
}
/* Le detecteur : ce bloc fait la largeur de la regle, son bord gauche porte l'aiguille */
.gauge-needle { position: absolute; inset: 0; pointer-events: none; transform: translateX(50%); color: #e0b23a; }
.gauge-needle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.625rem;
  width: 1px;
  height: 36px;
  background: #fff;
}
.gauge-needle::after {
  content: '';
  position: absolute;
  left: -5px;
  top: calc(1.625rem + 34px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: currentColor;
}
@media (max-width: 639px) {
  .gauge { inset-block-start: var(--s2); }
  .gauge-letters b { font-size: 0.8125rem; }
  .gauge-chip { left: -0.6875rem; width: 1.375rem; }
  .gauge-needle::before { height: 28px; }
  .gauge-needle::after { top: calc(1.625rem + 26px); }
}