/* Feuille de style unique du Back-office : sans framework ni étape de build, polices système. */
:root {
  --fond: #f6f7f9;
  --surface: #ffffff;
  --texte: #1f2430;
  --discret: #5b6475;
  --bordure: #d5d9e0;
  --primaire: #2457c5;
  --primaire-fonce: #1b43a0;
  --danger: #b42318;
  --danger-fond: #fdecea;
  --avertissement: #8a5a00;
  --avertissement-fond: #fff4d6;
  --rayon: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

.container { max-width: 64rem; margin: 0 auto; padding: 1rem; }
.container-narrow { max-width: 24rem; margin-top: 3rem; }
.container-wide { max-width: 80rem; }

h1 { font-size: 1.6rem; margin: 0 0 1rem; }

/* Navigation */
.nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem;
  padding: .5rem 1rem; background: var(--surface); border-bottom: 1px solid var(--bordure);
}
.nav a { color: var(--texte); text-decoration: none; padding: .25rem .5rem; border-radius: var(--rayon); }
.nav a:hover { background: var(--fond); }
.nav a[aria-current="page"] { font-weight: 600; color: var(--primaire); }
.nav-logout { margin: 0 0 0 auto; }

/* Formulaires : étiquette au-dessus du champ */
.form .field { margin-bottom: 1rem; }
label { display: block; font-weight: 600; margin-bottom: .25rem; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; padding: .5rem; font: inherit;
  border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaire); outline-offset: 1px; }

/* Boutons */
.btn {
  display: inline-block; padding: .5rem 1rem; font: inherit; cursor: pointer; text-decoration: none;
  border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); color: var(--texte);
}
.btn-primary { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.btn-primary:hover { background: var(--primaire-fonce); }
.btn-secondary:hover { background: var(--fond); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Messages */
.alert { padding: .75rem 1rem; border-radius: var(--rayon); border: 1px solid; margin: 0 0 1rem; }
.alert-error { background: var(--danger-fond); border-color: var(--danger); color: var(--danger); }
.alert-warning { background: var(--avertissement-fond); border-color: var(--avertissement); color: var(--avertissement); }

/* Tableaux */
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--bordure); }
.table-wrap { overflow-x: auto; }

/* Pastille de Couleur d'accent (la couleur est posée en ligne) et aperçu du Document */
.swatch { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--bordure); vertical-align: middle; }
.preview { max-width: 100%; height: auto; border: 1px solid var(--bordure); background: var(--surface); }

@media (max-width: 40rem) {
  .container-narrow { margin-top: 1rem; }
  .nav { padding: .5rem; }
  .nav a { padding: .5rem; }
  .nav-logout { margin-left: 0; flex-basis: 100%; }
  h1 { font-size: 1.35rem; }
  .btn { padding: .6rem 1rem; }
  /* 16px minimum : évite le zoom automatique des navigateurs mobiles à la saisie */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 1rem; }
  .table-wrap { margin: 0 -1rem; padding: 0 1rem; }
  th, td { padding: .5rem; }
  .palette li { flex-wrap: wrap; }
}

/* --- Liste des Documents et confirmation de suppression --- */
.documents td.actions { white-space: nowrap; }
.documents .btn { padding: .25rem .6rem; font-size: .875rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Accueil, mot de passe et Palette (ticket 02) */
.form-inline { display: inline; margin: 0 0 0 .5rem; }
.palette { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.palette li { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--bordure); }
.palette .form-inline { margin-left: auto; }

/* Formulaire de Document et aperçu (ticket 04) */
.document-form { display: grid; grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.document-form .apercu { position: sticky; top: 1rem; }
.document-form [data-avertissement-slug] { margin-top: 0; }
.document-form [role="status"] { color: var(--danger); margin: .5rem 0 0; }

@media (max-width: 56rem) {
  .document-form { grid-template-columns: minmax(0, 1fr); }
  .document-form .apercu { position: static; }
}