/* Backoffice des démonstrateurs Face-IT — socle commun.
   Le site fournit les jetons : --bg --surface --ink --muted --line --side-bg --side-ink
   --side-line --side-muted --accent --accent-ink --soft --radius --bw --font --display */
.admin-shell * { box-sizing: border-box; }
.admin-shell {
  display: grid; grid-template-columns: 15.5rem 1fr; min-height: 100vh;
  background: var(--bg); color: var(--ink); font-family: var(--font); font-size: .86rem; line-height: 1.45;
}
.admin-shell a { color: inherit; text-decoration: none; }
.admin-shell h1, .admin-shell h2, .admin-shell h3 { margin: 0; }

/* barre latérale */
.adm-side {
  background: var(--side-bg); color: var(--side-ink); padding: 1.1rem .9rem 1.4rem;
  display: flex; flex-direction: column; gap: 1.05rem; border-right: var(--bw, 1px) solid var(--side-line);
}
.adm-brand { display: flex; align-items: center; gap: .6rem; padding: .2rem .35rem .9rem; border-bottom: 1px solid var(--side-line); }
.adm-brand .mk {
  width: 1.9rem; height: 1.9rem; border-radius: var(--radius, 4px); background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-family: var(--display); font-size: .9rem; font-weight: 700; flex: 0 0 auto;
}
.adm-brand b { font-family: var(--display); font-size: .95rem; line-height: 1.1; font-weight: 600; display: block; }
.adm-brand span {
  display: block; font-family: var(--mono, ui-monospace); font-size: .52rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--side-muted); margin-top: .2rem;
}
.adm-group { display: grid; gap: .12rem; }
.adm-group > em {
  font-style: normal; font-family: var(--mono, ui-monospace); font-size: .52rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--side-muted); padding: .2rem .5rem .35rem;
}
.adm-link {
  display: flex; align-items: center; gap: .55rem; padding: .44rem .55rem; font-size: .79rem;
  color: var(--side-muted); border-radius: calc(var(--radius, 4px) * .7); border: 1px solid transparent;
}
.adm-link svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .8; }
.adm-link:hover { color: var(--side-ink); background: rgba(128,128,128,.14); }
.adm-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 500; }
.adm-link[aria-current="page"] svg { opacity: 1; }
.adm-link .adm-cnt { margin-left: auto; font-family: var(--mono, ui-monospace); font-size: .56rem; opacity: .85; }
.adm-foot { margin-top: auto; border-top: 1px solid var(--side-line); padding-top: .8rem; display: flex; align-items: center; gap: .55rem; }
.adm-av {
  width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-size: .66rem; font-weight: 600; flex: 0 0 auto;
}
.adm-foot b { display: block; font-size: .74rem; line-height: 1.2; }
.adm-foot span { font-family: var(--mono, ui-monospace); font-size: .53rem; color: var(--side-muted); letter-spacing: .06em; }

/* zone principale */
.adm-main { min-width: 0; display: flex; flex-direction: column; }
.adm-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .72rem 1.6rem;
  border-bottom: var(--bw, 1px) solid var(--line); background: var(--surface); flex-wrap: wrap;
}
.adm-crumb {
  display: flex; align-items: center; gap: .5rem; font-family: var(--mono, ui-monospace);
  font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.adm-crumb b { color: var(--ink); font-weight: 500; }
.adm-flag {
  display: inline-flex; align-items: center; gap: .4rem; border: 1px dashed var(--accent); color: var(--accent);
  padding: .24rem .5rem; border-radius: calc(var(--radius, 4px) * .6);
  font-family: var(--mono, ui-monospace); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase;
}
.adm-flag i { width: .38rem; height: .38rem; border-radius: 50%; background: var(--accent); display: block; }
.adm-topright { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.adm-btn {
  display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); padding: .42rem .72rem;
  border-radius: calc(var(--radius, 4px) * .7); font-size: .74rem; background: transparent; color: var(--ink);
  cursor: pointer; font-family: inherit;
}
.adm-btn:hover { border-color: var(--accent); color: var(--accent); }
.adm-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 500; }
.adm-btn.primary:hover { filter: brightness(1.08); color: var(--accent-ink); }
.adm-btn.ghost { border-color: transparent; color: var(--muted); }
.adm-btn.danger { border-color: var(--accent); color: var(--accent); }
.adm-btn:focus-visible, .adm-shell input:focus-visible, .adm-shell select:focus-visible, .adm-shell textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

