/* Hallmark · v2.0.0 · redesign: full · scope: app · shape: app screen · theme: brand (IMATAG × Activo, theme-imatag-activo.css) · signature: la grille d'aperçus du registre */
/* Hallmark · critique: le registre était un tableau de lignes de texte où l'image, objet du produit, tenait dans 44 px ; l'image mène désormais, le statut se lit sur la carte et se filtre en un clic */

/* Registre des images : grille d'aperçus (vue par défaut), filtres de statut en onglets, grand aperçu dans le tiroir.
   Chargé après theme-imatag-activo.css ; n'utilise que les jetons du portail et ceux déclarés ci-dessous. */
:root {
  --reg-carte-min: 210px;            /* largeur minimale d'une carte de la grille */
  --reg-visuel-fond: #eceefb;        /* fond neutre derrière une vignette (IMATAG gray-100) */
  --reg-ok-fond: #e3f6ee;
  --reg-warn-fond: #fdf1dc;
  --reg-bad-fond: #fbe6e3;
  --reg-info-fond: #eceefb;
  --reg-blanc: #fbfbff;            /* blanc teinté indigo, texte sur fond sombre */
  --reg-dur-micro: 120ms;
}

/* ------------------------------------------------------------ outils : statuts, recherche, bascule de vue */
.registre .report-section-head { align-items: flex-end; }
.registre-vues { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 2px; }
.registre-vues a { padding: 4px 16px; min-height: 32px; display: inline-flex; align-items: center; border-radius: 4px; color: var(--muted); font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: background-color var(--reg-dur-micro) ease, color var(--reg-dur-micro) ease; }
.registre-vues a:hover { color: var(--navy); }
.registre-vues a[aria-current=page] { background: var(--imt-indigo); color: var(--reg-blanc); }

.registre-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3) var(--esp-5); margin-bottom: var(--esp-5); }
.registre-statuts { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.registre-statuts a { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: border-color var(--reg-dur-micro) ease, background-color var(--reg-dur-micro) ease; }
.registre-statuts a:hover { border-color: var(--imt-violet-gris); }
.registre-statuts a[aria-current=page] { border-color: var(--imt-indigo); background: var(--imt-indigo); color: var(--reg-blanc); }
.registre-compte { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.registre-statuts a[aria-current=page] .registre-compte { color: var(--imt-menthe); }

.registre-recherche { display: flex; gap: var(--esp-2); flex: 0 1 380px; min-width: min(100%, 260px); }
.registre-recherche label { flex: 1; margin: 0; }
.registre-recherche input { width: 100%; min-height: 36px; border-color: var(--muted); }

/* ------------------------------------------------------------ grille d'aperçus */
.mediatheque { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--reg-carte-min)), 1fr)); gap: var(--esp-4); }
.media-carte { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: clip;
  transition: border-color var(--reg-dur-micro) ease, box-shadow var(--reg-dur-micro) ease; }
.media-carte:hover { border-color: var(--imt-violet-gris); box-shadow: var(--shadow-lg); }
.media-carte:focus-within { border-color: var(--accent); }
.media-visuel { display: block; aspect-ratio: 4 / 3; background: var(--reg-visuel-fond); overflow: clip; }
.media-visuel img { display: block; width: 100%; height: 100%; object-fit: contain; color: transparent; }
.media-corps { display: grid; gap: var(--esp-2); align-content: start; padding: var(--esp-3) var(--esp-4) var(--esp-4); min-width: 0; }
.media-nom { font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--navy); text-decoration: none; overflow-wrap: anywhere; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Toute la carte est cliquable par le lien du nom (un seul arrêt de tabulation) */
.media-nom::after { content: ''; position: absolute; inset: 0; }
.media-nom:hover { color: var(--accent); }
.media-nom:focus-visible { outline: none; }
.media-carte:has(.media-nom:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.media-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-1) var(--esp-2); margin: 0; }
.media-etat { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12.5px; font-weight: 600; background: var(--reg-info-fond); color: var(--info); white-space: nowrap; }
.media-etat[data-tone=ok] { background: var(--reg-ok-fond); color: var(--ok); }
.media-etat[data-tone=warn] { background: var(--reg-warn-fond); color: var(--warn); }
.media-etat[data-tone=bad] { background: var(--reg-bad-fond); color: var(--bad); }
.media-date { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.media-motif { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Les actions passent au-dessus du lien qui couvre la carte */
.media-actions { position: relative; z-index: 1; margin-top: 4px; }
.media-actions .btn { width: 100%; justify-content: center; min-height: 32px; }

/* État pressé : la pastille ou la carte s'assombrit d'un cran pendant le clic */
.registre-vues a:active, .registre-statuts a:active { background: var(--line-soft); }
.registre-statuts a[aria-current=page]:active, .registre-vues a[aria-current=page]:active { background: var(--imt-indigo-2); }
.media-carte:active { border-color: var(--imt-indigo); }

/* Filtres de statut : la pastille garde la couleur de son état quand elle n'est pas choisie */
.registre-statuts a[data-tone=ok]:not([aria-current]) .registre-compte { color: var(--ok); }
.registre-statuts a[data-tone=bad]:not([aria-current]) .registre-compte { color: var(--bad); }
.registre-statuts a[data-tone=warn]:not([aria-current]) .registre-compte { color: var(--warn); }

.registre :is(.registre-vues a, .registre-statuts a, .media-actions .btn):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; transition: none; }

/* ------------------------------------------------------------ aperçu du tiroir : une seule grande image */
.drawer-content > h2 { overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
.apercu-seul { margin: var(--esp-4) 0 0; display: grid; gap: var(--esp-2); }
.apercu-seul img { display: block; width: 100%; max-height: 520px; object-fit: contain; border-radius: var(--radius); background: var(--reg-visuel-fond); }
.apercu-seul figcaption { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .media-carte, .registre-vues a, .registre-statuts a { transition: none; }
}
@media (max-width: 720px) {
  .registre-recherche { flex: 1 1 100%; }
}