/* =====================================================================
   Administration du blog — Maxime Bonnet
   ---------------------------------------------------------------------
   Feuille autonome : l'administration ne charge pas style.css (elle n'a
   ni menu public, ni pied de page, ni analytics). Les couleurs et les
   rayons reprennent néanmoins ceux du site, pour rester dans la charte.
   ===================================================================== */

:root {
  --adm-red:       #d23f3f;
  --adm-red-dark:  #b02f2f;
  --adm-red-deep:  #8a1717;
  --adm-red-soft:  #fbecec;

  --adm-ink:    #1a1a1a;
  --adm-ink-2:  #333333;
  --adm-muted:  #6b6b6b;
  --adm-line:   #e6e6e6;
  --adm-bg:     #f4f2f1;
  --adm-card:   #ffffff;

  --adm-gold:      #b57d18;
  --adm-gold-soft: #fdf3dd;
  --adm-green:     #1f7a44;
  --adm-green-soft:#e8f5ec;

  --adm-radius:    12px;
  --adm-radius-sm: 8px;
  --adm-shadow:    0 1px 2px rgba(26,26,26,.05), 0 4px 14px rgba(26,26,26,.06);
}

*, *::before, *::after { box-sizing: border-box; }

body.adm {
  margin: 0;
  background: var(--adm-bg);
  color: var(--adm-ink-2);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Poppins", "Open Sans", sans-serif;
  color: var(--adm-ink);
  line-height: 1.2;
  margin: 0 0 .5em;
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.12rem; }

a { color: var(--adm-red-dark); text-decoration: none; }
a:hover { color: var(--adm-red-deep); text-decoration: underline; }

img { max-width: 100%; display: block; height: auto; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--adm-bg);
  border: 1px solid var(--adm-line);
  border-radius: 4px;
  padding: 1px 5px;
}

/* =====================================================================
   1. Barre supérieure
   ===================================================================== */

.adm-top {
  background: #fff;
  border-bottom: 1px solid var(--adm-line);
  position: sticky;                 /* la BARRE peut l'être : 56 px de haut */
  top: 0;
  z-index: 20;
}
.adm-top__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 22px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.adm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--adm-ink);
  font-family: "Poppins", sans-serif;
  font-size: .98rem;
  flex: none;
}
.adm-brand:hover { text-decoration: none; }
.adm-brand b { font-weight: 700; color: var(--adm-red); }

.adm-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.adm-nav a {
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--adm-ink-2);
  font-weight: 500;
  font-size: .93rem;
  white-space: nowrap;
}
.adm-nav a:hover { background: var(--adm-bg); text-decoration: none; }
.adm-nav a.is-active { background: var(--adm-red-soft); color: var(--adm-red-dark); font-weight: 600; }

.adm-top__right { display: flex; align-items: center; gap: 16px; flex: none; }
.adm-top__site, .adm-top__out { font-size: .89rem; color: var(--adm-muted); }
.adm-top__out:hover { color: var(--adm-red-dark); }

/* =====================================================================
   2. Structure des pages
   ===================================================================== */

.adm-main { padding: 26px 0 80px; }

.adm-wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 22px;
}
.adm-wrap--narrow { max-width: 860px; }

