.immeubles {
  padding: clamp(88px, 12vw, 170px) 0;
  color: var(--ardoise);
  background: var(--blanc);
}

.immeubles__entete {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(18rem, 1.15fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(2.75rem, 6vw, 5rem);
}

.immeubles__entete h2 { max-width: 11ch; }
.immeubles__entete p:last-child {
  max-width: 38rem;
  margin-bottom: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.23rem);
}

.liste-immeubles {
  margin: 0;
  padding: 0;
  list-style: none;
}

.immeuble,
.immeuble__carte,
.immeuble__introduction,
.immeuble dl { min-width: 0; }

.immeuble__carte { height: 100%; }
.immeuble__repere {
  margin: 0 0 .85rem;
  color: var(--vert);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.immeuble h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.immeuble dl {
  display: grid;
  gap: .85rem;
  margin: 0;
}

.immeuble__ligne { display: grid; gap: .15rem; }
.immeuble dt {
  color: var(--vert-nuit, var(--vert-profond, var(--vert-sombre, var(--vert))));
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.immeuble dd { margin: 0; }
.immeuble__disponibilite {
  margin-top: .4rem;
  padding-top: 1rem;
  border-top: 2px solid var(--vert);
}

.immeuble__disponibilite a {
  color: inherit;
  font-weight: 750;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

.immeuble__disponibilite a:focus-visible {
  border-radius: 2px;
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.immeuble__media {
  margin: 0;
  overflow: hidden;
  background: var(--calcaire);
}

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

/* Modèle A — trame architecturale */
.immeubles[data-presentation-immeubles="architecturale"] .liste-immeubles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--calcaire);
  border-left: 1px solid var(--calcaire);
  background-image: linear-gradient(90deg, transparent calc(50% - .5px), var(--calcaire) 50%, transparent calc(50% + .5px));
}

.immeubles[data-presentation-immeubles="architecturale"] .immeuble {
  border-right: 1px solid var(--calcaire);
  border-bottom: 1px solid var(--calcaire);
}

.immeubles[data-presentation-immeubles="architecturale"] .immeuble__carte {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.25rem);
}

.immeubles[data-presentation-immeubles="architecturale"] .immeuble__carte::before {
  position: absolute;
  top: 0;
  left: clamp(1.4rem, 3vw, 2.25rem);
  width: 2.75rem;
  height: 3px;
  content: "";
  background: var(--vert);
}

.immeubles[data-presentation-immeubles="architecturale"] .immeuble h3 {
  max-width: 22ch;
  margin-bottom: 1.35rem;
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
}

/* Modèle B — répertoire éditorial */
.immeubles[data-presentation-immeubles="editoriale"] { background: var(--brume); }
.immeubles[data-presentation-immeubles="editoriale"] .immeubles__entete {
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 3px solid var(--ardoise);
}

.immeubles[data-presentation-immeubles="editoriale"] .liste-immeubles { counter-reset: registre-immeubles; }
.immeubles[data-presentation-immeubles="editoriale"] .immeuble {
  counter-increment: registre-immeubles;
  border-bottom: 1px solid rgba(24, 45, 47, .24);
}

.immeubles[data-presentation-immeubles="editoriale"] .immeuble__carte {
  display: grid;
  grid-template-columns: minmax(17rem, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(2.25rem, 5vw, 4.5rem) 0;
}

.immeubles[data-presentation-immeubles="editoriale"] .immeuble__introduction {
  position: relative;
  padding-left: clamp(3.4rem, 6vw, 5.4rem);
}

.immeubles[data-presentation-immeubles="editoriale"] .immeuble__introduction::before {
  position: absolute;
  top: -.18em;
  left: 0;
  content: counter(registre-immeubles, decimal-leading-zero);
  color: var(--vert);
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 4.75rem);
  line-height: 1;
  letter-spacing: -.06em;
}

.immeubles[data-presentation-immeubles="editoriale"] .immeuble__repere {
  margin-bottom: .55rem;
  color: var(--ardoise);
}

.immeubles[data-presentation-immeubles="editoriale"] .immeuble h3 {
  max-width: 18ch;
  font-size: clamp(2rem, 4vw, 3.8rem);
}

.immeubles[data-presentation-immeubles="editoriale"] .immeuble dl {
  grid-template-columns: minmax(9rem, .72fr) minmax(0, 1.28fr);
  gap: 1.35rem clamp(1.5rem, 4vw, 4rem);
  align-content: start;
}

.immeubles[data-presentation-immeubles="editoriale"] .immeuble__ligne--intervention,
.immeubles[data-presentation-immeubles="editoriale"] .immeuble__ligne--locataires,
.immeubles[data-presentation-immeubles="editoriale"] .immeuble__disponibilite {
  grid-column: 1 / -1;
}

.immeubles[data-presentation-immeubles="editoriale"] .immeuble__disponibilite {
  display: grid;
  grid-template-columns: minmax(9rem, .72fr) minmax(0, 1.28fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: .3rem;
  padding: 1.15rem 0 0;
}

/* Modèle C — portefeuille immersif */
.immeubles[data-presentation-immeubles="immersive"] {
  color: var(--blanc);
  background: var(--vert-nuit, var(--ardoise));
}

.immeubles[data-presentation-immeubles="immersive"] .immeubles__entete { align-items: start; }
.immeubles[data-presentation-immeubles="immersive"] .immeubles__entete p,
.immeubles[data-presentation-immeubles="immersive"] .immeubles__entete h2 { color: var(--blanc); }

.immeubles[data-presentation-immeubles="immersive"] .liste-immeubles {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  counter-reset: portfolio-immeubles;
}

.immeubles[data-presentation-immeubles="immersive"] .immeuble {
  grid-column: span 6;
  counter-increment: portfolio-immeubles;
}

.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(1),
.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(6),
.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(7) { grid-column: span 7; }
.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(2),
.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(5),
.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(8) { grid-column: span 5; }
.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(3) { grid-column: span 4; }
.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(4) { grid-column: span 8; }

.immeubles[data-presentation-immeubles="immersive"] .immeuble__carte {
  position: relative;
  overflow: hidden;
  color: var(--ardoise);
  background: var(--brume);
}

.immeubles[data-presentation-immeubles="immersive"] .immeuble:not(.immeuble--avec-image) .immeuble__carte {
  min-height: 100%;
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
}

.immeubles[data-presentation-immeubles="immersive"] .immeuble:not(.immeuble--avec-image) .immeuble__carte::after {
  position: absolute;
  right: -.05em;
  bottom: -.22em;
  z-index: 0;
  content: counter(portfolio-immeubles, decimal-leading-zero);
  color: var(--vert);
  font-family: var(--serif);
  font-size: clamp(8rem, 16vw, 15rem);
  line-height: 1;
  opacity: .09;
  pointer-events: none;
}

.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(4):not(.immeuble--avec-image) .immeuble__carte {
  color: var(--blanc);
  background: var(--vert);
}

.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(4):not(.immeuble--avec-image) .immeuble__carte::after { color: var(--blanc); }
.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(4) dt,
.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(4) .immeuble__repere { color: var(--blanc); }

.immeubles[data-presentation-immeubles="immersive"] .immeuble__introduction,
.immeubles[data-presentation-immeubles="immersive"] .immeuble dl {
  position: relative;
  z-index: 1;
}

.immeubles[data-presentation-immeubles="immersive"] .immeuble--avec-image .immeuble__introduction {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0;
}

.immeubles[data-presentation-immeubles="immersive"] .immeuble--avec-image dl {
  padding: 0 clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 3rem);
}

.immeubles[data-presentation-immeubles="immersive"] .immeuble__media { aspect-ratio: 16 / 9; }
.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(2) .immeuble__media,
.immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(6) .immeuble__media { aspect-ratio: 4 / 3; }

.immeubles[data-presentation-immeubles="immersive"] .immeuble h3 {
  max-width: 19ch;
  margin-bottom: clamp(1.35rem, 2.5vw, 2.25rem);
  font-size: clamp(1.8rem, 3.3vw, 3.35rem);
}

.immeubles[data-presentation-immeubles="immersive"] .immeuble dl { gap: 1rem; }
.immeubles[data-presentation-immeubles="immersive"] .immeuble__disponibilite { border-color: currentColor; }

@media (max-width: 1080px) {
  .immeubles[data-presentation-immeubles="editoriale"] .immeuble__carte {
    grid-template-columns: minmax(15rem, .9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 3rem);
  }

  .immeubles[data-presentation-immeubles="immersive"] .immeuble,
  .immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(n) { grid-column: span 6; }
}

@media (max-width: 760px) {
  .immeubles__entete,
  .immeubles[data-presentation-immeubles="editoriale"] .immeubles__entete { grid-template-columns: 1fr; }
  .immeubles__entete h2 { max-width: 15ch; }

  .immeubles[data-presentation-immeubles="architecturale"] .liste-immeubles {
    grid-template-columns: 1fr;
    background-image: none;
  }

  .immeubles[data-presentation-immeubles="editoriale"] .immeuble__carte { grid-template-columns: 1fr; }
  .immeubles[data-presentation-immeubles="editoriale"] .immeuble h3 { max-width: 20ch; }

  .immeubles[data-presentation-immeubles="immersive"] .immeuble,
  .immeubles[data-presentation-immeubles="immersive"] .immeuble:nth-child(n) { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .immeubles[data-presentation-immeubles="editoriale"] .immeuble__carte { gap: 1.75rem; }
  .immeubles[data-presentation-immeubles="editoriale"] .immeuble dl { grid-template-columns: 1fr; }
  .immeubles[data-presentation-immeubles="editoriale"] .immeuble__ligne,
  .immeubles[data-presentation-immeubles="editoriale"] .immeuble__disponibilite { grid-column: 1; }

  .immeubles[data-presentation-immeubles="editoriale"] .immeuble__disponibilite {
    grid-template-columns: 1fr;
    gap: .25rem;
  }
}

@media (forced-colors: active) {
  .immeubles,
  .immeuble__carte { color: CanvasText !important; background: Canvas !important; }
  .liste-immeubles,
  .immeuble,
  .immeuble__carte,
  .immeuble__disponibilite { border-color: CanvasText !important; }
  .immeuble__repere,
  .immeuble dt { color: CanvasText !important; }
  .immeuble__media { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .immeuble__media img { transition: none; }
}