/* Espace d'administration (informations publiées sur le site).
   La structure commune (.page, .page-hero, .card, .eyebrow) et les couleurs
   viennent de application.css. Le formulaire reprend le motif de auth.css. */

.admin-inner {
  max-width: 52rem;
  margin: 0 auto;
}

/* --- Boutons --- */

.admin .bouton {
  display: inline-block;
  padding: 0.8125rem 1.75rem;
  border: 1px solid var(--color-accent);
  border-radius: 0.5rem;
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.admin .bouton:hover {
  background: color-mix(in srgb, var(--color-dark) 80%, var(--color-accent));
}

/* Sur le héro sombre, le bouton s'inverse pour rester lisible */
.admin .page-hero .bouton {
  background: var(--color-accent);
  color: var(--color-dark);
}

.admin .page-hero .bouton:hover {
  background: color-mix(in srgb, var(--color-accent) 75%, #fff);
}

/* Action secondaire : contour seul */
.admin .bouton-discret {
  background: transparent;
  color: var(--color-heading);
  border-color: color-mix(in srgb, var(--color-heading) 35%, transparent);
}

.admin .bouton-discret:hover {
  background: color-mix(in srgb, var(--color-accent-soft) 25%, transparent);
  color: var(--color-heading);
}

/* Suppression : discret au repos, franc au survol */
.admin .bouton-danger {
  background: transparent;
  color: #8d372e;
  border-color: color-mix(in srgb, #b3453a 45%, transparent);
}

.admin .bouton-danger:hover {
  background: #8d372e;
  color: var(--color-on-dark);
  border-color: #8d372e;
}

/* --- Barres d'actions --- */

.admin .page-hero-actions,
.admin .admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0 0;
}

.admin .page-hero .admin-actions {
  justify-content: center;
}

/* `button_to` enveloppe le bouton dans un formulaire */
.admin .admin-actions form {
  margin: 0;
}

/* Rapproche la liste du héro (bat `.page section`) */
.admin .admin-contenu {
  padding-top: 3.5rem;
}

/* --- Messages flash --- */

.admin-flash {
  margin: 0 0 2rem;
  padding: 0.875rem 1.125rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.admin-flash-notice {
  background: color-mix(in srgb, var(--color-accent-soft) 28%, transparent);
  color: var(--color-text); /* plus contrasté que --color-heading sur ce fond */
}

.admin-flash-alert {
  background: color-mix(in srgb, #b3453a 12%, transparent);
  color: #8d372e;
}

/* --- Liste des informations --- */

.admin-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.admin-post {
  padding: 2rem;
}

.admin-post-date {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.admin-post-titre {
  font-size: 1.625rem;
  margin: 0.625rem 0 0;
}

/* Absent quand l'information n'a qu'un titre */
.admin-post-extrait {
  margin: 0.75rem 0 0;
  color: var(--color-text-soft);
}

.admin-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

/* Actions de liste : plus compactes que les actions de page */
.admin-post-actions .bouton {
  padding: 0.5625rem 1.125rem;
  font-size: 0.8125rem;
}

/* --- Liste vide --- */

.admin-vide {
  padding: 3rem 2rem;
  text-align: center;
}

.admin-vide h2 {
  font-size: 1.5rem;
}

.admin-vide p {
  margin: 0 0 1.75rem;
  color: var(--color-text-soft);
}

/* --- Article affiché (page « show ») --- */

.admin-article {
  padding: 2.5rem;
}

/* --- Documents à télécharger ---
   Les cartes elles-mêmes (.documents, .document) sont définies dans
   contact.css : on ne pose ici que l'espacement et le titre de section. */

.admin-documents {
  margin-top: 2.5rem;
}

.admin-documents h2 {
  font-size: 1.25rem;
  margin: 0 0 1.25rem;
}

/* La carte de contenu est déjà espacée par ce bloc quand il est présent */
.admin-documents + .admin-actions {
  margin-top: 2.5rem;
}

/* --- Formulaire --- */

.admin-card {
  padding: 2.5rem;
}

.admin-form {
  display: grid;
  gap: 1.75rem;
}

.admin-field {
  display: grid;
  gap: 0.5rem;
}

.admin-field label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.admin-field input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--color-heading) 25%, transparent);
  border-radius: 0.5rem;
  background: #fff;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text);
}

.admin-field input[type="text"]::placeholder {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: color-mix(in srgb, var(--color-text-soft) 55%, transparent);
}

.admin-field input[type="text"]:focus-visible {
  border-color: transparent;
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.admin-submit {
  justify-self: start;
  padding: 0.8125rem 1.75rem;
  border: 1px solid var(--color-accent);
  border-radius: 0.5rem;
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}

.admin-submit:hover {
  background: color-mix(in srgb, var(--color-dark) 80%, var(--color-accent));
}

/* --- Erreurs de validation --- */

.admin-errors {
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, #b3453a 12%, transparent);
  color: #8d372e;
  font-size: 0.9375rem;
}

.admin-errors p {
  margin: 0;
  font-weight: 500;
}

.admin-errors ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

/* --- Éditeur Lexxy --- */

/* Lexxy déclare ses variables dans `:root` et style ses éléments avec
   `:where(...)` : on se contente de repeindre les variables aux couleurs du
   site, le reste du composant suit. */
.admin lexxy-editor,
.admin .lexxy-content {
  --lexxy-color-ink: var(--color-text);
  --lexxy-color-ink-medium: var(--color-text-soft);
  --lexxy-color-ink-lighter: color-mix(in srgb, var(--color-heading) 25%, transparent);
  --lexxy-color-ink-lightest: color-mix(in srgb, var(--color-accent-soft) 18%, transparent);
  --lexxy-color-accent-dark: var(--color-heading);
  --lexxy-color-accent-light: color-mix(in srgb, var(--color-accent-soft) 45%, transparent);
  --lexxy-color-accent-lightest: color-mix(in srgb, var(--color-accent-soft) 25%, transparent);
  --lexxy-color-link: var(--color-heading);
  --lexxy-focus-ring-color: var(--color-accent);
  --lexxy-font-base: var(--font-body);
  --lexxy-radius: 0.5rem;
}

.admin lexxy-editor {
  --lexxy-editor-rows: 14lh;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
}

/* Titres du contenu rédigé : même famille que le reste du site */
.admin .lexxy-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-heading);
}

.admin .admin-article .lexxy-content {
  line-height: 1.75;
  font-weight: 300;
}

.admin .admin-article .lexxy-content > :last-child {
  margin-bottom: 0;
}

/* --- Mobile --- */

@media (max-width: 48rem) {
  .admin-card,
  .admin-article,
  .admin-post {
    padding: 1.75rem 1.25rem;
  }

  .admin .bouton,
  .admin-submit {
    padding: 0.75rem 1.25rem;
  }
}