.adm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.adm-head h1 { margin-bottom: 4px; }
.adm-head__sub { margin: 0; color: var(--adm-muted); font-size: .93rem; }
.adm-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.adm-notice {
  max-width: 1280px;
  margin: 0 auto 22px;
  padding: 13px 18px;
  border-radius: var(--adm-radius-sm);
  font-size: .94rem;
  border: 1px solid transparent;
}
.adm-notice--ok    { background: var(--adm-green-soft); border-color: #c6e6d2; color: #14532d; }
.adm-notice--error { background: var(--adm-red-soft);   border-color: #f0cccc; color: var(--adm-red-deep); }
.adm-notice--info  { background: #eef4fb;               border-color: #d3e3f5; color: #1c4b7d; }

.adm-card {
  background: var(--adm-card);
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.adm-card > *:last-child { margin-bottom: 0; }
.adm-hint { color: var(--adm-muted); font-size: .89rem; margin: 0 0 16px; }

.adm-pre {
  background: #1f1f1f;
  color: #f2f2f2;
  border-radius: var(--adm-radius-sm);
  padding: 15px 17px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem;
  line-height: 1.6;
  margin: 0;
}

/* =====================================================================
   3. Champs et boutons
   ===================================================================== */

.adm-field { display: block; margin-bottom: 16px; }
.adm-field__label {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--adm-ink);
  margin-bottom: 6px;
}
.adm-field__label em { font-weight: 400; font-style: normal; color: var(--adm-muted); }

.adm-field input[type="text"],
.adm-field input[type="email"],
.adm-field input[type="password"],
.adm-field input[type="number"],
.adm-field input[type="datetime-local"],
.adm-field select,
.adm-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius-sm);
  background: #fff;
  color: var(--adm-ink-2);
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.adm-field textarea { resize: vertical; }
.adm-field input:focus,
.adm-field select:focus,
.adm-field textarea:focus {
  outline: none;
  border-color: var(--adm-red);
  box-shadow: 0 0 0 3px rgba(210, 63, 63, .13);
}
.adm-field textarea[readonly] { background: var(--adm-bg); color: var(--adm-muted); }
.adm-field input[readonly]    { background: var(--adm-bg); }

.adm-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }

.adm-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid var(--adm-line);
  cursor: pointer;
}
.adm-check:last-of-type { border-bottom: 0; margin-bottom: 8px; }
.adm-check input { margin-top: 4px; flex: none; width: 16px; height: 16px; accent-color: var(--adm-red); }
.adm-check b { display: block; color: var(--adm-ink); font-family: "Poppins", sans-serif; font-size: .95rem; }
.adm-check em { display: block; font-style: normal; color: var(--adm-muted); font-size: .87rem; }

.adm-inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.adm-inline-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 9px 12px;
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius-sm);
  font-family: inherit;
  font-size: .93rem;
}

.adm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius-sm);
  background: #fff;
  color: var(--adm-ink-2);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.adm-btn:hover { border-color: var(--adm-red); color: var(--adm-red-dark); text-decoration: none; }
.adm-btn--primary {
  background: var(--adm-red);
  border-color: var(--adm-red);
  color: #fff;
}
.adm-btn--primary:hover { background: var(--adm-red-dark); border-color: var(--adm-red-dark); color: #fff; }
.adm-btn--danger { border-color: #e8bcbc; color: var(--adm-red-dark); background: #fff; }
.adm-btn--danger:hover { background: var(--adm-red); border-color: var(--adm-red); color: #fff; }
.adm-btn--sm { padding: 7px 13px; font-size: .86rem; }
.adm-btn--block { width: 100%; }
.adm-btn.is-done { border-color: var(--adm-green); color: var(--adm-green); }

.adm-link { font-size: .88rem; white-space: nowrap; }

/* =====================================================================
   4. Connexion
   ===================================================================== */

body.adm--bare { background: var(--adm-bg); }
.adm-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 18px;
}
.adm-login__card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow);
  padding: 34px 32px;
  text-align: center;
}
.adm-login__logo { margin: 0 auto 18px; }
.adm-login__card h1 { font-size: 1.32rem; }
.adm-login__intro { color: var(--adm-muted); font-size: .92rem; margin-bottom: 22px; }
.adm-login__card .adm-field { text-align: left; }
.adm-login__foot {
  margin: 20px 0 0;
  font-size: .8rem;
  color: var(--adm-muted);
  line-height: 1.5;
}
.adm-login__back { margin: 0; font-size: .88rem; }

/* =====================================================================
   5. Tableau de bord
   ===================================================================== */

.adm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.adm-stat {
  background: #fff;
  border: 1px solid var(--adm-line);
  border-left: 3px solid var(--adm-green);
  border-radius: var(--adm-radius-sm);
  padding: 15px 18px;
  box-shadow: var(--adm-shadow);
}
.adm-stat--scheduled { border-left-color: var(--adm-gold); }
.adm-stat--draft     { border-left-color: var(--adm-muted); }
.adm-stat--images    { border-left-color: var(--adm-gold); }
.adm-stat--images.is-complete { border-left-color: var(--adm-green); }
.adm-stat__n {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--adm-ink);
  line-height: 1.1;
}
.adm-stat__l { display: block; font-size: .83rem; color: var(--adm-muted); }

