/* Harmonisation du back-office avec la charte graphique Jayé.
   Polices : Outfit (interface) + DM Mono (code / valeurs monospace). */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

:root {
  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
}

body,
button,
input,
select,
textarea,
.font-sans {
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

code,
pre,
kbd,
samp,
.font-mono {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Éditeur des pages de contenu ──────────────────────────────────────────
   Barre d'outils, avertissements et compteur ajoutés par legal-editor.js.
   Les couleurs passent par les variables d'Unfold, pour suivre le mode sombre
   sans avoir à le traiter deux fois. */
.je-barre {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.je-btn {
  border: 1px solid rgb(var(--color-base-200));
  border-radius: 0.375rem;
  background: rgb(var(--color-base-50));
  color: rgb(var(--color-font-default-light));
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}

.je-btn:hover {
  background: rgb(var(--color-base-100));
}

.je-etat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.375rem;
}

.je-alertes {
  margin: 0;
  padding-left: 1rem;
  list-style: disc;
  font-size: 0.75rem;
  color: rgb(var(--color-font-subtle-light));
}

.je-alertes:empty {
  display: none;
}

.je-compteur {
  font-size: 0.6875rem;
  color: rgb(var(--color-font-subtle-light));
}

/* Proche de la limite imposée par l'API : passé ce seuil, la saisie sera
   tronquée par le navigateur, autant le voir venir. */
.je-compteur.je-proche {
  color: rgb(220 38 38);
  font-weight: 600;
}

.dark .je-btn {
  border-color: rgb(var(--color-base-700));
  background: rgb(var(--color-base-800));
  color: rgb(var(--color-font-default-dark));
}

.dark .je-btn:hover {
  background: rgb(var(--color-base-700));
}

.dark .je-alertes,
.dark .je-compteur {
  color: rgb(var(--color-font-subtle-dark));
}