#outdoor-module {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#outdoor-module .data-value {
  order: 3;
  margin-left: auto;
  text-align: right;
}

#outdoor-module .data-title {
  margin-right: 6px;
}
/* Titre module */
#outdoor-module h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid white;
  font-size: clamp(1em, 2vw, 1.2em);
  font-weight: 400;
}

/* Lignes de données */
#outdoor-module .data-row {
  display: flex;
  align-items: center;
  font-size: clamp(0.7em, 1.2vw, 0.8em);
  font-weight: 300;
  white-space: nowrap;
  margin-bottom: 14px;
}

/* Bloc min/max */
.temp-minmax {
  order: 2;

  display: flex;
  flex-direction: column;
  gap: 1px;

  margin-left: 20px; /* distance depuis le titre */
  margin-right: 12px; /* respiration avant valeur principale */
}

.temp-minmax-row {
  display: flex;
  align-items: center;
}

/* Triangles température */
.temp-triangle {
  width: 0;
  height: 0;
}

.temp-triangle.max {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid red;
  position: relative;
  left: 0.5px; /* 🔑 correction pixel-perfect */
}

.temp-triangle.min {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid blue; /* ▼ bleu */
}

/* ================= ALIGNEMENT MIN/MAX ================= */

.temp-text {
  display: inline-block;
  width: 48px; /* largeur fixe */
  margin-left: 2px; /* ← règle l’écart ici */
  text-align: right; /* aligne chiffres */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-family: "Poppins", sans-serif;
}

/* ============================================================
   TENDANCE TEMPÉRATURE — CSS ONLY
============================================================ */

.temp-trend {
  display: inline-block;
  margin-left: 6px;
}

/* ▲ hausse */
.temp-trend.up {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #ff3b3b; /* rouge */
}

/* ▼ baisse */
.temp-trend.down {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #3b82ff; /* bleu */
}

/* ▬ stable */
.temp-trend.stable {
  width: 12px;
  height: 3px;
  background: #cccccc;
  border-radius: 2px;
}
/* ============================================================
   TENDANCE PRESSION — CSS ONLY (BLANC)
============================================================ */

.pressure-trend {
  display: inline-block;
  margin-left: 6px;
}

/* ▲ pression en hausse */
.pressure-trend.up {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid white;
}

/* ▼ pression en baisse */
.pressure-trend.down {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid white;
}

/* ▬ pression stable */
.pressure-trend.stable {
  width: 12px;
  height: 3px;
  background: white;
  border-radius: 2px;
}

/* ================= AURA Atmo DONUT ================= */
#outdoor-module svg {
  display: block;
}

.air-title {
  text-align: center;
  font-size: 0.8em;
  font-weight: 300;
}

.air-source {
  text-align: center;
  margin-bottom: 8px;
}

.air-source a,
.air-source a:visited {
  color: var(--neon-green);
  text-decoration: none;
  font-size: 0.72em;
  font-weight: 400;
  transition: opacity 0.2s ease;
}

.air-source a:hover,
.air-source a:active {
  color: var(--neon-green);
  opacity: 0.8;
}

.air-container {
  position: relative;
  width: 150px;
  margin: 0 auto 0;
}

.air-center {
  position: absolute;
  inset: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  font-family: "Poppins", sans-serif;
  top: 50%;
  transform: translateY(-42%);
}

.air-center-title {
  font-size: 8px;
  font-weight: 300;
  line-height: 1.1;
  opacity: 0.8;
}

.air-center-subtitle {
  font-size: 8px;
  font-weight: 300;
  line-height: 1.1;
  opacity: 0.8;
  margin-top: 1px;
}

.air-center-value {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  margin-top: 4px;
}