.adm-table-wrap {
  background: #fff;
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow);
  overflow-x: auto;
}
.adm-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.adm-table th {
  text-align: left;
  font-family: "Poppins", sans-serif;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--adm-muted);
  font-weight: 600;
  padding: 13px 16px;
  border-bottom: 1px solid var(--adm-line);
  white-space: nowrap;
}
.adm-table td { padding: 13px 16px; border-bottom: 1px solid var(--adm-line); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover { background: #fafafa; }

/* Le tableau est en disposition automatique : sans plancher ici, la colonne
   « Requête visée » prend sa largeur maximale en la retirant au titre, qui
   se met alors à passer à la ligne tous les deux mots. */
.adm-table__title { min-width: 240px; }
.adm-table__title a { font-weight: 600; color: var(--adm-ink); }
.adm-table__title a:hover { color: var(--adm-red-dark); }
.adm-table__slug { display: block; font-size: .79rem; color: var(--adm-muted); }
.adm-table__date { white-space: nowrap; color: var(--adm-muted); font-size: .87rem; }
.adm-table__img { text-align: center; }

/* =====================================================================
   Calendrier de publication
   ===================================================================== */

.cal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-month {
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  color: var(--adm-ink);
  min-width: 170px;
  text-align: center;
}
.cal-today { font-size: .9rem; }

/* Combien de jours d'avance il reste. Doré en dessous de deux semaines :
   c'est le moment où il faut se remettre à écrire, pas celui où la file
   est déjà vide. */
.cal-runway {
  margin: 0;
  font-size: .9rem;
  color: var(--adm-muted);
}
.cal-runway.is-short { color: var(--adm-gold); font-weight: 600; }

.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .9rem; color: var(--adm-muted); }
.cal-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 5px;
}
.cal-dot--published { background: var(--adm-green); }
.cal-dot--scheduled { background: var(--adm-gold); }
.cal-dot--draft     { background: #b9b9b9; }

.cal-wrap {
  background: #fff;
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow);
  overflow: hidden;
}

.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--adm-bg); }
.cal-head__day {
  padding: 10px 12px;
  font-family: "Poppins", sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--adm-muted);
  border-right: 1px solid var(--adm-line);
}
.cal-head__day:last-child { border-right: 0; }
.cal-head__short { display: none; }

/* La semaine est en position: relative pour porter son étiquette
   « semaine sans publication » sans décaler la grille d'un pixel. */
