/* Styles admin : compléments légers à Pico CSS. */
.inline { display: inline; margin: 0; }
.inline button { margin: 0; }
button.small, a[role="button"].small { padding: .25rem .6rem; font-size: .85rem; }
.right { float: right; font-weight: normal; }
.muted { color: var(--pico-muted-color); }
.ok-text { color: #3fb950; }
.err-text { color: #f85149; }

/* Messages flash */
.flash { padding: .75rem 1rem; margin-bottom: 1rem; border-left: 4px solid; }
.flash.ok { border-color: #3fb950; }
.flash.err { border-color: #f85149; }
.warning { padding: .75rem 1rem; border-left: 4px solid #d29922; background: rgba(210, 153, 34, .1); }

/* Compteurs */
.counters article { text-align: center; padding: 1rem; margin-bottom: 1rem; }
.counters small { display: block; color: var(--pico-muted-color); }
.counters strong { font-size: 1.8rem; }

/* Listes clé/valeur */
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
dl.kv dt { color: var(--pico-muted-color); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }

/* Vignettes et états */
.thumb-cell { width: 112px; }
.thumb { display: block; width: 96px; height: 54px; object-fit: cover; border-radius: 4px; background: #222; }
.thumb.placeholder { display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--pico-muted-color); }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 1rem; font-size: .8rem; white-space: nowrap; background: #30363d; }
.badge.ready, .badge.done { background: #1f6f3a; color: #fff; }
.badge.processing, .badge.running { background: #1f4f8f; color: #fff; }
.badge.uploaded, .badge.queued { background: #5a5a5a; color: #fff; }
.badge.error { background: #8f1f1f; color: #fff; }
tr.disabled, article.disabled { opacity: .6; }

/* Détail média */
.preview-frame { aspect-ratio: 16 / 9; width: 100%; background: #000; margin-bottom: 1rem; }
.preview-frame iframe { width: 100%; height: 100%; border: 0; }
.preview-photo { max-width: 100%; margin-bottom: 1rem; }
textarea.snippet { font-family: monospace; font-size: .8rem; resize: vertical; }
table.urls td { vertical-align: middle; }
table.urls input { margin: 0; font-size: .85rem; }
pre.log { max-height: 20rem; overflow: auto; font-size: .75rem; white-space: pre-wrap; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.inline-label { display: inline-flex; align-items: center; gap: .3rem; margin-right: 1rem; }

/* Jobs */
.progress-cell { min-width: 9rem; }
.progress-cell progress { margin: 0; width: 6rem; display: inline-block; vertical-align: middle; }

/* Pagination et périodes */
.pagination ul, .ranges ul { display: flex; gap: 1rem; list-style: none; padding: 0; justify-content: center; }
.ranges ul { justify-content: flex-start; margin-bottom: 1rem; }
.ranges a[aria-current="page"] { font-weight: bold; text-decoration: underline; }

/* Bouton copier : retour visuel */
button[data-copy].copied { background: #1f6f3a; border-color: #1f6f3a; color: #fff; }

/* Pages d'authentification (connexion, 2FA) : carte étroite centrée, QR code lisible sur fond sombre */
.auth-card { max-width: 28rem; margin: 3rem auto; }
figure.qr { text-align: center; }
figure.qr img { background: #fff; padding: .5rem; border-radius: .25rem; }
code.secret { letter-spacing: .12em; }
/* Aperçu du bouton de lecture (Réglages) */
.gate-preview td { vertical-align: middle; }
.gate-chip { display: inline-block; padding: .3rem .9rem; border-radius: 999px; background: #e8552b; color: #fff; font-weight: 600; white-space: nowrap; }
.gate-chip--icon { width: 2.4rem; height: 2.4rem; padding: 0; line-height: 2.4rem; text-align: center; }

/* Tags : puces colorées par type (teintes translucides, lisibles en thème sombre comme clair) */
.tag-chip {
  --tag-hue: 140, 148, 158;
  display: inline-flex; align-items: center; gap: .25rem; max-width: 100%;
  margin: .1rem .25rem .1rem 0; padding: .05rem .55rem; border-radius: 999px;
  border: 1px solid rgba(var(--tag-hue), .55); background: rgba(var(--tag-hue), .16);
  color: var(--pico-color); font-size: .8rem; line-height: 1.6; text-decoration: none; overflow-wrap: anywhere;
}
a.tag-chip:hover, a.tag-chip:focus-visible { background: rgba(var(--tag-hue), .32); color: var(--pico-color); text-decoration: none; }
.tag-chip.tag-person { --tag-hue: 88, 166, 255; }
.tag-chip.tag-country { --tag-hue: 63, 185, 80; }
.tag-chip.tag-edition { --tag-hue: 232, 87, 42; }
.tag-chip.tag-practice { --tag-hue: 163, 113, 247; }
.tag-line { margin-top: .2rem; }
.tag-line .feat { font-size: .8rem; margin-right: .25rem; }
.tag-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.tag-chip.removable span { font-weight: bold; }

/* Champs de saisie en puces */
.tags-block { margin-bottom: var(--pico-spacing); }
.tag-field { margin-bottom: .75rem; }
.tag-field small { display: block; margin-top: .2rem; color: var(--pico-muted-color); }
.tag-field[data-tag-ready] .tag-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .3rem .5rem;
  border: var(--pico-border-width) solid var(--pico-form-element-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-form-element-background-color); cursor: text;
}
.tag-field[data-tag-ready] .tag-box:focus-within { border-color: var(--pico-form-element-focus-color); }
.tag-field[data-tag-ready] .tag-box input { flex: 1 1 8rem; min-width: 8rem; margin: 0; padding: .25rem; border: 0; background: transparent; box-shadow: none; height: auto; }
.tag-chips { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 100%; list-style: none; margin: 0; padding: 0; }
.tag-chips:empty { display: none; }
.tag-chips li.tag-chip { margin: 0; list-style: none; }
/* Croix de retrait : cible de 24 × 24 px au moins (WCAG 2.5.8), anneau de focus visible au clavier. */
.tag-chip .tag-remove {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; min-height: 1.5rem; margin: 0 -.35rem 0 0; padding: 0; width: auto;
  border: 0; border-radius: 50%; background: transparent; color: inherit;
  font-size: 1rem; line-height: 1; cursor: pointer; box-shadow: none;
}
.tag-chip .tag-remove:hover, .tag-chip .tag-remove:focus-visible { color: #f85149; background: rgba(var(--tag-hue), .3); }
.tag-chip .tag-remove:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 1px; }
/* Pays inconnu : bordure pointillée rouge */
.tag-chip.tag-invalid { --tag-hue: 248, 81, 73; border-style: dashed; }
/* Puce du filtre actif dans la liste des médias */
.tag-chip.is-active { background: rgba(var(--tag-hue), .4); font-weight: 600; }
/* Texte réservé aux lecteurs d'écran */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.upload-tags-warning { margin-top: .5rem; }
fieldset:disabled .tag-box { opacity: .6; cursor: not-allowed; }

/* Page /tags */
.tag-section { margin-bottom: 2rem; }
.tag-add fieldset, .tag-rename fieldset { margin: 0; }
.tag-add { max-width: 32rem; }
.tag-table td { vertical-align: middle; }
.tag-rename input { margin: 0; font-size: .85rem; min-width: 8rem; }
.upload-tags-block { margin-bottom: 1rem; }