:root {
  --rei-agency-red:#d0103a; /* brand */
  --rei-broker-yellow:#ffd400;
  --rei-portrait-gray:#333333;

  /* Light */
  --rei-bg:#ffffff;
  --rei-surface: #f5f6f7;
  --rei-text: #0f172a;
  --rei-muted: #334155;
  --rei-border: rgba(15,23,42,.12);
  --rei-shadow: 0 10px 30px rgba(2,6,23,.10);

  --rei-radius: 16px;
  --rei-pad: 14px;
  --rei-gap: 12px;

  --rei-cta: #0f172a;
  --rei-ctaText: #ffffff;
  --rei-ghostText: var(--rei-cta);
  --rei-ghostBorder: var(--rei-border);

  /* Portal*/
  --rei-immo-bg: #eee;
}

@media (prefers-color-scheme: dark) {
  :root{
    --rei-bg: #0b0f17;
    --rei-surface: #101826;
    --rei-text: #e5e7eb;
    --rei-muted: #cbd5e1;
    --rei-border: rgba(226,232,240,.12);
    --rei-shadow: 0 10px 30px rgba(0,0,0,.45);

    --rei-cta: #e5e7eb;
    --rei-ctaText: #0b0f17;
    --rei-ghostText: #e5e7eb;
    --rei-ghostBorder: rgba(226,232,240,.18);

    /* Portal*/
    --rei-immo-bg: #121212;
  }
}

.real-estate-info {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.real-estate-info__inner {
  border-radius: var(--rei-radius);
  border-left: 9px solid var(--rei-agency-red);
  background: var(--rei-immo-bg);
  box-shadow: var(--rei-shadow);
  display: grid;
  gap: var(--rei-gap);
  padding: var(--rei-pad);
  padding-left: calc(var(--rei-pad) + 10px);
  color: var(--rei-text);
  line-height: 1.25;
}

.real-estate-info__wrapper {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  .real-estate-info__copy {
    margin: 2ex 0 3ex 0;
  }
}

/* Header: logos à gauche, portrait en haut à droite (ex-v4) */
.real-estate-info__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.real-estate-info__logos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap; /* 2e logo peut passer à la ligne */
  align-items: center;
  max-width: 100%;
}

/* Logos : tailles “placeholder-friendly” */
.real-estate-info__logo {
  display:block;
  height:96px;
  width:auto;
}

/* Portrait (carré, en haut à droite) */
.real-estate-info__portrait {
  width:84px;
  height:84px;
  object-fit:cover;
  border-radius: 9px;
  border-right: 4px solid var(--rei-agency-red);
  background:var(--rei-portrait-gray);
  flex:0 0 auto;
}

/* Texte */
.real-estate-info__heading {
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: .1px;
  text-transform: uppercase;
  position: relative;
  line-height: 1.78;
}

.real-estate-info__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 9.41em;
  height: 8px;
  background: var(--rei-agency-red);
}

.real-estate-info__desc {
  margin: 0;
  color: var(--rei-muted);
  font-size: 14px;
  line-height: 1.35;
}

/* Actions */
.real-estate-info__actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.real-estate-info__btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  min-height:40px;
  user-select:none;
  white-space:nowrap;
}

.real-estate-info__btn--primary {
  background:var(--rei-cta);
  color:var(--rei-ctaText);
}

.real-estate-info__btn--ghost {
  background:transparent;
  color:var(--rei-ghostText);
  border-color:var(--rei-ghostBorder);
}

.real-estate-info__phone {
  margin-left: auto;
  font-weight: 510;
  text-decoration: none;
  color: var(--rei-agency-red);
  white-space: nowrap;
  font-size: 1.75rem; /* 28px / 16px */
}

@media (prefers-color-scheme: dark) {
  .real-estate-info__phone{ background:rgba(255,255,255,.03); }
}

/* Desktop-ish */
@media (min-width: 860px) {
  .real-estate-info__inner{
    padding:18px;
    padding-left:calc(18px + 10px);
    background:var(--rei-immo-bg);
  }
  .real-estate-info__portrait{
    width:96px;
    height:96px;
  }
  .real-estate-info__heading{ font-size:18px; }
  .real-estate-info__desc{ font-size:15px; }
}

/* Focus a11y */
.real-estate-info a:focus-visible {
  outline: 3px solid rgba(255,212,0,.55);
  outline-offset: 3px;
  border-radius: 12px;
}

.real-estate-info__logo--agency {
  background-repeat: no-repeat;
  text-indent: -9999px;
  min-width: 256px;
  margin-right: 1em;

  @media (prefers-color-scheme:light) {
    background-image: url('images/proprio-direct.svg');
  }

  @media (prefers-color-scheme:dark) {
    background-image: url('images/proprio-direct-outline.svg');
  }
}

.real-estate-info__logo--broker {
  background-repeat: no-repeat;
  text-indent: -9999px;
  min-width: 256px;
  @media (prefers-color-scheme:light) {
    background-image: url('images/jrb-courtier-noir-min.svg');
  }

  @media (prefers-color-scheme:dark) {
    background-image: url('images/jrb-courtier-blanc-min.svg');
  }
}