.cal-week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--adm-line);
}
.cal-week.is-empty { background: repeating-linear-gradient(135deg, #fff, #fff 9px, #fbfbfb 9px, #fbfbfb 18px); }
.cal-week__flag {
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-size: .74rem;
  font-style: italic;
  color: var(--adm-muted);
  pointer-events: none;
}

.cal-day {
  min-height: 118px;
  padding: 8px;
  border-right: 1px solid var(--adm-line);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cal-day:last-child { border-right: 0; }
/* Les jours du mois voisin restent visibles mais en retrait : les masquer
   casserait l'alignement des semaines, les afficher pleins ferait croire
   qu'ils appartiennent au mois. */
.cal-day.is-out { background: #fcfcfc; }
.cal-day.is-out .cal-day__num { color: #c4c4c4; }
.cal-day.is-out .cal-item { opacity: .55; }

.cal-day__num {
  font-family: "Poppins", sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--adm-muted);
}
.cal-day.is-today { background: var(--adm-red-soft); }
.cal-day.is-today .cal-day__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--adm-red);
  color: #fff;
}

.cal-item {
  display: block;
  padding: 5px 7px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  background: var(--adm-bg);
  font-size: .8rem;
  line-height: 1.3;
  color: var(--adm-ink-2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cal-item:hover { transform: translateY(-1px); box-shadow: var(--adm-shadow); text-decoration: none; }
.cal-item--published { background: var(--adm-green-soft); border-left-color: var(--adm-green); }
.cal-item--scheduled { background: var(--adm-gold-soft);  border-left-color: var(--adm-gold); }
.cal-item--draft     { background: var(--adm-bg);         border-left-color: #b9b9b9; }
.cal-item__time { display: block; font-weight: 600; font-size: .72rem; color: var(--adm-muted); }
/* Deux lignes maximum, puis points de suspension : sans cette limite, un
   titre long étire sa case et toute la semaine avec elle. */
.cal-item__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cal-undated { margin-top: 22px; }
.cal-undated__list { list-style: none; margin: 0; padding: 0; }
.cal-undated__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--adm-line);
}
.cal-undated__list li:last-child { border-bottom: 0; }

/* Poids d'une image déjà en ligne. Doré au-delà du seuil, comme les
   images manquantes : c'est le même message, « il reste à faire ». */
.ed-weight { font-weight: 600; color: var(--adm-green); }
.ed-weight.is-heavy { color: var(--adm-gold); cursor: help; }
.ed-weight.is-heavy::after { content: " ⚠"; }
.ed-dim { color: var(--adm-muted); font-size: .88em; margin-left: 6px; }

/* Requête visée. Largeur plafonnée et coupure par points de suspension :
   une requête longue ne doit pas repousser les autres colonnes hors de
   l'écran. Le texte entier reste lisible au survol (attribut title). */
.adm-table__query { max-width: 280px; }
.adm-query {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--adm-ink);
}
/* Deux articles sur la même requête : ils se font concurrence, et Google
   n'en retiendra qu'un. Signalé en doré, comme les images manquantes. */
.adm-query--dup {
  color: var(--adm-gold);
  font-weight: 600;
  cursor: help;
}
/* En TÊTE et non en fin : la cellule coupe le texte trop long par des points
   de suspension, et un marqueur placé après aurait disparu avec lui —
   c'est-à-dire précisément sur les requêtes longues. */
.adm-query--dup::before { content: "⚠ "; }
.adm-query--empty { color: var(--adm-muted); font-style: italic; }
.adm-table__actions { text-align: right; white-space: nowrap; }
.adm-table__actions .adm-link + .adm-link { margin-left: 12px; }

.adm-badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  white-space: nowrap;
}
.adm-badge--published { background: var(--adm-green-soft); color: var(--adm-green); }
.adm-badge--scheduled { background: var(--adm-gold-soft);  color: var(--adm-gold); }
.adm-badge--draft     { background: var(--adm-bg);         color: var(--adm-muted); }

/* Compteur d'images : doré tant qu'il en manque, vert quand c'est complet. */
.adm-imgcount {
  display: inline-block;
  min-width: 48px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  cursor: help;
}
.adm-imgcount.is-partial  { background: var(--adm-gold-soft);  color: var(--adm-gold); }
.adm-imgcount.is-complete { background: var(--adm-green-soft); color: var(--adm-green); }

.adm-empty {
  background: #fff;
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow);
  padding: 48px 30px;
  text-align: center;
}
.adm-empty p { color: var(--adm-muted); max-width: 460px; margin: 0 auto 20px; }

/* =====================================================================
   6. Éditeur
   ===================================================================== */

.ed-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

/* ---------------------------------------------------------------------
   PIÈGE ÉVITÉ — la colonne de droite n'est PAS en position: sticky.
   La carte « Publication » fait à elle seule la hauteur d'un écran ;
   épinglée, elle masquerait tout ce qui se trouve dessous, qui
   défilerait derrière elle et deviendrait inatteignable. Elle défile
   donc normalement avec la page.
   --------------------------------------------------------------------- */
.ed-side {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ed-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.ed-card {
  background: #fff;
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow);
  padding: 20px 22px;
}
.ed-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ed-card__head .adm-field__label { margin-bottom: 0; }

