/* ====== DPE 2026 Simulator (scopé) ====== */
#dpsim2026 {
  margin: 20px auto;
  max-width: 1200px;       /* encadré 1200px */
  font-family: inherit;
}

/* Formulaire */
#dpsim2026 .dpsim-input-row {
  display: flex;
  align-items: center;
  gap: 20px;               /* 20px entre le champ et le bouton */
  margin-bottom: 10px;
}
#dpsim2026 #dpsim-ref {
  flex: 1;
}
#dpsim2026 .dpsim-btn {
  padding: 8px 14px;
  cursor: pointer;
}

/* États */
#dpsim2026 .dpsim-hidden { display: none; }
#dpsim2026 .dpsim-error { color: #b00020; margin-top: 10px; }
#dpsim2026 .dpsim-loading { margin-top: 10px; }

/* Infos haut (numéro, adresse, dates, surface) */
#dpsim2026 .dpsim-identity { margin: 10px 0 16px; }

#dpsim2026 .dpsim-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;           /* petit espace entre libellés/valeurs */
  margin: 4px 0;
}
#dpsim2026 .dpsim-info-row .lab { font-weight: 600; }
#dpsim2026 .dpsim-info-row .lab-inline { margin-left: 18px; }

/* Deux encadrés côte à côte (avant/après) */
#dpsim2026 .dpsim-cards-row {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
#dpsim2026 .dpsim-card {
  flex: 1 1 0;
  padding: 20px;
  background: #fff;
  border-radius: 12px;     /* radius 12 */
  box-shadow: 0 0 4px rgba(0,0,0,0.2); /* ombre + flou 4 */
  min-width: 0;
}
#dpsim2026 .dpsim-card-title {
  margin: 0 0 12px 0;
  font-weight: 700;
}

/* Colonnes internes : flèche + métriques */
#dpsim2026 .dpsim-card-cols {
  display: flex;
  gap: 20px;
  align-items: center;
}
#dpsim2026 .dpsim-col { flex: 1 1 0; }
#dpsim2026 .arrow-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flèche (3x plus large) + lettre à 32px, blanche et bold */
#dpsim2026 .dpsim-arrow {
  padding: 10px 60px;   /* largeur x3 environ */
  color: #fff;
  font-weight: 700;
  font-size: 32px;      /* taille lettre */
  line-height: 1;
  clip-path: polygon(0 0,80% 0,100% 50%,80% 100%,0 100%); /* arrow right */
}
#dpsim2026 .dpsim-arrow-letter { line-height: 1; text-transform: uppercase; }

/* Libellés/valeurs des métriques
   -> labels (conso / GES) sur la même "ligne" car 2 colonnes côte à côte,
      valeurs juste en dessous dans chaque colonne. */
#dpsim2026 .dpsim-subtitle {
  text-align: center;
  font-weight: 600;
  margin-bottom: 6px;
}
#dpsim2026 .dpsim-value { text-align: center; }

/* Responsive */
@media (max-width: 900px) {
  #dpsim2026 .dpsim-cards-row { flex-direction: column; }
  #dpsim2026 .dpsim-card-cols { flex-direction: column; }
}