.adm-content { padding: 1.4rem 1.6rem 2.4rem; display: grid; gap: 1.05rem; align-content: start; }
.adm-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.adm-pagehead h1 { font-family: var(--display); font-size: 1.55rem; letter-spacing: -.02em; line-height: 1.05; }
.adm-pagehead p { color: var(--muted); font-size: .78rem; margin: .25rem 0 0; }
.adm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.adm-kpi { background: var(--surface); border: var(--bw, 1px) solid var(--line); border-radius: var(--radius, 4px); padding: .8rem .9rem; }
.adm-kpi span { font-family: var(--mono, ui-monospace); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.adm-kpi b { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1.15; font-weight: 500; }
.adm-kpi small { font-size: .62rem; color: var(--accent); }
.adm-cols { display: grid; grid-template-columns: 1fr 18.5rem; gap: 1.05rem; align-items: start; }
.adm-left { display: grid; gap: 1.05rem; align-content: start; }
.adm-right { display: grid; gap: 1.05rem; align-content: start; }

.adm-panel { background: var(--surface); border: var(--bw, 1px) solid var(--line); border-radius: var(--radius, 4px); overflow: hidden; }
.adm-phead {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--line);
}
.adm-phead h2 { font-family: var(--display); font-size: .92rem; letter-spacing: -.01em; font-weight: 600; }
.adm-phead .act { font-family: var(--mono, ui-monospace); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: none; border: 0; cursor: pointer; }

.adm-table { width: 100%; border-collapse: collapse; }
.adm-table th {
  font-family: var(--mono, ui-monospace); font-size: .52rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: .5rem .9rem; border-bottom: 1px solid var(--line); font-weight: 400; background: var(--soft);
}
.adm-table td { padding: .55rem .9rem; border-bottom: 1px solid var(--line); font-size: .76rem; vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table tr:hover td { background: color-mix(in srgb, var(--soft) 60%, transparent); }
.adm-table .t { font-weight: 500; }
.adm-table .t span { display: block; font-family: var(--mono, ui-monospace); font-size: .55rem; color: var(--muted); font-weight: 400; margin-top: .1rem; }
.adm-st {
  display: inline-flex; align-items: center; gap: .3rem; font-family: var(--mono, ui-monospace); font-size: .52rem;
  letter-spacing: .06em; text-transform: uppercase; padding: .16rem .42rem; border-radius: calc(var(--radius, 4px) * .5);
  border: 1px solid transparent;
}
.adm-st i { width: .34rem; height: .34rem; border-radius: 50%; background: currentColor; }
.adm-st.publie { color: var(--accent); border-color: var(--accent); }
.adm-st.brouillon { color: var(--muted); border-color: var(--line); }
.adm-st.relecture { color: #c08a2e; border-color: #c08a2e; }
.adm-tag {
  font-family: var(--mono, ui-monospace); font-size: .5rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); padding: .14rem .34rem; border-radius: 2px; color: var(--muted);
}
.adm-lang { font-family: var(--mono, ui-monospace); font-size: .55rem; letter-spacing: .06em; border: 1px solid var(--line); padding: .1rem .3rem; border-radius: 2px; color: var(--muted); }
.adm-who { display: flex; align-items: center; gap: .4rem; font-size: .72rem; }
.adm-who .adm-av {
  width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--soft); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: .5rem; font-family: var(--mono, ui-monospace); color: var(--muted);
}

.adm-list { list-style: none; margin: 0; padding: 0; }
.adm-list li { display: flex; align-items: center; gap: .55rem; padding: .55rem .9rem; border-bottom: 1px solid var(--line); }
.adm-list li:last-child { border-bottom: 0; }
.adm-list .adm-av {
  width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--soft); border: 1px solid var(--line);
  display: grid; place-items: center; font-family: var(--mono, ui-monospace); font-size: .55rem; color: var(--muted); flex: 0 0 auto;
}
.adm-list b { display: block; font-size: .75rem; font-weight: 500; line-height: 1.2; }
.adm-list span.sub { font-size: .6rem; color: var(--muted); }
.adm-list .adm-role {
  margin-left: auto; font-family: var(--mono, ui-monospace); font-size: .5rem; letter-spacing: .06em;
  text-transform: uppercase; border: 1px solid var(--line); padding: .14rem .32rem; border-radius: 2px; color: var(--muted); white-space: nowrap;
}
.adm-perm { display: grid; gap: .35rem; padding: .6rem .9rem .8rem; }
.adm-perm div { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; font-size: .7rem; }
.adm-bars { display: flex; gap: 2px; }
.adm-bars i { width: .6rem; height: .42rem; border-radius: 1px; background: var(--line); display: block; }
.adm-bars i.on { background: var(--accent); }
.adm-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; padding: .7rem .9rem; }
.adm-media > div { aspect-ratio: 1; border-radius: calc(var(--radius, 4px) * .5); overflow: hidden; border: 1px solid var(--line); position: relative; }
.adm-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-meta { font-family: var(--mono, ui-monospace); font-size: .55rem; color: var(--muted); padding: 0 .9rem .7rem; letter-spacing: .04em; }