.ed-title { font-size: 1.05rem !important; font-weight: 600; }
.ed-hint { color: var(--adm-muted); font-size: .84rem; margin: 12px 0 0; line-height: 1.55; }
.ed-hint code { font-size: .95em; }

/* ---------- Barre d'outils Markdown ---------- */
.ed-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 7px 8px;
  background: var(--adm-bg);
  border: 1px solid var(--adm-line);
  border-bottom: 0;
  border-radius: var(--adm-radius-sm) var(--adm-radius-sm) 0 0;
}
.ed-toolbar button {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 5px;
  padding: 5px 9px;
  font-family: "Poppins", sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--adm-ink-2);
  cursor: pointer;
  line-height: 1.3;
}
.ed-toolbar button:hover { background: #fff; border-color: var(--adm-line); color: var(--adm-red-dark); }
.ed-toolbar__sep { width: 1px; height: 18px; background: var(--adm-line); margin: 0 3px; }
.ed-toolbar__slot { margin-left: auto; color: var(--adm-red-dark) !important; }

#ed-content {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--adm-line);
  border-radius: 0 0 var(--adm-radius-sm) var(--adm-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .91rem;
  line-height: 1.75;
  resize: vertical;
  background: #fff;
  color: var(--adm-ink-2);
}
#ed-content:focus {
  outline: none;
  border-color: var(--adm-red);
  box-shadow: 0 0 0 3px rgba(210, 63, 63, .13);
}

/* ---------- Images à préparer ---------- */
.ed-slot {
  border: 1px solid var(--adm-line);
  border-left: 3px solid var(--adm-gold);
  border-radius: var(--adm-radius-sm);
  padding: 14px 16px;
  margin-top: 14px;
  background: #fffdf8;
}
.ed-slot.is-filled { border-left-color: var(--adm-green); background: #fbfefc; }

.ed-slot__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ed-slot__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem;
  font-weight: 600;
  color: var(--adm-ink);
  background: #fff;
  border: 1px solid var(--adm-line);
  border-radius: 4px;
  padding: 2px 8px;
}
.ed-slot__tag {
  font-size: .74rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--adm-red);
  background: var(--adm-red-soft);
  border-radius: 999px;
  padding: 3px 9px;
}
.ed-slot__state {
  margin-left: auto;
  font-size: .8rem;
  font-weight: 600;
  color: var(--adm-gold);
}
.ed-slot.is-filled .ed-slot__state { color: var(--adm-green); }

.ed-slot__body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }

.ed-slot__preview {
  aspect-ratio: 16 / 9;
  border-radius: var(--adm-radius-sm);
  border: 1px dashed var(--adm-line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ed-slot__preview img { width: 100%; height: 100%; object-fit: cover; }
.ed-slot__placeholder { font-size: .8rem; color: var(--adm-muted); }

.ed-slot__fields .adm-field { margin-bottom: 10px; }
.ed-slot__fields textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem;
}
.ed-slot__meta { font-size: .85rem; margin-bottom: 10px; }
.ed-slot__meta p { margin: 0 0 3px; }
.ed-slot__meta b { color: var(--adm-ink); }
.ed-slot__meta em { color: var(--adm-muted); }

.ed-slot__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ed-slot__note { font-size: .8rem; color: var(--adm-muted); margin: 10px 0 0; }

.ed-upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ed-upload input[type="file"] { font-size: .82rem; max-width: 100%; }

.ed-cover {
  border-radius: var(--adm-radius-sm);
  overflow: hidden;
  border: 1px solid var(--adm-line);
  margin-bottom: 14px;
}
.ed-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.ed-danger { border-top: 1px solid var(--adm-line); margin-top: 16px; padding-top: 16px; }

/* =====================================================================
   7. Réglages et notifications
   ===================================================================== */

.adm-checks { list-style: none; margin: 0; padding: 0; }
.adm-checks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--adm-line);
}
.adm-checks li:last-child { border-bottom: 0; }
.adm-checks__mark {
  flex: none;
  width: 21px; height: 21px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
  margin-top: 2px;
}
.adm-checks .is-ok   .adm-checks__mark { background: var(--adm-green-soft); color: var(--adm-green); }
.adm-checks .is-warn .adm-checks__mark { background: var(--adm-gold-soft);  color: var(--adm-gold); }
.adm-checks b { display: block; color: var(--adm-ink); font-size: .93rem; font-family: "Poppins", sans-serif; }
.adm-checks em { display: block; font-style: normal; color: var(--adm-muted); font-size: .85rem; word-break: break-word; }

