/* ==========================================================================
   Carnet de Visites — feuille de style unique.

   Toutes les couleurs, espacements et rayons sont des variables CSS : le style
   peut évoluer sans toucher au HTML.
   ========================================================================== */

:root {
  /* Fonds */
  --bg: #f4f1e8;
  --surface: #ffffff;
  --surface-muted: #f7f6f2;
  --surface-sunken: #ebe7da;

  /* Texte */
  --ink: #11150f;
  --ink-soft: #3c433a;
  --ink-muted: #6b7280;
  --ink-inverse: #f6f8f3;

  /* Verts */
  --green-900: #0b3d2c;
  --green-800: #12513a;
  --green-600: #2e8b6b;
  --green-100: #e2efe8;
  --lime: #c8f751;
  --lime-dark: #a8d92f;

  /* Panneau sombre et signaux */
  --panel: #14181a;
  --panel-soft: #222a2c;
  --warn: #e0541f;
  --warn-soft: #fdeee6;
  --gold: #ffd400;
  --gold-soft: #fff7b0;
  --gold-hover: #e6c419;
  --gold-ink: #6b4a00;
  --on-gold: #ffffff;
  --danger: #b42318;
  --danger-soft: #fdecea;
  /* Rouge franc pour les indices prix (verdict « au-dessus du marché », scores /100). */
  --danger-vivid: #dc2626;
  --danger-vivid-soft: #fee2e2;
  --info: #2563eb;
  --info-soft: #e8efff;

  /* Note de prix A–F (échelle façon DPE) */
  --grade-a: #319834;
  --grade-b: #5faa32;
  --grade-c: #a7c62c;
  --grade-d: #f2d307;
  --grade-e: #eca40c;
  --grade-f: #e2691b;

  /* Bordures */
  --border: #e2ded1;
  --border-strong: #cfc9b6;

  /* Formes */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(17, 21, 15, 0.04),
    0 8px 24px rgba(17, 21, 15, 0.06);
  --shadow-raised: 0 12px 32px rgba(17, 21, 15, 0.12);

  /* Espacements */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Typographie */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --page-max: 1280px;

  /* Chevron des blocs repliables (details / summary) */
  --summary-chevron-size: 32px;
  --summary-chevron-icon: 8px;
}

/* ------------------------------ Base ------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Évite le décalage horizontal quand une modale masque la scrollbar. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

p {
  margin: 0 0 var(--space-3);
}

p:last-child {
  margin-bottom: 0;
}

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

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

main[tabindex="-1"]:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ----------------------------- Barre haute ------------------------------ */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar__scrim {
  position: fixed;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(17, 21, 15, 0.42);
  backdrop-filter: blur(3px);
  z-index: -1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.topbar--nav-open .topbar__scrim {
  opacity: 1;
  pointer-events: auto;
}

.topbar__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.topbar__menu-btn:hover {
  background: var(--surface-muted);
}

.topbar__menu-btn-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
}

.topbar__menu-btn-bars span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.topbar--nav-open .topbar__menu-btn-bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.topbar--nav-open .topbar__menu-btn-bars span:nth-child(2) {
  opacity: 0;
}

.topbar--nav-open .topbar__menu-btn-bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.topbar__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand:hover {
  text-decoration: none;
}

.brand__mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--green-900);
  color: var(--lime);
  display: grid;
  place-items: center;
  font-size: 15px;
}

.topnav {
  display: flex;
  gap: var(--space-1);
  flex: 1;
}

.topnav__drawer-head,
.topnav__drawer-foot,
.topnav__link-icon,
.topnav__link-hint,
.topnav__link-chevron {
  display: none;
}

.topnav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.topnav__link:hover {
  background: var(--surface-muted);
  text-decoration: none;
}

.topnav__link.is-active {
  background: var(--panel);
  color: var(--ink-inverse);
}

.topnav__link-text {
  display: inline;
}

.topnav__link-label {
  font-weight: inherit;
}

.topnav__drawer-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Menu déroulant « Outils » (pattern nav-tools-menu) ----------------------- */

.topnav__group {
  position: relative;
}

.topnav__trigger {
  gap: var(--space-2);
  background: transparent;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.topnav__trigger-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--ink-muted);
  transition: transform 0.2s ease;
}

.topnav__group.is-open .topnav__trigger:not(.is-active) {
  background: var(--surface-muted);
}

.topnav__group.is-open .topnav__trigger-chevron {
  transform: rotate(180deg);
}

.topnav__trigger.is-active .topnav__trigger-chevron {
  color: var(--ink-inverse);
}

/* Le menu commence sous la barre ; le haut transparent sert de pont au survol. */
.topnav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 25;
  min-width: 19.5rem;
  padding-top: var(--space-4);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.22s;
}

.topnav__group.is-open .topnav__menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.topnav__menu-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.topnav__menu-eyebrow {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.topnav__menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.topnav__menu-item:hover,
.topnav__menu-item:focus-visible {
  background: var(--surface-muted);
  text-decoration: none;
}

.topnav__menu-item.is-active {
  background: var(--surface-muted);
  border-color: var(--border);
}

.topnav__menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--green-100);
  color: var(--green-600);
  transition: background 0.15s ease, color 0.15s ease;
}

.topnav__menu-icon svg {
  width: 20px;
  height: 20px;
}

.topnav__menu-item:hover .topnav__menu-icon,
.topnav__menu-item:focus-visible .topnav__menu-icon,
.topnav__menu-item.is-active .topnav__menu-icon {
  background: var(--green-900);
  color: var(--lime);
}

.topnav__menu-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.topnav__menu-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.topnav__menu-hint {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-muted);
}

.topnav__menu-arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--ink-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.2s ease;
}

.topnav__menu-item:hover .topnav__menu-arrow,
.topnav__menu-item:focus-visible .topnav__menu-arrow {
  opacity: 0.7;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .topnav__menu,
  .topnav__group.is-open .topnav__menu,
  .topnav__trigger-chevron,
  .topnav__menu-arrow {
    transition: none;
  }
}

.topbar__account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topbar__email {
  font-size: 13px;
  color: var(--ink-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Interrupteur décoratif « ours grincheux » (partials/bear-toggle.ejs). */
.bear-toggle {
  --bear-y: 100%;
  --arm-x: 0px;
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 24px;
}

.bear-toggle__stage {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 24px;
  height: 24px;
  overflow: hidden;
  pointer-events: none;
}

.bear-toggle__bear {
  position: absolute;
  top: 0;
  left: 2px;
  width: 20px;
  transform: translateY(var(--bear-y)) rotate(5deg);
  transition: transform 0.25s ease;
}

.bear-toggle__brows {
  display: none;
}

.bear-toggle.is-angry .bear-toggle__brows {
  display: inline;
}

.bear-toggle__switch {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.bear-toggle__input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.bear-toggle__track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-pill);
}

.bear-toggle__input:focus-visible + .bear-toggle__track {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

/* Les translations du décor sont en unités du viewBox SVG. Éteint = jour, allumé = nuit. */
.bear-toggle__scene {
  display: block;
  width: 100%;
  height: 100%;
  /* Miroir du Pen : soleil à gauche, lune à droite, pour que la patte (qui
     sort par la droite) ramène le jour. */
  transform: scaleX(-1);
}

.bear-toggle__outline {
  fill: #85e8fe;
  stroke: #fcfdfe;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.bear-toggle.is-on .bear-toggle__outline {
  fill: #45568d;
  stroke: #6172ad;
}

.bear-toggle__orb {
  transform: translate(140px, 20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bear-toggle.is-on .bear-toggle__orb {
  transform: translate(0, 0);
}

.bear-toggle__sun,
.bear-toggle__moon {
  transition: opacity 0.3s ease;
}

.bear-toggle__moon,
.bear-toggle.is-on .bear-toggle__sun {
  opacity: 0;
}

.bear-toggle.is-on .bear-toggle__moon {
  opacity: 1;
}

.bear-toggle__stars {
  opacity: 0;
  transform: translateX(-30px);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.bear-toggle.is-on .bear-toggle__stars {
  opacity: 1;
  transform: translateX(0);
}

.bear-toggle__cloud {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  transition-delay: 0.06s;
}

.bear-toggle.is-on .bear-toggle__cloud {
  opacity: 0;
  transform: translate(40px, 0);
  transition-delay: 0s;
}

.bear-toggle.is-on .bear-toggle__cloud--big {
  transform: translate(20px, 0);
}

/* L'avion ne traverse qu'au retour du jour, pas au chargement de la page. */
.bear-toggle__plane {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bear-toggle.was-on:not(.is-on) .bear-toggle__plane {
  opacity: 1;
  animation: bear-toggle-plane 0.55s linear;
}

.bear-toggle__contrail {
  opacity: 0;
}

.bear-toggle.was-on:not(.is-on) .bear-toggle__contrail {
  animation: bear-toggle-contrail 0.95s ease-out;
}

@keyframes bear-toggle-plane {
  from {
    transform: translateX(-400px);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes bear-toggle-contrail {
  0%,
  55% {
    opacity: 0.53;
  }
  100% {
    opacity: 0;
  }
}

.bear-toggle__arm {
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: 2;
  width: 52px;
  height: 10px;
  margin-top: -5px;
  border-radius: 5px;
  background: #784421;
  transform: translateX(var(--arm-x));
  transition: transform 0.3s ease;
}

.bear-toggle__arm::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e9c6af;
}

.bear-toggle__swear {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-raised);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}

.bear-toggle__swear::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom-color: #fff;
}

.bear-toggle.is-swearing .bear-toggle__swear {
  display: block;
}

/* -------------------------------- Page ---------------------------------- */

.page {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-7);
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.page-title {
  font-size: clamp(28px, 4vw, 44px);
}

.page-title__muted {
  display: block;
  color: var(--ink-muted);
  font-weight: 700;
}

.page-subtitle {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font-size: 14px;
}

.page-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Pied de page (pattern layout-site-footer) : panneau sombre, halos lime et
   vert, colonnes de liens. Effet « footer révélé » (parallax) : app.js ajoute
   .site-footer--reveal ; le panneau (.site-footer__stage) reste fixe en bas de
   la fenêtre et le coffre .site-footer, qui garde la hauteur dans le flux, le
   découvre au fur et à mesure du défilement (clip-path). Sans script, le pied
   est un bloc normal. */
.site-footer {
  position: relative;
  isolation: isolate;
}

.site-footer--reveal {
  clip-path: inset(0);
}

.site-footer__stage {
  --footer-ink: color-mix(in srgb, var(--ink-inverse) 78%, transparent);
  --footer-line: color-mix(in srgb, var(--ink-inverse) 16%, transparent);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(42% 70% at 100% 0%, color-mix(in srgb, var(--lime) 13%, transparent), transparent 70%),
    radial-gradient(48% 80% at 0% 100%, color-mix(in srgb, var(--green-600) 45%, transparent), transparent 70%),
    var(--green-800);
  color: var(--footer-ink);
  font-size: 14px;
}

.site-footer--reveal .site-footer__stage {
  position: fixed;
  inset: auto 0 0;
}

/* Liseré lumineux en haut du panneau. */
.site-footer__stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--lime) 55%, transparent) 30%,
    color-mix(in srgb, var(--green-600) 60%, transparent) 70%,
    transparent
  );
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-6);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: var(--space-7);
  padding-bottom: var(--space-6);
}

.site-footer__motto {
  margin: 0 0 var(--space-2);
  color: var(--ink-inverse);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.site-footer__motto em {
  color: var(--lime);
}

.site-footer__pitch {
  max-width: 44ch;
  margin-bottom: var(--space-5);
}

.site-footer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--footer-line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink-inverse) 4%, transparent);
  font-size: 12px;
  font-weight: 600;
}

.site-footer__chip .site-footer__icon {
  color: var(--lime);
}

.site-footer__icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-6) var(--space-5);
  align-content: start;
}

.site-footer__heading {
  margin-bottom: var(--space-3);
  color: var(--ink-inverse);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer__links {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lien : soulignement qui se déploie et flèche qui glisse au survol. */
.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  color: var(--footer-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer__link-label {
  position: relative;
}

.site-footer__link-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-footer__link .site-footer__icon {
  color: var(--lime);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--ink-inverse);
  text-decoration: none;
}

.site-footer__link:hover .site-footer__link-label::after,
.site-footer__link:focus-visible .site-footer__link-label::after {
  transform: scaleX(1);
}

.site-footer__link:hover .site-footer__icon,
.site-footer__link:focus-visible .site-footer__icon {
  opacity: 1;
  transform: translateX(0);
}

.site-footer a:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--footer-line);
  font-size: 13px;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.site-footer__legal-link {
  color: var(--footer-ink);
  text-decoration: underline;
  text-decoration-color: var(--footer-line);
  text-underline-offset: 3px;
}

.site-footer__legal-link:hover {
  color: var(--ink-inverse);
  text-decoration-color: var(--lime);
}

/* Remonter : pastille, la flèche monte au survol. */
.site-footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  border: 1px solid var(--footer-line);
  border-radius: var(--radius-pill);
  color: var(--ink-inverse);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.site-footer__top-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--lime);
  color: var(--green-900);
}

.site-footer__top-icon .site-footer__icon {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-footer__top-link:hover,
.site-footer__top-link:focus-visible {
  border-color: color-mix(in srgb, var(--lime) 50%, transparent);
  background: color-mix(in srgb, var(--ink-inverse) 6%, transparent);
  text-decoration: none;
}

.site-footer__top-link:hover .site-footer__top-icon .site-footer__icon,
.site-footer__top-link:focus-visible .site-footer__top-icon .site-footer__icon {
  transform: translateY(-3px);
}

.site-footer--compact .site-footer__top {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 720px) {
  .site-footer__inner {
    padding-top: var(--space-6);
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__link {
    padding: var(--space-2) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__link,
  .site-footer__link-label::after,
  .site-footer__link .site-footer__icon,
  .site-footer__top-link,
  .site-footer__top-icon .site-footer__icon {
    transition: none;
  }
}

@media print {
  .site-footer {
    display: none;
  }
}

/* Bandeau « Voir en tant que » (pattern feedback-impersonation-banner) :
   collé en haut, au-dessus de la barre, tant que l'admin consulte un compte. */
.impersonation-banner {
  --impersonation-banner-h: calc(var(--space-7) - var(--space-1));
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: var(--impersonation-banner-h);
  background: var(--gold);
  color: var(--gold-ink);
  border-bottom: 1px solid var(--gold-hover);
}

.impersonation-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-5);
}

.impersonation-banner__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.impersonation-banner__text {
  flex: 1;
  margin: 0;
  font-size: 14px;
}

.impersonation-banner__mode {
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--gold-ink);
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 700;
}

.impersonation-banner__form {
  margin: 0;
}

/* Toast de la page (et non de la modale travaux) : fixé en bas de l'écran. */
.impersonation-toast {
  position: fixed;
  bottom: var(--space-6);
  z-index: 70;
}

/* La barre du site, collante elle aussi, se cale sous le bandeau. */
body:has(> .impersonation-banner) .topbar {
  top: calc(var(--space-7) - var(--space-1));
}

@media (max-width: 720px) {
  .impersonation-banner__inner {
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-4);
  }
}

/* ------------------------------- Boutons -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  /* Segoe UI pose le glyphe un peu bas dans la ligne : padding asymétrique pour le centrer dans la pastille. */
  padding: 9px 18px 11px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn--sm {
  padding: 5px 14px 7px;
  font-size: 13px;
}

.btn--icon-only {
  padding: 6px;
  min-width: 2rem;
  min-height: 2rem;
}

.btn--icon-only svg {
  display: block;
}

.btn--dark {
  background: var(--panel);
  color: var(--ink-inverse);
}

.btn--dark:hover {
  background: var(--panel-soft);
}

.btn--green {
  background: var(--green-900);
  color: var(--ink-inverse);
}

.btn--green:hover {
  background: var(--green-800);
}

.btn--lime {
  background: var(--lime);
  color: var(--green-900);
}

.btn--lime:hover {
  background: var(--lime-dark);
}

.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}

.btn--gold:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--on-gold);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink-soft);
}

.btn--ghost:hover:not(.btn--fav-add):not(.btn--danger-ghost):not(.btn--print-ghost) {
  background: var(--surface-muted);
}

.btn--ghost.btn--fav-add:hover,
.btn--ghost.btn--fav-add:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}

.btn--ghost.btn--danger-ghost:hover,
.btn--ghost.btn--danger-ghost:focus-visible {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}

/* Imprimer : neutre au repos, vert de marque au survol (même mécanique que favori et suppression). */
.btn--ghost.btn--print-ghost:hover,
.btn--ghost.btn--print-ghost:focus-visible {
  background: var(--green-900);
  border-color: var(--green-900);
  color: var(--surface);
}

.btn--danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.btn--danger:hover {
  background: var(--danger-soft);
}

.btn--block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Pied de formulaire : à droite, Annuler puis l'action principale. */
.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ------------------------------ Pastilles ------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.pill:hover {
  text-decoration: none;
  border-color: var(--border-strong);
}

.pill.is-active {
  background: var(--panel);
  border-color: var(--panel);
  color: var(--ink-inverse);
}

.pill__count {
  opacity: 0.6;
  font-weight: 500;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-sunken);
  color: var(--ink-soft);
  white-space: nowrap;
}

.badge--neutral {
  background: var(--surface-sunken);
  color: var(--ink-soft);
}

.badge--info {
  background: var(--info-soft);
  color: var(--info);
}

.badge--accent {
  background: var(--green-100);
  color: var(--green-800);
}

.badge--success {
  background: var(--lime);
  color: var(--green-900);
}

.badge--muted {
  background: var(--surface-sunken);
  color: var(--ink-muted);
}

.badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.badge--error {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge--down {
  background: var(--green-100);
  color: var(--green-800);
}

.badge--up {
  background: var(--warn-soft);
  color: var(--warn);
}

.badge--dpe {
  background: var(--panel);
  color: var(--ink-inverse);
  font-family: var(--font-mono);
}

/* ------------------------------- Filtres -------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.filters__group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filters__divider {
  width: 8px;
  height: 2px;
  flex: 0 0 auto;
  border-radius: 1px;
  background: var(--ink);
}

.field-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--ink);
}

#sort-label {
  font-size: 15px;
}

/* ----------------------------- Formulaires ------------------------------ */

.form {
  display: grid;
  gap: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label,
.label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.field__hint {
  font-size: 12px;
  color: var(--ink-muted);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.select--pill {
  border-radius: var(--radius-pill);
  padding: 7px calc(var(--space-2) + 1rem + var(--space-2)) 7px 14px;
  font-size: 13px;
  font-weight: 600;
  width: auto;
  background-position: right var(--space-2) center;
}

.input--sm {
  padding: 6px 10px;
  font-size: 13px;
}

.input--narrow {
  width: 110px;
}

/* Select natif : flèche custom inset (ne jamais laisser la flèche système au bord). */
.select,
.works-select {
  appearance: none;
  cursor: pointer;
  padding-right: calc(var(--space-3) + 1rem + var(--space-3));
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1rem;
}

.textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--green-600);
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 139, 107, 0.15);
}

/* Mot de passe visible à l'appui (pattern form-password-reveal) : bouton œil
   dans le champ, en clair tant qu'il est maintenu (app.js). */
.password-reveal {
  position: relative;
}

.password-reveal .input {
  padding-right: calc(var(--space-2) + 2rem);
}

.password-reveal .input::-ms-reveal {
  display: none;
}

.password-reveal__btn {
  position: absolute;
  top: 50%;
  right: var(--space-1);
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transform: translateY(-50%);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.password-reveal__btn:hover,
.password-reveal__btn.is-revealed {
  color: var(--ink);
  background: var(--surface-muted);
}

.password-reveal__btn:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 1px;
}

.password-reveal__icon {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.password-reveal__icon--hide,
.password-reveal__btn.is-revealed .password-reveal__icon--show {
  opacity: 0;
}

.password-reveal__btn.is-revealed .password-reveal__icon--hide {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .password-reveal__btn,
  .password-reveal__icon {
    transition: none;
  }
}

/* Liste déroulante avec recherche (pattern form-select-search) : public/js/select-search.js
   remplace à l'écran un <select data-select-search> par un champ « combobox ».
   Le champ reprend .select (chevron, halo de focus) ; seul le curseur change. */
.select-search {
  position: relative;
}

.select-search [hidden] {
  display: none;
}

.select-search__input {
  cursor: text;
  text-overflow: ellipsis;
}

.select-search__menu {
  --select-search-shift: calc(var(--space-1) * -1);
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 30;
  max-height: min(320px, 50vh);
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  animation: select-search-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Place insuffisante dessous : le menu s'ouvre vers le haut. */
.select-search--up .select-search__menu {
  --select-search-shift: var(--space-1);
  top: auto;
  bottom: calc(100% + var(--space-1));
}

.select-search__list,
.select-search__group {
  display: grid;
  gap: 2px;
}

.select-search__group + .select-search__group {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.select-search__group-label {
  padding: var(--space-1) var(--space-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.select-search__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.select-search__option.is-active {
  background: var(--surface-sunken);
  color: var(--ink);
}

.select-search__option[aria-selected="true"] {
  color: var(--green-800);
  font-weight: 600;
}

.select-search__option[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.select-search__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.select-search__mark {
  background: var(--gold-soft);
  color: var(--ink);
  font-weight: 700;
}

.select-search__check {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--green-600);
}

.select-search__option[aria-selected="false"] .select-search__check {
  visibility: hidden;
}

.select-search__empty {
  margin: 0;
  padding: var(--space-4) var(--space-3);
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}

@keyframes select-search-in {
  from {
    opacity: 0;
    transform: translateY(var(--select-search-shift));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .select-search__menu {
    animation: none;
  }
}

.field-error {
  color: var(--danger);
  font-size: 13px;
}

.form-errors {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
}

.form-errors ul {
  margin: 0;
  padding-left: var(--space-5);
}

/* ------------------------------- Panneaux ------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.panel + .panel {
  margin-top: var(--space-4);
}

.panel--green {
  background: var(--green-900);
  border-color: var(--green-900);
  color: var(--ink-inverse);
}

.panel--green a {
  color: var(--lime);
}

.panel--dark {
  background: var(--panel);
  border-color: var(--panel);
  color: var(--ink-inverse);
}

.panel--flat {
  box-shadow: none;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.panel__head-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-left: auto;
}

.listing-territory,
.listing-market,
.listing-extension,
.listing-financing,
.listing-notes,
.listing-specs,
.listing-location {
  position: relative;
}

.listing-territory__refresh,
.listing-market__refresh,
.listing-extension__refresh {
  margin: 0;
}

.listing-market__body,
.listing-territory__body,
.listing-extension__body,
.listing-financing__body,
.listing-notes__body,
.listing-specs__body,
.listing-location__body {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px dashed var(--border-strong);
}

/* Séparation Commune (fiche territoriale) / autres jeux de données (ex. délinquance). */
.listing-territory #provider-commune .kv--grid {
  border-bottom: 1px solid var(--border);
}

.listing-territory #provider-commune:has(+ .listing-territory__split) .kv--grid {
  border-bottom: 0;
}

.listing-territory__split {
  margin: var(--space-5) 0;
  border: 0;
  height: 1px;
  background: var(--border);
  opacity: 0.9;
}

.listing-territory__split + .provider-block {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.panel__title {
  font-size: 18px;
}

.panel__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
}

.panel--green .panel__eyebrow,
.panel--dark .panel__eyebrow {
  color: rgba(246, 248, 243, 0.6);
}

.panel__note {
  margin-top: var(--space-4);
  font-size: 12px;
  color: var(--ink-muted);
}

/* ------------------------------- Cartes --------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  width: 100%;
  flex: none;
  overflow: hidden;
  background: var(--surface-sunken);
}

.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card__media.is-image-missing img {
  visibility: hidden;
}

.card__media--empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  font-size: 13px;
}

/* Photo distante indisponible : on garde le cadre et on l'annonce. */
.is-image-missing {
  display: grid;
  place-items: center;
}

.is-image-missing::after {
  content: "Photo indisponible";
  font-size: 12px;
  color: var(--ink-muted);
}

.card__badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.card__badges .badge {
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.card__badges .badge--down {
  background: var(--lime);
  color: var(--green-900);
}

.card__badges .badge--up {
  background: var(--warn);
  color: #fff;
}

.card__actions {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.card__fav,
.card__delete {
  margin: 0;
}

/* Boutons favori / suppression : fond clair par-dessus la photo. */
.card__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease, opacity 0.15s ease;
}

.card__action-btn svg {
  width: 16px;
  height: 16px;
}

.card__action-btn:hover {
  transform: scale(1.05);
}

.card__action-btn:not(.card__delete-btn):not(.card__fav-btn):hover {
  background: #ffffff;
}

/* Poubelle et étoile vide : visibles seulement au survol de la carte. */
.card__delete-btn,
.card__fav-btn:not(.is-active) {
  opacity: 0;
  pointer-events: none;
}

.card:hover .card__delete-btn,
.card:focus-within .card__delete-btn,
.card:hover .card__fav-btn:not(.is-active),
.card:focus-within .card__fav-btn:not(.is-active) {
  opacity: 1;
  pointer-events: auto;
}

.card__action-btn.card__delete-btn:hover,
.card__action-btn.card__delete-btn:focus-visible {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}

.card__action-btn.card__fav-btn:not(.is-active):hover,
.card__action-btn.card__fav-btn:not(.is-active):focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}

/* En favori : fond jaune et étoile toujours présente sur son fond. */
.card__fav-btn.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}

.card__fav-btn.is-active:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--on-gold);
}

.card__body {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  flex: 1;
}

.card__headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.card__title:hover {
  text-decoration: none;
  color: var(--green-800);
}

.card__price {
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}

.card__meta {
  color: var(--ink-muted);
  font-size: 13px;
}

.card__meta--split {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.card__foot {
  border-top: 1px solid var(--border);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface-muted);
}

.card__foot-note {
  font-size: 12px;
  color: var(--ink-muted);
}

.dot-sep::before {
  content: "·";
  margin: 0 var(--space-1);
  color: var(--border-strong);
}

/* ------------------------------ État vide ------------------------------- */

.empty {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

.empty__title {
  font-size: 22px;
  margin-bottom: var(--space-2);
}

.empty__lead {
  color: var(--ink-muted);
  max-width: 52ch;
  margin: 0 auto var(--space-5);
}

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 560px;
  text-align: left;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-3);
  align-items: start;
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.steps li::before {
  content: counter(step);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--green-900);
  color: var(--ink-inverse);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}

/* -------------------------------- Flash --------------------------------- */

.flash {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 14px;
  font-weight: 500;
}

.flash--info {
  background: var(--info-soft);
  color: var(--info);
}

.flash--success {
  background: var(--green-100);
  color: var(--green-800);
}

.flash--error {
  background: var(--danger-soft);
  color: var(--danger);
}

.flash--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

/* -------------------------------- Modale -------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.modal[hidden] {
  display: none;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 21, 15, 0.45);
  backdrop-filter: blur(2px);
  animation: modal-fade 0.15s ease;
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: var(--space-5);
  animation: modal-pop 0.16s ease;
}

.modal__title {
  font-size: 20px;
  margin-bottom: var(--space-2);
}

.modal__message {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: var(--space-5);
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.modal__dialog--standard > .form + .modal__actions {
  margin-top: var(--space-5);
}

/**
 * Modale standard (saisie, formulaire, confirmation avec croix) :
 * croix en haut à droite, titre dégagé, texte à gauche.
 * Pied : .modal__actions aligné à droite — .btn--ghost « Annuler » puis action (.btn--green ou .btn--danger-solid).
 */
.modal__dialog--standard {
  text-align: left;
}

.modal__dialog--standard > .modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.modal__dialog--standard > .modal__title {
  padding-right: 2.25rem;
}

.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.modal__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

.modal__close:hover,
.modal__close:focus-visible {
  background: var(--surface-muted, #f6f4ed);
  color: var(--ink);
  outline: none;
}

.modal__close:focus-visible {
  box-shadow: 0 0 0 2px var(--green-900);
}

.btn--danger-solid {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn--danger-solid:hover {
  background: #9a1e14;
  border-color: #9a1e14;
}

/* Empêche le défilement de l'arrière-plan quand la modale est ouverte. */
html:has(body.is-modal-open) {
  overflow: hidden;
}

body.is-modal-open {
  overflow: hidden;
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal__overlay,
  .modal__dialog {
    animation: none;
  }
}

/* ---------------------------- Authentification -------------------------- */

.auth {
  max-width: 420px;
  margin: var(--space-7) auto;
}

.auth__title {
  font-size: 28px;
  margin-bottom: var(--space-2);
}

.auth__lead {
  color: var(--ink-muted);
  margin-bottom: var(--space-5);
}

.auth__legal {
  margin: 0;
  text-align: center;
}

.auth__foot {
  margin-top: var(--space-5);
  font-size: 14px;
  color: var(--ink-muted);
  text-align: center;
}

.auth-form {
  margin-top: var(--space-4);
}

/* Action principale d'une carte sans formulaire (lien ou bouton seul). */
.auth-cta {
  margin-top: var(--space-5);
}

.auth-steps {
  margin-bottom: var(--space-4);
}

.auth-resend {
  margin-top: var(--space-4);
}

/* Libellé de champ avec un lien aligné à droite (« Mot de passe oublié ? »). */
.auth-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.auth-field-head__link {
  font-size: 13px;
}

/* ------------------- Consentement de l'extension ------------------------ */

/* Page seule (layout `bare`) : ni menu ni pied, contenu centré dans la fenêtre. */
.page-bare {
  flex: 1;
  display: grid;
  place-items: center;
  width: 100%;
  padding: var(--space-4);
}

.consent {
  width: 100%;
  max-width: 380px;
}

.consent__head {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  text-align: center;
}

.consent__title {
  margin: 0;
  font-size: 20px;
}

.consent__lead {
  margin: 0;
  font-size: 14px;
  color: var(--ink-muted);
}

.consent__note {
  margin: var(--space-4) 0 0;
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
}

.consent-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.consent-identity__avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--green-900);
  color: var(--lime);
  display: grid;
  place-items: center;
  font-weight: 700;
}

.consent-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--ink-soft);
}

.consent-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-2);
  align-items: start;
}

.consent-list li::before {
  content: "✓";
  color: var(--green-600);
  font-weight: 700;
}

.consent-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.consent-actions .btn {
  flex: 1 1 140px;
}

/* -------------------------------- Accueil ------------------------------- */

.hero {
  background: var(--green-900);
  color: var(--ink-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
}

.hero__title {
  font-size: clamp(30px, 5vw, 52px);
  max-width: 24ch;
}

.hero__title span {
  color: var(--lime);
}

.hero__lead {
  margin: var(--space-4) 0 var(--space-5);
  max-width: 60ch;
  color: rgba(246, 248, 243, 0.8);
  font-size: 17px;
}

.hero .btn--ghost {
  border-color: rgba(246, 248, 243, 0.5);
  color: var(--ink-inverse);
}

.hero .btn--ghost:hover {
  background: rgba(246, 248, 243, 0.12);
  color: var(--ink-inverse);
}

/* ---------------------------- Fiche détaillée --------------------------- */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

/* Un seul espacement : le gap du conteneur (pas de marge `.panel + .panel`). */
.detail > .panel + .panel {
  margin-top: 0;
}

/* Sommaire flottant de la fiche : rail de progression + pastilles par section. */
.listing-toc {
  --toc-dot: 12px;
  --toc-inset: var(--space-4);
  display: none;
}

/* Le sommaire vit dans la marge gauche de `.page` : largeur plafonnée pour ne
   pas empiéter sur le contenu ; libellés toujours visibles à droite des pastilles. */
@media (min-width: 1480px) {
  .listing-toc:not([hidden]) {
    display: block;
    position: fixed;
    top: 50%;
    left: var(--toc-inset);
    width: max-content;
    max-width: calc((100vw - var(--page-max)) / 2 - var(--space-4));
    transform: translateY(-50%);
    z-index: 10;
  }
}

.listing-toc__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.listing-toc__rail,
.listing-toc__fill {
  position: absolute;
  left: calc(var(--toc-dot) / 2 - 1px);
  width: 2px;
  border-radius: var(--radius-pill);
}

.listing-toc__rail {
  background: var(--border-strong);
}

.listing-toc__fill {
  height: 0;
  background: var(--green-600);
}

.listing-toc__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 5px 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.listing-toc__link:hover,
.listing-toc__link:focus-visible {
  color: var(--ink);
}

.listing-toc__dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--toc-dot);
  height: var(--toc-dot);
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg);
  transition: background-color 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease;
}

.listing-toc__label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.listing-toc__item.is-passed .listing-toc__dot {
  border-color: var(--green-600);
  background: var(--green-600);
}

.listing-toc__item.is-active .listing-toc__link {
  color: var(--green-900);
  font-weight: 600;
}

.listing-toc__item.is-active .listing-toc__dot {
  border-color: var(--green-900);
  background: var(--lime);
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .listing-toc__link,
  .listing-toc__dot,
  .listing-toc__label {
    transition: none;
  }
}

/* Conteneur htmx du panneau Extension : sans boîte, pour ne pas créer de case vide dans la grille. */
.listing-extension-panel {
  display: contents;
}

.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-5);
  row-gap: var(--space-4);
  align-items: start;
}

