/* 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 var(--color-base-200);
  border-radius: 0.375rem;
  background: var(--color-base-50);
  color: 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: 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: var(--color-font-subtle-light);
}

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

.je-compteur {
  font-size: 0.6875rem;
  color: 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: var(--color-base-700);
  background: var(--color-base-800);
  color: var(--color-font-default-dark);
}

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

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

/* ── Page de connexion ─────────────────────────────────────────────────────
   Logo centré, formulaire dans une carte à ombre franche (comme le site),
   sur fond crème. Ne vise que `.login` : la page de connexion et celles du
   mot de passe oublié, qui partagent la même mise en page. */
body.login #page {
  background: var(--color-base-50);
}

.dark body.login #page {
  background: var(--color-base-950);
}

.je-login {
  width: 100%;
}

.je-login-tete {
  text-align: center;
  margin-bottom: 1.75rem;
}

.je-login-logo {
  display: block;
  height: 5rem;
  width: auto;
  margin: 0 auto 1rem;
}

.je-login-sous-titre {
  margin: 0;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-base-500);
}

.je-login-carte {
  padding: 1.75rem;
  background: #fff;
  border: 2px solid #2b2420;
  border-radius: 0.5rem;
  box-shadow: 6px 6px 0 #2b2420;
}

.dark .je-login-carte {
  background: var(--color-base-900);
  border-color: var(--color-base-600);
  box-shadow: 6px 6px 0 var(--color-base-950);
}

.je-login-pied {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-base-500);
}

@media (max-width: 640px) {
  .je-login-carte {
    padding: 1.25rem;
    box-shadow: 4px 4px 0 #2b2420;
  }
}

/* ── Mode clair ────────────────────────────────────────────────────────────
   Trois retouches, sans toucher au mode sombre :
   · le contenu sur fond crème et les cartes en blanc, pour que tableaux et
     formulaires se détachent (tout était blanc sur blanc) ;
   · des bordures un cran plus marquées, qu'on distingue enfin ;
   · des couleurs d'état (erreur, alerte, succès, info) tirées de la charte —
     brique, ocre, vert, bleu ardoise — au lieu du rouge et de l'orange vifs
     de Tailwind. Les variables sont redéfinies ici : `html:not(.dark)` passe
     devant le `:root` qu'Unfold injecte, quel que soit l'ordre des feuilles. */
html:not(.dark) {
  --color-base-200: rgb(222, 209, 189);

  --color-red-50: #fbf0eb;
  --color-red-100: #f6e1d8;
  --color-red-200: #ecc4b5;
  --color-red-400: #cf7a5a;
  --color-red-500: #b9512f;
  --color-red-600: #a3432a;
  --color-red-700: #8a3822;

  --color-orange-50: #fcf5e8;
  --color-orange-100: #f7e9cf;
  --color-orange-400: #e0a458;
  --color-orange-500: #cf8a32;
  --color-orange-600: #a96b1c;
  --color-orange-700: #85540f;

  --color-green-50: #f0f5ed;
  --color-green-100: #e1ecdb;
  --color-green-400: #7ea877;
  --color-green-500: #5e8c5a;
  --color-green-600: #4f7a4b;
  --color-green-700: #3d6139;

  --color-blue-50: #eef2f5;
  --color-blue-100: #dfe7ed;
  --color-blue-400: #7f9bb1;
  --color-blue-500: #5b7a94;
  --color-blue-600: #4a6680;
  --color-blue-700: #3b5468;
}

html:not(.dark) #main {
  background: var(--color-base-50);
}

html:not(.dark) #nav-sidebar,
html:not(.dark) #nav-sidebar-inner {
  background: #fff;
}

/* Les cartes posées sur ce fond crème restent blanches : bloc de champs des
   formulaires, et barre de recherche au-dessus des listes (le tableau, lui,
   est déjà blanc). */
html:not(.dark) #content .form-rows,
html:not(.dark) #content div:has(> #toolbar) {
  background: #fff;
}

/* Icônes en attente de leur police (voir `icones.js`) : on réserve la place d'une
   icône, vide, au lieu d'afficher le mot qui la code. */
html:not([data-icones]) .material-symbols-outlined {
  color: transparent !important;
  max-width: 1em;
  overflow: hidden;
}