/* SMITothèque — feuille de style unique, mobile d'abord (PRD §27).
   Aucune police ni ressource externe : la page doit s'afficher sur un réseau
   hospitalier fermé. */

:root {
  --bg: #f5f7f7;
  --surface: #ffffff;
  --border: #d7dfde;
  --text: #16201f;
  --muted: #62726f;
  --accent: #0f766e;
  --accent-ink: #ffffff;
  --danger: #b42318;
  --warn-bg: #fff7ed;
  --warn-border: #fdba74;
  --ok-bg: #ecfdf5;
  --ok-border: #6ee7b7;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 32, 31, .08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1413;
    --surface: #161f1e;
    --border: #2a3736;
    --text: #e6edec;
    --muted: #94a3a0;
    --accent: #2dd4bf;
    --accent-ink: #06201d;
    --danger: #f87171;
    --warn-bg: #2a2013;
    --warn-border: #a16207;
    --ok-bg: #0f2a22;
    --ok-border: #14532d;
    --shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.4rem; margin: .2em 0 .4em; }
h2 { font-size: 1.1rem; margin: 0 0 .6em; }
h3 { font-size: 1rem; margin: 1em 0 .3em; }
a { color: var(--accent); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.break { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .85rem; }
.inline { display: inline; }
.grow { flex: 1 1 12rem; }

/* --- structure ----------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem max(.8rem, env(safe-area-inset-left));
  background: var(--accent); color: var(--accent-ink);
}
.brand { color: inherit; font-weight: 650; text-decoration: none; letter-spacing: .01em; }
.topnav { display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.topnav a { color: inherit; text-decoration: none; }
.topnav a:hover { text-decoration: underline; }
.topbar .btn-primary { background: var(--accent-ink); color: var(--accent); }
/* La barre est peinte en --accent : un lien de la même couleur y disparaît. */
.topbar .linkish { color: inherit; }

.page { max-width: 1100px; margin: 0 auto; padding: 1rem .8rem 5rem; }
.footer { padding: 0 .8rem 2rem; text-align: center; color: var(--muted); font-size: .8rem; }

.auth { max-width: 26rem; margin: 3rem auto; }

/* --- formulaires --------------------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: .45rem; }
.stack-tight { display: flex; flex-direction: column; gap: .1rem; }
.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }

label { font-size: .9rem; font-weight: 550; }
label.grow, label.checkline { font-weight: 450; }

input, select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
input[type="checkbox"], input[type="radio"] { width: auto; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

.checkline { display: flex; align-items: center; gap: .5rem; }
.checkline.tight { font-size: .8rem; gap: .3rem; }
.fieldset {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .7rem .8rem; margin: .4rem 0;
}
.fieldset legend { font-size: .85rem; font-weight: 600; padding: 0 .3rem; }

.btn {
  display: inline-block; padding: .65rem 1rem;
  font: inherit; font-weight: 550; text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: .4rem .7rem; font-size: .85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: progress; }

.linkish {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer;
}
.linkish.danger { color: var(--danger); }

/* --- messages ------------------------------------------------------------ */

.alert { padding: .7rem .8rem; border-radius: var(--radius); border: 1px solid; }
.alert-error { background: var(--warn-bg); border-color: var(--danger); color: var(--danger); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-border); }
.alert-ok { background: var(--ok-bg); border-color: var(--ok-border); }