.detail-head__intro {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.detail-head__price {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}

.detail-head__toolbar {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  min-width: 0;
}

.detail-head__reject {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: end;
}

.detail-head__reject form {
  margin: 0;
}

.detail-head__icon-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Même emprise que les SVG inline favori / corbeille (18 px), pas la taille .wi par défaut (1,15 em). */
.detail-head__icon-actions .wi {
  width: 18px;
  height: 18px;
}

.detail-head__print-btn svg,
.visit-hero__print svg {
  transform-origin: 50% 60%;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.detail-head__print-btn:hover svg,
.detail-head__print-btn:focus-visible svg,
.visit-hero__print:hover svg,
.visit-hero__print:focus-visible svg {
  animation: detail-print-eject 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes detail-print-eject {
  0% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-2px) scale(1.12);
  }
  60% {
    transform: translateY(1px) scale(0.95);
  }
  100% {
    transform: translateY(0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-head__print-btn:hover svg,
  .detail-head__print-btn:focus-visible svg,
  .visit-hero__print:hover svg,
  .visit-hero__print:focus-visible svg {
    animation: none;
    transform: scale(1.06);
  }
}

.detail-head__delete-btn svg,
.card__delete-btn svg {
  transform-origin: 50% 28%;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.detail-head__delete-btn:hover svg,
.detail-head__delete-btn:focus-visible svg,
.card__delete-btn:hover svg,
.card__delete-btn:focus-visible svg {
  animation: detail-delete-bin 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes detail-delete-bin {
  0% {
    transform: rotate(0) translateY(0);
  }
  35% {
    transform: rotate(-16deg) translateY(-2px);
  }
  55% {
    transform: rotate(-10deg) translateY(-1px) scale(0.96, 1.04);
  }
  100% {
    transform: rotate(-12deg) translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-head__delete-btn:hover svg,
  .detail-head__delete-btn:focus-visible svg,
  .card__delete-btn:hover svg,
  .card__delete-btn:focus-visible svg {
    animation: none;
    transform: translateY(-1px);
  }
}

.detail-head__fav-btn svg,
.card__fav-btn svg {
  transform-origin: 50% 45%;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    fill 0.35s ease,
    filter 0.35s ease;
}

.detail-head__fav-btn.btn--fav-add svg,
.card__fav-btn.btn--fav-add svg {
  fill: none;
}

.detail-head__fav-btn.btn--gold svg,
.card__fav-btn.btn--gold svg {
  fill: currentColor;
}

.detail-head__fav-btn.btn--fav-add:hover svg,
.detail-head__fav-btn.btn--fav-add:focus-visible svg,
.card__fav-btn.btn--fav-add:hover svg,
.card__fav-btn.btn--fav-add:focus-visible svg {
  fill: currentColor;
  animation: detail-fav-star-pop 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 55%, transparent));
}

.detail-head__fav-btn.btn--gold:hover svg,
.detail-head__fav-btn.btn--gold:focus-visible svg,
.card__fav-btn.btn--gold:hover svg,
.card__fav-btn.btn--gold:focus-visible svg {
  animation: detail-fav-star-glow 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 65%, transparent));
}

@keyframes detail-fav-star-pop {
  0% {
    transform: scale(1) rotate(0deg);
  }
  28% {
    transform: scale(1.28) rotate(-22deg);
  }
  48% {
    transform: scale(0.9) rotate(14deg);
  }
  68% {
    transform: scale(1.14) rotate(-8deg);
  }
  100% {
    transform: scale(1.1) rotate(0deg);
  }
}

@keyframes detail-fav-star-glow {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-head__fav-btn:hover svg,
  .detail-head__fav-btn:focus-visible svg,
  .card__fav-btn:hover svg,
  .card__fav-btn:focus-visible svg {
    animation: none;
    filter: none;
    transform: scale(1.06);
  }

  .detail-head__fav-btn.btn--fav-add:hover svg,
  .detail-head__fav-btn.btn--fav-add:focus-visible svg,
  .card__fav-btn.btn--fav-add:hover svg,
  .card__fav-btn.btn--fav-add:focus-visible svg {
    fill: currentColor;
  }
}

.link-exit-arrow {
  display: inline-block;
  transform-origin: 50% 55%;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.detail-head__origin-link:hover .link-exit-arrow,
.detail-head__origin-link:focus-visible .link-exit-arrow,
.card__origin-link:hover .link-exit-arrow,
.card__origin-link:focus-visible .link-exit-arrow,
.listing-location__maps-link:hover .link-exit-arrow,
.listing-location__maps-link:focus-visible .link-exit-arrow,
.address-book__map:hover .link-exit-arrow,
.address-book__map:focus-visible .link-exit-arrow {
  animation: link-exit-arrow 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes link-exit-arrow {
  0% {
    transform: translate(0, 0) scale(1);
  }
  16% {
    transform: translate(4px, -5px) scale(1.18);
  }
  30% {
    transform: translate(1px, -1px) scale(1);
  }
  46% {
    transform: translate(4px, -5px) scale(1.16);
  }
  60% {
    transform: translate(1px, -1px) scale(0.98);
  }
  78% {
    transform: translate(0.5px, -0.5px) scale(1.02);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-head__origin-link:hover .link-exit-arrow,
  .detail-head__origin-link:focus-visible .link-exit-arrow,
  .card__origin-link:hover .link-exit-arrow,
  .card__origin-link:focus-visible .link-exit-arrow,
  .listing-location__maps-link:hover .link-exit-arrow,
  .listing-location__maps-link:focus-visible .link-exit-arrow,
  .address-book__map:hover .link-exit-arrow,
  .address-book__map:focus-visible .link-exit-arrow {
    animation: none;
    transform: translate(2px, -2px);
  }
}

.detail-title {
  font-size: clamp(24px, 3.4vw, 36px);
}

.detail-price {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  margin: 0;
}

.detail-price__unit {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  text-align: right;
}

.detail-meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-3);
}

/* --- Barre de suivi (entre l'en-tête et les photos) ------------------- */

.detail-lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.detail-lead > .panel + .panel {
  margin-top: 0;
}

/* --- En-tête collant condensé (pattern layout-sticky-condensed) ----------
   `.detail--sticky-head` et `.is-head-stuck` sont posés par app.js sur `.detail`,
   qui n'est jamais remplacé par htmx : un `#listing-lead` swapé naît directement
   dans le bon état. `#listing-lead` passe en `display: contents` pour que seul
   le panneau d'en-tête colle (sur toute la hauteur de `.detail`) ; la barre de
   suivi défile normalement et remonte en douceur pendant le repli. */
.detail--sticky-head {
  --detail-head-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --detail-head-duration: 0.5s;
  --detail-head-stick: calc(var(--detail-head-top, 0px) + var(--space-2));
  /* Sans cela, Chrome recale le défilement quand l'en-tête rétrécit : la page
     remonte d'autant, et près du haut l'en-tête se décolle en boucle. */
  overflow-anchor: none;
}

.detail--sticky-head > #listing-lead {
  display: contents;
}

/* Condensé, l'en-tête prend la place de la barre haute (masquée) : il colle
   en haut de la fenêtre. */
.detail--sticky-head.is-head-stuck {
  --detail-head-stick: var(--space-2);
}

/* Un saut d'ancre aboutit toujours à l'état condensé : barre haute masquée. */
.detail--sticky-head > [id],
.detail--sticky-head .detail-lead > [id] {
  scroll-margin-top: calc(
    var(--space-2) + var(--detail-head-compact, 0px) + var(--space-4)
  );
}

.detail--sticky-head .detail-lead__head {
  position: sticky;
  top: var(--detail-head-stick);
  z-index: 15;
  transition:
    padding var(--detail-head-duration) var(--detail-head-ease),
    top var(--detail-head-duration) var(--detail-head-ease);
}

/* Barre haute (logo, navigation, compte) : glisse hors de l'écran pendant que
   l'en-tête est condensé et revient avec lui. Un focus clavier la ramène. */
body:has(.detail--sticky-head) .topbar {
  transition:
    transform var(--detail-head-duration, 0.5s) cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

body:has(.detail--sticky-head.is-head-stuck) .topbar:not(:focus-within) {
  transform: translateY(-100%);
  visibility: hidden;
  transition:
    transform var(--detail-head-duration, 0.5s) cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear var(--detail-head-duration, 0.5s);
}

/* Teinte et ombre vivent sur des pseudo-éléments pour n'animer que leur opacité.
   `z-index: -1` place la teinte sous le contenu : le panneau collant (z-index)
   forme son propre contexte d'empilement. */
.detail--sticky-head .detail-lead__head::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--green-900);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--detail-head-duration) ease;
}

.detail--sticky-head .detail-lead__head::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: var(--shadow-raised);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--detail-head-duration) ease;
}

.detail--sticky-head .detail-head {
  grid-template-rows: 1fr auto;
  transition: grid-template-rows var(--detail-head-duration) var(--detail-head-ease), row-gap var(--detail-head-duration) var(--detail-head-ease);
}

.detail--sticky-head .detail-head__intro,
.detail--sticky-head .detail-head__price {
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
  transition:
    opacity calc(var(--detail-head-duration) * 0.8) ease calc(var(--detail-head-duration) * 0.2),
    transform var(--detail-head-duration) var(--detail-head-ease),
    visibility 0s;
}

.detail--sticky-head.is-head-stuck .detail-lead__head {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

/* Barre condensée : les boutons les plus hauts reprennent la hauteur de `.btn--sm`. */
.detail--sticky-head.is-head-stuck .detail-head__offer-btn,
.detail--sticky-head.is-head-stuck .detail-head .status-pipe__reject {
  padding-top: 5px;
  padding-bottom: 7px;
}

.detail--sticky-head.is-head-stuck .detail-lead__head::before,
.detail--sticky-head.is-head-stuck .detail-lead__head::after {
  opacity: 1;
}

/* Annonce écartée : la bordure rouge reste visible autour du fond vert. */
.detail--sticky-head.detail--rejected .detail-lead__head::before {
  inset: 0;
}

/* Boutons inversés sur le fond vert foncé de la barre condensée. */
.detail--sticky-head.is-head-stuck .detail-head .btn--ghost,
.detail--sticky-head.is-head-stuck .detail-head .project-select__trigger {
  background: transparent;
  border-color: color-mix(in srgb, var(--ink-inverse) 35%, transparent);
  color: var(--ink-inverse);
}

.detail--sticky-head.is-head-stuck .detail-head .btn--ghost:hover:not(.btn--fav-add):not(.btn--danger-ghost):not(.btn--print-ghost),
.detail--sticky-head.is-head-stuck .detail-head .project-select__trigger:hover {
  background: color-mix(in srgb, var(--ink-inverse) 12%, transparent);
  filter: none;
}

.detail--sticky-head.is-head-stuck .detail-head .btn--ghost.btn--print-ghost:hover,
.detail--sticky-head.is-head-stuck .detail-head .btn--ghost.btn--print-ghost:focus-visible {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--green-900);
}

.detail--sticky-head.is-head-stuck .detail-head .btn--ghost.btn--fav-add:hover,
.detail--sticky-head.is-head-stuck .detail-head .btn--ghost.btn--fav-add:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}

.detail--sticky-head.is-head-stuck .detail-head .btn--ghost.btn--danger-ghost:hover,
.detail--sticky-head.is-head-stuck .detail-head .btn--ghost.btn--danger-ghost:focus-visible {
  background: var(--danger);
  border-color: var(--danger);
}

.detail--sticky-head.is-head-stuck .detail-head .status-pipe__reject.btn--danger {
  background: var(--surface);
  border-color: var(--surface);
}

.detail--sticky-head.is-head-stuck .detail-head .status-pipe__reject.btn--danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger-soft);
}

/* La pastille de projet prend souvent la couleur du fond : un anneau clair la détache. */
.detail--sticky-head.is-head-stuck .detail-head .project-select__trigger .project-dot {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink-inverse) 70%, transparent);
}

.detail--sticky-head.is-head-stuck :focus-visible {
  outline-color: var(--lime);
}

.detail--sticky-head.is-head-stuck .detail-head {
  grid-template-rows: 0fr auto;
  row-gap: 0;
}

.detail--sticky-head.is-head-stuck .detail-head__intro,
.detail--sticky-head.is-head-stuck .detail-head__price {
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-2)));
  visibility: hidden;
  transition:
    opacity calc(var(--detail-head-duration) * 0.7) ease,
    transform var(--detail-head-duration) var(--detail-head-ease),
    visibility 0s linear var(--detail-head-duration);
}

/* Mesure de la hauteur condensée par app.js, sans rendu intermédiaire. */
.detail--sticky-head.is-head-measuring .detail-lead__head,
.detail--sticky-head.is-head-measuring .detail-lead__head *,
.detail--sticky-head.is-head-measuring .detail-lead__head::before,
.detail--sticky-head.is-head-measuring .detail-lead__head::after {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body:has(.detail--sticky-head) .topbar,
  body:has(.detail--sticky-head.is-head-stuck) .topbar:not(:focus-within),
  .detail--sticky-head .detail-lead__head,
  .detail--sticky-head .detail-lead__head::before,
  .detail--sticky-head .detail-lead__head::after,
  .detail--sticky-head .detail-head,
  .detail--sticky-head .detail-head__intro,
  .detail--sticky-head .detail-head__price,
  .detail--sticky-head.is-head-stuck .detail-head__intro,
  .detail--sticky-head.is-head-stuck .detail-head__price {
    transition: none;
  }
}

#listing-enrichment-live {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#listing-enrichment-live > .panel + .panel {
  margin-top: 0;
}

.panel--pipeline {
  padding: var(--space-4) var(--space-5);
}

.status-pipe__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.status-pipe__title {
  margin: 0;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.status-pipe {
  display: block;
}

.status-pipe__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-2);
  min-width: 0;
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.status-pipe__step {
  flex: 1;
  position: relative;
  min-width: 0;
}

.status-pipe__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
  height: 3px;
  background: var(--border-strong);
  pointer-events: none;
  border-radius: var(--radius-pill);
}

.status-pipe__step.is-done:not(:last-child)::after {
  background: var(--green-600);
}

.status-pipe__btn {
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 2px 4px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.status-pipe__marker {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--ink-muted);
  border: 2.5px solid var(--border-strong);
  flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(17, 21, 15, 0.06);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease;
}

.status-pipe__marker svg {
  width: 18px;
  height: 18px;
  transform-origin: 50% 50%;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.status-pipe__step.is-done .status-pipe__btn:hover .status-pipe__marker svg,
.status-pipe__step.is-done .status-pipe__btn:focus-visible .status-pipe__marker svg {
  animation: status-pipe-icon-check 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.status-pipe__step.is-todo .status-pipe__btn:hover .status-pipe__marker[data-pipeline-step="new"] svg,
.status-pipe__step.is-todo .status-pipe__btn:focus-visible .status-pipe__marker[data-pipeline-step="new"] svg {
  animation: status-pipe-icon-doc 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.status-pipe__step.is-todo .status-pipe__btn:hover .status-pipe__marker[data-pipeline-step="contacted"] svg,
.status-pipe__step.is-todo
  .status-pipe__btn:focus-visible
  .status-pipe__marker[data-pipeline-step="contacted"]
  svg {
  animation: status-pipe-icon-phone 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.status-pipe__step.is-todo .status-pipe__btn:hover .status-pipe__marker[data-pipeline-step="visit_planned"] svg,
.status-pipe__step.is-todo
  .status-pipe__btn:focus-visible
  .status-pipe__marker[data-pipeline-step="visit_planned"]
  svg {
  animation: status-pipe-icon-calendar 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.status-pipe__step.is-todo .status-pipe__btn:hover .status-pipe__marker[data-pipeline-step="visited"] svg,
.status-pipe__step.is-todo .status-pipe__btn:focus-visible .status-pipe__marker[data-pipeline-step="visited"] svg {
  animation: status-pipe-icon-house 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.status-pipe__step.is-todo .status-pipe__btn:hover .status-pipe__marker[data-pipeline-step="offer"] svg,
.status-pipe__step.is-todo .status-pipe__btn:focus-visible .status-pipe__marker[data-pipeline-step="offer"] svg {
  animation: status-pipe-icon-offer 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes status-pipe-icon-check {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.22);
  }
  55% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes status-pipe-icon-doc {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  65% {
    transform: translateY(1px);
  }
}

@keyframes status-pipe-icon-phone {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(12deg);
  }
  75% {
    transform: rotate(-6deg);
  }
}

@keyframes status-pipe-icon-calendar {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.15);
  }
  70% {
    transform: scale(0.96);
  }
}

@keyframes status-pipe-icon-house {
  0%,
  100% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-4px);
  }
  55% {
    transform: translateY(1px);
  }
  75% {
    transform: translateY(-2px);
  }
}

@keyframes status-pipe-icon-offer {
  0%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-2px) rotate(-4deg);
  }
  60% {
    transform: translateX(2px) rotate(3deg);
  }
}

.status-pipe__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--ink-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pipe__label-short {
  display: none;
}

.status-pipe__step.is-done .status-pipe__marker {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--ink-inverse);
}

.status-pipe__step.is-done .status-pipe__label {
  color: var(--green-800);
}

.status-pipe__step.is-done .status-pipe__btn:hover .status-pipe__marker {
  transform: scale(1.08);
}

/* Survol d'une étape non cochée : même effet sur elle et les précédentes encore à faire. */
.status-pipe__step.is-todo .status-pipe__btn:hover .status-pipe__marker,
.status-pipe__step.is-todo:has(~ .status-pipe__step .status-pipe__btn:hover)
  .status-pipe__marker {
  transform: scale(1.08);
  border-color: var(--green-600);
  color: var(--green-800);
}

.status-pipe__btn:focus {
  outline: none;
}

.status-pipe__btn:focus-visible .status-pipe__marker {
  outline: 2px solid var(--green-600);
  outline-offset: 3px;
}

.status-pipe__reject {
  flex: 0 0 auto;
  gap: 6px;
  padding: 7px 16px 8px;
  font-size: 13.5px;
  box-shadow: var(--shadow-card);
}

.status-pipe__reject-icon {
  display: grid;
  place-items: center;
}

.status-pipe__reject-icon svg {
  width: 16px;
  height: 16px;
  transform-origin: 50% 50%;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.status-pipe__reject:hover .status-pipe__reject-icon svg,
.status-pipe__reject:focus-visible .status-pipe__reject-icon svg {
  animation: status-pipe-reject-wiggle 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes status-pipe-reject-wiggle {
  0% {
    transform: rotate(0deg) scale(1);
  }
  20% {
    transform: rotate(-10deg) scale(1.08);
  }
  40% {
    transform: rotate(8deg) scale(1.05);
  }
  60% {
    transform: rotate(-5deg) scale(1.06);
  }
  80% {
    transform: rotate(3deg) scale(1.02);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

.status-pipe__reject-label-short {
  display: none;
}

.status-pipe__reject.is-active {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--ink-inverse);
}

.status-pipe__reject.is-active:hover {
  background: #9a1e14;
  border-color: #9a1e14;
  color: var(--ink-inverse);
}

.status-pipe__reject.is-active:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

/* Écartée : parcours « gelé » — on garde les coches, sans le vert « en cours ». */
.status-pipe.is-rejected .status-pipe__track {
  background: color-mix(in srgb, var(--danger-soft) 16%, var(--surface-muted));
  border-color: rgba(180, 35, 24, 0.14);
}

.status-pipe.is-rejected .status-pipe__step.is-done:not(:last-child)::after {
  background: var(--border-strong);
}

.status-pipe.is-rejected .status-pipe__marker {
  border-color: var(--danger);
  border-width: 2.5px;
  box-shadow: none;
}

.status-pipe.is-rejected .status-pipe__step.is-done .status-pipe__marker {
  background: var(--surface-sunken);
  border-color: var(--danger);
  color: var(--ink-muted);
}

.status-pipe.is-rejected .status-pipe__step.is-done .status-pipe__label {
  color: var(--ink-muted);
  font-weight: 600;
}

.status-pipe.is-rejected .status-pipe__step.is-todo .status-pipe__marker {
  background: var(--surface);
  border-color: var(--danger);
  color: var(--ink-muted);
}

.status-pipe.is-rejected .status-pipe__step.is-todo .status-pipe__btn:hover .status-pipe__marker,
.status-pipe.is-rejected
  .status-pipe__step.is-todo:has(~ .status-pipe__step .status-pipe__btn:hover)
  .status-pipe__marker {
  transform: scale(1.08);
  border-color: var(--danger);
  background: var(--surface);
  color: var(--ink-muted);
}

.status-pipe.is-rejected .status-pipe__btn:focus-visible .status-pipe__marker {
  outline: 2px solid var(--danger);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .status-pipe__marker,
  .status-pipe__reject {
    transition: none;
  }

  .status-pipe__reject:hover .status-pipe__reject-icon svg,
  .status-pipe__reject:focus-visible .status-pipe__reject-icon svg {
    animation: none;
  }

  .status-pipe__btn:hover .status-pipe__marker svg,
  .status-pipe__btn:focus-visible .status-pipe__marker svg {
    animation: none !important;
  }
}

.detail-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.detail-columns > .panel + .panel {
  margin-top: 0;
}

/* --- Carrousel photos : scène + flèches + compteur + miniatures --- */
.carousel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.carousel__stage {
  position: relative;
}

.carousel__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  aspect-ratio: 16 / 9;
}

.carousel__viewport:focus-visible {
  outline: 2px solid var(--accent, #1d2b4f);
  outline-offset: 2px;
}

.carousel__track {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
  transition: transform 0.3s ease;
  will-change: transform;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  background: var(--surface-sunken);
}

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

/* Flèches de navigation */
.carousel__nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  color: var(--ink, #10182f);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(16, 24, 48, 0.22);
  opacity: 0;
  transform: translateY(-50%) scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease,
    box-shadow 0.2s ease;
}

/* Le glyphe ‹ / › est légèrement décalé optiquement : on le recentre */
.carousel__nav--prev {
  left: var(--space-3);
  padding-right: 3px;
}

.carousel__nav--next {
  right: var(--space-3);
  padding-left: 3px;
}

/* Les flèches apparaissent au survol / focus de la scène */
.carousel__stage:hover .carousel__nav,
.carousel__stage:focus-within .carousel__nav {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.carousel__nav:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 22px rgba(16, 24, 48, 0.3);
}

.carousel__stage:hover .carousel__nav:hover,
.carousel__stage:focus-within .carousel__nav:hover {
  transform: translateY(-50%) scale(1.08);
}

.carousel__nav:active {
  transform: translateY(-50%) scale(0.96);
}

.carousel__nav:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent, #1d2b4f);
  outline-offset: 2px;
}

.carousel__nav[disabled] {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}

/* Sur écrans tactiles, pas de survol : on garde les flèches visibles */
@media (hover: none) {
  .carousel__nav {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* Compteur « 3 / 30 » */
.carousel__counter {
  position: absolute;
  z-index: 1;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 24, 48, 0.7);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Bande de miniatures */
.carousel__thumbs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scroll-behavior: smooth;
}

.carousel__thumb {
  flex: 0 0 auto;
  width: 112px;
  height: 80px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  background: var(--surface-sunken);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.carousel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel__thumb:hover {
  opacity: 0.85;
}

.carousel__thumb.is-active {
  opacity: 1;
  border-color: var(--accent, #1d2b4f);
}

.carousel__thumb:focus-visible {
  outline: 2px solid var(--accent, #1d2b4f);
  outline-offset: 2px;
}

.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.specs th,
.specs td {
  text-align: left;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.specs tr:last-child th,
.specs tr:last-child td {
  border-bottom: 0;
}

.specs th {
  font-weight: 500;
  color: var(--ink-muted);
  width: 45%;
}

.specs td {
  font-weight: 600;
  text-align: right;
}

.specs--total td,
.specs--total th {
  border-top: 2px solid var(--border-strong);
  font-size: 15px;
}

.specs--strong th,
.specs--strong td {
  font-weight: 700;
  color: var(--ink);
}

.description {
  white-space: pre-wrap;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

.listing-description {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  padding-top: var(--space-2);
}

.listing-description__title {
  margin: 0 0 var(--space-2);
}

.listing-description__card {
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  transition: box-shadow 0.15s ease;
}

.listing-description__card:has(.listing-description__toggle:hover),
.listing-description__card:has(.listing-description__toggle:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--border);
}

.listing-description__body {
  padding: var(--space-3) var(--space-4);
}

.listing-description__text {
  margin: 0;
}

.listing-description__ellipsis {
  color: var(--ink-soft);
}

.listing-description__text .listing-description__toggle {
  display: inline;
  margin: 0 0 0 0.4em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 600;
  color: var(--green-700);
  cursor: pointer;
  vertical-align: baseline;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease;
}

.listing-description__toggle:hover,
.listing-description__toggle:focus-visible {
  color: var(--green-800);
}

.listing-description__toggle:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -------------------- Modale données structurées (fiche) -------------------- */

.modal--listing-structured-data .modal__dialog--wide {
  max-width: min(920px, 100%);
  max-height: min(88vh, 900px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.listing-structured-data-dialog__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  padding-right: calc(var(--space-5) + 2.75rem);
  background: linear-gradient(
    135deg,
    var(--surface-muted) 0%,
    var(--surface) 55%
  );
  border-bottom: 1px solid var(--border);
}

.listing-structured-data-dialog__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-1);
}

.listing-structured-data-dialog__title {
  margin: 0 0 var(--space-2);
}

.listing-structured-data-dialog__lead {
  margin: 0;
  max-width: 36rem;
}

.listing-structured-data-dialog__filters {
  flex-shrink: 0;
  align-self: flex-end;
}

.listing-structured-data-dialog__body {
  overflow: auto;
  flex: 1;
  min-height: 0;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.listing-structured-data__section-title {
  font-size: 1rem;
  margin: 0 0 var(--space-2);
  color: var(--green-800);
}

.listing-structured-data__section-hint {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
  line-height: 1.45;
}

.listing-structured-data__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.listing-structured-data__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 640px) {
  .listing-structured-data__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: var(--space-4);
  }
}

.listing-structured-data__term {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.listing-structured-data__term-help {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
  line-height: 1.35;
}

.listing-structured-data__value {
  font-size: 0.9rem;
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  word-break: break-word;
}

.listing-structured-data__value--empty {
  color: var(--ink-muted);
}

.listing-structured-data__link {
  color: var(--green-700);
  font-weight: 600;
  text-decoration: none;
}

.listing-structured-data__link:hover,
.listing-structured-data__link:focus-visible {
  color: var(--green-800);
  text-decoration: underline;
}

.listing-structured-data-dialog__actions {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  margin: 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kv {
  display: grid;
  gap: var(--space-2);
  font-size: 14px;
}

.kv__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-2);
}

.kv__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.kv__key {
  color: var(--ink-muted);
}

.kv__travel-key {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  min-width: 0;
  max-width: min(100%, 70%);
}

.kv__travel-name {
  font-weight: 600;
  color: var(--green-800);
  text-decoration: none;
}

.kv__travel-name:hover,
.kv__travel-name:focus-visible {
  text-decoration: underline;
}

.kv__travel-name:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.kv__travel-map {
  font-size: 12px;
  flex-shrink: 0;
}

.kv__value {
  font-weight: 600;
  text-align: right;
}

/* Données extension (fiche annonce) : trajets à gauche, commune à droite. */
.kv__extension-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  align-items: start;
}

.kv__extension-split--single {
  grid-template-columns: minmax(0, 1fr);
}

.kv__extension-col {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.kv__extension-section-head {
  margin: 0;
}

.kv__extension-section-head .politics__label {
  color: var(--ink);
}

/* Même ligne de titre que « Orientation politique » (baseline, pas centré sur la valeur). */
.kv__extension-col--travel > .kv__row {
  align-items: baseline;
}

.kv__extension-split:not(.kv__extension-split--single) .kv__extension-col--meta {
  padding-left: var(--space-6);
  border-left: 1px solid var(--border);
}

.kv__extension-col--travel > .kv__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.kv__extension-col--meta > .politics:last-child,
.kv__extension-col--meta > .kv__row:last-child,
.kv__extension-col--meta > .tax:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 640px) {
  .kv__extension-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .kv__extension-split:not(.kv__extension-split--single) .kv__extension-col--meta {
    padding-left: 0;
    border-left: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
  }

  .kv__extension-col--travel > .kv__row:last-child {
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-2);
  }

  .kv__extension-split--single .kv__extension-col--travel > .kv__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

/*
 * Variante tableau à 4 colonnes (bloc Commune) : deux
 * paires « Titre : valeur » par ligne, pour diviser la hauteur par deux.
 *
 * `display: contents` sur chaque ligne fait remonter clé et valeur directement
 * dans la grille du conteneur : les quatre colonnes sont donc partagées par
 * toutes les lignes, ce qui aligne les deux-points et les valeurs d'une ligne
 * à l'autre. Les bordures basses des cellules dessinent les lignes du tableau.
 */
.kv--grid {
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  /* Les écarts horizontaux sont gérés au padding, pour maîtriser la symétrie
     autour du trait vertical ; aucun column-gap implicite. */
  column-gap: 0;
  row-gap: 0;
  /* stretch : les bordures basses des cellules d'une même ligne visuelle
     restent alignées (baseline laissait chaque cellule à la hauteur de son
     contenu, donc traits décalés entre paire gauche et paire droite). */
  align-items: stretch;
  /* La dernière ligne peut n'avoir qu'une paire à gauche : les cellules de
     droite n'existent pas et ne peuvent pas porter de trait. La bordure du
     conteneur la dessine sur toute la largeur ; les cellules de cette
     dernière ligne visuelle n'en portent plus, pour éviter un double trait. */
  border-bottom: 1px solid var(--border);
}

.kv--grid .kv__row {
  display: contents;
}

.kv--grid .kv__key,
.kv--grid .kv__value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 6px;
  min-width: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

/* Espace entre le libellé (et son « : ») et sa valeur. */
.kv--grid .kv__key {
  padding-right: var(--space-3);
}

.kv--grid .kv__key::after {
  content: " :";
}

.kv--grid .kv__value {
  text-align: left;
}

/*
 * Trait vertical séparant les deux paires d'une même ligne. Les paires
 * remplissent la grille de gauche à droite : les lignes impaires sont la paire
 * de gauche, dont la valeur (colonne 2) porte la bordure droite. Empilées sans
 * écart vertical (row-gap: 0), ces bordures forment un trait continu.
 *
 * Pour un espace identique de part et d'autre du trait : padding à droite de
 * la valeur de gauche et padding à gauche du libellé de droite (même valeur).
 */
.kv--grid .kv__row:nth-child(odd) .kv__value {
  border-right: 1px solid var(--border);
  padding-right: var(--space-4);
}

.kv--grid .kv__row:nth-child(even) .kv__key {
  padding-left: var(--space-4);
}

/* Dernière ligne visuelle : paire de droite, et paire de gauche quand elle
   partage cette même ligne (nombre pair de paires). */
.kv--grid .kv__row:last-child .kv__key,
.kv--grid .kv__row:last-child .kv__value,
.kv--grid .kv__row:nth-last-child(2):nth-child(odd) .kv__key,
.kv--grid .kv__row:nth-last-child(2):nth-child(odd) .kv__value {
  border-bottom: 0;
}

/*
 * Sous 640 px, les deux paires côte à côte deviennent trop serrées : on
 * repasse à une seule paire « Titre : valeur » par ligne et on retire le
 * trait vertical ainsi que l'espace qui l'entourait. Chaque paire occupe
 * alors sa propre ligne : seule la toute dernière perd son trait, repris
 * par la bordure du conteneur.
 */
@media (max-width: 640px) {
  .kv--grid {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .kv--grid .kv__row:nth-child(odd) .kv__value {
    border-right: 0;
    padding-right: 0;
  }

  .kv--grid .kv__row:nth-child(even) .kv__key {
    padding-left: 0;
  }

  .kv--grid .kv__row:nth-last-child(2):nth-child(odd) .kv__key,
  .kv--grid .kv__row:nth-last-child(2):nth-child(odd) .kv__value {
    border-bottom: 1px solid var(--border);
  }
}

/*
 * Variante 3 paires par ligne (bloc Commune / Territoire) : six colonnes
 * clé/valeur, pour réduire la hauteur du panneau.
 */
.kv--grid.kv--grid-3 {
  grid-template-columns:
    max-content minmax(0, 1fr)
    max-content minmax(0, 1fr)
    max-content minmax(0, 1fr);
}

.kv--grid.kv--grid-3 .kv__row:nth-child(odd) .kv__value {
  border-right: 0;
  padding-right: var(--space-3);
}

.kv--grid.kv--grid-3 .kv__row:nth-child(even) .kv__key {
  padding-left: 0;
}

.kv--grid.kv--grid-3 .kv__row:nth-child(3n + 1) .kv__value,
.kv--grid.kv--grid-3 .kv__row:nth-child(3n + 2) .kv__value {
  border-right: 1px solid var(--border);
  padding-right: var(--space-4);
}

.kv--grid.kv--grid-3 .kv__row:nth-child(3n + 2) .kv__key,
.kv--grid.kv--grid-3 .kv__row:nth-child(3n) .kv__key {
  padding-left: var(--space-4);
}

.kv--grid.kv--grid-3 .kv__row:last-child:nth-child(3n + 1) .kv__key,
.kv--grid.kv--grid-3 .kv__row:last-child:nth-child(3n + 1) .kv__value,
.kv--grid.kv--grid-3 .kv__row:last-child:nth-child(3n + 2) .kv__key,
.kv--grid.kv--grid-3 .kv__row:last-child:nth-child(3n + 2) .kv__value,
.kv--grid.kv--grid-3 .kv__row:nth-last-child(2):nth-child(3n + 1) .kv__key,
.kv--grid.kv--grid-3 .kv__row:nth-last-child(2):nth-child(3n + 1) .kv__value,
.kv--grid.kv--grid-3 .kv__row:last-child:nth-child(3n) .kv__key,
.kv--grid.kv--grid-3 .kv__row:last-child:nth-child(3n) .kv__value,
.kv--grid.kv--grid-3 .kv__row:nth-last-child(2):nth-child(3n + 2) .kv__key,
.kv--grid.kv--grid-3 .kv__row:nth-last-child(2):nth-child(3n + 2) .kv__value,
.kv--grid.kv--grid-3 .kv__row:nth-last-child(3):nth-child(3n + 1) .kv__key,
.kv--grid.kv--grid-3 .kv__row:nth-last-child(3):nth-child(3n + 1) .kv__value {
  border-bottom: 0;
}

@media (max-width: 900px) {
  .kv--grid.kv--grid-3 {
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  }

  .kv--grid.kv--grid-3 .kv__row:nth-child(3n + 1) .kv__value,
  .kv--grid.kv--grid-3 .kv__row:nth-child(3n + 2) .kv__value {
    border-right: 0;
    padding-right: var(--space-3);
  }

  .kv--grid.kv--grid-3 .kv__row:nth-child(3n + 2) .kv__key,
  .kv--grid.kv--grid-3 .kv__row:nth-child(3n) .kv__key {
    padding-left: 0;
  }

  .kv--grid.kv--grid-3 .kv__row:nth-child(odd) .kv__value {
    border-right: 1px solid var(--border);
    padding-right: var(--space-4);
  }

  .kv--grid.kv--grid-3 .kv__row:nth-child(even) .kv__key {
    padding-left: var(--space-4);
  }

  .kv--grid.kv--grid-3 .kv__row:last-child:nth-child(3n + 1) .kv__key,
  .kv--grid.kv--grid-3 .kv__row:last-child:nth-child(3n + 1) .kv__value,
  .kv--grid.kv--grid-3 .kv__row:last-child:nth-child(3n + 2) .kv__key,
  .kv--grid.kv--grid-3 .kv__row:last-child:nth-child(3n + 2) .kv__value,
  .kv--grid.kv--grid-3 .kv__row:nth-last-child(2):nth-child(3n + 1) .kv__key,
  .kv--grid.kv--grid-3 .kv__row:nth-last-child(2):nth-child(3n + 1) .kv__value,
  .kv--grid.kv--grid-3 .kv__row:last-child:nth-child(3n) .kv__key,
  .kv--grid.kv--grid-3 .kv__row:last-child:nth-child(3n) .kv__value,
  .kv--grid.kv--grid-3 .kv__row:nth-last-child(2):nth-child(3n + 2) .kv__key,
  .kv--grid.kv--grid-3 .kv__row:nth-last-child(2):nth-child(3n + 2) .kv__value,
  .kv--grid.kv--grid-3 .kv__row:nth-last-child(3):nth-child(3n + 1) .kv__key,
  .kv--grid.kv--grid-3 .kv__row:nth-last-child(3):nth-child(3n + 1) .kv__value {
    border-bottom: 1px solid var(--border);
  }

  .kv--grid.kv--grid-3 .kv__row:last-child .kv__key,
  .kv--grid.kv--grid-3 .kv__row:last-child .kv__value,
  .kv--grid.kv--grid-3 .kv__row:nth-last-child(2):nth-child(odd) .kv__key,
  .kv--grid.kv--grid-3 .kv__row:nth-last-child(2):nth-child(odd) .kv__value {
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .kv--grid.kv--grid-3 {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .kv--grid.kv--grid-3 .kv__row:nth-child(odd) .kv__value {
    border-right: 0;
    padding-right: 0;
  }

  .kv--grid.kv--grid-3 .kv__row:nth-child(even) .kv__key {
    padding-left: 0;
  }

  .kv--grid.kv--grid-3 .kv__row:nth-last-child(2):nth-child(odd) .kv__key,
  .kv--grid.kv--grid-3 .kv__row:nth-last-child(2):nth-child(odd) .kv__value {
    border-bottom: 1px solid var(--border);
  }
}

/* Orientation politique : même principe que la popup de l'extension. */
.politics {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.kv > .politics:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.politics__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.politics__label {
  color: var(--ink-muted);
}

.politics__value {
  font-weight: 600;
  text-align: right;
}

.politics__bar {
  display: flex;
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-sunken);
}

.politics__seg {
  height: 100%;
  flex-basis: 0;
  min-width: 0;
}

.politics__seg--g {
  background: #c2255c;
}

.politics__seg--c {
  background: #b38600;
}

.politics__seg--d {
  background: #3b5bdb;
}

.politics__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: 14px;
  color: var(--ink-muted);
}

.politics__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
}

.politics__dot--g {
  background: #c2255c;
}

.politics__dot--c {
  background: #b38600;
}

.politics__dot--d {
  background: #3b5bdb;
}

/* Indice de taxe foncière : barre fine en 5 segments (comme la barre politique),
   paliers atteints colorés, note et libellé compacts en en-tête. */
.tax {
  /* Couleur unique de la note, surchargée par palier ci-dessous. */
  --tax-color: #6b7280;
  --tax-ink: #fff;
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.tax--l1 { --tax-color: #2e8b6b; --tax-ink: #fff; }
.tax--l2 { --tax-color: #5a9e3a; --tax-ink: #fff; }
.tax--l3 { --tax-color: #c98a00; --tax-ink: #11150f; }
.tax--l4 { --tax-color: #e0541f; --tax-ink: #fff; }
.tax--l5 { --tax-color: #b42318; --tax-ink: #fff; }

.kv > .tax:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.tax__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.tax__label {
  font-size: 14px;
  color: var(--ink-muted);
}

.tax__verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tax__score {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: var(--tax-color);
  font-variant-numeric: tabular-nums;
}

.tax__max {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tax__tag {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--tax-color) 14%, transparent);
  color: var(--tax-color);
  border: 1px solid color-mix(in srgb, var(--tax-color) 28%, transparent);
}

.tax__scale {
  display: flex;
  gap: 3px;
}

.tax__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}

.tax__step {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}

.tax__step.is-on {
  background: var(--tax-color);
}

.tax__num {
  text-align: center;
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.tax__num.is-on {
  color: var(--tax-color);
  font-weight: 700;
}

.tax__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ---------------- Performance énergétique (étiquettes DPE / GES) --------- */

.energy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}

@media (max-width: 360px) {
  .energy {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

.energy__col {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.energy__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.dpe-scale {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
}

.dpe-seg {
  flex: 1 1 0;
  height: 14px;
  border-radius: var(--radius-pill);
  transition: height 0.15s ease;
}

.dpe-seg.is-active {
  flex-grow: 1.7;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: var(--shadow-card);
}

/* ---------------- Délinquance enregistrée (SSMSI) ----------------------- */

.delinquance {
  display: grid;
  gap: var(--space-4);
}

.delinquance__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.delinquance__year {
  font-size: 13px;
  color: var(--ink-muted);
}

.delinquance__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.delinquance__item {
  --tone: var(--ink-muted);
  --tone-soft: var(--surface-sunken);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.delinquance__item--ok {
  --tone: var(--green-600);
  --tone-soft: var(--green-100);
}

.delinquance__item--mid {
  --tone: #c98a00;
  --tone-soft: var(--gold-soft);
}

.delinquance__item--high {
  --tone: var(--danger);
  --tone-soft: var(--danger-soft);
}

.delinquance__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.delinquance__label {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink-soft);
  line-height: 1.3;
}

.delinquance__trend {
  flex: none;
}

.delinquance__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.delinquance__rate {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.delinquance__unit {
  font-size: 13px;
  color: var(--ink-muted);
}

.delinquance__volume {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.delinquance__bar {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--tone-soft);
  overflow: hidden;
}

.delinquance__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--tone);
}

.delinquance__bar-mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  transform: translateX(-1px);
  background: var(--ink-soft);
  border-radius: var(--radius-pill);
  overflow: visible;
}

.delinquance__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: 12px;
  color: var(--ink-muted);
}

.delinquance__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.delinquance__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.delinquance__swatch--commune {
  background: var(--tone);
}

.delinquance__swatch--dept {
  background: var(--ink-soft);
}

.delinquance__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.delinquance__note--warn {
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn, #c87800) 12%, transparent);
  color: var(--ink);
  font-size: 13px;
}

/* Criminalité générale : barre pleine largeur, même langage visuel que la
   barre « Orientation politique ». Titre à gauche, verdict à droite, barre
   dégradée (plus sûr -> plus exposé) avec repères, puis légende à pastilles. */
.delinquance__gauge {
  --tone: var(--ink-muted);
  display: grid;
  gap: var(--space-2);
}

.delinquance__gauge--ok {
  --tone: var(--green-600);
}

.delinquance__gauge--mid {
  --tone: #c98a00;
}

.delinquance__gauge--high {
  --tone: var(--danger);
}

.delinquance__gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.delinquance__gauge-label {
  color: var(--ink-muted);
}

.delinquance__gauge-verdict {
  font-weight: 600;
  text-align: right;
  color: var(--tone);
}

.delinquance__gauge-track {
  position: relative;
  margin: var(--space-2) 0;
}

.delinquance__gauge-bar {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--green-600) 0%,
    #c98a00 50%,
    var(--danger) 100%
  );
}

/* Repères France / département : zone de survol + trait.
   Scopé sous .delinquance__gauge-bar pour l'emporter sur `[data-tooltip] {
   position: relative }` (même spécificité, défini plus loin dans la feuille). */
.delinquance__gauge-bar .delinquance__gauge-ref-wrap {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  cursor: default;
}

.delinquance__gauge-ref {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.55;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  pointer-events: none;
}

.delinquance__gauge-ref--france {
  opacity: 0.8;
}

/* Commune : pastille (détail au survol via data-tooltip). Scopé sous
   .delinquance__gauge-bar pour l'emporter sur `[data-tooltip]`. */
.delinquance__gauge-bar .delinquance__gauge-marker {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--tone);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  cursor: default;
}

/* Infobulle au-dessus du repère (évite le chevauchement sur la barre). */
.delinquance__gauge-hit[data-tooltip]::after,
.delinquance__gauge-hit[data-tooltip]::before {
  top: auto;
  bottom: calc(100% + 10px);
  left: 50%;
  right: auto;
  transform: translate(-50%, 4px);
}

.delinquance__gauge-hit[data-tooltip]:hover::after,
.delinquance__gauge-hit[data-tooltip]:focus-visible::after {
  transform: translate(-50%, 0);
}

.delinquance__gauge-hit[data-tooltip]::before {
  bottom: calc(100% + 4px);
  transform: translate(-50%, 4px) rotate(45deg);
}

.delinquance__gauge-hit[data-tooltip]:hover::before,
.delinquance__gauge-hit[data-tooltip]:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.delinquance__gauge-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: 14px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.delinquance__gauge-val {
  font-weight: 600;
  color: var(--ink);
}

.delinquance__gauge-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
}

.delinquance__gauge-dot--commune {
  background: var(--tone);
}

.delinquance__gauge-dot--france {
  background: var(--ink);
  opacity: 0.7;
}

.delinquance__gauge-dot--dept {
  background: var(--ink);
  opacity: 0.45;
}

.delinquance__gauge-sub {
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.delinquance__group-title {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.delinquance__group-title:first-child {
  margin-top: 0;
}

.delinquance__source {
  margin: 0;
}

.delinquance__details {
  margin-top: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.delinquance__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  font-weight: 650;
  color: var(--green-800);
  background: linear-gradient(
    180deg,
    var(--green-100) 0%,
    var(--surface-muted) 100%
  );
  transition: background 0.15s ease, border-color 0.15s ease;
}

.delinquance__summary:hover {
  background: var(--green-100);
}

.delinquance__details[open] .delinquance__summary {
  border-bottom: 1px solid var(--border);
  background: var(--green-100);
}

.delinquance__summary::-webkit-details-marker {
  display: none;
}

.delinquance__summary::marker {
  content: "";
}

.delinquance__summary:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: -2px;
}

.delinquance__summary-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.delinquance__summary-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-900);
  line-height: 1.25;
}

.delinquance__summary-hint {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  line-height: 1.35;
}

.delinquance__summary-hint--open {
  display: none;
}

.delinquance__details[open] .delinquance__summary-hint--closed {
  display: none;
}

.delinquance__details[open] .delinquance__summary-hint--open {
  display: inline;
}

.delinquance__summary-aside {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.delinquance__summary-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0 var(--space-2);
  height: 1.75rem;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--green-900);
  background: var(--surface);
  border: 1px solid var(--border-strong);
}

.delinquance__summary-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--summary-chevron-size);
  height: var(--summary-chevron-size);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--green-800);
  transition: transform 0.18s ease, background 0.15s ease;
}