.adm-queue { list-style: none; margin: 0 0 16px; padding: 0; }
.adm-queue li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--adm-line);
  font-size: .92rem;
}
.adm-queue li:last-child { border-bottom: 0; }
.adm-queue time { color: var(--adm-muted); font-size: .85rem; white-space: nowrap; min-width: 190px; }

.adm-flag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--adm-radius-sm);
  border: 1px solid var(--adm-line);
  border-left: 3px solid var(--adm-green);
  background: #fbfefc;
}
.adm-flag.is-spent { border-left-color: var(--adm-gold); background: #fffdf8; }
.adm-flag b { display: block; color: var(--adm-ink); font-family: "Poppins", sans-serif; font-size: .93rem; }
.adm-flag em { display: block; font-style: normal; color: var(--adm-muted); font-size: .86rem; }

/* Aperçu du rendu exact de l'e-mail, dans un cadre de même origine. */
.adm-preview {
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius-sm);
  overflow: hidden;
  background: #f7f5f4;
  margin-bottom: 14px;
}
.adm-preview iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}

.adm-log { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.adm-log li {
  padding: 7px 10px;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
  margin-bottom: 3px;
}
.adm-log .is-ok   { background: var(--adm-green-soft); color: #14532d; }
.adm-log .is-fail { background: var(--adm-red-soft);   color: var(--adm-red-deep); }

/* =====================================================================
   8. Responsive
   ===================================================================== */

@media (max-width: 1040px) {
  .ed-grid { grid-template-columns: 1fr; }
  .adm-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .adm-top__inner { height: auto; flex-wrap: wrap; padding: 10px 18px; gap: 12px; }
  /* flex-basis l'emporte sur width pour un élément flex : « flex: 1 » posé
     plus haut vaut « flex-basis: 0 », et la barre de navigation se
     retrouvait coincée à 137 px à droite des liens de compte, ses entrées
     empilées en colonne. C'est la BASE qu'il faut remettre à 100 %. */
  .adm-nav { order: 3; flex: 1 0 100%; }
  .adm-grid2 { grid-template-columns: 1fr; }
  .ed-slot__body { grid-template-columns: 1fr; }
  .ed-slot__preview { max-width: 260px; }
  /* Colonnes masquées en petit écran : Date (4) et Catégorie (5). En-tête
     ET cellules ensemble — masquer les unes sans les autres décale tout le
     reste de la ligne d'une colonne. */
  .adm-table th:nth-child(4), .adm-table td:nth-child(4),
  .adm-table th:nth-child(5), .adm-table td:nth-child(5) { display: none; }
  .adm-table__title { min-width: 190px; }
  .adm-table__query { max-width: 170px; }

  /* Calendrier : sept colonnes sur 390 px de large donnent des cases de
     50 px, où aucun titre ne tient. La grille passe donc en liste de
     journées, une par ligne, et les jours vides disparaissent. */
  .cal-head { display: none; }
  .cal-week { display: block; border-top: 0; }
  .cal-week.is-empty { background: none; }
  .cal-week__flag { position: static; display: block; padding: 6px 12px; }
  .cal-day {
    min-height: 0;
    border-right: 0;
    border-top: 1px solid var(--adm-line);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }
  /* Un mois de 31 lignes dont 23 vides ne se lit pas sur un téléphone.
     On ne garde que les jours qui portent quelque chose : le calendrier
     redevient ce qu'on vient y chercher, la liste des publications. */
  .cal-day.is-blank, .cal-day.is-out { display: none; }
  .cal-day__num { min-width: 46px; }
  .cal-day__num::after { content: attr(data-jour); font-weight: 400; margin-left: 5px; }
  .cal-item { flex: 1; min-width: 0; }
}