.status { min-height: 1.4em; font-size: .9rem; color: var(--muted); }
.status-ok { color: var(--accent); }
.status-warn { color: #b45309; }
.status-error { color: var(--danger); }

/* --- recherche et bibliothèque ------------------------------------------- */

.search { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.search input[type="search"] { flex: 1 1 14rem; }
.filters { flex-basis: 100%; }
.filters summary { cursor: pointer; font-size: .9rem; color: var(--muted); padding: .3rem 0; }
.filter-grid {
  display: grid; gap: .6rem; margin: .5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.filter-actions { display: flex; gap: .5rem; }

.tagbar { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.tag {
  padding: .2rem .6rem; font-size: .82rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.result-count { color: var(--muted); font-size: .88rem; margin: .5rem 0; }

.grid {
  display: grid; gap: .7rem; list-style: none; padding: 0; margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.card a { color: inherit; text-decoration: none; display: block; }
.thumb { position: relative; aspect-ratio: 4 / 3; background: var(--bg); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: .78rem; color: var(--muted); text-align: center; padding: .5rem;
}
.badge, .fav {
  position: absolute; top: .35rem; padding: .05rem .4rem;
  font-size: .75rem; border-radius: 999px;
  background: rgba(0, 0, 0, .62); color: #fff;
}
.badge { right: .35rem; }
.fav { left: .35rem; }
.card-body { padding: .5rem .6rem .7rem; }
.card-title { margin: 0 0 .2rem; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.card-meta { margin: 0; font-size: .78rem; color: var(--muted); }
.ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }

.pager { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 1.2rem 0; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-inline { color: var(--muted); padding: 1rem 0; }

.fab {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; line-height: 1; text-decoration: none;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* --- fiche de cas -------------------------------------------------------- */

.case-head .ref { color: var(--muted); font-size: .85rem; }
.case-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem; }
.pill {
  display: inline-block; padding: .05rem .5rem; font-size: .75rem;
  border: 1px solid var(--border); border-radius: 999px;
}
.pill-warn { border-color: var(--warn-border); background: var(--warn-bg); }

.gallery-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin: .2rem 0 .5rem;
}
.gallery-head p { margin: 0; font-size: .85rem; }

.gallery {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.shot { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.shot img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.shot figcaption { padding: .45rem .55rem; font-size: .8rem; }
.shot-caption {
  margin: 0 0 .35rem; line-height: 1.35;
  overflow-wrap: anywhere;
}
.shot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.caption-edit summary { cursor: pointer; color: var(--accent); }
.caption-edit form { margin-top: .35rem; }
.caption-edit input { font-size: .85rem; }

/* --- visionneuse plein écran --------------------------------------------- */

body.has-lightbox { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.lightbox[hidden] { display: none; }

.lb-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background-repeat: no-repeat; background-position: center;
  background-size: contain;
  touch-action: pan-y;
}
/* Pendant le chargement, la vignette agrandie sert d'aperçu : floutée pour ne
   pas laisser croire que c'est la résolution définitive. */
.lb-stage.is-loading { filter: blur(6px); }

.lb-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
  opacity: 0; transition: opacity .12s linear;
}

.lb-close, .lb-prev, .lb-next {
  position: absolute; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .5); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
  line-height: 1;
}
.lb-close {
  top: calc(.6rem + env(safe-area-inset-top)); right: .6rem;
  width: 2.6rem; height: 2.6rem; font-size: 1.7rem;
}
.lb-prev, .lb-next {
  top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem; font-size: 2rem;
}
.lb-prev { left: .5rem; }
.lb-next { right: .5rem; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(0, 0, 0, .78); }
.lb-prev[hidden], .lb-next[hidden] { display: none; }

.lb-bar {
  position: absolute; left: 0; right: 0;
  bottom: 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  color: #fff; text-align: center;
  pointer-events: none;
}
.lb-caption { margin: 0 0 .2rem; font-size: .9rem; line-height: 1.4; }
.lb-caption[hidden] { display: none; }
.lb-count { margin: 0; font-size: .78rem; opacity: .75; }

@media (pointer: coarse) {
  /* Au doigt, on fait glisser : les flèches encombrent plus qu'elles n'aident. */
  .lb-prev, .lb-next { display: none; }
}

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem; margin: 1rem 0;
}
.reveal { margin-top: .8rem; }
.reveal summary {
  cursor: pointer; color: var(--accent); font-weight: 600; padding: .4rem 0;
}
.panel-identity { border-left: 3px solid var(--accent); }
.panel-danger { border-left: 3px solid var(--danger); }
.panel-reveal { border-left: 3px solid var(--danger); }

.prose { white-space: pre-wrap; margin: 0 0 .6rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: .6rem 0; font-size: .9rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.ipp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.6rem; letter-spacing: .06em; margin: .3rem 0 1rem;
}

/* --- capture et caviardage ----------------------------------------------- */

.picker input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.picker-face {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: 1.6rem 1rem; text-align: center; cursor: pointer;
  background: var(--surface);
  border: 2px dashed var(--border); border-radius: var(--radius);
}
.picker input:focus-visible + .picker-face { outline: 2px solid var(--accent); }

.queue { list-style: none; padding: 0; margin: .4rem 0; display: flex; flex-direction: column; gap: .4rem; }
.queue-item {
  display: grid; align-items: center; gap: .5rem;
  grid-template-columns: 3rem 1fr auto;
  padding: .35rem; font-size: .85rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.queue-thumb { width: 3rem; height: 3rem; object-fit: cover; border-radius: 6px; background: var(--bg); }
.queue-caption { grid-column: 1 / -1; font-size: .85rem; padding: .4rem .5rem; }
.queue-bar { grid-column: 1 / -1; width: 100%; height: .4rem; }
.queue-item.is-done { border-color: var(--ok-border); }
.queue-item.is-failed { border-color: var(--danger); }

.redactor { margin: .6rem 0; }
#canvas { max-width: 100%; touch-action: none; cursor: crosshair; border-radius: var(--radius); }

/* --- administration ------------------------------------------------------ */

.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.table th, .table td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { color: var(--muted); font-weight: 600; }
.row-alert { background: var(--warn-bg); }
.detail { max-width: 24rem; }

.stats {
  display: grid; gap: .6rem; list-style: none; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.stats li {
  display: flex; flex-direction: column; padding: .8rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .82rem; color: var(--muted);
}
.stat-n { font-size: 1.5rem; font-weight: 650; color: var(--text); }
.stat-alert { border-left: 3px solid var(--danger); }
.checklist { padding-left: 1.1rem; font-size: .9rem; }
.checklist li { margin: .25rem 0; }

@media (min-width: 720px) {
  .page { padding: 1.4rem 1.2rem 4rem; }
  h1 { font-size: 1.75rem; }
  .fab { display: none; }
}