.delinquance__summary-chevron::before {
  content: "";
  width: var(--summary-chevron-icon);
  height: var(--summary-chevron-icon);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.delinquance__details[open] .delinquance__summary-chevron {
  transform: rotate(180deg);
}

.delinquance__summary:hover .delinquance__summary-chevron,
.delinquance__summary:focus-visible .delinquance__summary-chevron {
  background: var(--green-100);
  border-color: var(--green-600);
}

.delinquance__details-body {
  padding: var(--space-4);
  background: var(--surface);
}

.delinquance__details .delinquance__list {
  margin-top: var(--space-3);
}

.delinquance__meta {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
}

/* ------------------------------ Prix au m² ------------------------------ */

.pricem2 {
  display: grid;
  gap: var(--space-4);
}

.pricem2__gauge-bar {
  position: relative;
  height: 11px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--green-600) 0%,
    #c98a00 50%,
    var(--danger-vivid) 100%
  );
}

.pricem2__gauge-bar .pricem2__gauge-ref {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.8;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  cursor: default;
}

.pricem2__gauge-bar .pricem2__gauge-marker {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--tone);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  cursor: default;
}

/* Infobulle au-dessus des repères (réutilise le mécanisme data-tooltip). */
.pricem2__gauge-bar [data-tooltip]::after,
.pricem2__gauge-bar [data-tooltip]::before {
  top: auto;
  bottom: calc(100% + 10px);
  left: 50%;
  right: auto;
  transform: translate(-50%, 4px);
}
.pricem2__gauge-bar [data-tooltip]:hover::after,
.pricem2__gauge-bar [data-tooltip]:focus-visible::after {
  transform: translate(-50%, 0);
}
.pricem2__gauge-bar [data-tooltip]::before {
  bottom: calc(100% + 4px);
  transform: translate(-50%, 4px) rotate(45deg);
}
.pricem2__gauge-bar [data-tooltip]:hover::before,
.pricem2__gauge-bar [data-tooltip]:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.pricem2__advice {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}
.pricem2__advice.pricem2__advice--negotiate {
  background: var(--danger-vivid-soft);
  border-color: transparent;
  color: var(--danger-vivid);
}

.pricem2__advice.pricem2__advice--negotiate,
.pricem2__advice.pricem2__advice--negotiate strong {
  color: var(--danger-vivid);
}

.pricem2__advice.pricem2__advice--negotiate .pricem2__advice-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pricem2__advice--good {
  background: var(--green-100);
  border-color: transparent;
  color: var(--green-800);
}

.pricem2__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.pricem2__card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
}
.pricem2__card--highlight {
  background: var(--green-100);
  border-color: transparent;
}
.pricem2__card--empty {
  background: var(--surface-muted);
}

.pricem2__card-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

.pricem2__card-value-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pricem2__card-value-row .pricem2__dvf-method {
  flex-shrink: 0;
  margin-top: 0.15em;
}

.pricem2__card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pricem2__card-value small {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.pricem2__card-meta {
  font-size: 12px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.pricem2__card--ok {
  --tone: var(--green-600);
  --tone-soft: var(--green-100);
}
.pricem2__card--mid {
  --tone: #c98a00;
  --tone-soft: var(--gold-soft);
}
.pricem2__card--high {
  --tone: var(--danger-vivid);
  --tone-soft: var(--danger-vivid-soft);
}
.pricem2__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.pricem2__card-head .pricem2__card-eyebrow {
  flex: 1;
  min-width: 0;
}
.pricem2__card-index {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tone, var(--ink-muted));
  background: var(--tone-soft, var(--surface-sunken));
  font-variant-numeric: tabular-nums;
}

.pricem2__evolution-layout {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
.pricem2__evolution-layout:has(.pricem2__evolution-aside) {
  grid-template-columns: minmax(11.5rem, 14.5rem) minmax(0, 1fr);
}
.pricem2__evolution-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pricem2__evolution-aside .pricem2__card {
  padding: var(--space-2) var(--space-3);
}
.pricem2__evolution-aside .pricem2__card-value {
  font-size: 19px;
}
.pricem2__evolution-aside .pricem2__card-eyebrow {
  line-height: 1.35;
}
.pricem2__evolution-main {
  min-width: 0;
}

.pricem2__card-meta--dvf {
  display: block;
}

.pricem2__dvf-sales-link {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.pricem2__dvf-sales-link:hover,
.pricem2__dvf-sales-link:focus-visible {
  color: var(--green-800);
}

.pricem2__dvf-sales-link:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
  border-radius: 2px;
}

.pricem2__dvf-method {
  position: relative;
  display: inline-block;
}

.pricem2__dvf-method-trigger {
  list-style: none;
  cursor: pointer;
  user-select: none;
  line-height: 0;
}

.pricem2__dvf-method-trigger::-webkit-details-marker {
  display: none;
}

.pricem2__dvf-method-trigger::marker {
  content: "";
}

.pricem2__dvf-method-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.pricem2__dvf-method-trigger:hover .pricem2__dvf-method-mark,
.pricem2__dvf-method[open] .pricem2__dvf-method-mark {
  background: var(--surface-sunken, #ebe8e0);
  border-color: var(--border-strong);
  color: var(--ink-soft);
}

.pricem2__dvf-method-trigger:focus-visible {
  outline: none;
}

.pricem2__dvf-method-trigger:focus-visible .pricem2__dvf-method-mark {
  outline: 2px solid var(--ink-muted);
  outline-offset: 2px;
}

.pricem2__dvf-method-title {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.pricem2__dvf-method-panel {
  position: absolute;
  z-index: 25;
  left: 0;
  top: calc(100% + 6px);
  width: min(17.5rem, calc(100vw - 2rem));
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.pricem2__dvf-method-lead {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.pricem2__dvf-method-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.pricem2__dvf-method-list li {
  margin-bottom: var(--space-1);
}

.pricem2__dvf-method-list li:last-child {
  margin-bottom: 0;
}

.pricem2__evolution-aside .pricem2__dvf-method-panel {
  right: 0;
  left: auto;
}

.modal--dvf-sales .modal__dialog--wide {
  max-width: min(56rem, 96vw);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.dvf-sales-dialog .modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
}

.dvf-sales-dialog__head {
  padding-right: 2.75rem;
}

.dvf-sales-dialog__title {
  margin-bottom: var(--space-2);
  padding-right: 0;
}

.dvf-sales-dialog__lead,
.dvf-sales-dialog__ref,
.dvf-sales-dialog__source,
.dvf-sales-dialog__footnote {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
  line-height: 1.45;
}

.dvf-sales-dialog__ref {
  margin-bottom: var(--space-2);
}

.dvf-sales-dialog__tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: var(--green-100);
  color: var(--green-800);
  vertical-align: 0.05em;
}

.dvf-sales-dialog__table-wrap {
  overflow: auto;
  flex: 1;
  min-height: 0;
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.dvf-sales-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.dvf-sales-table th,
.dvf-sales-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.dvf-sales-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface-muted);
}

.dvf-sales-table__sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.dvf-sales-table__sort-btn:hover {
  color: var(--ink);
}

.dvf-sales-table__sort-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.dvf-sales-table__th-sort[aria-sort="ascending"] .dvf-sales-table__sort-btn::after,
.dvf-sales-table__th-sort[aria-sort="descending"] .dvf-sales-table__sort-btn::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.85;
}

.dvf-sales-table__th-sort[aria-sort="ascending"] .dvf-sales-table__sort-btn::after {
  border-bottom: 5px solid currentColor;
  margin-bottom: 2px;
}

.dvf-sales-table__th-sort[aria-sort="descending"] .dvf-sales-table__sort-btn::after {
  border-top: 5px solid currentColor;
  margin-top: 2px;
}

.dvf-sales-table__row--excluded {
  background: var(--danger-soft);
}

.dvf-sales-table__row--excluded td {
  color: var(--ink-soft);
}

.dvf-sales-table__pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}

.dvf-sales-table__pill--ok {
  background: var(--green-100);
  color: var(--green-800);
}

.dvf-sales-table__pill--skip {
  background: var(--danger-soft);
  color: var(--danger);
}

.dvf-sales-table__pill--surface {
  margin-left: 4px;
  background: var(--surface-sunken);
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .dvf-sales-table .dvf-sales-table__col--narrow-hide {
    display: none;
  }

  .dvf-sales-table th,
  .dvf-sales-table td {
    padding: var(--space-2);
    font-size: 12px;
    white-space: normal;
  }
}

@media (max-width: 820px) {
  .pricem2__evolution-layout:has(.pricem2__evolution-aside) {
    grid-template-columns: 1fr;
  }
}

/* Positionnement du prix : verdict, repères chiffrés (prix seul / prix +
   travaux / estimation), jauge à deux curseurs, référence en puces.
   `--tone` suit le verdict du prix affiché, `--tone-works` celui du prix
   travaux compris (posée en inline par le partial). */
.pricepos {
  --tone: var(--ink-muted);
  --tone-soft: var(--surface-sunken);
  --tone-works: var(--ink-muted);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  border: 1px solid var(--border);
}
.pricepos--ok {
  --tone: var(--green-600);
  --tone-soft: var(--green-100);
}
.pricepos--mid {
  --tone: #c98a00;
  --tone-soft: var(--gold-soft);
}
/* Lavis du bloc, même dégradé que l'analyse technique (.pa-hero).
   Bonne affaire et prix de marché : vert. Mauvaise affaire : orangé. */
.pricepos--ok,
.pricepos--mid {
  background: linear-gradient(120deg, rgba(58, 157, 79, 0.1), transparent 60%);
  border-color: rgba(58, 157, 79, 0.3);
}
.pricepos--high {
  --tone: var(--danger-vivid);
  --tone-soft: var(--danger-vivid-soft);
  background: linear-gradient(120deg, rgba(224, 84, 31, 0.1), transparent 60%);
  border-color: rgba(224, 84, 31, 0.3);
}

.pricepos__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.pricepos__intro {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.pricepos__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.pricepos__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tone);
}
.pricepos__scope {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.pricepos__scope strong {
  color: var(--ink-soft);
  font-weight: 600;
}
.pricepos__help {
  flex-shrink: 0;
  margin-top: 0.15em;
  line-height: 0;
}
.pricepos__help .pricem2__dvf-method-panel {
  width: min(22rem, calc(100vw - 2rem));
}

.pricepos__grade {
  flex-shrink: 0;
  width: min(24rem, 58vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  text-align: right;
  cursor: help;
}
.pricepos__grade-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-3);
  width: 100%;
}
.pricepos__grade-eyebrow {
  margin: 0;
  flex-shrink: 0;
  padding-top: 5px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.pricepos__grade-scale-col {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 11rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.pricepos__grade-scale {
  min-height: 32px;
}
.pricepos__grade-scale .dpe-seg {
  height: 16px;
}
.pricepos__grade-scale .dpe-seg.is-active {
  height: 32px;
  font-size: 15px;
}
.pricepos__grade-scale .dpe-seg.is-active.is-active--dark {
  color: #1c1c1c;
  text-shadow: none;
}
.pricepos__grade-caption {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
  color: var(--tone);
}
/* Infobulles : au-dessus de l'élément, centrées (la version générique s'affiche
   à droite et déborderait sur les puces). Même géométrie que la jauge. */
.pricepos [data-tooltip]::after,
.pricepos [data-tooltip]::before {
  top: auto;
  bottom: calc(100% + 10px);
  left: 50%;
  right: auto;
  transform: translate(-50%, 4px);
}
.pricepos [data-tooltip]:hover::after,
.pricepos [data-tooltip]:focus-visible::after {
  transform: translate(-50%, 0);
}
.pricepos [data-tooltip]::before {
  bottom: calc(100% + 4px);
  transform: translate(-50%, 4px) rotate(45deg);
}
.pricepos [data-tooltip]:hover::before,
.pricepos [data-tooltip]:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}
/* Variante multi-lignes (facteurs de correction, explications). */
.pricepos [data-tooltip].pricepos__tip--wrap::after {
  white-space: normal;
  width: max-content;
  max-width: 17rem;
  text-align: left;
  line-height: 1.35;
}
/* Sous-ligne explicite (ex. montant retenu au financement). */
.pricepos__kpi-sub[data-tooltip].pricepos__tip--wrap::after {
  white-space: pre-line;
  max-width: 26rem;
}

/* Trois repères chiffrés : prix affiché, prix + travaux, estimation. */
.pricepos__kpis {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.pricepos__kpi {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}
.pricepos__kpi--works {
  box-shadow: inset 0 3px 0 var(--tone-works);
}
.pricepos__kpi--muted {
  background: var(--surface-muted);
  border-style: dashed;
}
.pricepos__kpi dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}
.pricepos__kpi-term {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.pricepos__kpi-term .pricepos__kpi-help {
  flex-shrink: 0;
  margin-top: 0;
  line-height: 0;
}
.pricepos__kpis .pricepos__kpi:last-child .pricepos__kpi-help .pricem2__dvf-method-panel {
  right: 0;
  left: auto;
}
.pricepos__kpi dd {
  margin: 0;
  display: grid;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.pricepos__kpi-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.pricepos__kpi-row strong {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pricepos__kpi--muted .pricepos__kpi-row strong {
  color: var(--ink-muted);
}
.pricepos__kpi-sub {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-muted);
}
.pricepos__kpi-sub a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pricepos__kpi-sub[data-tooltip] {
  cursor: help;
  width: fit-content;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.pricepos__kpi-range {
  white-space: nowrap;
  color: var(--ink-soft);
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Écart au marché : badge tonal (vert sous, rouge au-dessus, neutre aligné). */
.pricepos__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--surface-sunken);
  color: var(--ink-soft);
}
.pricepos__badge--below {
  background: var(--green-100);
  color: var(--green-800);
}
.pricepos__badge--above {
  background: var(--danger-vivid-soft);
  color: var(--danger-vivid);
}

/* Jauge : bande P25–P75, repère marché, curseurs prix seul / prix + travaux. */
.pricepos__gauge {
  display: grid;
  gap: 6px;
  padding-top: var(--space-2);
}
.pricepos__gauge-bar {
  margin-top: 4px;
}
.pricepos__gauge-bar .pricepos__band {
  position: absolute;
  top: -5px;
  bottom: -5px;
  z-index: 0;
  border-radius: var(--radius-pill);
  background: rgba(17, 24, 39, 0.1);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.12);
  cursor: default;
}
/* Curseur « prix + travaux » : losange dans une zone de survol droite (la
   rotation est portée par l'enfant pour ne pas pencher l'infobulle). */
.pricepos__gauge-bar .pricepos__marker-wrap {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  cursor: default;
}
.pricepos__marker--works {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--surface);
  border: 2.5px solid var(--tone-works);
  box-shadow: 0 0 0 1px var(--surface);
  transform: rotate(45deg);
  pointer-events: none;
}
.pricepos__gauge-bar .pricepos__marker--price {
  z-index: 3;
}
.pricepos__gauge-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-muted);
}
.pricepos__legend {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: 12px;
  color: var(--ink-muted);
}
.pricepos__legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pricepos__legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.pricepos__legend-dot--price {
  background: var(--tone);
}
.pricepos__legend-dot--works {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--surface);
  border: 2px solid var(--tone-works);
  transform: rotate(45deg);
}
.pricepos__legend-dot--ref {
  background: var(--ink);
  opacity: 0.8;
}
.pricepos__legend-dot--band {
  width: 14px;
  border-radius: 3px;
  background: rgba(17, 24, 39, 0.12);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.16);
}

/* Référence retenue : métadonnées en puces, autres références repliées. */
.pricepos__refs {
  display: grid;
  gap: var(--space-2);
}
.pricepos__chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}
.pricepos__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pricepos__chip[data-tooltip] {
  cursor: help;
}
.pricepos__chip--warn {
  background: var(--gold-soft);
  border-color: transparent;
  color: #7a5200;
}
.pricepos__chip--link {
  cursor: pointer;
  color: var(--ink);
  border-color: var(--border-strong);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pricepos__chip--link:hover,
.pricepos__chip--link:focus-visible {
  background: var(--surface-sunken, #ebe8e0);
}
.pricepos__chip--link:focus-visible {
  outline: 2px solid var(--ink-muted);
  outline-offset: 2px;
}
.pricepos__chip-arrow {
  font-size: 11px;
  opacity: 0.7;
}

.pricepos__more {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.pricepos__more-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.pricepos__more-summary::-webkit-details-marker {
  display: none;
}
.pricepos__more-summary::marker {
  content: "";
}
.pricepos__more-summary:focus-visible {
  outline: 2px solid var(--ink-muted);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.pricepos__more-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex: none;
}
.pricepos__more[open] .pricepos__more-chevron {
  transform: rotate(45deg);
}
.pricepos__more-count {
  margin-left: auto;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: 11px;
  color: var(--ink-muted);
}
.pricepos__more-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.pricepos__more-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "scope index"
    "meta index";
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}
.pricepos__more-item + .pricepos__more-item {
  border-top: 1px solid var(--border);
}
.pricepos__more-scope {
  grid-area: scope;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.pricepos__more-meta {
  grid-area: meta;
  font-size: 12px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.pricepos__more-index {
  grid-area: index;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pricepos__more-index small {
  margin-left: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
}

.dvf-sales-table__factor {
  margin-left: 4px;
  font-size: 11px;
  color: var(--ink-muted);
}
.pricepos__hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-muted);
}
.pricepos__hint a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 720px) {
  .pricepos__head {
    flex-direction: column;
    gap: var(--space-2);
  }
  .pricepos__grade {
    width: 100%;
    max-width: none;
    align-items: flex-start;
    text-align: left;
  }
  .pricepos__grade-row {
    justify-content: flex-start;
  }
  .pricepos__grade-caption {
    text-align: left;
    white-space: normal;
  }
  .pricepos__grade-scale-col {
    flex: 1 1 auto;
    max-width: none;
  }
  .pricepos__kpis {
    grid-template-columns: 1fr;
  }
  .pricepos__caveats {
    margin-left: 0;
  }
  .pricepos__chip {
    white-space: normal;
  }
}

.pricem2__card-hint {
  font-size: 13px;
  color: var(--ink-muted);
}

.rentest__body {
  display: grid;
  gap: var(--space-4);
}
.rentest__empty {
  display: grid;
  gap: var(--space-3);
  align-items: start;
}
.rentest__unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
}
.rentest__kpis {
  margin: 0;
}
.rentest__chips {
  margin: 0;
}

/* Espacement géré par le gap de .pricem2 (évite gap + margin cumulés). */
.pricem2 > .pricem2__evolution-details,
.pricem2 > .rentest__details,
#listing-rent-estimate > .rentest__details {
  margin-top: 0;
}

/* Immo Data en attente : valeur locative hors .pricem2 jusqu'au chargement du marché. */
.provider-block > .pa-pending--compact + #listing-rent-estimate {
  margin-top: var(--space-4);
}

.pricem2__evolution-details .delinquance__summary {
  color: var(--ink);
  background: var(--surface-muted);
}

.pricem2__evolution-details .delinquance__summary:hover {
  background: var(--surface);
}

.pricem2__evolution-details[open] .delinquance__summary {
  background: var(--surface-muted);
}

.pricem2__evolution-details .delinquance__summary-label {
  color: var(--ink);
}

.pricem2__evolution-details .delinquance__summary-count {
  color: var(--ink-soft);
}

.pricem2__evolution-details .delinquance__summary-chevron {
  color: var(--ink-muted);
}

.pricem2__evolution-details .delinquance__summary:hover .delinquance__summary-chevron,
.pricem2__evolution-details .delinquance__summary:focus-visible .delinquance__summary-chevron {
  background: var(--surface);
  border-color: var(--border-strong);
}

.pricem2__evolution-details .delinquance__summary:focus-visible {
  outline-color: var(--border-strong);
}

.delinquance__details-body.pricem2__evolution {
  --city: var(--info);
  --dept: #e08a2c;
  display: grid;
  gap: var(--space-3);
}

.pricem2__type-tabs {
  display: inline-flex;
  justify-self: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.pricem2__type-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.pricem2__type-tab:hover {
  color: var(--ink);
}

.pricem2__type-tab.is-active {
  background: var(--ink);
  color: var(--ink-inverse);
}

.pricem2__type-tab:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

.pricem2__type-panel {
  display: none;
  gap: var(--space-3);
}

.pricem2__type-panel.is-active {
  display: grid;
}

/* Admin DPE / HexaSmal : onglets centrés dans le panneau, espacés du contenu */
.pricem2__type-tabs.hexasmal-section-tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: var(--space-4) auto var(--space-5);
}

.hexasmal-section-panel {
  display: none;
}

.hexasmal-section-panel.is-active {
  display: block;
}

.pricem2__periods {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  padding: var(--space-1);
  gap: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pricem2__period {
  flex: 1 1 0;
  min-width: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  text-align: center;
  border-radius: var(--radius-sm);
}

.pricem2__period-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.2;
}

.pricem2__period-value {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.25;
}

.pricem2__period-value.is-up {
  color: var(--green-800);
  background: var(--green-100);
}

.pricem2__period-value.is-down {
  color: var(--danger-vivid);
  background: var(--danger-vivid-soft);
}

.pricem2__period-value.is-flat {
  color: var(--ink-muted);
  background: var(--surface-muted);
}

@media (min-width: 720px) {
  .pricem2__period {
    min-width: 0;
    padding: var(--space-2);
  }

  .pricem2__period-label {
    font-size: 11px;
  }

  .pricem2__period-value {
    font-size: 14px;
    padding: 4px 10px;
  }
}

.pricem2__chart {
  position: relative;
  background: var(--surface);
  padding: var(--space-2) 0 0;
  height: 240px;
}

.pricem2__chart canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.pricem2__chart-config {
  display: none;
}

.pricem2__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ink-soft);
}

.pricem2__legend-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
}

.pricem2__legend-swatch--city {
  background: var(--city);
}

.pricem2__legend-swatch--dept {
  background: var(--dept);
}

.pricem2__legend-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.pricem2__legend-item:hover {
  color: var(--ink);
  background: var(--surface-muted);
}

.pricem2__legend-item:focus-visible {
  outline: 2px solid var(--city);
  outline-offset: 2px;
}

.pricem2__legend-item.is-off {
  opacity: 0.5;
}

.pricem2__legend-item.is-off .pricem2__legend-swatch {
  background: var(--ink-muted);
}

.pricem2__meta {
  margin-top: var(--space-1);
}
.pricem2__note {
  margin: 0;
  font-size: 12px;
  color: var(--ink-muted);
}

/* Sélecteur d'années de l'import DVF : steppers façon onglet Financement. */
.dvf-year-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.dvf-year-fields__field {
  width: 9.5rem;
}

.dvf-year-fields .amount-stepper {
  width: 100%;
}

.dvf-year-fields .input {
  width: 100%;
  box-sizing: border-box;
  /* Réserve la place des flèches pour ne pas chevaucher le texte. */
  padding-right: 34px;
  font-variant-numeric: tabular-nums;
}

/* Historique DVF : la ligne de résumé occupe toute la largeur (date à droite). */
#dvf-import-status .dpe-history__summary {
  width: 100%;
}

.provider-block + .provider-block {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.provider-source {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: var(--space-3);
}

.price-history {
  display: grid;
  gap: var(--space-2);
  font-size: 14px;
}

.price-history__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.price-history__delta {
  font-size: 12px;
  font-weight: 600;
}

.price-history__delta--down {
  color: var(--green-600);
}

.price-history__delta--up {
  color: var(--warn);
}

/* Écart entre le prix négocié et le prix officiel, sous le champ de saisie. */
.price-gap {
  display: block;
  margin-top: calc(var(--space-1) * -1);
}

.price-gap__value {
  font-weight: 600;
}

.price-gap__value--down {
  color: var(--green-600);
}

.price-gap__value--up {
  color: var(--warn);
}

.financing-params {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  align-items: end;
}

.financing__yield-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.financing__yield-scale-wrap {
  flex: 0 0 auto;
  width: 6.75rem;
}

.financing__yield-scale {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 28px;
}

.financing__yield-seg {
  flex: 1 1 0;
  height: 10px;
  border-radius: var(--radius-pill);
  opacity: 0.4;
  transition: height 0.12s ease, opacity 0.12s ease;
}

.financing__yield-seg.is-active {
  flex-grow: 2.4;
  height: 26px;
  border-radius: var(--radius-sm);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.financing__yield-seg.is-active.is-active--dark {
  color: #1c1c1c;
  text-shadow: none;
}

.financing__yield-pct {
  flex: 0 0 auto;
  min-width: 4.25rem;
  text-align: right;
}

.financing__debt-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 13px;
  font-weight: 600;
}

/* --- Financement : disposition en deux colonnes (paramètres | calculs).
   Les deux cartes s'étirent sur la hauteur de la plus grande, pour que
   leur haut et leur bas restent alignés. --- */
.financing__grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 1.5fr;
  gap: var(--space-4);
  align-items: stretch;
}

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

.financing-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  overflow: hidden;
}

.financing-card__head {
  margin-bottom: var(--space-4);
}

.financing-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.financing-card__subtitle {
  margin: var(--space-1) 0 0;
  font-size: 13px;
  color: var(--ink-muted);
}

.modal--financing-amortization .modal__dialog--wide {
  max-width: min(52rem, 96vw);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.financing-amortization-dialog .modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
}

.financing-amortization-dialog__head {
  padding-right: 2.75rem;
}

.financing-amortization-dialog__title {
  margin-bottom: var(--space-2);
}

.financing-amortization-dialog__lead,
.financing-amortization-dialog__ref,
.financing-amortization-dialog__footnote {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
  line-height: 1.45;
}

.financing-amortization-dialog__ref {
  margin-bottom: var(--space-2);
}

.financing-amortization-dialog__tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: var(--green-100);
  color: var(--green-800);
  vertical-align: 0.05em;
}

.financing-amortization-dialog__table-wrap {
  overflow: auto;
  flex: 1;
  min-height: 0;
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.financing-amortization-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.financing-amortization-table th,
.financing-amortization-table td {
  padding: var(--space-2) var(--space-3);
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.financing-amortization-table th:first-child,
.financing-amortization-table td:first-child {
  text-align: left;
}

.financing-amortization-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-muted, #f6f4ed);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-soft);
}

.financing-amortization-table tfoot th,
.financing-amortization-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--border-strong);
  background: var(--surface);
}

/* Dans la carte de gauche, les champs s'empilent verticalement. */
.financing-card--params .financing-params {
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: 0;
}

/* Formulaire de paramètres plus confortable : chiffres plus lisibles que la
   taille « sm » utilisée par défaut dans les colonnes étroites. */
.financing-card--params .financing-params .input {
  padding: 11px 14px;
  font-size: 15px;
}

.financing-card--params .financing-params .input[data-amount] {
  font-variant-numeric: tabular-nums;
}

/* Interrupteur à deux libellés (pattern form-switch-labeled) : libellé ·
   interrupteur · libellé ; l'icône de la pastille change avec l'état. */
