/* Styles propres à la page Éco-Score (/eco-score) */

.section-echelle { padding-block: 3rem; }
.section-echelle h2 { text-align: center; margin-bottom: 1.75rem; }

.grille-echelle {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
.carte-echelle {
  background: var(--blanc);
  border: 1px solid var(--bleu-ciel);
  border-radius: var(--radius-carte);
  padding: 1.5rem;
  text-align: center;
}
.echelle-badge {
  width: 3rem;
  height: 3rem;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.carte-echelle h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.carte-echelle p { font-size: 0.85rem; color: rgba(0, 43, 69, 0.75); }

@media (max-width: 900px) {
  .grille-echelle { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grille-echelle { grid-template-columns: 1fr; }
}

.bloc-criteres { background: var(--bleu-ciel); padding-block: 3.5rem; }
.bloc-criteres h2 { text-align: center; margin-bottom: 2rem; }
.carac-valeur-normale { font-weight: 400; font-size: 0.9rem; }

.section-benefices {
  padding-block: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.benefice-carte {
  background: var(--blanc);
  border: 1px solid var(--bleu-ciel);
  border-radius: var(--radius-carte);
  padding: 2rem;
}
.benefice-carte p:not(.eyebrow) { margin-block: 0.75rem 1.5rem; color: rgba(0, 43, 69, 0.8); }

@media (max-width: 768px) {
  .section-benefices { grid-template-columns: 1fr; }
}