/**
 * Ligne de 3px sur toute la largeur + encart accroché dessus.
 *
 * Couleurs par environnement : surchargeables dans le CSS du thème, par ex.
 *   .environment-checker--dev { --environment-checker-bg: #...; }
 */

/* Couleurs par environnement. */
.environment-checker--dev {
  --environment-checker-bg: #d50000; /* Rouge pompier. */
  --environment-checker-fg: #fff;
}

.environment-checker--recette {
  --environment-checker-bg: #ff5f00; /* Orange sanguine. */
  --environment-checker-fg: #1a1a1a;
}

.environment-checker {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10000;
  height: 3px;
  background: var(--environment-checker-bg, #ff5f00);
  /* Ne bloque jamais les clics sur la page, la toolbar ou le header. */
  pointer-events: none;
}

.environment-checker--top {
  top: 0;
}

.environment-checker--bottom {
  bottom: 0;
}

.environment-checker__label {
  position: absolute;
  padding: 6px 16px;
  font: 700 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--environment-checker-fg, #1a1a1a);
  background: var(--environment-checker-bg, #ff5f00);
}

/* Ligne en haut : encart accroché dessous. */
.environment-checker--top .environment-checker__label {
  top: 100%;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

/* Ligne en bas : encart accroché dessus. */
.environment-checker--bottom .environment-checker__label {
  bottom: 100%;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, .2);
}

.environment-checker--right .environment-checker__label {
  right: 24px;
}

.environment-checker--left .environment-checker__label {
  left: 24px;
}

.environment-checker--center .environment-checker__label {
  left: 50%;
  transform: translateX(-50%);
}

/* Pas de doublon dans les iframes (Mercury Editor, aperçus…). */
.environment-checker-in-iframe .environment-checker {
  display: none;
}

@media print {
  .environment-checker {
    display: none;
  }
}