.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.mode-switch__label {
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mode-switch__label[aria-pressed="true"] {
  color: var(--ink);
}

.mode-switch__label:hover {
  color: var(--green-800);
}

.mode-switch__label:focus-visible,
.mode-switch__button:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

.mode-switch__button {
  position: relative;
  width: 56px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--green-600);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.mode-switch.is-on .mode-switch__button {
  background: var(--green-900);
}

.mode-switch__thumb {
  position: absolute;
  top: 5px;
  left: 5px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.mode-switch.is-on .mode-switch__thumb {
  transform: translateX(26px);
}

.mode-switch__icon {
  grid-area: 1 / 1;
  width: 13px;
  height: 13px;
  stroke-width: 2;
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.mode-switch__icon--off {
  color: var(--gold-ink);
}

.mode-switch__icon--on {
  color: var(--green-900);
  opacity: 0;
  transform: rotate(-22deg) scale(0.9);
}

.mode-switch.is-on .mode-switch__icon--off {
  opacity: 0;
  transform: rotate(22deg) scale(0.9);
}

.mode-switch.is-on .mode-switch__icon--on {
  opacity: 1;
  transform: none;
}

/* Taille intermédiaire : panneau mode sur la fiche de visite. */
.mode-switch--md {
  gap: var(--space-1);
}

.mode-switch--md .mode-switch__label {
  font-size: 15px;
  font-weight: 700;
}

.mode-switch--md .mode-switch__button {
  width: 66px;
  height: 35px;
}

.mode-switch--md .mode-switch__thumb {
  top: 5px;
  left: 5px;
  width: 24px;
  height: 24px;
}

.mode-switch--md.is-on .mode-switch__thumb {
  transform: translateX(31px);
}

.mode-switch--md .mode-switch__icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 420px) {
  .mode-switch--md .mode-switch__label {
    padding-inline: var(--space-1);
    font-size: 14px;
  }
}

/* Grande taille. */
.mode-switch--lg {
  gap: var(--space-2);
}

.mode-switch--lg .mode-switch__label {
  font-size: 17px;
  font-weight: 700;
}

.mode-switch--lg .mode-switch__button {
  width: 76px;
  height: 40px;
}

.mode-switch--lg .mode-switch__thumb {
  top: 6px;
  left: 6px;
  width: 28px;
  height: 28px;
}

.mode-switch--lg.is-on .mode-switch__thumb {
  transform: translateX(36px);
}

.mode-switch--lg .mode-switch__icon {
  width: 17px;
  height: 17px;
}

@media (max-width: 420px) {
  .mode-switch--lg {
    gap: var(--space-1);
  }

  .mode-switch--lg .mode-switch__label {
    padding-inline: var(--space-1);
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mode-switch__label,
  .mode-switch__button,
  .mode-switch__thumb,
  .mode-switch__icon {
    transition: none;
  }
}

/* Flèches des paramètres : champs en texte (séparateurs de milliers, virgule
   décimale) avec les mêmes boutons + / −. */
.amount-stepper {
  position: relative;
  display: block;
}

.financing-card--params .financing-params .amount-stepper .input {
  padding-right: 34px;
}

.amount-stepper__controls {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 26px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  border-radius: 0 7px 7px 0;
  overflow: hidden;
  background: var(--surface);
}

.amount-stepper__btn {
  flex: 1 1 0;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amount-stepper__btn + .amount-stepper__btn {
  border-top: 1px solid var(--border);
}

.amount-stepper__btn:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.amount-stepper__btn:active {
  background: var(--surface-sunken);
}

.amount-stepper__btn--up::before,
.amount-stepper__btn--down::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.amount-stepper__btn--up::before {
  border-bottom: 5px solid currentColor;
}

.amount-stepper__btn--down::before {
  border-top: 5px solid currentColor;
}

.financing-card--params .financing-params .field__label {
  font-size: 14px;
}

.financing-admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: 0;
  width: 100%;
}

.financing-admin-form__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  grid-template-rows: repeat(4, auto);
  column-gap: 0;
  row-gap: var(--space-4);
  align-items: start;
  width: 100%;
}

.financing-admin-form__rule {
  grid-column: 2;
  grid-row: 1 / -1;
  background: var(--border);
  width: 1px;
  justify-self: center;
  align-self: stretch;
  min-height: 100%;
}

.financing-admin-form__field--left {
  grid-column: 1;
  padding-right: var(--space-5);
}

.financing-admin-form__field--right {
  grid-column: 3;
  padding-left: var(--space-5);
}

.financing-admin-form__field--row-1 {
  grid-row: 1;
}

.financing-admin-form__field--row-2 {
  grid-row: 2;
}

.financing-admin-form__field--row-3 {
  grid-row: 3;
}

.financing-admin-form__field--row-4 {
  grid-row: 4;
}

.financing-admin-form__field {
  width: 100%;
  min-width: 0;
}

.financing-admin-form .field__label {
  font-size: 14px;
}

.financing-admin-form .amount-stepper {
  width: 100%;
}

.financing-admin-form .input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  font-size: 15px;
}

.financing-admin-form .amount-stepper .input {
  padding-right: 34px;
}

.financing-admin-form__actions {
  margin-top: var(--space-2);
}

@media (max-width: 640px) {
  .financing-admin-form__columns {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .financing-admin-form__rule {
    display: none;
  }

  .financing-admin-form__field--left,
  .financing-admin-form__field--right {
    grid-column: 1;
    grid-row: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

.notes-status {
  font-size: 12px;
  color: var(--ink-muted);
  min-height: 1.2em;
}

.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request {
  opacity: 1;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 0.2s ease;
  font-size: 12px;
  color: var(--ink-muted);
}

/* ------------------------------ Paramètres ------------------------------ */

.device-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.device-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* ------------------------- Paramètres : menu + contenu ------------------- */

.settings-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.settings-menu {
  position: sticky;
  top: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.settings-menu__head {
  margin-bottom: var(--space-5);
}

.settings-menu__title {
  font-size: 22px;
}

.settings-menu__subtitle {
  margin: var(--space-1) 0 0;
  font-size: 13px;
  color: var(--ink-muted);
}

.settings-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.settings-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.settings-menu__item:hover {
  background: var(--surface-muted);
}

.settings-menu__item.is-active {
  background: var(--surface-muted);
  border-color: var(--border);
}

.settings-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--green-100);
  color: var(--green-600);
}

.settings-menu__icon svg {
  width: 20px;
  height: 20px;
}

.settings-menu__item--danger .settings-menu__icon {
  background: var(--danger-soft);
  color: var(--danger);
}

.settings-menu__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.settings-menu__label {
  font-weight: 600;
  font-size: 14px;
}

.settings-menu__hint {
  font-size: 12px;
  color: var(--ink-muted);
}

.settings-menu__chevron {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 20px;
  line-height: 1;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* Un seul panneau visible à la fois : le voisin masqué ne doit pas décaler
   le panneau actif (sinon `.panel + .panel` ajoute une marge en haut). */
.settings-content > .panel + .panel {
  margin-top: 0;
}

.settings-panel[hidden] {
  display: none;
}

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

  .settings-menu {
    position: static;
  }
}

.danger-zone {
  border-color: var(--danger);
}

/* Annonce écartée : bordures rouges sur tous les panneaux, comme la zone « Supprimer ». */
.detail--rejected .panel {
  border-color: var(--danger);
}

.danger-zone__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4) var(--space-5);
  align-items: center;
}

.danger-zone__head {
  margin-bottom: var(--space-2);
}

.danger-zone__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .danger-zone__grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .danger-zone__actions {
    justify-content: flex-start;
  }
}

/* -------------------------------- Projets ------------------------------- */

/* `--project-color` est posé en ligne depuis la couleur stockée du projet. */
.project-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--project-color, var(--green-900));
}

.filters--projects {
  margin-bottom: var(--space-3);
}

/* Seul le point à gauche du nom signale le projet choisi. Le fond de la pastille ne change pas.
   Vert feuille, plus franc que le lime, et assez clair pour rester lisible sur le fond sombre. */
.filters--projects .pill.is-active .project-dot {
  background: #3ecf8e;
}

/* Toujours sur leur propre ligne : un nom de projet court ne les ramène pas
   à côté des pastilles. `flex: 1 0 100%` et non `width`, sinon la base
   flexible empêche le passage à la ligne. */
.filters__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex: 1 0 100%;
}

/* --------------------- Sélecteur de projet (dropdown) ------------------- */

/* La dropdown de projet partage la seconde ligne, à gauche du tri. */
.project-select {
  position: relative;
  flex: 0 0 auto;
}

.project-select__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 12px 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  border: 1px solid var(--panel);
  color: var(--ink-inverse);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  max-width: 260px;
}

.project-select__trigger:hover {
  background: var(--panel);
  filter: brightness(1.08);
}

.project-select__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 139, 107, 0.3);
}

.project-select__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-select__trigger .pill__count {
  opacity: 0.65;
  font-weight: 500;
}

.project-select__chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: 0.7;
  transition: transform 0.15s ease;
  transform-origin: 50% 45%;
}

.project-select__trigger[aria-expanded="true"] .project-select__chevron {
  transform: rotate(180deg);
}

.project-select__trigger[aria-expanded="false"]:hover .project-select__chevron,
.project-select__trigger[aria-expanded="false"]:focus-visible .project-select__chevron {
  animation: project-select-chevron-nudge 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes project-select-chevron-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  32% {
    transform: translateY(3px);
  }
  58% {
    transform: translateY(-2px);
  }
  78% {
    transform: translateY(1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-select__trigger[aria-expanded="false"]:hover .project-select__chevron,
  .project-select__trigger[aria-expanded="false"]:focus-visible .project-select__chevron {
    animation: none;
  }
}

/* Un point neutre pour « Tous les projets ». */
.project-dot--all {
  background: linear-gradient(135deg, #3ecf8e, #0b3d2c);
}

.project-select__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 240px;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-2);
  display: grid;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.project-select__menu[hidden] {
  display: none;
}

.project-select__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.project-select__option:hover,
.project-select__option.is-focused {
  text-decoration: none;
  background: var(--surface-sunken);
  color: var(--ink);
}

.project-select__option.is-active {
  background: var(--panel);
  color: var(--ink-inverse);
}

.project-select__option.is-active .project-dot--all {
  background: #3ecf8e;
}

.project-select__option-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-select__option .pill__count {
  opacity: 0.6;
  font-weight: 500;
}

/* --------- Statut de suivi dans les cartes de la liste ------------------ */

/* Même habillage que la dropdown « Tous les projets ». Le pied de carte est
   tout en bas et la carte masque ses débordements : le menu s'ouvre donc vers
   le haut pour ne pas être rogné. */
.card__status-menu {
  top: auto;
  bottom: calc(100% + 6px);
  min-width: 200px;
}

/* Vert du site, comme les autres déclencheurs. Le rouge signale une annonce
   écartée : le statut se lit sans ouvrir le menu. */
.card__status-select .project-select__trigger {
  background: var(--green-600);
  border-color: var(--green-600);
  color: var(--ink-inverse);
}

.card__status-select .project-select__trigger:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  filter: none;
}

/* « Tous les projets » reprend le vert du site, comme le statut des cartes. */
.filters__actions > .project-select .project-select__trigger {
  background: var(--green-600);
  border-color: var(--green-600);
}

.filters__actions > .project-select .project-select__trigger:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  filter: none;
}

/* Le tri reprend la pilule claire d'origine : fond blanc, texte sombre. */
.sort-select .project-select__trigger {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}

.sort-select .project-select__trigger:hover {
  background: var(--surface-muted);
  border-color: var(--border-strong);
  filter: none;
}

.card__status-select.is-rejected .project-select__trigger,
.project-dropdown.is-rejected .project-select__trigger {
  background: var(--danger);
  border-color: var(--danger);
}

.card__status-select.is-rejected .project-select__trigger:hover,
.project-dropdown.is-rejected .project-select__trigger:hover {
  background: #9a1e14;
  border-color: #9a1e14;
  filter: none;
}

.card__status-select.is-rejected .project-select__trigger:focus-visible,
.project-dropdown.is-rejected .project-select__trigger:focus-visible {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.3);
}

.card__status-option {
  cursor: pointer;
}

/* Les boutons radio restent accessibles mais invisibles : on ne garde que la
   mise en avant de l'option active, comme dans « Tous les projets ». */
.card__status-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------- Dropdown multi-sélection des projets (en-tête de fiche) ------- */

/* Réutilise `.project-select` pour l'allure, mais les options sont des cases
   à cocher : on peut rattacher l'annonce à plusieurs projets. */

/* Déclencheur et options sélectionnées habillés en vert du site plutôt qu'en
   sombre : moins austère, cohérent avec les boutons verts du reste du site. */
.project-dropdown .project-select__trigger {
  background: var(--green-600);
  border-color: var(--green-600);
  color: var(--ink-inverse);
}

.project-dropdown .project-select__trigger:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  filter: none;
}

.detail-head .btn-row .project-select__trigger {
  justify-content: flex-start;
}

.detail-head .btn-row .project-select__label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.detail-head .btn-row .project-select__chevron {
  margin-left: auto;
}

.project-dropdown__option.is-active {
  background: var(--green-100);
  color: var(--green-900);
}

.project-dropdown__option.is-active:hover {
  background: var(--green-100);
  filter: brightness(0.98);
}

.project-dropdown__dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.project-dropdown__option {
  cursor: pointer;
}

.project-dropdown__option input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--green-600);
}

.project-dropdown__title {
  margin: 2px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
}

.project-dropdown__footer {
  margin: var(--space-1) 2px 0;
  padding: var(--space-2) 8px 2px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
}

.card__projects-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

.card__projects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  min-width: 0;
}

.card__origin-link {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--green-800);
  text-decoration: none;
  white-space: nowrap;
}

.card__origin-link:hover,
.card__origin-link:focus-visible {
  text-decoration: underline;
}

.project-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
}

.project-chip:hover {
  text-decoration: none;
  border-color: var(--border-strong);
  color: var(--ink);
}

.project-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.project-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.project-choice:hover {
  border-color: var(--ink-soft);
}

.project-choice.is-active {
  background: var(--green-100);
  border-color: var(--green-600);
  color: var(--green-900);
}

.project-choice input {
  accent-color: var(--green-600);
}

.project-picker__hint {
  flex: 1 0 100%;
}

.project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.project-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.project-list__item.is-dragging {
  opacity: 0.6;
  background: var(--surface);
  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
}

.project-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  cursor: grab;
  touch-action: none;
}

.project-drag:hover,
.project-drag:focus-visible {
  background: var(--surface);
  color: var(--green-800);
  outline: none;
}

.project-drag:active {
  cursor: grabbing;
}

.project-drag svg {
  width: 16px;
  height: 16px;
}

.project-list__main {
  flex: 1 1 260px;
  display: grid;
  gap: 6px;
}

.project-list__title {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.project-list__name {
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}

.project-list__name:hover {
  text-decoration: underline;
}

.project-list__name[hidden],
.project-rename[hidden],
.project-rename-form[hidden] {
  display: none !important;
}

.project-rename {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

.project-rename svg {
  width: 15px;
  height: 15px;
}

.project-rename:hover,
.project-rename:focus-visible {
  background: var(--surface);
  color: var(--green-800);
  outline: none;
}

.project-rename-form {
  flex: 1 1 auto;
  min-width: 0;
}

.project-rename__input {
  width: min(100%, 280px);
  padding: 4px 10px;
  font-weight: 650;
}

/* ------------------------------- Infobulle ------------------------------ */
/* Composant générique piloté par l'attribut `data-tooltip`. Pur CSS (aucune
   dépendance, compatible CSP) : fondu, léger décalage et petite flèche. */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after,
[data-tooltip]::before {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  transform: translate(-4px, -50%);
  z-index: 60;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-inverse);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--shadow-raised);
}

/* Petite flèche à gauche de la bulle. */
[data-tooltip]::before {
  content: "";
  left: calc(100% + 3px);
  width: 8px;
  height: 8px;
  background: var(--panel);
  transform: translate(-4px, -50%) rotate(45deg);
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translate(0, -50%);
}

[data-tooltip]:focus-visible::before,
[data-tooltip]:hover::before {
  transform: translate(0, -50%) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::after,
  [data-tooltip]::before {
    transition: none;
  }
}

/* Variantes : `tooltip--wrap` pour deux phrases au plus (largeur bornée, retour
   à la ligne), `tooltip--top` pour l'afficher au-dessus de l'élément. */
[data-tooltip].tooltip--wrap::after {
  white-space: normal;
  width: max-content;
  max-width: 17rem;
  text-align: left;
  line-height: 1.35;
}

[data-tooltip].tooltip--top::after,
[data-tooltip].tooltip--top::before {
  top: auto;
  bottom: calc(100% + 10px);
  left: 50%;
  right: auto;
  transform: translate(-50%, 4px);
}

[data-tooltip].tooltip--top::before {
  bottom: calc(100% + 4px);
  transform: translate(-50%, 4px) rotate(45deg);
}

[data-tooltip].tooltip--top:hover::after,
[data-tooltip].tooltip--top:focus-visible::after {
  transform: translate(-50%, 0);
}

[data-tooltip].tooltip--top:hover::before,
[data-tooltip].tooltip--top:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