.adm-blocks { display: grid; }
.adm-block {
  display: grid; grid-template-columns: 1.4rem 1fr 6.2rem 5.4rem auto; gap: .7rem; align-items: center;
  padding: .6rem .9rem; border-bottom: 1px solid var(--line); font-size: .76rem;
}
.adm-block:last-child { border-bottom: 0; }
.adm-block .grip { color: var(--muted); line-height: 1; }
.adm-block b { font-weight: 500; }
.adm-block em { display: block; font-style: normal; font-family: var(--mono, ui-monospace); font-size: .55rem; color: var(--muted); margin-top: .1rem; }
.adm-block .tools { display: flex; gap: .3rem; }
.adm-block .tools button {
  width: 1.5rem; height: 1.5rem; border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 2px; cursor: pointer; font-size: .7rem; line-height: 1;
}
.adm-block .tools button:hover { border-color: var(--accent); color: var(--accent); }

.adm-feed div { display: grid; grid-template-columns: 4.6rem 1fr; gap: .7rem; padding: .5rem .9rem; border-bottom: 1px solid var(--line); font-size: .72rem; color: var(--muted); }
.adm-feed div:last-child { border-bottom: 0; }
.adm-feed time { font-family: var(--mono, ui-monospace); font-size: .55rem; }
.adm-feed b { color: var(--ink); font-weight: 500; }

/* formulaires du backoffice */
.adm-form { display: grid; gap: .8rem; padding: 1rem; }
.adm-field { display: grid; gap: .25rem; }
.adm-field label { font-family: var(--mono, ui-monospace); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.adm-field input, .adm-field select, .adm-field textarea {
  font: inherit; font-size: .85rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: calc(var(--radius, 4px) * .6); padding: .5rem .6rem; width: 100%;
}
.adm-field textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
.adm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.adm-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.adm-hint { font-size: .7rem; color: var(--muted); }
.adm-empty { padding: 1.2rem .9rem; color: var(--muted); font-size: .78rem; }
.adm-inline {
  font: inherit; font-size: .74rem; color: var(--ink); background: transparent;
  border: 1px solid transparent; border-radius: 3px; padding: .2rem .3rem; max-width: 13rem; width: 100%;
}
.adm-inline:hover, .adm-inline:focus { border-color: var(--line); background: var(--bg); }
.adm-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; padding: .9rem; }
.adm-media-grid figure { margin: 0; border: 1px solid var(--line); border-radius: calc(var(--radius,4px)*.7); overflow: hidden; background: var(--bg); }
.adm-media-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.adm-media-grid figcaption { padding: .45rem .55rem .2rem; display: grid; gap: .1rem; }
.adm-media-grid figcaption b { font-size: .72rem; font-weight: 500; }
.adm-media-grid figcaption span { font-family: var(--mono, ui-monospace); font-size: .53rem; color: var(--muted); }
.adm-media-grid .adm-btn { margin: .35rem .55rem .55rem; font-size: .65rem; padding: .2rem .45rem; }
.adm-toast {
  position: fixed; right: 1.4rem; bottom: 5.2rem; z-index: 80; background: var(--accent); color: var(--accent-ink);
  padding: .6rem .9rem; border-radius: calc(var(--radius, 4px) * .7); font-size: .78rem; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.admin-shell.preview { font-size: .9rem; }

@media (max-width: 1100px) {
  .admin-shell { grid-template-columns: 1fr; }
  .adm-side { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .adm-group { display: none; }
  .adm-cols { grid-template-columns: 1fr; }
  .adm-kpis { grid-template-columns: 1fr 1fr; }
}