/* Comparateur logement — responsive corrigé */

/* Neutralise la sidebar globale du site si la page est rendue dans le layout standard */
.layout:has(.page-logement){
  display:block!important;
  grid-template-columns:1fr!important;
  max-width:1600px!important;
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.layout:has(.page-logement) .sidebar{
  display:none!important;
}
.layout:has(.page-logement) .content-card{
  width:100%!important;
  max-width:1600px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.page-logement{
  width:100%;
  max-width:1600px;
  margin:0 auto;
}
.page-logement .breadcrumb{
  font-size:13px;
  color:#52627a;
  margin-bottom:14px;
}

.logement-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  width:100%;
  margin:24px auto;
}

.logement-card{
  width:100%;
  min-width:0;
  background:linear-gradient(180deg,#fff,#f8fbff);
  border:1px solid #dfe7f2;
  border-radius:22px;
  box-shadow:0 18px 44px rgba(7,25,54,.08);
  padding:24px;
}
.logement-card h2{
  font-size:20px!important;
  margin:0 0 18px!important;
}

.housing-result-empty{
  color:#5b6880;
  font-weight:750;
  line-height:1.6;
}
.housing-result-main{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  align-items:center;
  gap:18px;
}
.housing-percentile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:92px;
  border-radius:24px;
  background:linear-gradient(135deg,#075bd8,#18a957);
  color:#fff;
  font-size:54px;
  font-weight:1000;
  letter-spacing:-.07em;
  box-shadow:0 18px 40px rgba(36,107,254,.24);
}
.housing-result-title{
  font-weight:1000;
  font-size:22px;
  line-height:1.2;
  color:#071936;
}
.housing-result-subtitle{
  margin-top:6px;
  color:#263957;
  font-weight:750;
}
.housing-gauge{
  margin:24px 0 18px;
}
.housing-gauge__track{
  height:30px;
  border-radius:999px;
  background:#eaf1fb;
  border:1px solid #d6e1ee;
  position:relative;
  box-shadow:inset 0 2px 6px rgba(7,25,54,.10);
}
.housing-gauge__fill{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#1d63f0,#22c55e);
  transition:width 1.2s cubic-bezier(.2,.9,.2,1);
}
.housing-gauge__tick{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:34px;
  font-size:12px;
  font-weight:900;
  color:#071936;
}
.housing-stat-block{
  margin:22px 0 18px;
}
.housing-stat-label{
  font-size:13px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#16a34a;
  margin-bottom:8px;
}
.housing-rent-result{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.45;
  color:#263957;
  font-weight:800;
}
.housing-gauge--rent .housing-gauge__fill{
  background:linear-gradient(90deg,#f59e0b,#ef4444);
}
.housing-score{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  margin:12px 0 18px;
  padding:10px 14px;
  border-radius:999px;
  background:#eef5ff;
  color:#071936;
  font-weight:900;
}
.housing-score span{
  font-size:30px;
  color:#16a34a;
}
.housing-score small{
  font-size:13px;
  color:#52627a;
}
#housingChart{
  max-width:100%;
  margin-top:8px;
}
.logement-reading{
  margin-top:10px!important;
}
.logement-reading h2{
  font-size:18px!important;
  color:#16a34a!important;
  text-transform:uppercase;
  letter-spacing:.10em;
}

.measure-input-wrap,
.salary-input-wrap{
  position:relative;
  display:inline-block;
  width:180px;
  max-width:100%;
}
.measure-input-wrap input,
.salary-input-wrap input{
  width:100%!important;
  padding-right:48px!important;
  box-sizing:border-box!important;
}
.measure-unit,
.salary-unit{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-weight:850;
  color:#667085;
  pointer-events:none;
  z-index:2;
}

/* Très grands écrans : les deux cartes côte à côte, sans colonne vide */
@media (min-width:1400px){
  .page-logement{
    max-width:1600px;
  }
  .logement-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:32px;
    align-items:stretch;
  }
  .logement-card{
    height:100%;
  }
}

/* Écrans standards : affichage vertical centré, cartes à 100% */
@media (max-width:1399.98px){
  .layout:has(.page-logement),
  .layout:has(.page-logement) .content-card,
  .page-logement{
    max-width:1100px!important;
  }
  .logement-layout{
    grid-template-columns:1fr!important;
    gap:24px;
  }
  .logement-card{
    width:100%;
  }
}

@media(max-width:900px){
  .housing-result-main{
    grid-template-columns:1fr;
    text-align:center;
  }
  .housing-percentile{
    width:150px;
    margin:0 auto;
  }
}

@media(max-width:700px){
  .logement-card{
    padding:20px 16px;
    border-radius:18px;
  }
  .measure-input-wrap,
  .salary-input-wrap{
    width:100%;
    max-width:100%;
  }
}

.field-note{
  display:inline-flex;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  background:#eef5ff;
  color:#52627a;
  font-size:11px;
  font-weight:900;
  vertical-align:middle;
}
[hidden]{display:none!important;}
.housing-percentile--rent{
  background:linear-gradient(135deg,#f59e0b,#ef4444);
}


/* v4 — régions + villes dynamiques */

.city-field{
  display:grid;
  gap:8px;
}

.city-search{
  width:100%!important;
  max-width:360px!important;
}

.city-search:disabled,
#city:disabled{
  opacity:.68;
  cursor:not-allowed;
  background:#f3f6fb!important;
}

.field-note--block{
  display:block;
  width:fit-content;
  max-width:100%;
  margin:4px 0 0!important;
  line-height:1.35;
}

.local-data-notice{
  margin:14px 0 16px;
  padding:12px 14px;
  border-radius:14px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#7c2d12;
  font-size:14px;
  font-weight:800;
  line-height:1.45;
}

.regional-seo-snippet{
  margin:18px 0 22px;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid #dfe7f2;
  box-shadow:0 10px 26px rgba(7,25,54,.05);
  color:#21304c;
  font-size:15.5px;
  line-height:1.55;
}

.regional-seo-snippet strong{
  color:#071936;
}

@media(max-width:700px){
  .city-search,
  #city{
    max-width:100%!important;
  }

  .field-note--block{
    width:100%;
  }
}

.city-search-wrap{
  position:relative;
  width:100%;
  max-width:360px;
}

.city-search-icon{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  color:#94a3b8;
  font-size:15px;
  pointer-events:none;
  z-index:2;
}

.city-search-wrap .city-search{
  width:100%!important;
  max-width:100%!important;
  padding-left:40px!important;
}

.city-search::placeholder{
  color:#94a3b8!important;
  opacity:1!important;
  font-style:italic!important;
}

.city-search:disabled::placeholder{
  color:#94a3b8!important;
  opacity:1!important;
}

@media(max-width:700px){
  .city-search-wrap{
    max-width:100%;
  }
}

.housing-scores{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.housing-scores .housing-score{
  margin-top:0;
}

@media(max-width:700px){
  .housing-scores{
    grid-template-columns:1fr;
  }
}