/* Fil d'Ariane / contexte en tête de page de paramétrage. */
.page-eyebrow {
  margin: 0 0 var(--space-1);
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.page-eyebrow a {
  color: inherit;
}

/* Adresses de référence d'un projet. */
.address-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.address-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.address-list__main {
  flex: 1 1 220px;
  display: grid;
  gap: 4px;
}

/* ---------------- Autocomplétion des adresses de référence --------------- */

.address-suggest {
  position: relative;
  display: grid;
  gap: var(--space-4);
}

.address-suggest__menu {
  list-style: none;
  margin: 0;
  padding: 4px;
  position: absolute;
  /* `top` est fixé en JS pour s'ancrer juste sous le champ actif. */
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}

.address-suggest__title {
  padding: var(--space-2) var(--space-3) 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.address-suggest__option {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.address-suggest__option:hover,
.address-suggest__option.is-active {
  background: var(--green-100);
}

.address-suggest__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.address-suggest__text {
  font-size: 13px;
  color: var(--ink-muted);
}

/* --------------------------- Carnet d'adresses -------------------------- */

.address-book__add {
  padding: var(--space-3);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.address-book__add-title {
  margin: 0 0 var(--space-3);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.address-book__add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.address-book__add-field {
  gap: 4px;
}

.address-book__add-field--label {
  flex: 0 1 132px;
  min-width: 112px;
}

.address-book__add-field--address {
  flex: 1 1 180px;
  min-width: 160px;
}

.address-book__add-field .field__label {
  font-size: 12px;
}

.address-book__add-submit {
  flex: 0 0 auto;
  margin-bottom: 1px;
}

.address-book__list-title {
  margin: 0 0 var(--space-4);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.address-book__list-count {
  font-weight: 600;
  color: var(--ink-muted);
}

.address-book__item {
  align-items: center;
}

.address-book__main {
  flex: 1 1 280px;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.address-book__line {
  min-width: 0;
}

.address-book__name,
.address-book__address {
  display: inline;
  overflow-wrap: anywhere;
  vertical-align: middle;
  cursor: text;
}

.address-book__line > .project-rename {
  vertical-align: middle;
  margin-left: 2px;
}

.address-book__name {
  font-weight: 650;
  color: var(--ink);
}

.address-book__name.is-empty {
  font-weight: 500;
  font-style: italic;
  color: var(--ink-muted);
}

.address-book__address {
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.address-book__name[hidden],
.address-book__address[hidden] {
  display: none !important;
}

.address-book__line .project-rename-form {
  flex: 1 1 auto;
  min-width: 0;
}

.address-book__line .project-rename__input,
.address-book__rename-input {
  width: 100%;
  max-width: 100%;
}

.address-book__delete-form {
  margin: 0 0 0 auto;
  flex: 0 0 auto;
}

.address-book__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 6px;
}

.address-book__meta .card__foot-note {
  flex: 1 1 auto;
  min-width: 0;
}

.address-book__map {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--green-800);
  text-decoration: none;
  white-space: nowrap;
}

.address-book__map:hover,
.address-book__map:focus-visible {
  text-decoration: underline;
}

/* ------------------- Localisation (fiche annonce) ------------------ */

.listing-location-block {
  display: contents;
}

.listing-location {
  position: relative;
  scroll-margin-top: calc(var(--space-4) + 3.5rem);
}

.listing-location__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

@media (max-width: 720px) {
  .listing-location__grid {
    grid-template-columns: 1fr;
  }
}

.listing-location__col--stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.listing-location__section {
  min-width: 0;
}

.listing-location__col--map {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.listing-location__map-title {
  margin-bottom: var(--space-3);
}

.listing-location__map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.listing-location__estimate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.listing-location__estimate-btn--force {
  opacity: 0.85;
}

.listing-location__estimate {
  margin-top: var(--space-3);
}

.listing-location__estimate-cache {
  margin: var(--space-1) 0 0;
  font-size: 0.85em;
  color: var(--text-muted, #6b7280);
}

.listing-location__estimate-status {
  margin: 0 0 var(--space-1);
  font-weight: 650;
}

.listing-location__estimate-warning {
  margin: var(--space-1) 0 0;
  color: var(--danger, #b91c1c);
  font-size: 0.9em;
}

.listing-location__estimate-list {
  margin: var(--space-2) 0 0;
  padding-left: 1.2em;
  font-size: 0.9em;
}

.listing-location__map {
  position: relative;
  flex: 1 1 auto;
  min-height: 280px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: linear-gradient(165deg, #e8efe8 0%, #f7f6f2 42%, #ebe7da 100%);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.listing-location__map-grid {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image: linear-gradient(
      rgba(17, 21, 15, 0.06) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(17, 21, 15, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.listing-location__map.is-located::before {
  content: "";
  position: absolute;
  inset: 18% 22%;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(46, 139, 107, 0.22) 0%,
    rgba(46, 139, 107, 0.08) 45%,
    transparent 70%
  );
  pointer-events: none;
}

.listing-location__map-pin {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--green-800);
  box-shadow: 0 0 0 6px rgba(46, 139, 107, 0.28),
    0 4px 12px rgba(17, 21, 15, 0.2);
}

.listing-location__map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 10px;
  margin-left: -1px;
  background: var(--green-800);
  border-radius: 1px;
  opacity: 0.85;
}

.listing-location__map-caption {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}

.listing-location__map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: center;
}

.listing-location__map-icon {
  font-size: 1.75rem;
  line-height: 1;
  opacity: 0.55;
}

.listing-location__map-placeholder-title {
  margin: 0;
  font-weight: 650;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.listing-location__map-placeholder-text {
  margin: 0;
  max-width: 22ch;
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

.listing-location__map--live {
  background: var(--surface-muted);
  box-shadow: none;
}

.listing-location__map-expand {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(17, 21, 15, 0.12);
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.listing-location__map-expand[hidden] {
  display: none;
}

.listing-location__map-expand:hover {
  background: #fff;
  border-color: var(--border-strong);
}

.listing-location__map-expand:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

.listing-location__map-expand svg {
  width: 1.05rem;
  height: 1.05rem;
}

.listing-location-map-dialog .modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
}

.listing-location-map-dialog__title {
  margin: 0 0 var(--space-3);
  padding-right: 2.5rem;
  font-size: 1.1rem;
  font-weight: 650;
}

.listing-location-map-dialog__map {
  position: relative;
  flex: 1 1 auto;
  min-height: min(68vh, 520px);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  overflow: hidden;
  background: var(--surface-muted);
}

.listing-location-map-modal .modal__dialog--wide {
  max-width: min(56rem, 96vw);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.listing-location-map-dialog__map-view {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.listing-location__map-view {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.listing-location__map-view .leaflet-container {
  width: 100%;
  height: 100%;
  font-family: inherit;
  border-radius: inherit;
}

.listing-location__col-title {
  margin: 0 0 var(--space-1);
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink);
}

.listing-location__col-hint {
  margin: 0 0 var(--space-3);
  font-size: 0.88rem;
}

.listing-location__card {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--border);
  min-height: 72px;
}

.listing-location__card--muted {
  background: var(--surface-muted);
}

.listing-location__card--accent {
  background: var(--green-100);
  border-color: rgba(46, 139, 107, 0.35);
}

.listing-location__card--editable {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.listing-location__card--editable:hover,
.listing-location__card--editable:focus-visible {
  border-color: var(--green-600);
  box-shadow: 0 0 0 1px rgba(46, 139, 107, 0.25);
  outline: none;
}

.listing-location__geo-badge {
  float: right;
  margin: 0 0 var(--space-2) var(--space-2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(17, 21, 15, 0.05);
}

/* Pastille « succès » : la géolocalisation a abouti (lime = signal positif du site). */
.listing-location__geo-badge--ok {
  background: var(--lime);
  color: var(--green-900);
  border-color: rgba(11, 61, 44, 0.12);
}

.listing-location__geo-badge--pending {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: rgba(224, 84, 31, 0.22);
}

.listing-location__card--empty {
  background: var(--surface-muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
}

.listing-location__place {
  margin: 0;
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--ink);
}

.listing-location__postal,
.listing-location__locality {
  margin: var(--space-1) 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.listing-location__declared {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.listing-location__declared-text {
  min-width: 0;
}

.listing-location__declared-btn {
  flex: 0 0 auto;
}

.listing-location__declared-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.listing-location__announced {
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.listing-location__declared-reset {
  margin-left: auto;
}

.listing-postal-form__communes {
  position: relative;
  min-height: 2.5rem;
}

.listing-postal-form__loading.spinner {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
}

.listing-postal-form__loading.spinner.htmx-request {
  display: inline-block;
}

.listing-location__locality-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  clear: both;
}

.listing-location__locality-row .listing-location__locality {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.listing-location__locality--empty {
  display: block;
  min-height: 1em;
}

.listing-location__source-badge {
  flex: 0 0 auto;
  max-width: 55%;
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
  white-space: normal;
}

.listing-location__maps-link {
  font-size: 0.82rem;
}

.listing-location__street {
  margin: 0;
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.listing-location__complement {
  margin: var(--space-1) 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.listing-location__empty,
.listing-location__empty-text {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.listing-location__empty-title {
  margin: 0;
  font-weight: 650;
  color: var(--ink-soft);
}

.listing-location__empty-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.listing-location__meta {
  margin-top: var(--space-3);
  padding-left: var(--space-3);
  flex-wrap: wrap;
}

.listing-location__meta-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.listing-location__cta {
  margin-top: var(--space-3);
}

.listing-location__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.listing-location__ai-btn {
  background: var(--surface-muted);
  border-style: dashed;
  border-color: var(--border-strong);
}

.listing-location__ai-btn:hover,
.listing-location__ai-btn:focus-visible {
  background: var(--surface-sunken);
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--ink);
}

/* ---------- Maison DPE : état de chaque partie du logement (DPE lié) ---------- */

.dpe-house {
  --dpe-good: #3a9d4f;
  --dpe-average: #f0b90b;
  --dpe-poor: #e0541f;
  --dpe-unknown: var(--border-strong);
}

.dpe-house__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  margin-bottom: var(--space-5);
}

.dpe-house__hero--good {
  background: linear-gradient(120deg, rgba(58, 157, 79, 0.1), transparent 60%);
  border-color: rgba(58, 157, 79, 0.3);
}

.dpe-house__hero--average {
  background: linear-gradient(120deg, rgba(240, 185, 11, 0.12), transparent 60%);
  border-color: rgba(240, 185, 11, 0.35);
}

.dpe-house__hero--poor {
  background: linear-gradient(120deg, rgba(224, 84, 31, 0.1), transparent 60%);
  border-color: rgba(224, 84, 31, 0.3);
}

.dpe-house__summary {
  display: grid;
  gap: 2px;
  flex: 1 1 240px;
  min-width: 0;
}

.dpe-house__summary-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dpe-house__verdict {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.dpe-house__summary-dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.dpe-house__summary-dates-warn {
  color: var(--danger);
  font-weight: 650;
}

.dpe-house__budget {
  display: grid;
  justify-items: end;
  text-align: right;
}

.dpe-house__budget-caption-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  max-width: 100%;
}

.dpe-house__budget-caption {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dpe-house__budget-help {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.dpe-house__budget-help-trigger {
  list-style: none;
  cursor: pointer;
  user-select: none;
  line-height: 0;
}

.dpe-house__budget-help-trigger::-webkit-details-marker {
  display: none;
}

.dpe-house__budget-help-trigger::marker {
  content: "";
}

.dpe-house__budget-help-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.dpe-house__budget-help-trigger:hover .dpe-house__budget-help-mark,
.dpe-house__budget-help[open] .dpe-house__budget-help-mark {
  background: var(--surface-sunken, #ebe8e0);
  border-color: var(--border-strong);
  color: var(--ink-soft);
}

.dpe-house__budget-help-trigger:focus-visible {
  outline: none;
}

.dpe-house__budget-help-trigger:focus-visible .dpe-house__budget-help-mark {
  outline: 2px solid var(--ink-muted);
  outline-offset: 2px;
}

.dpe-house__budget-help-title {
  margin: 0 0 var(--space-1);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.dpe-house__budget-help-panel {
  position: absolute;
  z-index: 25;
  right: 0;
  left: auto;
  top: calc(100% + 6px);
  width: min(19rem, calc(100vw - 2rem));
  padding: var(--space-3);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.dpe-house__budget-help-lead {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.dpe-house__budget-help-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.dpe-house__budget-help-list li {
  margin-bottom: var(--space-1);
}

.dpe-house__budget-help-list li:last-child {
  margin-bottom: 0;
}

.dpe-house__budget-value {
  font-size: 28px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dpe-house__budget-unit {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.dpe-house__budget-sub {
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.dpe-house__budget--good .dpe-house__budget-value { color: var(--green-800); }
.dpe-house__budget--average .dpe-house__budget-value { color: var(--gold-ink); }
.dpe-house__budget--poor .dpe-house__budget-value { color: var(--warn); }

.dpe-house__body {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
}

.dpe-house__stage {
  position: relative;
  width: 100%;
  max-width: 320px;
}

.dpe-house__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.dpe-house__ground { fill: var(--surface-sunken); }
.dpe-house__interior { fill: var(--surface); }
.dpe-house__attic { fill: var(--surface-muted); }
.dpe-house__hatch-bg { fill: var(--surface-muted); }

.dpe-house__hatch-line {
  stroke: var(--border-strong);
  stroke-width: 3;
}

.dpe-house__zone {
  --zone: var(--dpe-unknown);
  cursor: pointer;
  transition: opacity 0.18s ease, filter 0.18s ease;
}

.dpe-house__zone--good { --zone: var(--dpe-good); }
.dpe-house__zone--average { --zone: var(--dpe-average); }
.dpe-house__zone--poor { --zone: var(--dpe-poor); }

.dpe-house__fill {
  fill: var(--zone);
  stroke: rgba(17, 21, 15, 0.16);
  stroke-width: 1;
}

.dpe-house__fill--soft { opacity: 0.6; }

.dpe-house__glass {
  fill: var(--zone);
  fill-opacity: 0.3;
  stroke: var(--zone);
  stroke-width: 3;
}

.dpe-house__frame {
  stroke: var(--zone);
  stroke-width: 2;
}

.dpe-house__detail-line {
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2;
  stroke-linecap: round;
}

.dpe-house__air,
.dpe-house__heat,
.dpe-house__pipe {
  fill: none;
  stroke: var(--zone);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dpe-house__zone--unknown .dpe-house__fill {
  fill: url(#dpe-house-hatch);
}

.dpe-house__zone--unknown .dpe-house__glass {
  fill: url(#dpe-house-hatch);
  fill-opacity: 1;
}

.dpe-house__zone--unknown .dpe-house__detail-line {
  stroke: var(--border-strong);
}

.dpe-house__stage[data-active-zone] .dpe-house__zone {
  opacity: 0.28;
}

.dpe-house__stage[data-active-zone] .dpe-house__zone.is-active {
  opacity: 1;
  filter: drop-shadow(0 4px 10px rgba(17, 21, 15, 0.22));
}

.dpe-house__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: var(--radius-pill);
  background: var(--dpe-unknown);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(17, 21, 15, 0.25);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dpe-house__pin:hover,
.dpe-house__pin:focus-visible,
.dpe-house__pin[aria-expanded="true"] {
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 4px 14px rgba(17, 21, 15, 0.3);
}

.dpe-house__pin:focus-visible {
  outline: 3px solid var(--info);
  outline-offset: 2px;
}

.dpe-house__pin--good { background: var(--dpe-good); }
.dpe-house__pin--average { background: var(--dpe-average); color: #4a3500; }
.dpe-house__pin--poor { background: var(--dpe-poor); }

.dpe-house__pin--unknown {
  background: var(--surface);
  color: var(--ink-muted);
  border-color: var(--border-strong);
  border-style: dashed;
}

.dpe-house__pin--poor::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--dpe-poor);
  animation: dpe-house-pulse 2s ease-out infinite;
  pointer-events: none;
}

@keyframes dpe-house-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  80%, 100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dpe-house__pin--poor::after { animation: none; opacity: 0; }
}

.dpe-house__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: start;
  min-width: 0;
  min-height: var(--dpe-house-stage-h, auto);
}

.dpe-house__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dpe-house__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-soft);
}

.dpe-house__legend-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--dpe-unknown);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.dpe-house__legend-item--good .dpe-house__legend-dot { background: var(--dpe-good); }
.dpe-house__legend-item--average .dpe-house__legend-dot { background: var(--dpe-average); color: #4a3500; }
.dpe-house__legend-item--poor .dpe-house__legend-dot { background: var(--dpe-poor); }

.dpe-house__legend-item--unknown .dpe-house__legend-dot {
  background: var(--surface-muted);
  color: var(--ink-muted);
  border: 1px dashed var(--border-strong);
}

.dpe-house__detail {
  position: relative;
  min-height: 0;
}

.dpe-house__detail:has([data-dpe-detail-placeholder]:not([hidden])) {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.dpe-house__detail-empty {
  display: grid;
  flex: 1;
  gap: var(--space-2);
  align-content: center;
  justify-items: center;
  box-sizing: border-box;
  min-height: 0;
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  text-align: center;
}

/* L'attribut hidden doit l'emporter sur le display: grid ci-dessus. */
.dpe-house__detail-empty[hidden] {
  display: none;
}

.dpe-house__detail-empty-icon {
  font-size: 22px;
}

.dpe-house__detail-empty-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 34ch;
}

.dpe-house__detail-card {
  --tip: var(--dpe-unknown);
  padding: var(--space-4);
  border: 2px solid var(--tip);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.dpe-house__detail-card--good { --tip: var(--dpe-good); }
.dpe-house__detail-card--average { --tip: var(--dpe-average); }
.dpe-house__detail-card--poor { --tip: var(--dpe-poor); }
.dpe-house__detail-card--unknown { --tip: var(--border-strong); }

.dpe-house__detail-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dpe-house__detail-badge {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--tip);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}

.dpe-house__detail-card--average .dpe-house__detail-badge { color: #4a3500; }

.dpe-house__detail-card--unknown .dpe-house__detail-badge {
  background: var(--surface-muted);
  color: var(--ink-muted);
  border: 1px dashed var(--border-strong);
}

.dpe-house__detail-title {
  margin: var(--space-2) 0 var(--space-1);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.dpe-house__detail-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.dpe-house__advice {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.dpe-house__advice-label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tip);
}

.dpe-house__detail-card--unknown .dpe-house__advice-label,
.dpe-house__detail-card--average .dpe-house__advice-label {
  color: var(--ink-muted);
}

.dpe-house__advice-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

@media (max-width: 720px) {
  .dpe-house__budget {
    width: 100%;
    justify-items: start;
    text-align: left;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
  }

  .dpe-house__budget-caption-row {
    justify-content: flex-start;
  }

  .dpe-house__budget-help-panel {
    right: auto;
    left: 0;
  }

  .dpe-house__verdict {
    font-size: 15px;
  }

  .dpe-house__body {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .dpe-house__panel {
    width: 100%;
    min-height: auto;
  }

  .dpe-house__detail:has([data-dpe-detail-placeholder]:not([hidden])) {
    flex: none;
  }

  .dpe-house__detail-empty {
    flex: none;
    padding: var(--space-5) var(--space-4);
  }
}

.listing-address-ai-dialog {
  max-width: 520px;
  text-align: left;
}

.listing-address-ai-dialog .modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.listing-address-ai-dialog .modal__title {
  padding-right: 2.25rem;
}

.listing-address-ai-dialog__lead {
  margin: 0 0 var(--space-4);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}

.listing-address-ai-dialog__block {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.listing-address-ai-dialog__block-title {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.listing-address-ai-dialog__text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.listing-address-ai-dialog__actions {
  justify-content: flex-end;
}

.listing-address-ai-dialog__running {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4) var(--space-2) var(--space-2);
}

.listing-address-ai-dialog__spinner {
  margin-bottom: var(--space-4);
}

.listing-address-ai-dialog__running-title {
  margin: 0 0 var(--space-2);
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
}

.listing-address-ai-dialog__running-status {
  margin: 0;
  max-width: 22rem;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
  min-height: 1.5em;
  transition: opacity 0.25s ease;
}

.listing-address-ai-dialog__running-status.is-fading {
  opacity: 0.35;
}

.listing-address-ai-dialog__results-lead {
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.listing-address-ai-dialog__empty {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  text-align: center;
}

.listing-address-ai-dialog__empty-title {
  margin: 0 0 var(--space-1);
  font-weight: 650;
  color: var(--ink-soft);
}

.listing-address-ai-dialog__empty-text {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.listing-address-ai-results {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(48vh, 360px);
  overflow: auto;
}

.listing-address-ai-result {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 6px var(--space-2) 6px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.listing-address-ai-result:hover {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}

.listing-address-ai-result:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 1px;
}

.listing-address-ai-result.is-selected {
  border-color: var(--green-800);
  background: var(--green-100);
  box-shadow: inset 0 0 0 1px var(--green-600);
}

.listing-address-ai-result.is-selected:hover {
  background: var(--green-100);
}

.listing-address-ai-result__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 650;
}

.listing-address-ai-result--best.is-selected .listing-address-ai-result__rank {
  background: var(--green-900);
  color: var(--ink-inverse);
}

.listing-address-ai-result__body {
  min-width: 0;
}

.listing-address-ai-result__line {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}

.listing-address-ai-result__street {
  font-weight: 650;
}

.listing-address-ai-result__locality {
  color: var(--ink-muted);
  font-weight: 500;
}

.listing-address-ai-result__locality::before {
  content: " · ";
}

.listing-address-ai-result__badge {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 7px;
  font-size: 10px;
}

.listing-address-ai-result__confidence {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--green-800);
}

.listing-address-ai-result--best.is-selected .listing-address-ai-result__confidence {
  color: var(--green-900);
}

.listing-address-ai-result__maps {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
}

.listing-location__meta .listing-location__cta--inline {
  margin-top: 0;
}

.listing-location__dpe-status {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.listing-location__card .listing-location__dpe-status {
  margin-bottom: 0;
  border-top-color: rgba(0, 0, 0, 0.06);
}

.listing-location__dpe-status--linked {
  color: var(--green-800);
  font-weight: 600;
}

.listing-location__dpe-numero {
  margin-left: 4px;
  color: var(--ink-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Modale de saisie d'adresse */
.listing-address-dialog {
  max-width: 480px;
  text-align: left;
  position: relative;
}

.listing-address-dialog .modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.listing-address-dialog .modal__title {
  padding-right: 2.25rem;
}

.listing-address-dialog__lead {
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

.listing-address-form {
  display: grid;
  gap: var(--space-4);
  position: relative;
}

.listing-address-form__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-3);
}

@media (max-width: 420px) {
  .listing-address-form__row {
    grid-template-columns: 1fr;
  }
}

.listing-address-form__actions {
  margin-top: var(--space-2);
}

.field__optional {
  font-weight: 500;
  color: var(--ink-muted);
}

.settings-profile-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 520px) {
  .settings-profile-form__row {
    grid-template-columns: 1fr;
  }
}

.input--phone {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  max-width: 16rem;
}

.listing-address-dialog__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.listing-address-dialog__overlay.htmx-request {
  opacity: 1;
  pointer-events: auto;
}

.listing-address-form__clear {
  margin: 0;
  display: inline;
}

.listing-address-form.htmx-request .btn--green .btn__spinner {
  display: inline-block;
}

/* Étape « Recherche du DPE associé à cette adresse » */
.listing-address-step:not([hidden]) {
  animation: listing-address-step-in 0.18s ease-out;
}

@keyframes listing-address-step-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .listing-address-step:not([hidden]) {
    animation: none;
  }
}

.listing-address-dpe__lead {
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

.listing-address-dpe__list {
  list-style: none;
  margin: 0 -4px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: min(50vh, 380px);
  overflow: auto;
}

.listing-address-dpe__option {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.listing-address-dpe__option:hover {
  border-color: var(--border-strong);
}

.listing-address-dpe__option:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

.listing-address-dpe__option.is-selected {
  border-color: var(--green-800);
  background: color-mix(in srgb, var(--green-100) 45%, var(--surface));
  box-shadow: 0 0 0 1px var(--green-800), 0 6px 18px -12px rgba(20, 60, 30, 0.45);
}

.listing-address-dpe__list.is-single .listing-address-dpe__option.is-selected {
  background: var(--surface);
}

.listing-address-dpe__list.is-single .listing-address-dpe__option {
  cursor: default;
  border-color: var(--border);
  box-shadow: 0 6px 18px -14px rgba(20, 40, 30, 0.35);
}

/* Étiquette DPE en vignette (lettre + libellé centrés dans le carré). */
.listing-address-dpe__grade.dpe-label,
.listing-address-dpe__grade.listing-address-dpe__grade--none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 0;
  padding: 0;
  border-radius: var(--radius-sm);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.listing-address-dpe__grade--none {
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: 15px;
}

.listing-address-dpe__grade-caption {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  opacity: 0.85;
}

.listing-address-dpe__body {
  min-width: 0;
}

.listing-address-dpe__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.listing-address-dpe__street {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
}

/* Mot corrigé par rapport à la saisie. */
.listing-address-dpe__street mark {
  background: none;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #e0a100;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.listing-address-dpe__locality {
  margin: 1px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.listing-address-dpe__correction {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.listing-address-dpe__correction s {
  color: var(--ink-soft);
  text-decoration-color: rgba(0, 0, 0, 0.35);
}

.listing-address-dpe__match {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-900, var(--green-800));
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.listing-address-dpe__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.listing-address-dpe__chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 550;
}

.listing-address-dpe__chip--warn {
  background: #fdf3dc;
  color: #8a5a00;
}

.listing-address-dpe__meta {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.listing-address-dpe__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5, 20px);
}

.listing-address-dpe__back {
  margin-right: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.listing-address-dpe__back:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.listing-address-dpe__buttons {
  display: flex;
  gap: var(--space-2);
}

@media (max-width: 460px) {
  .listing-address-dpe__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .listing-address-dpe__buttons {
    flex-direction: column-reverse;
  }

  .listing-address-dpe__back {
    margin: var(--space-1) auto 0;
  }
}

/* Conteneur ré-échangé par htmx : ancre le voile de chargement. */
.address-book {
  position: relative;
}

/* Voile affiché pendant une requête (ajout, édition, suppression) : bloque les
   interactions et centre le spinner. Piloté par la classe `htmx-request` que
   htmx pose sur l'élément visé par `hx-indicator`. */
.address-book__overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(247, 246, 242, 0.72);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.address-book__overlay.htmx-request,
.address-book__overlay.is-loading {
  opacity: 1;
  pointer-events: auto;
}

/* Spinner générique, réutilisable. */
.spinner {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--border-strong);
  border-top-color: var(--green-600);
  animation: spinner-rotate 0.7s linear infinite;
}

.spinner--sm {
  width: 18px;
  height: 18px;
  border-width: 2px;
  flex: none;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Mini-spinner dans le bouton « Ajouter », visible pendant la requête. */
.btn__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(246, 248, 243, 0.4);
  border-top-color: var(--ink-inverse);
  animation: spinner-rotate 0.7s linear infinite;
}

.address-book__add-form.htmx-request .btn__spinner {
  display: inline-block;
}

/* Retour inline (succès / erreur) après une action, avec effacement en douceur. */
.address-book__flash {
  animation: address-flash-in 0.25s ease;
  transition: opacity 0.4s ease, transform 0.4s ease, margin 0.4s ease,
    max-height 0.4s ease, padding 0.4s ease;
  overflow: hidden;
}

.address-book__flash--out {
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

@keyframes address-flash-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .btn__spinner {
    animation-duration: 1.4s;
  }

  .address-book__overlay,
  .address-book__flash {
    transition: none;
    animation: none;
  }
}

.project-list__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.inline-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.inline-form .input {
  flex: 1 1 200px;
  width: auto;
}

/* Champ borné : sans cela le bouton « Renommer » flotte au bout de la ligne. */
.project-list .inline-form .input {
  max-width: 320px;
}

.btn--danger-ghost {
  color: var(--danger);
}

/* ------------------------------ Pagination ------------------------------ */

.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.pagination__summary {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pagination__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Numéros de page : pastilles carrées à coins arrondis, alignées sur l'allure
   des pills du site. */
.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pagination__page:hover {
  text-decoration: none;
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--ink);
}

.pagination__page.is-active {
  background: var(--panel);
  border-color: var(--panel);
  color: var(--ink-inverse);
}

.pagination__page.is-active:hover {
  background: var(--panel);
  color: var(--ink-inverse);
}

.pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 38px;
  color: var(--ink-muted);
  font-weight: 600;
  user-select: none;
}

/* Boutons Précédent / Suivant : pilules claires avec chevron. */
.pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 38px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pagination__nav:hover {
  text-decoration: none;
  background: var(--surface-muted);
  color: var(--ink);
}

.pagination__nav svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.pagination__nav.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}

@media (max-width: 560px) {
  /* Sur mobile, on garde les flèches mais on masque le libellé pour gagner de
     la place ; l'aria-label reste présent pour les lecteurs d'écran. */
  .pagination__nav span {
    display: none;
  }

  .pagination__nav {
    padding: 0 var(--space-2);
  }
}

/* ------------------ Retour en haut avec progression --------------------- */

.scroll-progress {
  position: fixed;
  z-index: 25;
  right: var(--space-6);
  bottom: var(--space-6);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: var(--shadow-raised);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition:
    opacity 0.2s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.15s ease,
    visibility 0s linear 0.3s;
}

.scroll-progress.is-visible,
.scroll-progress--inline {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.2s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.15s ease,
    visibility 0s;
}

.scroll-progress--inline {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: auto;
}

.scroll-progress:hover,
.scroll-progress:focus-visible {
  color: var(--green-800);
}

.scroll-progress__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.scroll-progress__track,
.scroll-progress__fill {
  fill: none;
  stroke-width: 3;
}

.scroll-progress__track {
  stroke: var(--border);
}

.scroll-progress__fill {
  stroke: var(--green-600);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.scroll-progress__icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.scroll-progress:hover .scroll-progress__icon,
.scroll-progress:focus-visible .scroll-progress__icon {
  animation: scroll-progress-arrow 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes scroll-progress-arrow {
  0% { transform: translateY(0); }
  45% { transform: translateY(-5px); }
  100% { transform: translateY(-2px); }
}

@media (max-width: 640px) {
  .scroll-progress {
    right: var(--space-4);
    bottom: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .scroll-progress.is-visible {
    transform: none;
    transition: opacity 0.15s ease, visibility 0s;
  }

  .scroll-progress:hover .scroll-progress__icon,
  .scroll-progress:focus-visible .scroll-progress__icon {
    animation: none;
    transform: translateY(-2px);
  }
}

/* ------------------ Bandeau défilant horizontal ------------------------- */

/* Fondu et flèche n'apparaissent que du côté où il reste du contenu
   (classes posées par app.js, [data-scroll-rail]). */
.scroll-rail {
  --scroll-rail-nav-size: 40px;
  --scroll-rail-fade: var(--space-7);
  --scroll-rail-fade-color: var(--bg);
  position: relative;
  min-width: 0;
}

.scroll-rail__viewport {
  display: flex;
  gap: var(--space-2);
  padding: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-padding-inline: var(--scroll-rail-fade);
}

.scroll-rail__viewport::-webkit-scrollbar {
  display: none;
}

.scroll-rail__viewport > * {
  flex-shrink: 0;
}

.scroll-rail::before,
.scroll-rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--scroll-rail-fade);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.scroll-rail::before {
  left: 0;
  background: linear-gradient(to right, var(--scroll-rail-fade-color) 30%, transparent);
}

.scroll-rail::after {
  right: 0;
  background: linear-gradient(to left, var(--scroll-rail-fade-color) 30%, transparent);
}

.scroll-rail.is-overflow-start::before,
.scroll-rail.is-overflow-end::after {
  opacity: 1;
}

.scroll-rail__nav {
  --scroll-rail-shift: 0px;
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--scroll-rail-nav-size);
  height: var(--scroll-rail-nav-size);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--green-900);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(var(--scroll-rail-shift), -50%);
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.15s ease,
    border-color 0.15s ease,
    visibility 0s linear 0.25s;
}

.scroll-rail__nav--prev {
  --scroll-rail-shift: calc(var(--space-1) * -1);
  left: 0;
}

.scroll-rail__nav--next {
  --scroll-rail-shift: var(--space-1);
  right: 0;
}

.scroll-rail.is-overflow-start .scroll-rail__nav--prev,
.scroll-rail.is-overflow-end .scroll-rail__nav--next {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%);
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.15s ease,
    border-color 0.15s ease,
    visibility 0s;
}

.scroll-rail__nav:hover {
  background: var(--green-100);
  border-color: var(--green-600);
}

.scroll-rail__nav:active {
  transform: translate(0, -50%) scale(0.94);
}

.scroll-rail__nav .wi {
  width: 22px;
  height: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-rail__nav,
  .scroll-rail.is-overflow-start .scroll-rail__nav--prev,
  .scroll-rail.is-overflow-end .scroll-rail__nav--next {
    transform: translate(0, -50%);
    transition: opacity 0.15s ease, visibility 0s;
  }
}

/* ------------------------------ Responsive ------------------------------ */

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

@media (max-width: 720px) {
  .topbar {
    --topbar-mobile-height: 3.75rem;
  }

  .topbar__inner {
    position: relative;
    z-index: 2;
    flex-wrap: nowrap;
    gap: var(--space-3);
    min-height: var(--topbar-mobile-height);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
  }

  .topbar__menu-btn {
    display: inline-flex;
    position: relative;
    z-index: 2;
  }

  .brand {
    position: relative;
    z-index: 2;
  }

  .topbar__account--header {
    display: none;
  }

  .topnav {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: calc(var(--topbar-mobile-height) + env(safe-area-inset-top, 0px));
    left: 0;
    bottom: 0;
    width: min(19.5rem, 88vw);
    max-width: 100%;
    padding: var(--space-4)
      var(--space-4)
      calc(env(safe-area-inset-bottom, 0px) + var(--space-4));
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-raised);
    z-index: 1;
    overflow: auto;
    visibility: hidden;
    transform: translateX(-104%);
    transition:
      transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0.28s;
    pointer-events: none;
  }

  .topbar--nav-open {
    z-index: 30;
  }

  .topbar--nav-open .topbar__scrim {
    z-index: 0;
  }

  .topbar--nav-open .topnav {
    visibility: visible;
    transform: translateX(0);
    transition:
      transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0s;
    pointer-events: auto;
  }

  .topnav__drawer-head {
    display: block;
    margin-bottom: var(--space-5);
    padding: var(--space-2) var(--space-1) var(--space-4);
    border-bottom: 1px solid var(--border);
  }

  .topnav__drawer-eyebrow {
    margin: 0 0 var(--space-1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .topnav__drawer-email {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .topnav__drawer-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    flex: 1 1 auto;
  }

  .topnav__drawer-foot {
    display: block;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
  }

  .topnav__logout {
    justify-content: center;
  }

  .topnav__link {
    width: 100%;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--ink);
  }

  .topnav__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--green-100);
    color: var(--green-600);
  }

  .topnav__link-icon svg {
    width: 20px;
    height: 20px;
  }

  .topnav__link-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .topnav__link-hint {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-muted);
    line-height: 1.3;
  }

  .topnav__link-chevron {
    display: block;
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    color: var(--ink-muted);
    opacity: 0.55;
  }

  .topnav__link.is-active {
    background: var(--surface-muted);
    border-color: var(--border);
    color: var(--ink);
  }

  .topnav__link.is-active .topnav__link-hint {
    color: var(--ink-soft);
  }

  .topnav__link:hover {
    background: var(--surface-muted);
    border-color: var(--border);
  }

  /* « Outils » : intitulé de groupe, liens toujours visibles dans le tiroir. */
  .topnav__group {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-3);
  }

  .topnav__trigger,
  .topnav__trigger:hover,
  .topnav__trigger.is-active {
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-1);
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
    cursor: default;
    pointer-events: none;
  }

  .topnav__trigger-chevron,
  .topnav__menu-eyebrow,
  .topnav__menu-arrow {
    display: none;
  }

  .topnav__menu,
  .topnav__group.is-open .topnav__menu {
    position: static;
    min-width: 0;
    padding: 0;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .topnav__menu-panel {
    gap: var(--space-1);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .topnav__menu-item {
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .topnav__menu-icon {
    width: 36px;
    height: 36px;
    background: var(--green-100);
    color: var(--green-600);
  }

  .topnav__menu-item:hover .topnav__menu-icon,
  .topnav__menu-item:focus-visible .topnav__menu-icon,
  .topnav__menu-item.is-active .topnav__menu-icon {
    background: var(--green-100);
    color: var(--green-600);
  }

  .topnav__menu-label {
    font-size: 15px;
    font-weight: 600;
  }

  .topbar__account {
    margin-left: auto;
    flex-shrink: 0;
  }

  .topbar__email {
    display: none;
  }

  body.is-mobile-nav-open {
    overflow: hidden;
  }

  @media (prefers-reduced-motion: reduce) {
    .topnav,
    .topbar__scrim {
      transition: none;
    }
  }

  .page {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .detail-head {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: var(--space-3);
  }

  .detail-head__intro {
    grid-column: 1;
    grid-row: auto;
    order: 1;
    width: 100%;
    min-width: 0;
  }

  .detail-head__toolbar {
    grid-column: 1;
    grid-row: auto;
    order: 2;
  }

  .detail-head__reject {
    grid-column: 1;
    grid-row: auto;
    order: 3;
    justify-content: flex-start;
    align-self: stretch;
  }

  .detail-head__price {
    grid-column: 1;
    grid-row: auto;
    order: 4;
    text-align: left;
  }

  .detail-head__price .detail-price__unit {
    text-align: left;
  }

  .detail-head .btn-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    align-self: stretch;
  }

  .detail-head .btn-row > .project-select {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
  }

  .detail-head .btn-row > form {
    display: flex;
    align-self: stretch;
    width: auto;
  }

  .detail-head .btn-row > .detail-head__icon-actions {
    display: flex;
    flex-direction: row;
    align-self: flex-start;
    gap: var(--space-2);
  }

  .detail-head .detail-head__icon-actions form {
    align-self: auto;
    width: auto;
  }

  .detail-head .detail-head__icon-actions .btn {
    width: auto;
  }

  .detail-head .btn-row > .btn {
    align-self: stretch;
    width: auto;
    max-width: none;
  }

  .detail-head .btn-row .project-select__trigger,
  .detail-head .btn-row .btn {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  .panel--pipeline {
    padding: var(--space-4);
  }

  .status-pipe__head {
    margin-bottom: var(--space-3);
    align-items: flex-start;
  }

  .status-pipe__title {
    font-size: 1.05rem;
  }

  .status-pipe__label-full {
    display: none;
  }

  .status-pipe__label-short {
    display: inline;
  }

  .status-pipe__reject-label-full {
    display: none;
  }

  .status-pipe__reject-label-short {
    display: inline;
  }

  .status-pipe__marker {
    width: 40px;
    height: 40px;
  }

  .status-pipe__marker svg {
    width: 16px;
    height: 16px;
  }

  .status-pipe__step:not(:last-child)::after {
    top: 20px;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
  }

}

@media (max-width: 480px) {
  .status-pipe__label {
    display: none;
  }

  .status-pipe__track {
    padding: var(--space-3) var(--space-1);
  }

  .status-pipe__btn {
    padding: 4px 0;
    min-height: 48px;
    justify-content: center;
  }

  .status-pipe__marker {
    width: 38px;
    height: 38px;
  }

  .status-pipe__step:not(:last-child)::after {
    top: 19px;
    transform: none;
  }
}

/* ------------------------------------------------------------------ *
 * Espace d'administration : import DPE (progression) et tableau de
 * recherche. Réutilise la mise en page des Paramètres (settings-layout).
 * ------------------------------------------------------------------ */

.dpe-import-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dpe-import-status__active {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dpe-import-status__active-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dpe-import-status__active-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.dpe-import-status__active-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dpe-import-status__hint--inline {
  margin: 0;
}

.dpe-import-status__current {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.dpe-import-status__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.dpe-import-status__range {
  font-size: 0.85rem;
  color: var(--text-muted, #6b6553);
}

.dpe-import-status__meta {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted, #6b6553);
}

.dpe-import-status__error {
  margin: 0;
  color: #b42318;
  font-size: 0.9rem;
}

.dpe-import-status__error-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dpe-import-status__error-row .dpe-import-status__error {
  flex: 1 1 12rem;
  min-width: 0;
}

.dpe-import-status__retry-form {
  margin: 0;
  flex-shrink: 0;
}

.dpe-import-status__hint {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.dpe-import-status__notice {
  margin: 0;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.88rem;
  line-height: 1.55;
}

.dpe-import-status__notice-text {
  margin: 0;
}

.dpe-import-status__notice--success {
  background: var(--green-100);
  color: var(--green-800);
}

.dpe-import-status__notice--warn {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid rgba(224, 84, 31, 0.22);
}

.dpe-import-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.dpe-import-status__cancel {
  color: var(--warn);
  border-color: rgba(224, 84, 31, 0.35);
}

.dpe-import-status__cancel:hover {
  background: var(--warn-soft);
  border-color: var(--warn);
  color: var(--warn);
}

.dpe-import-status__retry {
  min-width: 9rem;
}

.dpe-import-status__current.is-stale .dpe-import-status__pct {
  color: var(--warn);
}

.dpe-progress {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.dpe-progress__bar {
  height: 100%;
  background: #319834;
  transition: width 0.4s ease;
}

/* ------------------------------ Recherche ------------------------------ */

.dpe-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  transition: opacity 0.2s ease;
}

.dpe-search-form.htmx-request {
  opacity: 0.88;
}

.dpe-search-form.htmx-request .dpe-search-filters {
  pointer-events: none;
}

.dpe-search-form__progress {
  display: flex;
  align-items: center;
  min-height: 1.35rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.dpe-search-form__progress-busy {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--green-700);
}

.dpe-search-form.htmx-request .dpe-search-form__progress-idle {
  display: none;
}

.dpe-search-form.htmx-request .dpe-search-form__progress-busy {
  display: inline-flex;
}

.dpe-results-host {
  position: relative;
  min-height: 10rem;
}

.dpe-results-host:has(#dpe-search-indicator.htmx-request) #dpe-results {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.dpe-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.dpe-search-field__icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
  pointer-events: none;
}

.dpe-search-field__input {
  width: 100%;
  padding: 11px 16px 11px 42px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dpe-search-field__input::placeholder {
  color: var(--ink-muted);
}

.dpe-search-field__input:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(46, 139, 107, 0.18);
}

.dpe-search-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2);
}

.dpe-search-filters > .input {
  min-width: 0;
}

.dpe-search-filters > .project-select {
  min-width: 0;
}

.dpe-search-filters > .project-select .project-select__trigger {
  width: 100%;
  max-width: none;
  justify-content: space-between;
}

.dpe-search-filters .project-select__option {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dpe-range-picker {
  position: relative;
  min-width: 0;
}

.dpe-range-picker .project-select__trigger {
  width: 100%;
  max-width: none;
  justify-content: space-between;
}

.dpe-range-picker__popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 45;
  width: min(100vw - 32px, 300px);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card, 0 12px 32px rgba(0, 0, 0, 0.12));
}

.dpe-range-picker__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-bottom: var(--space-3);
}

.dpe-range-picker__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.dpe-range-picker__close {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

.dpe-range-picker__close:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.dpe-range-picker__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 139, 107, 0.18);
}

.dpe-range-picker__range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.dpe-range-picker__field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.dpe-range-picker__input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-right: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.dpe-range-picker__input-wrap:focus-within {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(46, 139, 107, 0.18);
}

.dpe-range-picker__input-wrap .input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  padding-right: 0;
}

.dpe-range-picker__input-wrap .input:focus {
  outline: none;
  box-shadow: none;
}

.dpe-range-picker__unit {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.dpe-postal-picker__popover {
  width: min(100vw - 32px, 280px);
}

.dpe-adresse-picker__popover {
  width: min(100vw - 32px, 300px);
}

.dpe-adresse-picker__hint {
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-muted);
}

.dpe-type-picker__popover {
  width: min(100vw - 32px, 260px);
}

.dpe-type-picker__options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dpe-type-picker__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.dpe-type-picker__option:hover {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}

.dpe-type-picker__option.is-active {
  border-color: var(--green-600);
  background: rgba(46, 139, 107, 0.08);
  box-shadow: 0 0 0 2px rgba(46, 139, 107, 0.16);
  font-weight: 600;
}

.dpe-postal-picker__field {
  display: block;
}

.dpe-postal-picker__field .input {
  width: 100%;
}

.dpe-etiquette-picker__popover {
  width: min(100vw - 32px, 320px);
}

.dpe-etiquette-picker__group + .dpe-etiquette-picker__group {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.dpe-etiquette-picker__group-label {
  margin: 0 0 var(--space-2);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dpe-etiquette-picker__letters {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.dpe-etiquette-picker__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.dpe-etiquette-picker__option--all {
  min-width: 0;
  padding: 0 7px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-soft);
  background: var(--surface-muted);
  border-color: var(--border);
}

.dpe-etiquette-picker__option--all:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}

.dpe-etiquette-picker__option.dpe-label {
  min-width: 26px;
  padding: 0;
  font-size: 0.7rem;
  opacity: 0.55;
}

.dpe-etiquette-picker__option.dpe-label:hover {
  opacity: 0.85;
}

.dpe-etiquette-picker__option.is-active {
  opacity: 1;
  border-color: var(--green-600);
  box-shadow: 0 0 0 2px rgba(46, 139, 107, 0.22);
}

.dpe-etiquette-picker__option--all.is-active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--green-600);
}

.dpe-search-filters__date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.dpe-search-filters__date:focus-within {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(46, 139, 107, 0.18);
}

.dpe-search-filters__date-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.dpe-search-filters__date .input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.dpe-search-filters__date .input:focus {
  outline: none;
  box-shadow: none;
}

.dpe-results__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.dpe-results__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface-muted);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  margin: 0;
}

.dpe-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.dpe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  white-space: nowrap;
}

.dpe-table th,
.dpe-table td {
  text-align: left;
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--border);
}

.dpe-table thead th {
  background: var(--surface-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: inset 0 -1px 0 var(--border);
}

.dpe-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-muted) 45%, transparent);
}

.dpe-table tbody tr:last-child td {
  border-bottom: none;
}

.dpe-table__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}

.dpe-table__muted {
  color: var(--text-muted, #6b6553);
  margin-left: 0.4em;
}

.dpe-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  font-weight: 700;
  color: #fff;
}

.dpe-label--a { background: #319834; }
.dpe-label--b { background: #5faa32; }
.dpe-label--c { background: #a7c62c; color: #1c1c1c; }
.dpe-label--d { background: #f2d307; color: #1c1c1c; }
.dpe-label--e { background: #eca40c; color: #1c1c1c; }
.dpe-label--f { background: #e2691b; }
.dpe-label--g { background: #d63f28; }

.dpe-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.dpe-pagination__page {
  font-size: 0.85rem;
  color: var(--ink-muted);
  min-width: 7rem;
  text-align: center;
}

.pagination__nav--icon {
  justify-content: center;
  min-width: 38px;
  padding: 0;
}

.dpe-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.dpe-empty__icon {
  width: 40px;
  height: 40px;
  color: var(--ink-muted);
  opacity: 0.6;
}

.dpe-empty__title {
  font-weight: 600;
  color: var(--ink-soft);
}

.dpe-empty__hint {
  font-size: 0.85rem;
  color: var(--ink-muted);
  max-width: 28rem;
}

.dpe-table__row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.dpe-table__row:hover td,
.dpe-table__row:focus-visible td {
  background: var(--green-100);
}

.dpe-table__row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--green-600, #2e8b6b);
}

/* --------------------------- Admin utilisateurs --------------------------- */

.admin-users-create {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.admin-users-create__title {
  margin: 0 0 var(--space-3);
  font-size: 0.95rem;
  font-weight: 600;
}

.admin-users-create__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 36rem;
}

.admin-users-create__passwords {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .admin-users-create__passwords {
    grid-template-columns: 1fr;
  }
}

.admin-users-search {
  margin-bottom: var(--space-4);
}

.admin-users-search__field {
  max-width: 28rem;
}

.admin-users-search__wrap {
  position: relative;
}

.admin-users-search__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--ink-muted);
  pointer-events: none;
}

.admin-users-search__input {
  padding-left: calc(var(--space-3) + 1.35rem);
}

.admin-users-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-users-notice {
  margin: 0;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.88rem;
  line-height: 1.55;
}

.admin-users-notice--success {
  background: var(--green-100);
  color: var(--green-800);
}

.admin-users-notice--error {
  background: #fef3f2;
  color: #b42318;
  border: 1px solid rgba(180, 35, 24, 0.15);
}

.admin-users-empty {
  margin: var(--space-4) 0 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.admin-users-table__email {
  font-weight: 500;
}

.admin-users-table__badge {
  margin-left: var(--space-2);
  vertical-align: middle;
}

.admin-users-table__actions {
  text-align: right;
  white-space: nowrap;
}

.admin-users-table__actions-head {
  width: 6rem;
}

.admin-users-table__manage {
  font-size: 0.82rem;
}

.modal--admin-user .modal__dialog--wide {
  max-width: min(520px, 100%);
  max-height: min(88vh, 720px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-user-dialog__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
}

.admin-user-dialog__content {
  overflow: auto;
  flex: 1;
  padding: var(--space-5) var(--space-5) var(--space-6);
}

.admin-user-dialog__loading {
  margin: 0;
  color: var(--ink-muted);
}

.admin-user-detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-right: var(--space-6);
}

.admin-user-detail__title {
  margin: 0.15rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  word-break: break-word;
}

.admin-user-detail__meta {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.admin-user-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.admin-user-detail__section {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.admin-user-detail__section--danger {
  border-top-color: rgba(180, 35, 24, 0.2);
}

.admin-user-detail__section-title {
  margin: 0 0 var(--space-2);
  font-size: 0.92rem;
  font-weight: 600;
}

.admin-user-detail__hint {
  margin-bottom: var(--space-3);
}

.admin-user-detail__form {
  max-width: 100%;
}

.admin-user-detail__sessions {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.admin-user-detail__sessions li + li {
  margin-top: var(--space-2);
}

.admin-user-detail__session-meta {
  color: var(--ink-muted);
}

/* Actions e-mail de la fiche (renvoyer, confirmer, lien de réinitialisation). */
.admin-user-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.admin-user-detail__emails {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.admin-user-detail__emails li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.admin-user-detail__protected {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

/* --------------------------- Modale détail DPE --------------------------- */

.modal--dpe-detail .modal__dialog--wide {
  max-width: min(920px, 100%);
  max-height: min(88vh, 900px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dpe-detail-dialog__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
}

.dpe-detail-dialog__content {
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.dpe-detail-dialog__loading {
  padding: var(--space-6);
  color: var(--text-muted, #6b6553);
  text-align: center;
}

.dpe-detail {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.dpe-detail__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  padding-right: calc(var(--space-5) + 2.75rem);
  background: linear-gradient(
    135deg,
    var(--surface-muted, #f6f4ed) 0%,
    var(--surface, #fff) 55%
  );
  border-bottom: 1px solid var(--border);
}

.dpe-detail__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b6553);
  margin-bottom: var(--space-1);
}

.dpe-detail__title {
  font-size: 1.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-bottom: var(--space-1);
}

.dpe-detail__subtitle {
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 36rem;
  line-height: 1.45;
}

.dpe-detail__meta {
  font-size: 0.85rem;
  color: var(--text-muted, #6b6553);
  margin-top: var(--space-2);
}

.dpe-detail__badges {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

.dpe-detail__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.dpe-detail__badge-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b6553);
}

.dpe-label--lg {
  min-width: 2.4em;
  padding: 0.25em 0.55em;
  font-size: 1.25rem;
  border-radius: var(--radius-md);
}

.dpe-detail__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.dpe-detail__section-title {
  font-size: 1rem;
  margin-bottom: var(--space-2);
  color: var(--green-800, #0b3d2c);
}

.dpe-detail__section-hint {
  font-size: 0.8rem;
  color: var(--text-muted, #6b6553);
  margin-bottom: var(--space-2);
}

.dpe-detail__grid {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

@media (min-width: 640px) {
  .dpe-detail__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: var(--space-4);
  }
}

.dpe-detail__row {
  display: contents;
}

.dpe-detail__term {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.dpe-detail__term-help {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--text-muted, #6b6553);
  margin-top: 0.15rem;
  line-height: 1.35;
}

.dpe-detail__value {
  font-size: 0.9rem;
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  word-break: break-word;
}

.dpe-detail__foot {
  padding: var(--space-3) var(--space-5);
  font-size: 0.8rem;
  color: var(--text-muted, #6b6553);
  border-top: 1px solid var(--border);
  background: var(--surface-muted, #f6f4ed);
}

/* ------------------------- Import DPE : calendrier ------------------------- */

.dpe-import-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dpe-import-form__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.dpe-import-form__toolbar .date-range-picker {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 480px;
}

.dpe-import-form__submit {
  flex-shrink: 0;
  margin-bottom: 1px;
}

.dpe-import-form__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.date-range-picker {
  position: relative;
  max-width: 420px;
}

.date-range-picker__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.date-range-picker__trigger:hover {
  border-color: #0b3d2c;
  background: var(--surface-muted);
}

.date-range-picker__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 61, 44, 0.2);
}

.date-range-picker__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.75;
}

.date-range-picker__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-range-picker__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.15s ease;
}

.date-range-picker__trigger[aria-expanded="true"] .date-range-picker__chevron {
  transform: rotate(180deg);
}

.date-range-picker__popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: min(100%, 320px);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.date-range-picker__hint {
  margin: var(--space-2) 0 0;
  font-size: 0.8rem;
  color: var(--text-muted, #6b6553);
  line-height: 1.4;
}

.dpe-import-plan {
  margin-top: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dpe-import-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.dpe-import-plan__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.dpe-import-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.dpe-import-plan__day {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}

.dpe-import-plan__day:last-child {
  border-bottom: none;
}

.dpe-import-plan__index {
  flex-shrink: 0;
  width: 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, #6b6553);
  text-align: right;
}

.calendar {
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.calendar__title {
  font-weight: 600;
  text-transform: capitalize;
}

.calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  color: inherit;
}

.calendar__nav:hover {
  background: var(--surface-muted);
  border-color: var(--border-strong);
}

.calendar__nav svg {
  width: 16px;
  height: 16px;
}

.calendar__weekdays,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* Sélection par glissement : pas de sélection de texte, pas de scroll tactile
   intempestif pendant qu'on fait glisser la souris/le doigt sur les jours. */
.calendar__grid {
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.calendar__weekdays {
  margin-bottom: 4px;
}

.calendar__weekdays span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #6b6553);
  padding: 2px 0;
}

.calendar__cell {
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.85rem;
  cursor: pointer;
  color: inherit;
  padding: 0;
}

.calendar__cell:hover:not(.is-disabled):not(.is-empty):not(.is-start):not(.is-end) {
  background: var(--green-100);
}

.calendar__cell.is-empty {
  cursor: default;
  pointer-events: none;
}

.calendar__cell.is-disabled {
  color: var(--border-strong);
  cursor: not-allowed;
}

.calendar__cell.is-today {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* Jour déjà importé : cercle vert autour du numéro (hors extrémités de plage). */
.calendar__cell.is-imported:not(.is-start):not(.is-end) {
  position: relative;
}

.calendar__cell.is-imported:not(.is-start):not(.is-end)::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid var(--green-700, #2d6a4f);
  border-radius: 50%;
  pointer-events: none;
}

/* Jour importé mais incomplet (données manquantes ou job en échec). */
.calendar__cell.is-imported-partial:not(.is-start):not(.is-end) {
  position: relative;
}

.calendar__cell.is-imported-partial:not(.is-start):not(.is-end)::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid var(--warn);
  border-radius: 50%;
  pointer-events: none;
}

.date-range-picker__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.calendar-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.calendar-legend__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  border: 2px solid transparent;
  box-sizing: border-box;
}

.calendar-legend__dot--complete {
  border-color: var(--green-700, #2d6a4f);
}

.calendar-legend__dot--partial {
  border-color: var(--warn);
}

.calendar__cell.is-in-range {
  background: var(--green-100);
  border-radius: 0;
  color: var(--green-900);
}

/* Prévisualisation (plage en cours de choix, avant le second clic). */
.calendar__cell.is-preview.is-in-range:not(.is-start):not(.is-end) {
  background: var(--green-100);
  opacity: 0.85;
}

.calendar__cell.is-start,
.calendar__cell.is-end {
  background: var(--green-900);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
  transition: background 0.12s ease;
}

.calendar__cell.is-start {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.calendar__cell.is-end {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

/* Un seul jour (début = fin) : les deux coins arrondis. */
.calendar__cell.is-start.is-end {
  border-radius: var(--radius-sm);
}

/* ---------------------- Progression : repère d'activité ---------------------- */

.dpe-import-status__pct {
  margin-left: auto;
  padding-left: var(--space-2);
  font-weight: 600;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Barber-pole animé sur la piste : montre que ça tourne même à 0 % ou pendant
   un long téléchargement où la barre n'avance pas. */
.dpe-progress.is-active {
  background-image: repeating-linear-gradient(
    45deg,
    var(--surface-sunken) 0 10px,
    #e3ddc9 10px 20px
  );
  background-size: 28px 28px;
  animation: dpe-track-move 0.8s linear infinite;
}

@keyframes dpe-track-move {
  from { background-position: 0 0; }
  to { background-position: 28px 0; }
}

.dpe-progress.is-active .dpe-progress__bar {
  min-width: 2px;
}

.dpe-progress.is-stale {
  background: var(--warn-soft);
  animation: none;
}

.dpe-progress.is-stale .dpe-progress__bar {
  background: var(--warn);
  opacity: 0.45;
}

/* ----------------------------- Historique ----------------------------- */

.dpe-history {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.dpe-history__title {
  font-size: 0.95rem;
  margin: 0 0 var(--space-2);
}

.dpe-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dpe-history__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.dpe-history__item:last-child {
  border-bottom: none;
}

.dpe-history__range {
  font-weight: 600;
}

.dpe-history__rows,
.dpe-history__when {
  color: var(--text-muted, #6b6553);
}

.dpe-history__when {
  margin-left: auto;
}

.dpe-history__error-row {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.dpe-history__retry {
  margin: 0;
  flex-shrink: 0;
}

.dpe-history__retry-btn {
  padding-inline: var(--space-3);
  font-size: 0.8rem;
  color: var(--green-800);
  border-color: rgba(46, 139, 107, 0.35);
}

.dpe-history__retry-btn:hover {
  background: var(--green-100);
  border-color: var(--green-600);
  color: var(--green-900);
}

.dpe-history__error {
  flex: 1 1 auto;
  min-width: 0;
  color: #b42318;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------- Détails d'un import (clic sur la ligne) ------------- */

.dpe-history__item {
  padding: 0;
}

.dpe-history__disclosure {
  width: 100%;
}

.dpe-history__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
  cursor: pointer;
  list-style: none;
}

.dpe-history__summary::-webkit-details-marker {
  display: none;
}

.dpe-history__chevron {
  margin-left: var(--space-2);
  color: var(--text-muted, #6b6553);
  transition: transform 0.15s ease;
}

.dpe-history__disclosure[open] .dpe-history__chevron {
  transform: rotate(90deg);
}

.dpe-history__details {
  padding: var(--space-2) 0 var(--space-3);
}

/* Disclosure « Détails & wget » sous un import actif. */
.dpe-job-disclosure,
.dpe-import-status__details {
  margin-top: var(--space-2);
}

.dpe-job-disclosure__summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--green-800, #276749);
  list-style: none;
}

.dpe-job-disclosure__summary::-webkit-details-marker {
  display: none;
}

.dpe-job-disclosure__summary::before {
  content: "› ";
}

.dpe-job-disclosure[open] .dpe-job-disclosure__summary::before {
  content: "⌄ ";
}

.dpe-job-disclosure__body {
  padding-top: var(--space-2);
}

/* Faits (lancé le, activité, lignes…). */
.dpe-job-details__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.dpe-job-details__fact dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b6553);
}

.dpe-job-details__fact dd {
  margin: 2px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.dpe-job-details__block {
  margin-bottom: var(--space-3);
}

.dpe-job-details__label {
  margin: 0 0 var(--space-1);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #6b6553);
}

.dpe-job-details__error {
  margin: 0;
  padding: var(--space-2);
  background: #fef3f2;
  border: 1px solid #fda29b;
  border-radius: var(--radius-sm, 6px);
  color: #b42318;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.dpe-job-details__hint {
  margin: var(--space-1) 0 0;
  font-size: 0.75rem;
  color: var(--text-muted, #6b6553);
}

/* Bloc commande + bouton copier. */
.dpe-cmd {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.dpe-cmd__code {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: var(--space-2);
  background: var(--ink, #1f2a1f);
  color: #e7f0e7;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.dpe-cmd__copy {
  flex-shrink: 0;
  align-self: flex-start;
}

.dpe-cmd__copy.is-copied {
  color: var(--green-800, #276749);
  border-color: var(--green-600, #2f855a);
}

/* --------------------- Ajout d'une annonce par URL ---------------------- */

/* Bouton d'appel proéminent, dans l'en-tête de liste et l'état vide. */
.btn--add-listing {
  background: var(--green-900);
  color: var(--ink-inverse);
  padding: 11px 22px 13px;
  font-size: 15px;
  box-shadow: var(--shadow-raised);
}

.btn--add-listing:hover {
  background: var(--green-800);
}

.btn--add-listing svg {
  width: 18px;
  height: 18px;
}

.empty__or {
  margin: var(--space-5) 0 var(--space-3);
  color: var(--ink-muted);
  font-size: 13px;
}

/* Modale : un peu plus large que la modale de confirmation, texte à gauche. */
.add-listing-dialog {
  max-width: 500px;
  text-align: left;
}

.add-listing-dialog .modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.add-listing-dialog .modal__title {
  padding-right: 2.25rem;
}

.add-listing-form {
  display: grid;
  gap: var(--space-4);
}

.add-listing__lead {
  color: var(--ink-soft);
  font-size: 14px;
}

.add-listing__projects {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.add-listing__project-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.add-listing__project {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.add-listing__project:hover {
  border-color: var(--panel);
}

.add-listing__project input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.add-listing__project.is-active {
  background: var(--panel);
  border-color: var(--panel);
  color: var(--ink-inverse);
}

.add-listing__project:focus-within {
  box-shadow: 0 0 0 2px var(--green-600);
  outline: none;
}

/* Message d'erreur expliqué dans la popup. */
.add-listing__error {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
}

/* États de chargement : mini-spinner dans le bouton actif. */
[data-add-listing-submit].is-loading .btn__spinner,
[data-add-listing-confirm].is-loading .btn__spinner,
[data-listing-address-ai-apply].is-loading .btn__spinner,
[data-listing-address-submit].is-loading .btn__spinner,
[data-listing-address-dpe-confirm].is-loading .btn__spinner {
  display: inline-block;
}

[data-add-listing-submit].is-loading .btn__label,
[data-add-listing-confirm].is-loading .btn__label,
[data-listing-address-ai-apply].is-loading .btn__label,
[data-listing-address-dpe-confirm].is-loading .btn__label {
  opacity: 0.75;
}

/* Carte d'aperçu du bien lu sur la page. */
.add-listing-preview {
  display: block;
}

.add-listing-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.add-listing-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-muted);
  display: grid;
  place-items: center;
}

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

.add-listing-card__placeholder {
  color: var(--ink-muted);
  font-size: 12px;
}

.add-listing-card__source {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
}

.add-listing-card__title {
  font-size: 16px;
  line-height: 1.3;
  margin: 2px 0 6px;
}

.add-listing-card__price {
  font-size: 18px;
  font-weight: 700;
  color: var(--green-900);
  margin: 0 0 4px;
}

.add-listing-card__meta,
.add-listing-card__city {
  color: var(--ink-soft);
  font-size: 13px;
  margin: 0;
}

.add-listing-card__note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-muted);
}

@media (max-width: 480px) {
  .add-listing-card {
    grid-template-columns: 1fr;
  }
}

/* ---------------- Admin : cache enrichissements ----------------------- */

.admin-cache-intro {
  margin-bottom: var(--space-4);
  max-width: 52rem;
}

.admin-cache-stats {
  margin: 0 0 var(--space-5);
  font-size: 14px;
  color: var(--ink-soft);
}

.admin-cache-filters {
  margin-bottom: var(--space-5);
}

.admin-cache-filters__row {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) minmax(14rem, 2fr);
  gap: var(--space-4);
  align-items: end;
}

.admin-cache-filters__row .field {
  align-content: end;
}

.admin-cache-filters__row .input {
  box-sizing: border-box;
  min-height: 2.125rem;
}

@media (max-width: 720px) {
  .admin-cache-filters__row {
    grid-template-columns: 1fr;
  }
}

.admin-cache-table-wrap {
  max-width: 100%;
}

.admin-cache-table {
  white-space: normal;
  table-layout: fixed;
}

.admin-cache-table--listing .admin-cache-table__col-annonce {
  width: 36%;
}

.admin-cache-table--listing .admin-cache-table__col-provider {
  width: 14%;
}

.admin-cache-table--listing .admin-cache-table__col-status {
  width: 9%;
}

.admin-cache-table--listing .admin-cache-table__col-date {
  width: 15%;
}

.admin-cache-table--listing .admin-cache-table__col-size {
  width: 9%;
}

.admin-cache-table th,
.admin-cache-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

.admin-cache-table__annonce {
  min-width: 0;
}

.admin-cache-table__actions {
  width: 9.25rem;
  min-width: 0;
}

.admin-cache-table__btn-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
}

.admin-cache-table__revoke-form {
  display: inline-flex;
  margin: 0;
}

.admin-cache-table__btn-row .btn--icon-only {
  flex-shrink: 0;
}

.admin-cache-table__view {
  color: var(--ink-soft);
}

.admin-cache-table__view:hover,
.admin-cache-table__view:focus-visible {
  color: var(--green-800);
  background: color-mix(in srgb, var(--green-100) 70%, transparent);
}

.admin-cache-table__view-icon {
  display: block;
}

.admin-cache-table__btn-row .admin-cache-table__revoke {
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}

.admin-cache-table__revoke {
  color: var(--red-700, #b42318);
}

.admin-cache-table__listing {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.admin-cache-table__title {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.admin-cache-table__meta,
.admin-cache-table__email {
  display: block;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-cache-table__empty-data {
  color: var(--ink-muted);
  font-style: italic;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.modal--cache-json .modal__dialog--wide {
  max-width: min(720px, 100%);
  max-height: min(88vh, 760px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-cache-dialog__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
}

.admin-cache-dialog__content {
  overflow: auto;
  flex: 1;
  min-height: 0;
  padding: var(--space-5) var(--space-5) var(--space-6);
}

.admin-cache-dialog__loading {
  margin: 0;
  color: var(--ink-muted);
}

.admin-cache-modal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-right: var(--space-6);
}

.admin-cache-modal__title {
  margin: 0.15rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  word-break: break-word;
}

.admin-cache-modal__meta {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.admin-cache-modal__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.admin-cache-modal__error {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.88rem;
}

.admin-cache-modal__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.admin-cache-modal__search {
  flex: 1 1 12rem;
  min-width: 0;
}

.admin-cache-modal__search .input {
  width: 100%;
}

.admin-cache-modal__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.jv-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 0.78rem;
}

.jv-path__seg {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.jv-path__seg:hover,
.jv-path__seg.is-active {
  background: var(--surface-muted);
  color: var(--ink);
}

.jv-path__current {
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.admin-cache-modal__body {
  margin: 0;
}

.jv-panel {
  border-radius: var(--radius-md);
  background: var(--surface-muted, #f6f4ed);
  border: 1px solid var(--border);
  max-height: min(52vh, 480px);
  overflow: auto;
  padding: var(--space-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
}

.jv-empty {
  margin: 0;
  color: var(--ink-muted);
}

.jv-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.jv-entry.is-selected > .jv-line {
  background: var(--surface);
  outline: 1px solid var(--border);
}

.jv-toggle {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0;
  position: relative;
}

.jv-toggle--spacer {
  visibility: hidden;
  pointer-events: none;
}

.jv-toggle::before {
  content: "▸";
  display: block;
  transition: transform 0.15s ease;
}

.jv-toggle.is-open::before {
  transform: rotate(90deg);
}

.jv-children {
  display: none;
  margin-left: 0.35rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--border);
}

.jv-children.is-open {
  display: block;
}

.jv-key {
  color: #5b3d99;
  font-weight: 600;
}

.jv-index {
  color: #8a6a12;
  font-weight: 600;
}

.jv-colon {
  color: var(--ink-muted);
}

.jv-meta {
  color: var(--ink-muted);
  font-size: 0.92em;
}

.jv-meta--root {
  color: var(--ink);
  font-weight: 600;
}

.jv-str {
  color: var(--green-800);
}

.jv-num {
  color: #b45309;
}

.jv-bool {
  color: #1d4ed8;
  font-weight: 600;
}

.jv-null {
  color: var(--ink-muted);
  font-style: italic;
}

.jv-unknown {
  color: var(--danger);
}

.jv-entry[hidden] {
  display: none !important;
}

/* ==========================================================================
   Analyse des photos — panneau « État visible du bien »
   ========================================================================== */

.photo-analysis {
  --pa-good: #3a9d4f;
  --pa-average: #f0b90b;
  --pa-poor: #e0541f;
  --pa-unknown: var(--border-strong);
  margin-top: var(--space-4);
}

.photo-analysis .pricem2__evolution-details.photo-analysis__expand {
  margin-top: var(--space-3);
}

.photo-analysis .pa-hero:has(+ .photo-analysis__expand) {
  margin-bottom: var(--space-3);
}

.photo-analysis__details-body {
  display: grid;
  gap: var(--space-4);
}

.photo-analysis__details-body .pa-grid {
  margin-top: 0;
}

.photo-analysis__details-body .panel__note {
  margin: 0;
}

.pa-refresh {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.pa-refresh-spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.pa-pending {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.pa-pending__title {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

.pa-pending .field__hint {
  margin: 0;
}

.pa-pending--compact {
  margin-top: var(--space-3);
  padding: var(--space-3);
  gap: var(--space-3);
}

.pa-pending--compact .spinner {
  width: 28px;
  height: 28px;
}

.rentest__retry {
  margin-top: var(--space-3);
}

.pa-empty {
  margin: 0;
}

/* Verdict */
.pa-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  margin-bottom: var(--space-5);
}

.pa-hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.pa-hero__detail {
  min-width: 0;
}

.pa-hero:has(.pa-hero__intro--good) {
  background: linear-gradient(120deg, rgba(58, 157, 79, 0.1), transparent 60%);
  border-color: rgba(58, 157, 79, 0.3);
}

.pa-hero:has(.pa-hero__intro--average) {
  background: linear-gradient(120deg, rgba(240, 185, 11, 0.12), transparent 60%);
  border-color: rgba(240, 185, 11, 0.35);
}

.pa-hero:has(.pa-hero__intro--poor) {
  background: linear-gradient(120deg, rgba(224, 84, 31, 0.1), transparent 60%);
  border-color: rgba(224, 84, 31, 0.3);
}

.pa-hero__initial {
  margin: var(--space-1) 0 0;
  font-size: 13px;
  color: var(--ink-muted);
}

.pa-hero__initial--warn {
  color: var(--ink);
}

.pa-hero__eyebrow {
  margin: 0 0 var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
}

.pa-hero__intro {
  flex: 1 1 12rem;
  min-width: 0;
}

.pa-hero__verdict {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pa-hero__stats {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
}

.pa-hero__stat {
  flex: 0 1 auto;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(16, 24, 48, 0.04);
}

.pa-hero__stat--metrics {
  width: max-content;
  max-width: 100%;
  padding: var(--space-3) var(--space-5);
}

.pa-hero__stat--metrics .pa-hero__stat-row {
  gap: var(--space-5);
  align-items: stretch;
}

.pa-hero__stat--metrics .pa-hero__stat-col {
  flex: 1 1 0;
  min-width: 0;
  gap: var(--space-2);
}

.pa-hero__stat--metrics .pa-hero__stat-col--divider {
  padding-left: var(--space-5);
}

.pa-hero__stat--metrics .pa-hero__stat-col:not(.pa-hero__stat-col--budget) {
  flex: 0 0 auto;
  min-width: 6.25rem;
}

.pa-hero__stat--metrics .pa-hero__stat-col--budget {
  flex: 0 0 auto;
  min-width: 17rem;
}

.pa-hero__stat--metrics.pa-hero__stat--good { border-color: rgba(58, 157, 79, 0.4); }
.pa-hero__stat--metrics.pa-hero__stat--average { border-color: rgba(240, 185, 11, 0.45); }
.pa-hero__stat--metrics.pa-hero__stat--poor { border-color: rgba(224, 84, 31, 0.4); }

.pa-hero__stat-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: var(--space-4);
}

.pa-hero__stat-col {
  flex: 1 1 0;
  min-width: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pa-hero__stat-col--divider {
  padding-left: var(--space-4);
  border-left: 1px solid rgba(16, 24, 48, 0.1);
}

.pa-hero__stat-col--quality {
  width: max-content;
}

.pa-hero__stat--metrics .pa-hero__stat-col--quality .pa-hero__stat-value {
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 22px;
  min-height: 22px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.pa-hero__stat-value--range {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pa-hero__stat-range-sep {
  font-weight: 500;
  color: var(--ink-muted);
}

.pa-hero__stat-col--quality .pa-hero__stat-unit {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.pa-hero__stat-col .pa-hero__stat-track {
  margin-top: var(--space-1);
}

.pa-hero__stat-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.pa-hero__stat-value--text {
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pa-hero__stat-value--text .pa-hero__stat-unit {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.pa-hero__stat-hint {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-muted);
}

.pa-hero__stat-hint__photos,
.pa-hero__stat-hint__extra {
  white-space: nowrap;
}

.pa-hero__stat-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.pa-hero__stat-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.pa-hero__stat-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(16, 24, 48, 0.08);
  overflow: hidden;
}

.pa-hero__stat-track--muted {
  background: rgba(16, 24, 48, 0.06);
}

.pa-hero__stat-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ink-muted);
  transition: width 0.35s ease;
}

.pa-hero__stat--metrics .pa-hero__stat-track--score .pa-hero__stat-fill {
  background: linear-gradient(90deg, rgba(224, 84, 31, 0.75), var(--pa-poor));
}

.pa-hero__stat--metrics .pa-hero__stat-track--muted .pa-hero__stat-fill,
.pa-hero__stat--metrics .pa-hero__stat-track--quality .pa-hero__stat-fill {
  background: linear-gradient(90deg, rgba(46, 139, 107, 0.85), var(--green-600));
}

.pa-hero__summary {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

.pa-hero__note {
  margin: var(--space-3) 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}

.pa-hero__side {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 1 auto;
  align-self: flex-start;
  min-width: min-content;
}

.pa-hero__stats {
  min-width: min-content;
  max-width: 100%;
}

/* Grille des blocs */
.pa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.pa-block {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.pa-block--wide {
  margin-top: var(--space-4);
}

/* Travaux à prévoir (fiche) : d'après le plan des pièces */

.works-summary-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  margin-bottom: var(--space-5);
}

.works-summary-card p {
  margin: 0;
}

.works-summary-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.works-summary-card__title {
  margin: 0;
  font-size: 1.05rem;
}

.works-summary-card__amount {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.works-summary-card__notice {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, 8px);
  background: var(--w-average-soft, #fdf3d6);
  font-size: 13px;
}

.works-summary-card__prios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.works-summary-card__prio {
  display: inline-flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  font-size: 13px;
}

.works-summary-card__prio strong {
  font-variant-numeric: tabular-nums;
}

.works-summary-card__prio--necessary { background: var(--w-poor-soft, #fde8e6); }
.works-summary-card__prio--comfort { background: var(--w-average-soft, #fdf3d6); }
.works-summary-card__prio--cosmetic { background: var(--w-good-soft, #e5f4ea); }

.works-summary-card__rooms {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.works-summary-card__room {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.works-summary-card__room:hover,
.works-summary-card__room:focus-visible {
  border-color: var(--ink-soft);
  background: var(--surface-muted);
}

.works-summary-card__room.is-review {
  border-style: dashed;
  border-color: #c99a1d;
}

.works-summary-card__room-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.works-summary-card__room-name {
  font-weight: 700;
}

.works-summary-card__room-state {
  font-size: 12px;
  color: var(--ink-soft);
}

.works-summary-card__room-cost {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.works-summary-card__room-review {
  font-size: 13px;
  color: #8a6400;
}

.works-summary-card__issues {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.works-summary-card__issue {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  font-size: 12px;
}

.works-summary-card__issue--average { background: var(--w-average-soft, #fdf3d6); }
.works-summary-card__issue--poor { background: var(--w-poor-soft, #fde8e6); }

.works-summary-card__extra {
  font-size: 13px;
  color: var(--ink-soft);
}

.works-summary-card__subtitle {
  margin: 0 0 var(--space-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.works-summary-card__unplaced-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.works-summary-card__unplaced-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--space-2);
  font-size: 13px;
  color: var(--ink-soft);
}

.works-summary-card__unplaced-item strong {
  color: var(--ink);
}

.works-summary-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--ink-soft);
}

.pa-block__title {
  font-size: 15px;
  margin-bottom: var(--space-3);
}

.pa-block .field__hint {
  margin: 0;
}

.pa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pa-list--compact {
  gap: var(--space-2);
}

.pa-item {
  --tip: var(--pa-unknown);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-left: 3px solid var(--tip);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-muted);
}

.pa-item--good { --tip: var(--pa-good); }
.pa-item--average { --tip: var(--pa-average); }
.pa-item--poor { --tip: var(--pa-poor); }
.pa-item--unknown { --tip: var(--pa-unknown); }

.pa-item__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pa-item__label {
  font-weight: 600;
}

.pa-item__badges {
  display: inline-flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.pa-item__meta {
  margin: var(--space-1) 0 0;
  font-size: 12px;
  color: var(--ink-muted);
}

.pa-item__text {
  margin: var(--space-2) 0 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.pa-badge--good { background: rgba(58, 157, 79, 0.15); color: #1f6b33; }
.pa-badge--average { background: rgba(240, 185, 11, 0.2); color: #6b4a00; }
.pa-badge--poor { background: rgba(224, 84, 31, 0.14); color: #9a3412; }
.pa-badge--unknown { background: var(--surface-sunken); color: var(--ink-muted); }

/* Listes à puces (points forts / vigilance) */
.pa-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pa-bullets li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-left: 22px;
  font-size: 14px;
}

.pa-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.pa-bullets--good li::before { background: var(--pa-good); }
.pa-bullets--warn li::before { background: var(--pa-average); }

.pa-bullets__meta {
  font-size: 12px;
  color: var(--ink-muted);
}

.pa-character {
  margin-top: var(--space-3);
  font-style: italic;
}

/* Miniatures « voir la photo » */
.pa-refs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.pa-ref {
  position: relative;
  width: 56px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-sunken);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.pa-ref:hover,
.pa-ref:focus-visible {
  transform: translateY(-1px);
  border-color: var(--green-600);
  outline: none;
}

.pa-ref img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pa-ref__num {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(16, 24, 48, 0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
}

/* Lightbox : miniature « État visible du bien » */
.modal--photo-lightbox {
  z-index: 110;
  padding: var(--space-4);
}

.modal--photo-lightbox .modal__overlay {
  background: rgba(17, 21, 15, 0.55);
  backdrop-filter: blur(10px);
}

.modal__dialog--photo.pa-lightbox__dialog {
  max-width: min(96vw, 1120px);
  width: auto;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pa-lightbox__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.pa-lightbox__img {
  display: block;
  width: auto;
  max-width: min(94vw, 1080px);
  max-height: min(82vh, 900px);
  margin: 0 auto;
  object-fit: contain;
  border-radius: calc(var(--radius-lg) - 4px);
  background: var(--surface-sunken);
}

/* Diagnostic admin — analyse des photos */
.modal--photo-analysis-debug {
  z-index: 111;
  padding: var(--space-4);
  align-items: flex-start;
  overflow-y: auto;
}

.modal--photo-analysis-debug .modal__overlay {
  background: rgba(17, 21, 15, 0.55);
  backdrop-filter: blur(8px);
}

.pa-debug__dialog {
  max-width: min(96vw, 920px);
  max-height: min(92vh, 900px);
  overflow: auto;
  padding: var(--space-4) var(--space-5) var(--space-5);
  margin: var(--space-4) auto;
}

.pa-debug__dialog > .modal__close {
  position: sticky;
  top: 0;
  float: right;
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) var(--space-2) var(--space-2);
}

.pa-debug__title {
  font-size: 1.25rem;
  margin: 0 0 var(--space-4);
  padding-right: 2.5rem;
}

.pa-debug__h3 {
  font-size: 0.95rem;
  margin: var(--space-4) 0 var(--space-2);
}

.pa-debug__meta {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: 14px;
}

.pa-debug__meta dt {
  font-weight: 600;
  color: var(--ink-soft);
}

.pa-debug__meta dd {
  margin: 0;
}

.pa-debug__error,
.pa-debug__error-cell {
  color: var(--danger, #b42318);
  word-break: break-word;
}

.pa-debug__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.pa-debug__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pa-debug__table th,
.pa-debug__table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.pa-debug__table th {
  background: var(--surface-sunken);
  font-weight: 600;
}

.pa-debug__row--fail {
  background: rgba(180, 35, 24, 0.06);
}

.pa-debug__row--warn {
  background: rgba(214, 158, 46, 0.08);
}

.pa-debug__ids {
  font-size: 11px;
  word-break: break-all;
}

.pa-debug__json {
  margin-top: var(--space-5);
}

.pa-debug__json-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.pa-debug__json-title {
  margin: 0;
  font-size: 0.95rem;
}

/* Diagnostic admin — zone probable (localisation) */
.modal--location-probable-debug .pa-debug__dialog {
  max-width: min(96vw, 980px);
}

.loc-debug__lede {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  line-height: 1.5;
  max-width: 52rem;
}

.loc-debug__alert {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid rgba(214, 158, 46, 0.45);
  background: rgba(214, 158, 46, 0.08);
}

.loc-debug__alert-title {
  margin: 0 0 var(--space-1);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.loc-debug__alert-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 13px;
  line-height: 1.45;
}

.loc-debug__banner {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  font-size: 13px;
  line-height: 1.45;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-sunken);
}

.loc-debug__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.loc-debug__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.loc-debug__stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted, #6b6553);
}

.loc-debug__stat-value {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
}

.loc-debug__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid transparent;
}

.loc-debug__badge--sm {
  padding: 1px 6px;
  font-size: 0.7rem;
}

.loc-debug__badge--ok {
  color: #276749;
  background: rgba(39, 103, 73, 0.1);
  border-color: rgba(39, 103, 73, 0.25);
}

.loc-debug__badge--warn {
  color: #9a6700;
  background: rgba(214, 158, 46, 0.12);
  border-color: rgba(214, 158, 46, 0.35);
}

.loc-debug__badge--info {
  color: #1d4ed8;
  background: rgba(29, 78, 216, 0.08);
  border-color: rgba(29, 78, 216, 0.22);
}

.loc-debug__badge--muted {
  color: var(--ink-muted);
  background: var(--surface, #fff);
  border-color: var(--border);
}

.loc-debug__pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.loc-debug__pipe {
  position: relative;
  flex: 1 1 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-1);
  text-align: center;
  font-size: 12px;
}

.loc-debug__pipe:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: -6px;
  width: 12px;
  height: 2px;
  background: var(--border);
  z-index: 0;
}

.loc-debug__pipe-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--surface, #fff);
  color: var(--ink-muted);
}

.loc-debug__pipe--done .loc-debug__pipe-num {
  border-color: #2f855a;
  background: rgba(47, 133, 90, 0.12);
  color: #276749;
}

.loc-debug__pipe--info .loc-debug__pipe-num {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

.loc-debug__pipe--idle .loc-debug__pipe-num {
  opacity: 0.65;
}

.loc-debug__pipe-label {
  font-weight: 600;
  color: var(--ink-soft);
}

.loc-debug__section {
  margin-bottom: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface, #fff);
  overflow: hidden;
}

.loc-debug__section[open] {
  margin-bottom: var(--space-3);
}

.loc-debug__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  background: var(--surface-sunken);
  border-bottom: 1px solid transparent;
}

.loc-debug__section[open] > .loc-debug__summary {
  border-bottom-color: var(--border);
}

.loc-debug__summary::-webkit-details-marker {
  display: none;
}

.loc-debug__summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--space-2);
  font-size: 0.75rem;
  color: var(--ink-muted);
  transition: transform 0.15s ease;
}

.loc-debug__section[open] > .loc-debug__summary::before {
  transform: rotate(90deg);
}

.loc-debug__summary-title {
  font-size: 0.9rem;
}

.loc-debug__summary-hint {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.loc-debug__section > :not(summary) {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.loc-debug__section > .loc-debug__facts,
.loc-debug__section > .loc-debug__empty,
.loc-debug__section > .loc-debug__excerpt,
.loc-debug__section > .loc-debug__error-block,
.loc-debug__section > .loc-debug__block-label,
.loc-debug__section > .pa-debug__table-wrap,
.loc-debug__section > .loc-debug__json {
  margin-top: var(--space-3);
}

.loc-debug__section > :last-child {
  margin-bottom: var(--space-3);
}

.loc-debug__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
}

.loc-debug__fact dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.loc-debug__fact dd {
  margin: 2px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  word-break: break-word;
}

.loc-debug__fact--wide {
  grid-column: 1 / -1;
}

.loc-debug__block-label {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.loc-debug__excerpt {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  max-height: 10rem;
  overflow: auto;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.loc-debug__error-block {
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: var(--radius-sm);
  border: 1px solid #fda29b;
  background: #fef3f2;
  color: #b42318;
}

.loc-debug__empty {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
}

.loc-debug__table-wrap {
  margin-bottom: var(--space-3);
}

.loc-debug__table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.loc-debug__table td {
  font-size: 12px;
}

.loc-debug__place {
  font-weight: 600;
  max-width: 14rem;
}

.loc-debug__mono {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
}

.loc-debug__cell-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
}

.loc-debug__section--json .loc-debug__json {
  margin-top: var(--space-2);
}

.loc-debug__copy-json {
  margin-bottom: var(--space-2);
}

.loc-debug__section--json .pa-debug__json-field {
  min-height: 6rem;
}

.pa-debug__json-field {
  display: block;
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.45;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  resize: vertical;
  min-height: 8rem;
  box-sizing: border-box;
}

.pa-debug__copy-btn {
  flex-shrink: 0;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 2px;
}

.pa-debug__copy-btn.is-copied {
  color: var(--green-800, #276749);
  border-color: var(--green-600, #2f855a);
}

/* Visite */
.pa-visit__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.pa-visit__caption {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-muted);
}

.pa-visit__list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 14px;
  color: var(--ink-soft);
}

.pa-visit__list--checks {
  list-style: none;
  padding-left: 0;
}

.pa-visit__list--checks li {
  position: relative;
  padding-left: 22px;
}

.pa-visit__list--checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
}

/* Blocs repliables */
.pa-details {
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.pa-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.pa-details__summary::-webkit-details-marker {
  display: none;
}

.pa-details__summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-left: auto;
}

.pa-details[open] > .pa-details__summary::after {
  transform: rotate(-135deg);
}

.pa-details__summary .badge {
  margin-left: var(--space-2);
}

/* Pièces */
.pa-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
}

.pa-room {
  --tip: var(--pa-unknown);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-top: 3px solid var(--tip);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.pa-room--good { --tip: var(--pa-good); }
.pa-room--average { --tip: var(--pa-average); }
.pa-room--poor { --tip: var(--pa-poor); }

.pa-room__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pa-room__head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pa-room__title {
  font-size: 15px;
}

.pa-room__size {
  font-weight: 500;
  color: var(--ink-muted);
}

.pa-room__facts {
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 13px;
}

.pa-room__facts div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: var(--space-2);
}

.pa-room__facts dt {
  color: var(--ink-muted);
  font-weight: 600;
}

.pa-room__facts dd {
  margin: 0;
  color: var(--ink-soft);
}

.pa-room__tags {
  margin-top: var(--space-3);
}

/* Photos écartées */
.pa-excluded {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

.pa-excluded__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.pa-excluded__item .pa-refs {
  margin-top: 0;
}

.pa-excluded__item .pa-ref {
  width: 72px;
  height: 52px;
}

.pa-excluded__label {
  font-weight: 600;
  font-size: 14px;
}

/* Galerie : badges projection / plan */
.carousel__flag {
  position: absolute;
  z-index: 1;
  left: var(--space-3);
  top: var(--space-3);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 24, 48, 0.8);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.carousel__flag--architect_projection,
.carousel__flag--virtual_staging,
.carousel__flag--ai_generated,
.carousel__flag--real_photo_with_virtual_staging {
  background: rgba(224, 84, 31, 0.9);
}

.carousel__thumb {
  position: relative;
}

.carousel__thumb-flag {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(16, 24, 48, 0.8);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  pointer-events: none;
}

.carousel__thumb--flagged img {
  filter: saturate(0.7);
}

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

  .pa-hero__stat--metrics {
    width: 100%;
  }

  .pa-hero__stat-row {
    flex-wrap: wrap;
  }

  .pa-hero__stat-hint__photos,
  .pa-hero__stat-hint__extra {
    white-space: normal;
  }

  .pa-hero__stat-col--divider {
    border-left: none;
    padding-left: 0;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(16, 24, 48, 0.1);
    flex-basis: 100%;
  }

  .pa-hero__stat-col--divider:first-child,
  .pa-hero__stat-col--divider:only-child {
    padding-top: 0;
    border-top: none;
  }

  .pa-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Travaux : widget (frise, bande de pièces) et modale « Pièces et état »
   ========================================================================== */

.works,
.works-modal,
.works-ghost {
  --w-good: #3a9d4f;
  --w-average: #e6a700;
  --w-poor: #e0541f;
  --w-unknown: #a8a294;
  --w-good-soft: rgba(58, 157, 79, 0.12);
  --w-average-soft: rgba(240, 185, 11, 0.16);
  --w-poor-soft: rgba(224, 84, 31, 0.12);
  --w-unknown-soft: var(--surface-sunken);
  --w-ai: #5b4bd6;
  --w-ai-soft: #eeebff;
  --w-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.wi {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -0.2em;
}

/* ------------------------------- Widget ------------------------------- */

.works--dpe-only:not(:has(.dpe-house)) {
  display: none;
}

.works__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.works__cta {
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(11, 61, 44, 0.22);
  transition: transform 0.2s var(--w-ease), box-shadow 0.2s ease, background 0.15s ease;
}

.works__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(200, 247, 81, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--w-ease);
}

.works__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(11, 61, 44, 0.28);
}

.works__cta:hover::after {
  transform: translateX(120%);
}

.works__cta .wi {
  color: var(--lime);
}

.works .works__part {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px dashed var(--border-strong);
}

.works__part-head {
  margin-bottom: var(--space-3);
}

.works__part-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.works__part-heading .panel__eyebrow {
  margin: 0;
}

.works__part-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--w-ai-soft);
  color: var(--w-ai);
  font-size: 17px;
}

.works__part-icon--energy {
  background: var(--gold-soft);
  color: var(--gold-ink);
}

.works__part-title {
  font-size: 16px;
  font-weight: 700;
}

/* Frise du process */

.works-steps {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  counter-reset: step;
}

.works-steps__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  min-width: 0;
}

.works-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 6px;
  height: 2px;
  background: var(--border-strong);
}

.works-steps__icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 15px;
}

.works-steps__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.works-steps__name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.works-steps__state {
  font-size: 12px;
  color: var(--ink-muted);
}

.works-steps__item.is-done {
  background: var(--green-100);
  border-color: rgba(46, 139, 107, 0.25);
}

.works-steps__item.is-done .works-steps__icon {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}

.works-steps__item.is-active {
  background: var(--surface);
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(200, 247, 81, 0.45);
}

.works-steps__item.is-active .works-steps__icon {
  background: var(--lime);
  border-color: var(--lime-dark);
  color: var(--green-900);
  animation: works-pulse 2s ease-in-out infinite;
}

.works-steps__item.is-active .works-steps__state {
  color: var(--green-800);
  font-weight: 600;
}

.works-steps__item.is-upcoming {
  border-style: dashed;
  opacity: 0.75;
}

@keyframes works-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 217, 47, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(168, 217, 47, 0); }
}

/* Bande des pièces */

.works-rooms__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.works-rooms__title {
  font-weight: 700;
  font-size: 15px;
}

.works-rooms__source {
  font-weight: 500;
  color: var(--ink-muted);
  font-size: 13px;
}

.works-rooms__pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(240, 185, 11, 0.5);
  background: var(--w-average-soft);
  color: var(--gold-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s var(--w-ease), background 0.15s ease;
}

.works-rooms__pending:hover {
  transform: translateY(-1px);
  background: rgba(240, 185, 11, 0.26);
}

.works-rooms__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-2);
}

.works-rooms__list > li {
  animation: works-rise 0.4s var(--w-ease) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}

.works-room-chip {
  --tone: var(--w-unknown);
  --tone-soft: var(--w-unknown-soft);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s var(--w-ease), box-shadow 0.2s ease, border-color 0.2s ease;
}

.works-room-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tone);
}

.works-room-chip:hover,
.works-room-chip:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--border-strong);
  outline: none;
}

.works-room-chip--good { --tone: var(--w-good); --tone-soft: var(--w-good-soft); }
.works-room-chip--average { --tone: var(--w-average); --tone-soft: var(--w-average-soft); }
.works-room-chip--poor { --tone: var(--w-poor); --tone-soft: var(--w-poor-soft); }

.works-room-chip__thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 11px;
  background: var(--tone-soft);
  flex-shrink: 0;
}

.works-room-chip__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.works-room-chip__icon {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--green-900);
  box-shadow: 0 2px 6px rgba(17, 21, 15, 0.18);
  font-size: 14px;
}

.works-room-chip__thumb:not(:has(img)) .works-room-chip__icon {
  inset: 0;
  margin: auto;
  width: 32px;
  height: 32px;
  box-shadow: none;
  background: transparent;
  font-size: 20px;
}

.works-room-chip__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.works-room-chip__name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.works-room-chip__state {
  font-size: 12px;
  color: var(--tone);
  font-weight: 600;
  filter: brightness(0.8);
}

.works-room-chip__surfaces {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.works-room-chip__count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 600;
}

.works-room-chip--add {
  justify-content: center;
  border-style: dashed;
  border-color: var(--border-strong);
  background: transparent;
  color: var(--ink-soft);
  min-height: 74px;
}

.works-room-chip--add::before {
  display: none;
}

.works-room-chip--add:hover {
  background: var(--green-100);
  border-color: var(--green-600);
  color: var(--green-800);
}

.works-room-chip__plus {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-sunken);
  transition: transform 0.3s var(--w-ease);
}

.works-room-chip--add:hover .works-room-chip__plus {
  transform: rotate(90deg);
  background: var(--green-600);
  color: #fff;
}

.works-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--w-unknown);
}

.works-dot--good { background: var(--w-good); }
.works-dot--average { background: var(--w-average); }
.works-dot--poor { background: var(--w-poor); }
.works-dot--unknown { background: transparent; box-shadow: inset 0 0 0 1.5px var(--w-unknown); }

@keyframes works-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* -------------------------------- Modale -------------------------------- */

.works-modal {
  padding: var(--space-4);
  z-index: 120;
}

.works-modal .works-modal__dialog {
  max-width: 1240px;
  height: min(92vh, 920px);
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  animation: works-modal-in 0.28s var(--w-ease);
}

.works-modal.is-closing .works-modal__dialog {
  animation: works-modal-out 0.16s ease forwards;
}

.works-modal.is-closing .modal__overlay {
  animation: works-fade-out 0.16s ease forwards;
}

@keyframes works-modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}

@keyframes works-modal-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

@keyframes works-fade-out {
  to { opacity: 0; }
}

.works-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-muted));
}

.works-modal__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.works-modal__title {
  font-size: 20px;
  line-height: 1.2;
}

.works-modal__intro {
  margin-top: var(--space-2);
  max-width: 42rem;
}

.works-modal__header .works-banner {
  margin-bottom: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.45;
}

.works-modal__header .works-banner--ai {
  background: none;
  color: #362b8f;
}

.works-modal__header .works-banner--ai strong {
  font-weight: 600;
}

.works-modal__header-aside {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding-top: 2px;
}

.works-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.works-save__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--w-unknown);
  transition: background 0.2s ease;
}

.works-save[data-state="dirty"] .works-save__dot { background: var(--w-average); }
.works-save[data-state="saving"] .works-save__dot {
  background: var(--info);
  animation: works-blink 0.9s ease-in-out infinite;
}
.works-save[data-state="saved"] {
  background: var(--green-100);
  color: var(--green-800);
}
.works-save[data-state="saved"] .works-save__dot { background: var(--w-good); }
.works-save[data-state="error"] {
  background: var(--danger-soft);
  color: var(--danger);
  cursor: pointer;
}
.works-save[data-state="error"] .works-save__dot { background: var(--danger); }

@keyframes works-blink {
  50% { opacity: 0.3; }
}

.works-modal__body {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}

.works-modal__loading {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  color: var(--ink-muted);
  text-align: center;
  padding: var(--space-5);
}

.works-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.works-modal__reset {
  white-space: nowrap;
}

.works-modal__reset-short {
  display: none;
}

.works-modal__reset .wi {
  transition: transform 0.4s var(--w-ease);
}

.works-modal__reset:hover .wi {
  transform: rotate(-200deg);
}

.works-modal__done .wi {
  transform-origin: center;
  transition: transform 0.25s var(--w-ease);
}

.works-modal__done:hover .wi {
  animation: works-done-check 0.45s var(--w-ease) forwards;
}

@keyframes works-done-check {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.2) translateY(-1px);
  }
  100% {
    transform: scale(1.08) translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .works-modal__done:hover .wi {
    animation: none;
    transform: scale(1.06);
  }
}

/* Disposition : barre latérale | vue principale */

.works-planner {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  grid-template-areas: "side main";
  height: 100%;
}

.works-side {
  grid-area: side;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: var(--space-4) var(--space-3);
  background: var(--surface-muted);
  border-right: 1px solid var(--border);
}

.works-side__section {
  min-width: 0;
}

.works-side__section + .works-side__section {
  margin-top: var(--space-5);
}

.works-side__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.works-side__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.works-side__entry {
  min-width: 0;
}

.works-side__item {
  --tone: var(--w-unknown);
  --tone-soft: var(--w-unknown-soft);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.2s var(--w-ease), box-shadow 0.2s ease;
}

.works-side__item--good { --tone: var(--w-good); --tone-soft: var(--w-good-soft); }
.works-side__item--average { --tone: var(--w-average); --tone-soft: var(--w-average-soft); }
.works-side__item--poor { --tone: var(--w-poor); --tone-soft: var(--w-poor-soft); }
.works-side__item--group { --tone: var(--ink-muted); --tone-soft: var(--surface-sunken); }
.works-side__item--energy { --tone: var(--w-average); --tone-soft: var(--w-average-soft); }

.works-side__item:hover {
  background: var(--surface);
}

.works-side__item:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 1px;
}

.works-side__item.is-active {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(17, 21, 15, 0.06);
}

.works-side__item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--green-600);
}

.works-side__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--tone);
  font-size: 17px;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.works-side__item--unknown { --tone: var(--w-unknown); --tone-soft: var(--w-unknown-soft); }

.works-side__item--group .works-side__icon {
  background: var(--surface-sunken);
  color: var(--ink-muted);
}

.works-side__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.works-side__name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.works-side__state {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.works-side__badge {
  flex-shrink: 0;
  min-width: 24px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-soft);
}

.works-side__item.is-new {
  animation: works-new 0.9s var(--w-ease);
}

@keyframes works-new {
  0% { background: var(--lime); transform: scale(0.96); }
  100% { background: var(--surface); transform: none; }
}

.works-side__add {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  margin-top: var(--space-2);
  margin-left: 0;
  padding: 9px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-800);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.works-side__add .wi {
  transition: transform 0.3s var(--w-ease);
}

.works-side__add:hover {
  background: var(--green-100);
  border-color: var(--green-600);
}

.works-side__add:hover .wi {
  transform: rotate(90deg);
}

/* Cibles de dépôt */

.works-modal.is-dragging-photo .works-side__item[data-drop] {
  border-color: var(--border);
  border-style: dashed;
  background: var(--surface);
}

.works-modal.is-dragging .is-drop-over.works-side__item,
.works-modal.is-dragging .works-side__item.is-drop-over {
  border-color: var(--green-600);
  border-style: solid;
  background: var(--green-100);
  transform: scale(1.03);
  box-shadow: 0 0 0 4px rgba(46, 139, 107, 0.16);
}

.works-side__item.is-insert-before { box-shadow: 0 -3px 0 0 var(--green-600); }
.works-side__item.is-insert-after { box-shadow: 0 3px 0 0 var(--green-600); }

.works-side__item.is-dragging-source { opacity: 0.4; }

.is-bumped {
  animation: works-bump 0.45s var(--w-ease);
}

@keyframes works-bump {
  40% { transform: scale(1.25); background: var(--lime); color: var(--green-900); }
}

/* Vue principale */

.works-main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--space-5);
  outline: none;
  scroll-behavior: smooth;
}

.works-view[data-view-anim] {
  animation: works-view-in 0.32s var(--w-ease);
}

@keyframes works-view-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
}

.works-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 10px 14px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.works-banner p {
  margin: 0;
  line-height: 1.45;
}

.works-banner--ai {
  background: var(--w-ai-soft);
  color: #362b8f;
}

.works-banner--ai .wi {
  color: var(--w-ai);
  font-size: 18px;
}

.works-banner--pending {
  background: var(--info-soft);
  color: #1e40af;
}

.works-banner .spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
  flex-shrink: 0;
}

.works-room__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.works-room__type-btn {
  --tone: var(--w-unknown);
  --tone-soft: var(--w-unknown-soft);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: var(--tone-soft);
  color: var(--tone);
  font-size: 26px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s var(--w-ease), box-shadow 0.2s ease;
}

.works-room__type-btn--good { --tone: var(--w-good); --tone-soft: var(--w-good-soft); }
.works-room__type-btn--average { --tone: var(--w-average); --tone-soft: var(--w-average-soft); }
.works-room__type-btn--poor { --tone: var(--w-poor); --tone-soft: var(--w-poor-soft); }
.works-room__type-btn--static { cursor: default; color: var(--ink-soft); }

.works-room__type-btn:not(.works-room__type-btn--static):hover {
  transform: rotate(-4deg) scale(1.05);
  box-shadow: 0 6px 14px rgba(17, 21, 15, 0.12);
}

.works-room__titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}

.works-room__name {
  width: 100%;
  max-width: 520px;
  padding: 2px 6px;
  margin-left: -6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.works-room__name:hover {
  background: var(--surface-muted);
}

.works-room__name:focus {
  outline: none;
  border-color: var(--green-600);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(46, 139, 107, 0.15);
}

.works-room__type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
}

.works-room__type .wi {
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.works-room__type:hover {
  color: var(--green-800);
}

.works-room__type:hover .wi {
  opacity: 1;
}

.works-room__group-title {
  font-size: 22px;
}

.works-room__hint {
  font-size: 13px;
  color: var(--ink-muted);
}

.works-view--room {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.works-room__overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.works-room__overview .works-condition,
.works-room__overview .works-traits {
  min-width: 0;
}

/* Seul bloc restant dans la grille 2 col. : pleine largeur pour les puces d'état */
.works-room__overview .works-condition {
  grid-column: 1 / -1;
}

.works-condition .works-chips {
  flex-wrap: nowrap;
}

.works-traits__lead {
  margin: -4px 0 var(--space-2);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-muted);
}

.works-view--room .works-condition {
  margin-bottom: 0;
}

.works-view--room .works-photos {
  margin-bottom: 0;
}

.works-view--room .works-photos__grid {
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: var(--space-2);
}

.works-view--room .works-photos__head {
  margin-bottom: var(--space-2);
  min-height: 26px;
}

.works-room__actions {
  display: flex;
  gap: 6px;
}

.works-icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 17px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s var(--w-ease), border-color 0.15s ease;
}

.works-icon-btn:hover {
  background: var(--surface-muted);
  transform: translateY(-1px);
}

.works-icon-btn--danger:hover {
  background: var(--danger-soft);
  border-color: rgba(180, 35, 24, 0.3);
  color: var(--danger);
}

.works-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.works-condition {
  margin-bottom: 0;
}

.works-condition__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Chips */

.works-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.works-chip {
  --tone: var(--green-600);
  --tone-soft: var(--green-100);
  padding: 5px 12px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s var(--w-ease), box-shadow 0.15s ease;
}

.works-chips--sm .works-chip {
  padding: 3px 10px 4px;
  font-size: 12px;
}

.works-chips--xs .works-chip {
  padding: 2px 8px 3px;
  font-size: 11px;
}

.works-chip--good { --tone: var(--w-good); --tone-soft: var(--w-good-soft); }
.works-chip--average { --tone: var(--w-average); --tone-soft: var(--w-average-soft); }
.works-chip--poor { --tone: var(--w-poor); --tone-soft: var(--w-poor-soft); }
.works-chip--unknown { --tone: var(--ink-muted); --tone-soft: var(--surface-sunken); }
.works-chip--neutral { --tone: var(--green-800); --tone-soft: var(--green-100); }

.works-chip:hover {
  border-color: var(--tone);
  background: var(--tone-soft);
}

.works-chip:active {
  transform: scale(0.95);
}

.works-chip.is-on {
  border-color: var(--tone);
  background: var(--tone);
  color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--tone) 35%, transparent);
  animation: works-chip-on 0.3s var(--w-ease);
}

.works-chip--average.is-on {
  color: #3d2b00;
}

.works-chip:focus-visible {
  outline: 2px solid var(--tone);
  outline-offset: 2px;
}

@keyframes works-chip-on {
  50% { transform: scale(1.08); }
}

/* Photos */

.works-photos {
  margin-bottom: 0;
  padding: var(--space-3);
  border: 1.5px dashed transparent;
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.works-modal.is-dragging-photo .works-photos {
  border-color: var(--border-strong);
}

.works-modal.is-dragging .works-photos.is-drop-over {
  border-color: var(--green-600);
  background: var(--green-100);
  box-shadow: inset 0 0 0 3px rgba(46, 139, 107, 0.1);
}

.works-photos__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  min-height: 30px;
}

.works-photos__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: works-rise 0.25s var(--w-ease);
}

.works-photos__sel {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-800);
}

.works-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-800);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(18, 81, 58, 0.3);
}

.works-link:hover {
  text-decoration-color: currentColor;
}

.works-photos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: var(--space-3);
}

.works-photos--room {
  flex: 1;
  min-height: 0;
  max-height: min(52vh, 520px);
  overflow: auto;
}

.works-photos--room .works-photos__head {
  margin-bottom: var(--space-2);
}

.works-photos--room .works-photos__grid {
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: var(--space-2);
}

.works-photos--room .works-photo,
.works-photo--thumb {
  border-radius: 10px;
}

.works-photos--room .works-photo__media {
  aspect-ratio: 1;
  border-radius: 10px;
}

.works-photos--room .works-photo__num {
  top: 4px;
  left: 4px;
  min-width: 18px;
  padding: 0 5px;
  font-size: 10px;
}

.works-photos--room .works-photo__check {
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
}

.works-photos__empty {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  color: var(--ink-muted);
  font-size: 13px;
  text-align: center;
}

.works-photos__empty .wi {
  font-size: 28px;
  opacity: 0.6;
}

.works-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(17, 21, 15, 0.06), 0 4px 12px rgba(17, 21, 15, 0.06);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  outline: none;
  transition: transform 0.28s var(--w-ease), box-shadow 0.2s ease, opacity 0.2s ease;
}

.works-photo:hover {
  box-shadow: 0 2px 4px rgba(17, 21, 15, 0.08), 0 10px 24px rgba(17, 21, 15, 0.12);
}

.works-photo:focus-visible {
  box-shadow: 0 0 0 3px var(--green-600);
}

.works-photo.is-entering {
  animation: works-photo-in 0.35s var(--w-ease);
}

@keyframes works-photo-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

.works-photo__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: var(--surface-sunken);
}

.works-photo--compact .works-photo__media {
  border-radius: 10px;
}

.works-photo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 0.4s var(--w-ease);
}

.works-photo:hover .works-photo__media img {
  transform: scale(1.05);
}

.works-photo__num {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(17, 21, 15, 0.65);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.works-photo__check {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(17, 21, 15, 0.35);
  color: transparent;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s ease, transform 0.2s var(--w-ease), background 0.15s ease;
}

.works-photo__check .wi {
  font-size: 14px;
}

.works-photo:hover .works-photo__check,
.works-photo:focus-visible .works-photo__check,
.works-photos:has(.is-selected) .works-photo__check,
.works-tray:has(.is-selected) .works-photo__check {
  opacity: 1;
  transform: none;
}

.works-photo.is-selected {
  box-shadow: 0 0 0 3px var(--green-600), 0 8px 20px rgba(46, 139, 107, 0.25);
  transform: scale(0.97);
}

.works-photo.is-selected .works-photo__check {
  background: var(--green-600);
  color: #fff;
  opacity: 1;
  transform: none;
}

.works-photo__caption {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 7px 9px 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-soft);
  min-height: calc(2 * 1.35em + 15px);
}

.works-photo__caption.is-empty {
  color: var(--ink-muted);
  font-style: italic;
}

.works-photo__ai {
  color: var(--w-ai);
  margin-right: 3px;
  font-size: 12px;
}

.works-photo.is-dragging-source {
  opacity: 0.3;
  transform: scale(0.94);
}

.works-photo.is-insert-before::before,
.works-photo.is-insert-after::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 2px;
  background: var(--green-600);
  box-shadow: 0 0 0 3px rgba(46, 139, 107, 0.2);
  z-index: 2;
}

.works-photo.is-insert-before::before { left: -9px; }
.works-photo.is-insert-after::after { right: -9px; }

.works-modal.is-dragging,
.works-modal.is-dragging * {
  cursor: grabbing !important;
}

/* Points à signaler */

.works-issues__hint {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}

.works-issues__groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
}

.works-issues__group {
  padding: 10px 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.works-issues__group.has-issues {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}

.works-issues__cat {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.works-issues__cat .wi {
  font-size: 16px;
  color: var(--ink-muted);
  transition: color 0.2s ease;
}

.works-issues__cat--average .wi {
  color: #a87900;
}

.works-issues__cat--poor .wi {
  color: var(--w-poor);
}

.works-issues__count {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.works-issues__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Sol, murs, plafond : un choix par ligne (même présentation). */
.works-issues__group--stack .works-issues__list {
  flex-direction: column;
  align-items: stretch;
}

.works-issues__group--stack .works-issue-wrap {
  display: flex;
  width: 100%;
}

.works-issues__group--stack .works-issue {
  flex: 1;
  min-width: 0;
}

.works-issues__group .works-issue {
  padding: 5px 12px 5px 6px;
  font-size: 13px;
}

.works-issues__group .works-issue__mark {
  width: 18px;
  height: 18px;
  font-size: 11px;
}

/* Caractéristiques (hors travaux) */

.works-traits__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.works-trait {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 5px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.works-trait .wi {
  font-size: 12px;
}

.works-trait:hover {
  border-color: var(--green-600);
  color: var(--ink-soft);
}

.works-trait.is-on {
  border-style: solid;
  border-color: var(--green-600);
  background: var(--green-100);
  color: var(--green-800);
}

.works-trait:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

.works-issue {
  --tone: var(--w-average);
  --tone-soft: var(--w-average-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s var(--w-ease);
}

.works-issue--poor { --tone: var(--w-poor); --tone-soft: var(--w-poor-soft); }

.works-issue:hover {
  border-color: var(--tone);
  background: var(--tone-soft);
}

.works-issue:active {
  transform: scale(0.96);
}

.works-issue:focus-visible {
  outline: 2px solid var(--tone);
  outline-offset: 2px;
}

.works-issue__mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: 12px;
  transition: background 0.15s ease, color 0.15s ease;
}

.works-issue.is-on {
  border-color: var(--tone);
  background: var(--tone-soft);
  color: var(--ink);
}

.works-issue.is-pop {
  animation: works-chip-on 0.3s var(--w-ease);
}

.works-issue.is-on .works-issue__mark {
  background: var(--tone);
  color: #fff;
}

.works-issue--average.is-on .works-issue__mark {
  color: #3d2b00;
}

/* Point compris dans un forfait coché (salle d'eau) : coché, sans coût propre. */
.works-issue.is-included {
  border-style: dashed;
  background: var(--surface);
}

.works-issue__included {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
}

.works-issue__ai {
  color: var(--w-ai);
  font-size: 12px;
}

/* Aide d'un point : « ? » à gauche de la bulle, explication au clic. */
.works-issue-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.works-issue-help {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.works-issue-help:hover,
.works-issue-help.is-open {
  border-color: var(--ink-muted);
  background: var(--surface-sunken);
  color: var(--ink);
}

.works-issue-help:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

/* « ? » d'en-tête de groupe : infobulle au survol, pas de panneau au clic. */
.works-issues__cat-help {
  cursor: help;
}

.works-issue-tip {
  --tone: var(--w-average);
  --tone-soft: var(--w-average-soft);
  position: absolute;
  top: calc(100% + 8px);
  left: -6px;
  z-index: 30;
  width: min(272px, calc(100vw - 48px));
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: left;
  animation: works-issue-tip-in 0.16s var(--w-ease);
}

.works-issue-tip--poor {
  --tone: var(--w-poor);
  --tone-soft: var(--w-poor-soft);
}

/* Petite flèche sous le « ? ». */
.works-issue-tip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--tip-arrow, 11px);
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: var(--surface);
  transform: rotate(45deg);
}

.works-issue-tip--end {
  left: auto;
  right: -6px;
}

.works-issue-tip__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.works-issue-tip__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone);
}

.works-issue-tip__title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.works-issue-tip__close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-muted);
  font-size: 14px;
  cursor: pointer;
}

.works-issue-tip__close:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

.works-issue-tip__close:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 1px;
}

.works-issue-tip__text,
.works-issue-tip__rule,
.works-issue-tip__ai {
  margin: 0;
}

.works-issue-tip__rule {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--tone-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.works-issue-tip__ai {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}

.works-issue-tip__ai .wi {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--w-ai);
}

.works-issue-tip__ai strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--w-ai);
}

@keyframes works-issue-tip-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .works-issue-tip {
    animation: none;
  }
}

.works-select {
  padding: 7px calc(var(--space-3) + 1rem + var(--space-3)) 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}

.works-select:focus,
.works-textarea:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(46, 139, 107, 0.15);
}

.works-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  resize: vertical;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.works-textarea:focus {
  background: var(--surface);
}

.works-textarea--sm {
  font-size: 13px;
}

.works-summary {
  display: grid;
  gap: var(--space-2);
}

.works-room-status {
  display: grid;
  gap: var(--space-2);
}

.works-room-status:empty {
  display: none;
}

.works-review {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid #ecd28f;
  border-radius: var(--radius-md, 12px);
  background: var(--w-average-soft);
  font-size: 13px;
  line-height: 1.45;
}

.works-review p {
  margin: 0;
}

.works-review__icon {
  flex: none;
  color: #8a6400;
}

.works-review__icon .wi {
  width: 20px;
  height: 20px;
}

.works-review__body {
  flex: 1;
  min-width: 0;
}

.works-review__title {
  font-weight: 800;
  color: #6b4d00;
}

.works-review .btn {
  flex: none;
  align-self: center;
}

.works-room-budget {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.works-room-budget .wi {
  width: 16px;
  height: 16px;
  flex: none;
}

.works-room-budget strong {
  margin-left: auto;
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.works-room-budget--muted {
  font-style: italic;
}

.works-ai-seen {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  font-size: 13px;
}

.works-ai-seen summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.works-ai-seen summary::-webkit-details-marker {
  display: none;
}

.works-ai-seen summary .wi {
  width: 16px;
  height: 16px;
}

.works-ai-seen__chevron {
  margin-left: auto;
  transition: transform 0.15s ease;
}

.works-ai-seen[open] .works-ai-seen__chevron {
  transform: rotate(90deg);
}

.works-ai-seen__summary {
  margin: 0;
  padding: 0 var(--space-3) var(--space-2);
  color: var(--ink-soft);
  line-height: 1.5;
}

.works-ai-seen__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  list-style: none;
}

.works-ai-seen__list li {
  display: grid;
  gap: 2px;
}

.works-ai-seen__list li span {
  color: var(--ink-soft);
}

.works-ai-seen__list li.is-off {
  opacity: 0.6;
}

.works-ai-seen__list em {
  font-weight: 400;
}

.works-source {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

.works-source .wi {
  font-size: 11px;
}

.works-source--ai {
  background: var(--w-ai-soft);
  color: var(--w-ai);
}

.works-source--user {
  background: var(--green-100);
  color: var(--green-800);
  animation: works-chip-on 0.3s var(--w-ease);
}

/* Tiroir « À classer » */

.works-tray {
  grid-area: tray;
  border-top: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 -6px 16px rgba(17, 21, 15, 0.04);
}

.works-tray__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  transition: background 0.2s ease;
}

.works-modal.is-dragging-photo .works-tray__inner {
  background: var(--surface-muted);
}

.works-modal.is-dragging .works-tray__inner.is-drop-over {
  background: var(--w-average-soft);
  box-shadow: inset 0 0 0 2px rgba(240, 185, 11, 0.6);
}

.works-tray__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 72px;
  padding: 6px 8px;
  border: 0;
  border-radius: 12px;
  background: var(--w-average-soft);
  color: var(--gold-ink);
  font: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s var(--w-ease);
}

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

.works-tray__head .wi {
  font-size: 18px;
}

.works-tray__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.works-tray__count {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  padding: 0 6px;
  border-radius: var(--radius-pill);
}

.works-tray__strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 4px 2px 6px;
  scroll-snap-type: x proximity;
  flex: 1;
}

.works-photo--compact {
  width: 104px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.works-photo--compact .works-photo__check {
  width: 22px;
  height: 22px;
}

.works-tray__done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green-800);
  font-weight: 600;
  font-size: 14px;
  animation: works-rise 0.4s var(--w-ease);
}

/* Calques : sélecteurs, visionneuse, confirmation */

.works-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.works-layer[hidden] {
  display: none;
}

.works-layer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 21, 15, 0.35);
  backdrop-filter: blur(3px);
  animation: modal-fade 0.15s ease;
}

.works-picker {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  animation: works-modal-in 0.25s var(--w-ease);
}

.works-picker--narrow {
  width: min(420px, 100%);
}

.works-picker--types {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.works-picker__types-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.works-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.works-picker__head h3 {
  font-size: 17px;
}

.works-picker__search {
  display: block;
  margin-bottom: var(--space-3);
}

.works-picker__search .admin-users-search__wrap {
  display: block;
}

.works-picker__search .input {
  width: 100%;
}

.works-picker__empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-4);
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
  pointer-events: none;
}

.works-picker__empty[hidden] {
  display: none !important;
}

.works-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: var(--space-2);
}

.works-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  cursor: pointer;
  animation: works-rise 0.3s var(--w-ease) both;
  animation-delay: calc(var(--i, 0) * 12ms);
  transition: transform 0.18s var(--w-ease), border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.works-type__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--surface-muted);
  color: var(--green-800);
  font-size: 22px;
  transition: background 0.15s ease, transform 0.25s var(--w-ease);
}

.works-type:hover,
.works-type:focus-visible {
  border-color: var(--green-600);
  background: var(--green-100);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(17, 21, 15, 0.08);
  outline: none;
}

.works-type:hover .works-type__icon {
  background: var(--surface);
  transform: scale(1.1) rotate(-4deg);
}

.works-type.is-on {
  border-color: var(--green-600);
  background: var(--green-100);
  box-shadow: inset 0 0 0 1px var(--green-600);
}

.works-type.is-filtered-out {
  display: none !important;
}

.works-picker__list {
  display: grid;
  gap: 4px;
}

.works-dest {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.works-dest:hover:not(:disabled),
.works-dest:focus-visible {
  background: var(--green-100);
  border-color: rgba(46, 139, 107, 0.3);
  outline: none;
}

.works-dest:disabled {
  opacity: 0.5;
  cursor: default;
}

.works-dest__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--surface-muted);
  color: var(--green-800);
  font-size: 16px;
}

.works-dest__label {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
}

.works-dest__count {
  font-size: 12px;
  color: var(--ink-muted);
}

.works-dest--new .works-dest__icon {
  background: var(--green-600);
  color: #fff;
}

.works-viewer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  width: min(1100px, 100%);
  height: min(640px, 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  animation: works-modal-in 0.25s var(--w-ease);
}

.works-viewer__stage {
  position: relative;
  display: grid;
  place-items: center;
  background: #0f1311;
  min-height: 0;
}

.works-viewer__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: modal-fade 0.25s ease;
}

.works-viewer__nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.15s var(--w-ease), background 0.15s ease;
}

.works-viewer__nav:hover {
  background: #fff;
  transform: scale(1.08);
}

.works-viewer__nav--prev { left: 12px; }
.works-viewer__nav--next { right: 12px; }

.works-viewer__pos {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.works-viewer__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-y: auto;
}

.works-viewer__where {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
}

.works-viewer__move {
  align-self: flex-start;
}

.works-confirm {
  text-align: center;
  padding-top: var(--space-5);
}

.works-confirm__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 22px;
}

.works-confirm h3 {
  font-size: 18px;
  margin-bottom: var(--space-2);
}

.works-confirm p {
  color: var(--ink-soft);
  font-size: 14px;
}

.works-confirm__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Fantôme de glisser-déposer */

.works-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  will-change: transform;
}

.works-ghost--photo {
  width: 88px;
  height: 66px;
}

.works-ghost--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #fff;
  box-shadow: 0 12px 28px rgba(17, 21, 15, 0.35);
  transform: rotate(calc(-4deg + var(--i) * 5deg)) translate(calc(var(--i) * 4px), calc(var(--i) * -3px));
  animation: works-ghost-in 0.18s var(--w-ease);
}

.works-ghost__count {
  position: absolute;
  top: -10px;
  right: -10px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--green-600);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(46, 139, 107, 0.4);
}

.works-ghost--room {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(17, 21, 15, 0.25);
  font-weight: 700;
  font-size: 14px;
  color: var(--green-900);
}

@keyframes works-ghost-in {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}

/* Toast */

.works-toast {
  position: absolute;
  left: 50%;
  bottom: 76px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: min(560px, calc(100% - 32px));
  padding: 10px 12px 10px 16px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink-inverse);
  font-size: 14px;
  box-shadow: var(--shadow-raised);
  transform: translateX(-50%);
  animation: works-toast-in 0.3s var(--w-ease);
}

.works-toast[hidden] {
  display: none;
}

.works-toast.is-leaving {
  animation: works-toast-out 0.2s ease forwards;
}

.works-toast__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--lime);
  color: var(--green-900);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

@keyframes works-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}

@keyframes works-toast-out {
  to {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

/* Menu : entrée Maison / Appartement */

.works-side__item--home {
  padding: 9px 10px;
  border-color: var(--border);
  background: var(--surface);
}

.works-side__item--home .works-side__icon {
  width: 40px;
  height: 40px;
  font-size: 20px;
}

.works-side__item--home .works-side__name {
  font-size: 15px;
}

.works-side__score {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  color: color-mix(in srgb, var(--tone) 80%, var(--ink));
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.works-side__caption--sub {
  margin-top: var(--space-4);
}

.works-side__rooms {
  box-sizing: border-box;
  width: calc(100% - 18px);
  margin-left: 18px;
  padding-left: var(--space-2);
  border-left: 2px solid var(--border);
}

.works-side__list--rooms {
  margin: 0;
  padding: 0;
  border: 0;
}

.works-side__list--global {
  margin-top: 6px;
}

.works-side__item--global .works-side__icon {
  background: color-mix(in srgb, var(--tone) 18%, transparent);
}

/* Vue « Logement entier » */

.works-view--global {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.works-global__group {
  display: grid;
  gap: var(--space-2);
}

.works-global__cat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.works-global__cat .wi {
  width: 16px;
  height: 16px;
}

.works-global__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--space-3);
}

.works-global__card {
  --tone: var(--w-unknown);
  --tone-soft: var(--w-unknown-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.works-global__card.is-on {
  --tone: var(--green-600);
  --tone-soft: var(--green-100);
  border-color: color-mix(in srgb, var(--tone) 45%, var(--border));
  box-shadow: 0 4px 14px rgba(17, 21, 15, 0.06);
}

.works-view--global[data-view-anim] .works-global__card {
  animation: works-overview-rise 0.4s var(--w-ease) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

.works-global__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.works-global__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--tone-soft);
  color: var(--tone);
  font-size: 18px;
}

.works-global__titles {
  flex: 1;
  min-width: 0;
}

.works-global__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
}

.works-global__hint {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-muted);
}

.works-global__cost {
  flex: none;
  align-self: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.works-switch {
  position: relative;
  flex: none;
  align-self: center;
  width: 40px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--border);
  cursor: pointer;
  transition: background 0.15s ease;
}

.works-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 21, 15, 0.25);
  transition: transform 0.2s var(--w-ease);
}

.works-switch.is-on {
  background: var(--green-600);
}

.works-switch.is-on .works-switch__thumb {
  transform: translateX(16px);
}

.works-switch:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

.works-global__body {
  display: grid;
  gap: var(--space-2);
  padding-left: calc(36px + var(--space-3));
}

.works-global__reason,
.works-global__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
}

.works-global__reason {
  color: var(--w-ai);
}

.works-global__note {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--w-average-soft);
  color: var(--ink-soft);
}

.works-global__reason .wi,
.works-global__note .wi {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}

.works-global__variant-hint,
.works-global__basis,
.works-global__declined {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.works-global__declined {
  padding-left: calc(36px + var(--space-3));
  font-style: italic;
}

.works-global__qty {
  display: grid;
  gap: 6px;
}

.works-global__stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.works-global__qty-input {
  width: 56px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.works-global__qty-input:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 1px;
}

.works-global__qty-unit {
  font-size: 13px;
  color: var(--ink-soft);
}

.works-overview__tile--global .works-overview__tile-media {
  background: var(--tone-soft, var(--surface-sunken));
}

.works-overview__tile--unknown { --tone: var(--w-unknown); --tone-soft: var(--w-unknown-soft); }

/* Vue récapitulative */

.works-overview {
  display: grid;
  gap: var(--space-4);
}

.works-overview__hero,
.works-overview__card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(17, 21, 15, 0.04);
}

.works-overview__card {
  padding: var(--space-4);
  min-width: 0;
}

.works-overview[data-view-anim] .works-overview__hero,
.works-overview[data-view-anim] .works-overview__card {
  animation: works-overview-rise 0.5s var(--w-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes works-overview-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
}

.works-overview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.works-overview__heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}

.works-overview__head-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--surface-sunken);
  color: var(--ink-soft);
  font-size: 15px;
}

.works-overview__badge {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--w-ai-soft);
  color: var(--w-ai);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.works-overview__count {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-soft);
}

.works-overview__count--poor { background: var(--w-poor-soft); color: var(--w-poor); }
.works-overview__count--average { background: var(--w-average-soft); color: #8a6400; }

.works-overview__empty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: 12px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 13px;
}

.works-overview__empty p {
  margin: 0;
  flex: 1;
}

.works-overview__empty-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.works-overview__empty-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.works-overview__empty > .wi {
  font-size: 22px;
}

.works-overview__empty--good {
  background: var(--w-good-soft);
  color: color-mix(in srgb, var(--w-good) 70%, var(--ink));
}

.works-overview__footnote {
  margin: var(--space-3) 0 0;
  font-size: 11px;
  color: var(--ink-muted);
}

/* En-tête : jauge + verdict */

.works-overview__hero {
  --tone: var(--w-unknown);
  --tone-soft: var(--w-unknown-soft);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  background:
    radial-gradient(circle at 0% 0%, var(--tone-soft), transparent 60%),
    var(--surface);
}

.works-overview__hero--good { --tone: var(--w-good); --tone-soft: var(--w-good-soft); }
.works-overview__hero--average { --tone: var(--w-average); --tone-soft: var(--w-average-soft); }
.works-overview__hero--poor { --tone: var(--w-poor); --tone-soft: var(--w-poor-soft); }

.works-overview__gauge {
  position: relative;
  width: 128px;
  height: 128px;
  flex-shrink: 0;
}

.works-overview__gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.works-overview__gauge-track {
  fill: none;
  stroke: var(--surface-sunken);
  stroke-width: 11;
}

.works-overview__gauge-value {
  fill: none;
  stroke: var(--tone);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: var(--gauge-len);
  stroke-dashoffset: var(--gauge-offset);
  transition: stroke-dashoffset 0.6s var(--w-ease), stroke 0.3s ease;
}

.works-overview[data-view-anim] .works-overview__gauge-value {
  animation: works-overview-gauge 1.1s var(--w-ease) 0.15s both;
}

@keyframes works-overview-gauge {
  from { stroke-dashoffset: var(--gauge-len); }
}

.works-overview__gauge-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}

.works-overview__gauge-text strong {
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  color: var(--ink);
}

.works-overview__gauge-text small {
  padding-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.works-overview__hero-text {
  min-width: 0;
  flex: 1;
}

.works-overview__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone) 70%, var(--ink));
}

.works-overview__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.works-overview__facts {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.works-overview__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-3);
}

.works-overview__chip {
  --tone: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.works-overview__chip--good { background: var(--w-good-soft); color: color-mix(in srgb, var(--w-good) 75%, var(--ink)); }
.works-overview__chip--average { background: var(--w-average-soft); color: #8a6400; }
.works-overview__chip--poor { background: var(--w-poor-soft); color: var(--w-poor); }
.works-overview__chip--ai { background: var(--w-ai-soft); color: var(--w-ai); }

.works-overview__summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: var(--space-3) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.works-overview__summary-icon {
  margin-right: 5px;
  color: var(--w-ai);
}

/* Budget + vigilance */

.works-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.works-overview__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.works-overview__amount-sep {
  color: var(--ink-muted);
  font-weight: 500;
}

.works-overview__amount-unit {
  font-size: 20px;
  color: var(--ink-soft);
}

.works-overview__amount-sub {
  margin: 4px 0 var(--space-3);
  font-size: 12px;
  color: var(--ink-muted);
}

.works-overview__bar {
  display: flex;
  gap: 3px;
  height: 12px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-sunken);
}

.works-overview__seg {
  width: var(--w);
  min-width: 6px;
  height: 100%;
  border-radius: 3px;
  background: var(--seg, var(--ink-muted));
  transform-origin: left center;
  transition: width 0.5s var(--w-ease), filter 0.15s ease;
}

.works-overview__seg:hover {
  filter: brightness(1.12);
}

.works-overview[data-view-anim] .works-overview__bar .works-overview__seg {
  animation: works-overview-grow 0.7s var(--w-ease) both;
  animation-delay: calc(0.35s + var(--i, 0) * 80ms);
}

@keyframes works-overview-grow {
  from { transform: scaleX(0); }
}

.works-overview__seg--floor { --seg: #b07a4a; }
.works-overview__seg--walls { --seg: #6f9ccf; }
.works-overview__seg--ceiling { --seg: #9db7d6; }
.works-overview__seg--humidity { --seg: #2f7fbf; }
.works-overview__seg--joinery { --seg: #7a8c3a; }
.works-overview__seg--electricity { --seg: #e6a700; }
.works-overview__seg--heating { --seg: #e0541f; }
.works-overview__seg--kitchen { --seg: #8b3a3a; }
.works-overview__seg--bathroom { --seg: #3aa6a0; }
.works-overview__seg--energy { --seg: #3a9d4f; }
.works-overview__seg--plumbing { --seg: #4a6fa5; }
.works-overview__seg--doors { --seg: #a07850; }
.works-overview__seg--site { --seg: #8a857a; }

.works-overview__posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.works-overview__post summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  transition: background 0.15s ease;
}

.works-overview__post summary::-webkit-details-marker {
  display: none;
}

.works-overview__post summary:hover {
  background: var(--surface-muted);
}

.works-overview__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--seg);
  flex-shrink: 0;
}

.works-overview__post-label {
  flex: 1;
  font-weight: 600;
}

.works-overview__post-cost {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}

.works-overview__post-chevron {
  color: var(--ink-muted);
  transition: transform 0.25s var(--w-ease);
}

.works-overview__post[open] .works-overview__post-chevron {
  transform: rotate(90deg);
}

.works-overview__post-items {
  list-style: none;
  margin: 0 0 6px 28px;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-soft);
  animation: works-overview-fade 0.25s var(--w-ease);
}

.works-overview__post-items li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.works-overview__post-items em {
  font-style: normal;
  color: var(--ink-muted);
}

.works-overview__post-items li > span:last-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@keyframes works-overview-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.works-overview__copro {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--info-soft);
  color: #1e40af;
  font-size: 12px;
  line-height: 1.45;
}

.works-overview__copro p {
  margin: 0;
}

.works-overview__alerts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.works-overview__alert {
  --tone: var(--w-average);
  --tone-soft: var(--w-average-soft);
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border-left: 3px solid var(--tone);
  background: var(--tone-soft);
}

.works-overview__alert--poor { --tone: var(--w-poor); --tone-soft: var(--w-poor-soft); }
.works-overview__alert--info { --tone: var(--border); --tone-soft: var(--surface-2, rgba(0, 0, 0, 0.03)); }

.works-overview[data-view-anim] .works-overview__alert {
  animation: works-overview-slide 0.4s var(--w-ease) both;
  animation-delay: calc(0.3s + var(--i, 0) * 60ms);
}

@keyframes works-overview-slide {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
}

.works-overview__alert-icon {
  color: var(--tone);
  font-size: 16px;
  padding-top: 1px;
}

.works-overview__alert-body {
  min-width: 0;
  flex: 1;
}

.works-overview__alert-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.works-overview__source {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.works-overview__alert-text {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.works-overview__alert-action {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
}

.works-overview__alert-action .wi {
  width: 14px;
  height: 14px;
}

/* Pièce par pièce */

.works-overview__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-2);
}

.works-overview__tile {
  --tone: var(--w-unknown);
  --tone-soft: var(--w-unknown-soft);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s var(--w-ease), box-shadow 0.2s ease, border-color 0.15s ease;
}

.works-overview__tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tone);
}

.works-overview__tile--good { --tone: var(--w-good); --tone-soft: var(--w-good-soft); }
.works-overview__tile--average { --tone: var(--w-average); --tone-soft: var(--w-average-soft); }
.works-overview__tile--poor { --tone: var(--w-poor); --tone-soft: var(--w-poor-soft); }

.works-overview__tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tone) 50%, var(--border));
  box-shadow: 0 8px 18px rgba(17, 21, 15, 0.08);
}

.works-overview__tile:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

.works-overview[data-view-anim] .works-overview__tile {
  animation: works-overview-pop 0.4s var(--w-ease) both;
  animation-delay: calc(0.25s + var(--i, 0) * 45ms);
}

@keyframes works-overview-pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

.works-overview__tile-media {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--tone-soft);
  color: var(--tone);
  font-size: 20px;
  flex-shrink: 0;
}

.works-overview__tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s var(--w-ease);
}

.works-overview__tile:hover .works-overview__tile-media img {
  transform: scale(1.08);
}

.works-overview__tile-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.works-overview__tile-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.works-overview__tile-state {
  font-size: 12px;
  color: color-mix(in srgb, var(--tone) 70%, var(--ink));
}

.works-overview__tile-issues {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
}

.works-overview__tile-issues.is-poor { background: var(--w-poor-soft); color: var(--w-poor); }
.works-overview__tile-issues.is-average { background: var(--w-average-soft); color: #8a6400; }
.works-overview__tile-issues.is-clear { background: var(--w-good-soft); color: var(--w-good); }
.works-overview__tile-issues.is-review { background: var(--w-average-soft); color: #8a6400; border: 1px dashed #c99a1d; }

.works-overview__tile-review {
  font-style: normal;
  font-weight: 700;
  color: #8a6400;
}

/* Travaux par priorité */

.works-overview__prios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-3);
}

.works-overview__prio {
  --tone: var(--w-unknown);
  --tone-soft: var(--w-unknown-soft);
  min-width: 0;
  padding: var(--space-3);
  border-radius: 14px;
  background: var(--surface-muted);
  border-top: 3px solid var(--tone);
  overflow: hidden;
}

.works-overview__prio--good { --tone: var(--w-good); --tone-soft: var(--w-good-soft); }
.works-overview__prio--average { --tone: var(--w-average); --tone-soft: var(--w-average-soft); }
.works-overview__prio--poor { --tone: var(--w-poor); --tone-soft: var(--w-poor-soft); }

.works-overview__prio-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 var(--space-2);
  font-size: 14px;
}

.works-overview__prio-head .wi {
  color: var(--tone);
}

.works-overview__prio-head span {
  width: 100%;
  font-size: 11px;
  color: var(--ink-muted);
}

.works-overview__prio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.works-overview__prio-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-areas:
    "icon text"
    "icon cost";
  gap: 2px 8px;
  align-items: start;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--surface);
  font-size: 13px;
}

.works-overview__prio-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--tone-soft);
  color: var(--tone);
  font-size: 13px;
}

.works-overview__prio-text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: 600;
  line-height: 1.3;
}

.works-overview__prio-text em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-muted);
}

.works-overview__prio-text small {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.works-overview__prio-cost {
  grid-area: cost;
  justify-self: end;
  max-width: 100%;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  line-height: 1.25;
  text-align: right;
  white-space: normal;
}

/* Énergie */

.works-view--energy .works-overview__energy {
  margin-top: 0;
}

.works-view--energy .works-overview__dpe {
  min-height: min(65vh, 680px);
}

.works-overview__energy {
  container-type: inline-size;
}

.works-overview__dpe-letter {
  padding: 3px 10px;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  background: var(--ink-muted);
}

.works-overview__dpe-letter--A { background: #319834; }
.works-overview__dpe-letter--B { background: #5faa32; }
.works-overview__dpe-letter--C { background: #a7c62c; }
.works-overview__dpe-letter--D { background: #f2d307; color: var(--ink); }
.works-overview__dpe-letter--E { background: #eca40c; }
.works-overview__dpe-letter--F { background: #e2691b; }
.works-overview__dpe-letter--G { background: #d63f28; }

.dpe-house--embedded .dpe-house__hero {
  margin-top: 0;
}

@container (max-width: 600px) {
  .dpe-house--embedded .dpe-house__body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .dpe-house--embedded .dpe-house__panel {
    width: 100%;
    min-height: 0;
  }
}

/* Responsive */

@media (max-width: 900px) {
  .works-side__item--home .works-side__state,
  .works-side__score {
    display: none;
  }

  .works-side__rooms {
    width: auto;
    padding-left: 0;
    border-left: 0;
    margin-left: 0;
  }

  .works-side__list--rooms {
    width: auto;
  }

  .works-overview__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .works-overview__hero {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .works-overview__gauge {
    width: 104px;
    height: 104px;
  }

  .works-overview__gauge-text strong {
    font-size: 28px;
  }

  .works-overview__title {
    font-size: 20px;
  }

  .works-overview__amount {
    font-size: 24px;
  }

  .works-overview__tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .works-planner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "side"
      "main";
  }

  .works-side {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-2) var(--space-3);
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .works-side__section,
  .works-side__section + .works-side__section {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
  }

  .works-side__caption {
    display: none;
  }

  .works-side__list {
    display: flex;
    gap: 4px;
  }

  .works-side__item {
    width: auto;
    padding: 5px 8px;
  }

  .works-side__state {
    display: none;
  }

  .works-side__name {
    max-width: 140px;
  }

  .works-side__icon {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .works-side__add {
    width: auto;
    margin: 0;
    margin-left: 0;
    white-space: nowrap;
  }

  .works-viewer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .works-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .works-steps__item:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .works-modal {
    padding: 0;
  }

  .works-modal .works-modal__dialog {
    height: 100%;
    max-width: none;
    border-radius: 0;
    border: 0;
  }

  .works-modal__header .works-banner {
    font-size: 11px;
    gap: var(--space-2);
  }

  .works-modal__header .works-banner--ai .wi {
    font-size: 16px;
  }

  .works-main {
    padding: var(--space-4);
  }

  .works-photos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .works-room__overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .works-condition .works-chips {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }

  .works-room__name {
    font-size: 18px;
  }

  .works-save__label {
    display: none;
  }

  .works-modal__reset-long {
    display: none;
  }

  .works-modal__reset-short {
    display: inline;
  }

  .works__cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .works *,
  .works-modal *,
  .works-modal .works-modal__dialog,
  .works-ghost,
  .works-ghost * {
    animation: none !important;
    transition: none !important;
  }
}

/* ----------------------- Assistant « Faire une offre » ------------------- */

.detail-head__reject {
  gap: var(--space-2);
}

/* Même gabarit vertical que « Écarter cette annonce » (.status-pipe__reject). */
.detail-head__offer-btn {
  gap: 6px;
  padding: 7px 16px 8px;
  font-size: 13.5px;
  white-space: nowrap;
}

/* Même vert que le sélecteur de projet (« Résidence principale », .project-dropdown). */
.detail-head__offer-btn.offer-cta {
  background: var(--green-600);
  border-color: var(--green-600);
  box-shadow: 0 6px 16px rgba(46, 139, 107, 0.22);
}

.detail-head__offer-btn.offer-cta:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  box-shadow: 0 10px 22px rgba(46, 139, 107, 0.28);
}

/* Bouton d'appel « Faire une offre » : même traitement lumineux que le bouton
   « Dossier technique » (works__cta) — balayage brillant au survol + lueur. */
.offer-cta {
  --offer-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(11, 61, 44, 0.22);
  transition: transform 0.2s var(--offer-ease), box-shadow 0.2s ease,
    background 0.15s ease;
}

.offer-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(200, 247, 81, 0.35) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.6s var(--offer-ease);
}

.offer-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(11, 61, 44, 0.28);
}

.offer-cta:hover::after {
  transform: translateX(120%);
}

.offer-cta .wi {
  width: 16px;
  height: 16px;
  color: var(--lime);
}

/* Lueur d'appel discrète pour attirer l'oeil, comme le dossier technique. */
.offer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(200, 247, 81, 0);
  animation: offer-cta-pulse 3.4s var(--offer-ease, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
  pointer-events: none;
}

@keyframes offer-cta-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(200, 247, 81, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(200, 247, 81, 0.18);
  }
}

.offer-modal .offer-modal__dialog {
  max-width: 840px;
  width: 100%;
  height: min(90vh, 760px);
  padding: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.offer-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-muted));
}

.offer-modal__title {
  font-size: 20px;
  line-height: 1.2;
}

.offer-modal__lead {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 42rem;
}

/* Indicateur d'étapes */
.offer-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
}

.offer-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.offer-step[disabled] {
  cursor: default;
}

.offer-step__dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--ink-soft);
  font-size: 12px;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.offer-step__dot .wi {
  width: 14px;
  height: 14px;
}

.offer-step--current .offer-step__dot {
  background: var(--green-600);
  color: #fff;
}

.offer-step--done .offer-step__dot {
  background: var(--green-100);
  color: var(--green-800);
}

.offer-step--current {
  color: var(--ink);
}

.offer-step__sep {
  flex: 1 1 10px;
  min-width: 8px;
  height: 1px;
  background: var(--border);
}

@media (max-width: 560px) {
  .offer-step__label {
    display: none;
  }
}

/* Corps de l'assistant */
.offer-modal__body {
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  background: var(--surface);
}

.offer-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: offer-view-in 0.2s ease;
}

@keyframes offer-view-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.offer-view__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.offer-view__eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-600);
}

.offer-view__title {
  font-size: 19px;
  line-height: 1.25;
}

.offer-view__lead {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.offer-view__note {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.offer-view__note .wi {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--green-600);
}

.offer-view__note--warn {
  color: #7a5200;
}

.offer-view__note--warn .wi {
  color: #c08a00;
}

.offer-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.offer-amounts-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.offer-amounts-fields__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 520px) {
  .offer-amounts-fields__row {
    grid-template-columns: 1fr;
  }
}

.offer-amounts__recap-title {
  margin: var(--space-2) 0 0;
  font-size: 14px;
  font-weight: 600;
}

.offer-card.is-disabled {
  opacity: 0.55;
}

.offer-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.offer-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.offer-field__hint {
  font-size: 12.5px;
  color: var(--ink-soft);
}

.offer-amount {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 220px;
}

.offer-amount__input {
  padding-right: 32px;
  font-variant-numeric: tabular-nums;
}

.offer-amount__unit {
  position: absolute;
  right: 12px;
  color: var(--ink-soft);
  font-size: 13px;
  pointer-events: none;
}

.offer-amount--stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: none;
}

.offer-amount--stepper .amount-stepper {
  width: min(100%, 7.75rem);
}

.offer-amount--stepper .offer-amount__input {
  width: 100%;
  padding-right: 34px;
}

.offer-amount--stepper .offer-amount__unit--after-stepper {
  position: static;
  flex-shrink: 0;
}

.offer-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--green-600);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.offer-gap {
  font-weight: 700;
}

.offer-gap--down {
  color: var(--green-600);
}

.offer-gap--up {
  color: var(--danger);
}

/* Récapitulatif financier */
.offer-recap {
  gap: 0;
  padding: 4px var(--space-4);
}

.offer-recap__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.offer-recap__row:last-child {
  border-bottom: none;
}

.offer-recap__row span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.offer-recap__row--total {
  font-weight: 700;
}

.offer-recap__row--strong {
  font-weight: 600;
}

.offer-recap__hint {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 400;
}

/* Clauses suspensives */
.offer-clauses-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-3);
}

.offer-clauses__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.offer-clauses__lead {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.offer-clauses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

@media (min-width: 520px) {
  .offer-clauses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offer-clauses:has(> .offer-clause:only-child) > .offer-clause {
    grid-column: 1 / -1;
    max-width: calc(50% - 5px);
  }
}

.offer-clause {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  min-height: 5.5rem;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.offer-clause.is-on {
  border-color: var(--green-600);
  background: var(--green-100);
}

.offer-clause__check {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--green-600);
}

.offer-clause__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.offer-clause__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.offer-clause__title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.offer-clause__desc {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.offer-clause__help {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: help;
  line-height: 0;
}

.offer-clause__help-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.offer-clause__help:hover .offer-clause__help-mark,
.offer-clause__help:focus-visible .offer-clause__help-mark {
  background: var(--surface-sunken, #ebe8e0);
  border-color: var(--border-strong);
  color: var(--ink-soft);
}

.offer-clause__help:focus-visible {
  outline: none;
}

.offer-clause__help:focus-visible .offer-clause__help-mark {
  outline: 2px solid var(--ink-muted);
  outline-offset: 2px;
}

/* Infobulle au-dessus du « ? » (texte long, lisible dans la modale). */
.offer-modal .offer-clause__help[data-tooltip]::after,
.offer-modal .offer-clause__help[data-tooltip]::before {
  top: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  right: auto;
  transform: translate(-50%, 4px);
}

.offer-modal .offer-clause__help[data-tooltip]::after {
  white-space: normal;
  max-width: min(17.5rem, calc(100vw - 2.5rem));
  width: max-content;
  text-align: left;
  font-weight: 500;
  line-height: 1.45;
}

.offer-modal .offer-clause__help[data-tooltip]::before {
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translate(-50%, 0) rotate(45deg);
}

.offer-modal .offer-clause__help[data-tooltip]:hover::after,
.offer-modal .offer-clause__help[data-tooltip]:focus-visible::after {
  transform: translate(-50%, 0);
}

.offer-modal .offer-clause__help[data-tooltip]:hover::before,
.offer-modal .offer-clause__help[data-tooltip]:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.offer-clause-group {
  display: flex;
  flex-direction: column;
}

.offer-clause-group:has(.offer-clause__fields) .offer-clause {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.offer-clause__fields {
  padding: 12px 14px 14px;
  border: 1px solid var(--green-600);
  border-top: 0;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  background: var(--surface);
}

.offer-clause__grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 520px) {
  .offer-clause__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Étape email */
.offer-email {
  display: flex;
  flex-direction: column;
}

.offer-email__letter {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(11, 61, 44, 0.04),
    0 10px 28px rgba(11, 61, 44, 0.07);
  overflow: hidden;
}

.offer-email__letter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 14px 12px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-muted) 0%, var(--surface) 100%);
}

.offer-email__subject {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
  font-size: 14px;
}

.offer-email__subject-text {
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  word-break: break-word;
}

.offer-email__letter-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.offer-email__edit-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.offer-email__edit-btn:hover {
  color: var(--text);
  border-color: var(--green-600);
  background: rgba(46, 139, 107, 0.06);
}

.offer-email__edit-btn .wi {
  width: 16px;
  height: 16px;
}

.offer-email__edit-btn--done {
  color: var(--green-800);
  border-color: rgba(46, 139, 107, 0.35);
  background: rgba(46, 139, 107, 0.08);
}

.offer-email__preview {
  position: relative;
  padding: 18px 20px 14px;
  max-height: min(44vh, 380px);
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  cursor: default;
  user-select: text;
}

.offer-email__preview:focus-visible {
  outline: 2px solid rgba(46, 139, 107, 0.45);
  outline-offset: -2px;
}

.offer-email__para {
  margin: 0 0 0.55em;
}

.offer-email__para:last-of-type {
  margin-bottom: 0;
}

.offer-email__spacer {
  height: 0.65em;
}

.offer-email__list {
  margin: 0.25em 0 0.75em;
  padding-left: 1.15em;
}

.offer-email__list li {
  margin-bottom: 0.5em;
  padding-left: 0.15em;
}

.offer-email__list li::marker {
  color: var(--green-600);
}

.offer-email__preview-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.offer-email__preview-hint .wi {
  width: 14px;
  height: 14px;
  opacity: 0.75;
}

.offer-email--editing .offer-email__preview-hint {
  display: none;
}

.offer-email__editor {
  padding: 14px 16px 16px;
  background: var(--surface-muted);
}

.offer-email__editor-hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.offer-email__text {
  width: 100%;
  min-height: 220px;
  max-height: min(44vh, 380px);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  resize: vertical;
}

.offer-email__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.offer-email__actions-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Pied de l'assistant */
.offer-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.offer-modal__footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.offer-modal__footer [hidden] {
  display: none !important;
}

/* Toast */
.offer-toast {
  position: absolute;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--ink-inverse, #fff);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-raised);
  animation: offer-toast-in 0.18s ease;
  z-index: 2;
}

.offer-toast.is-leaving {
  animation: offer-toast-out 0.2s ease forwards;
}

@keyframes offer-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

@keyframes offer-toast-out {
  to {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

@media (max-width: 560px) {
  .detail-head__offer-label-full {
    display: none;
  }

  .detail-head__offer-label-short {
    display: inline;
  }

  .offer-modal .offer-modal__dialog {
    height: 100vh;
    max-width: none;
    border-radius: 0;
  }
}

.detail-head__offer-label-short {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .offer-view,
  .offer-toast {
    animation: none;
  }

  .offer-cta::before {
    animation: none;
  }

  .offer-cta::after,
  .offer-cta:hover {
    transition: none;
  }
}

/* ============================ Fiche de visite ============================ */
/* La page elle-même (/listings/:id/visite) a sa feuille dédiée : visit.css.
   Ne restent ici que le bouton de la fiche annonce et les badges de provenance. */

.detail-head__visit-label-short {
  display: none;
}

@media (max-width: 560px) {
  .detail-head__visit-label-full {
    display: none;
  }

  .detail-head__visit-label-short {
    display: inline;
  }
}

/* Badge de provenance d'une valeur (pattern badge-source). */
.visit-source {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-soft);
}

.visit-source--structured {
  background: var(--surface-sunken);
  color: var(--ink-soft);
}

.visit-source--description {
  background: var(--info-soft);
  color: var(--info);
}

.visit-source--ai_photo {
  background: var(--gold-soft);
  color: var(--gold-ink);
}

.visit-source--user {
  background: var(--green-100);
  color: var(--green-800);
}

.visit-source--computed {
  background: transparent;
  color: var(--ink-muted);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.visit-source--reference {
  background: var(--warn-soft);
  color: var(--warn);
}

/* Badge de provenance + ancienne valeur dans les caractéristiques de la fiche. */
.kv__value .visit-source {
  margin-left: 6px;
  vertical-align: middle;
}

/* Fiche annonce — Caractéristiques : badge de source à droite de la cellule valeur. */
#listing-specs .kv--grid .kv__value .visit-source {
  margin-left: auto;
  flex-shrink: 0;
}

/* Provenance : tooltip-data (#pattern-tooltip-data), au-dessus du badge (à droite
   de la grille, la bulle générique déborderait). Délai avant ouverture, repli immédiat. */
#listing-specs .visit-source[data-tooltip]::after,
#listing-specs .kv__prev[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 10px);
  left: auto;
  right: 0;
  transform: translate(8px, 10px);
  transition:
    opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s;
}

#listing-specs .visit-source[data-tooltip]::before,
#listing-specs .kv__prev[data-tooltip]::before {
  top: auto;
  bottom: calc(100% + 4px);
  left: 50%;
  right: auto;
  transform: translate(-50%, 10px) rotate(45deg);
  transition:
    opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s;
}

#listing-specs .visit-source[data-tooltip]:hover::after,
#listing-specs .visit-source[data-tooltip]:focus-visible::after,
#listing-specs .kv__prev[data-tooltip]:hover::after,
#listing-specs .kv__prev[data-tooltip]:focus-visible::after {
  transform: translate(0, 0);
  transition-delay: 0.42s;
}

#listing-specs .visit-source[data-tooltip]:hover::before,
#listing-specs .visit-source[data-tooltip]:focus-visible::before,
#listing-specs .kv__prev[data-tooltip]:hover::before,
#listing-specs .kv__prev[data-tooltip]:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
  transition-delay: 0.42s;
}

#listing-specs .visit-source[data-tooltip]:not(:hover):not(:focus-visible)::after,
#listing-specs .visit-source[data-tooltip]:not(:hover):not(:focus-visible)::before,
#listing-specs .kv__prev[data-tooltip]:not(:hover):not(:focus-visible)::after,
#listing-specs .kv__prev[data-tooltip]:not(:hover):not(:focus-visible)::before {
  transition-duration: 0.12s;
  transition-delay: 0s;
}

#listing-specs .visit-source[data-tooltip]::after,
#listing-specs .kv__prev[data-tooltip]::after {
  box-sizing: border-box;
  width: max-content;
  max-width: min(20rem, calc(100vw - 2rem));
  white-space: normal;
  text-align: left;
  font-weight: 500;
  line-height: 1.35;
}

.kv__prev {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
}

button.kv__prev {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: color 0.15s ease;
}

@media (hover: hover) {
  button.kv__prev:hover,
  button.kv__prev:focus-visible {
    color: var(--ink-soft);
  }
}

button.kv__prev:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.kv__prev .wi {
  width: 12px;
  height: 12px;
}

/* Édition inline : double-clic sur la valeur, badge à droite de la cellule */
#listing-specs .listing-spec-value {
  position: relative;
  align-items: center;
  column-gap: 4px;
}

#listing-specs .listing-spec-value--editing {
  align-items: center;
}

/* Hauteur de ligne stable à l'ouverture de l'input d'édition inline. */
#listing-specs .kv--grid .kv__key,
#listing-specs .kv--grid .kv__value {
  align-items: center;
  padding-block: calc(var(--space-2) + 1px);
  min-height: calc(1.5em + 2 * (var(--space-2) + 1px));
}

#listing-specs .listing-spec-value__hover-hint {
  flex: 0 0 auto;
  align-self: center;
  width: 0;
  max-width: 0;
  padding-right: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

#listing-specs .kv__key__label {
  transition: opacity 0.15s ease;
}

@media (hover: hover) {
  #listing-specs .kv__key,
  #listing-specs .kv__value {
    transition: background-color 0.15s ease;
  }

  #listing-specs .kv__key:hover,
  #listing-specs .kv__key:has(+ .kv__value:hover),
  #listing-specs .kv__key:hover + .kv__value,
  #listing-specs .kv__value:hover {
    background-color: var(--surface-muted);
  }

  #listing-specs .kv__key--editable:hover,
  #listing-specs .kv__key--editable:has(+ [data-listing-field-edit]:hover),
  #listing-specs .kv__key--editable:hover + [data-listing-field-edit],
  #listing-specs [data-listing-field-edit]:hover,
  #listing-specs [data-listing-field-edit]:hover .listing-spec-value__text,
  #listing-specs [data-modal-dblclick]:hover,
  #listing-specs [data-modal-dblclick]:hover .listing-spec-value__text {
    cursor: pointer;
  }

  #listing-specs
    .listing-spec-value:has(> .listing-spec-value__hover-hint):hover
    .listing-spec-value__hover-hint {
    width: auto;
    max-width: 12rem;
    padding-right: 6px;
    opacity: 0.48;
  }

  #listing-specs
    .listing-spec-value--static-hint:has(> .listing-spec-value__hover-hint):hover
    .listing-spec-value__hover-hint {
    max-width: 14rem;
  }

  #listing-specs
    .listing-spec-value:has(> .listing-spec-value__hover-hint):hover
    .listing-spec-value__source,
  #listing-specs
    .listing-spec-value:has(> .listing-spec-value__hover-hint):hover
    .listing-spec-value__prev {
    margin-left: 0;
  }

}

#listing-specs .listing-spec-value__text {
  flex: 1 1 auto;
  order: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  line-height: 1.2;
  color: inherit;
  text-align: left;
  cursor: inherit;
  transition: opacity 0.15s ease;
}

#listing-specs .listing-spec-value__text:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

#listing-specs .listing-spec-value__source {
  margin-left: auto;
}

/* Ancienne valeur à gauche du badge : c'est elle qui absorbe l'espace libre. */
#listing-specs .listing-spec-value__prev {
  margin-left: auto;
  flex-shrink: 0;
}

#listing-specs .kv--grid .kv__value .listing-spec-value__prev + .visit-source {
  margin-left: 6px;
}

#listing-specs .listing-spec-value__form {
  flex: 0 1 auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  order: 0;
}

#listing-specs .listing-spec-value__hover-hint,
#listing-specs .listing-spec-value__source,
#listing-specs .listing-spec-value__prev {
  order: 1;
}

#listing-specs .listing-spec-value--editing .listing-spec-value__form {
  flex: 0 1 auto;
  margin-right: auto;
}

#listing-specs .listing-spec-value__input {
  flex: 0 0 auto;
  width: min(14rem, 100%);
  max-width: 14rem;
  min-width: 6.5rem;
  /* Compact mais un peu plus confortable que la valeur seule (contour hors flux). */
  box-sizing: border-box;
  appearance: none;
  margin: 0;
  padding: 2px var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  line-height: 1.35;
  height: 1.5em;
  min-height: 0;
  vertical-align: baseline;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

#listing-specs .listing-spec-value__input:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--green-600),
    0 0 0 3px var(--green-100);
}

#listing-specs .listing-spec-value__error {
  flex: 1 1 100%;
  margin: 0;
  max-width: 16rem;
}

@media (prefers-reduced-motion: reduce) {
  #listing-specs .kv__key,
  #listing-specs .kv__value,
  #listing-specs .listing-spec-value__text,
  #listing-specs .listing-spec-value__hover-hint,
  #listing-specs .kv__key__label,
  button.kv__prev,
  #listing-specs .visit-source[data-tooltip]::after,
  #listing-specs .visit-source[data-tooltip]::before,
  #listing-specs .kv__prev[data-tooltip]::after,
  #listing-specs .kv__prev[data-tooltip]::before {
    transition: none;
  }

  #listing-specs .visit-source[data-tooltip]:hover::after,
  #listing-specs .visit-source[data-tooltip]:focus-visible::after,
  #listing-specs .kv__prev[data-tooltip]:hover::after,
  #listing-specs .kv__prev[data-tooltip]:focus-visible::after,
  #listing-specs .visit-source[data-tooltip]:hover::before,
  #listing-specs .visit-source[data-tooltip]:focus-visible::before,
  #listing-specs .kv__prev[data-tooltip]:hover::before,
  #listing-specs .kv__prev[data-tooltip]:focus-visible::before {
    transition-delay: 0s;
  }
}