/* styles.css · Règles visuelles Loom (Carte postale & Maquette suite-ecrans.html) */
/* Règle d'or : aucune couleur en dur, tout en variables tokens.css / diseno.css */

/* Loom v1 est clair, toujours (dueño, 2026-10-05) : le téléphone en mode sombre n'y change rien.
   `data-theme="light"` sur <html> écarte le bloc sombre de tokens.css ; color-scheme garde les contrôles natifs clairs. */
:root[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#main-header {
  height: var(--size-bar);
  padding: 0 var(--space-4);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.logo-symbol {
  font-size: var(--text-2xl);
  color: var(--color-primary);
  line-height: var(--leading-2xl);
}

h1, h2, .top h1 {
  font-family: var(--font-display);
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide);
  font-weight: var(--font-weight-bold);
}

.top h1 {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-ink);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.past {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-subtle);
  color: var(--color-ink2);
  white-space: nowrap;
}

.past.ok {
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
  color: var(--color-success);
}

.past.wait {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
}

.net-status {
  background-color: var(--color-danger);
  color: var(--color-primary-ink);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

#app-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.scr {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.scr.active {
  display: flex;
  flex-direction: column;
}

/* --- SWIPE (DÉCOUVRIR) --- */
#view-swipe {
  padding: 0;
  overflow: hidden;
  position: relative;
}

.swipe-zone {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: var(--space-3) var(--space-4) calc(var(--size-bar) + var(--space-16));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.deck {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.lcard {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  touch-action: pan-y;
  transition: transform 0.28s ease, opacity 0.28s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.lcard.drag {
  transition: none;
}

.lcard:not(.actuelle) {
  transform: scale(0.96) translateY(12px);
  pointer-events: none;
}

.lcard:not(.actuelle) ~ .lcard:not(.actuelle) {
  opacity: 0;
}

.lcard .cscroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Le geste horizontal appartient à l'app : la règle doit être sur le conteneur qui défile, pas seulement sur la carte
     (le navigateur ne regarde pas plus haut que le premier conteneur défilant). Sans elle, Android prenait le doigt
     pour un défilement et coupait le swipe (dueño, 2026-10-05). */
  touch-action: pan-y;
}

.lcard.drag, .lcard.drag * { user-select: none; -webkit-user-select: none; }

/* Tampons d'action */
.stamp {
  position: absolute;
  top: var(--space-6);
  z-index: 10;
  padding: var(--space-1) var(--space-3);
  border: 3px solid;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide);
  font-size: var(--text-lg);
  opacity: 0;
  background: var(--color-surface);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.st-no {
  right: var(--space-4);
  color: var(--color-danger);
  border-color: var(--color-danger);
  transform: rotate(10deg);
}

.st-yes {
  left: var(--space-4);
  color: var(--color-success);
  border-color: var(--color-success);
  transform: rotate(-10deg);
}

.st-tg {
  top: calc(var(--space-6) + var(--space-10));
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Gestes flottants */
.gestes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 104px;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  pointer-events: none;
}

.geste {
  pointer-events: auto;
  width: var(--size-fab);
  height: var(--size-fab);
  min-width: 56px;
  min-height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.geste:active {
  transform: scale(0.92);
}

.geste svg {
  width: var(--size-icon);
  height: var(--size-icon);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.geste.no svg {
  stroke: var(--color-danger);
}

.geste.yes svg {
  stroke: var(--color-success);
}

.geste.tg {
  width: var(--size-tap);
  height: var(--size-tap);
  min-width: 44px;
  min-height: 44px;
}

.geste.tg svg {
  stroke: var(--color-ink);
  fill: var(--color-primary);
}

/* --- FICHE ACTEUR (COMPOSANT PARTAGÉ SWIPE & VUE FICHE) --- */
.fiche {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.fiche-h {
  position: relative;
}

.fiche-h .paysage {
  height: 104px;
  background-size: cover;
  background-position: center;
}

.fiche-h .mono-av {
  position: absolute;
  left: var(--space-4);
  top: 80px;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-surface);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  box-shadow: 0 0 0 3px var(--color-surface);
  background: var(--color-c-hn);
}

.fiche-h .mono-av.c-mx { background: var(--color-c-mx); }
.fiche-h .mono-av.c-gt { background: var(--color-c-gt); }
.fiche-h .mono-av.c-sv { background: var(--color-c-sv); }
.fiche-h .mono-av.c-hn { background: var(--color-c-hn); }
.fiche-h .mono-av.c-ni { background: var(--color-c-ni); }
.fiche-h .mono-av.c-cr { background: var(--color-c-cr); }
.fiche-h .mono-av.c-pa { background: var(--color-c-pa); }

.fiche-h .credit {
  position: absolute;
  right: var(--space-2);
  top: 84px;
  font-size: var(--text-xs);
  color: var(--color-surface);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.fiche-h .tx {
  padding: var(--space-8) var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fiche-h .tx h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--font-weight-bold);
  font-stretch: 112%;
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: var(--space-1) 0;
}

.fiche-h .tx .row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.fiche-h .tx .row-meta .meta {
  font-size: var(--text-sm);
  color: var(--color-ink2);
}

.attrs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--space-1);
}

.attrs i {
  font-style: normal;
  font-weight: var(--font-weight-regular);
  color: var(--color-meta);
  margin-right: var(--space-1);
}

.fiche-sec {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lcard .fiche-sec:last-child {
  border-bottom: 0;
}

.titre-sec {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  color: var(--color-meta);
  margin-top: var(--space-2);
}

.recit {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-ink);
  margin: 0;
}

/* La biographie est une suite de phrases courtes, une par ligne ; celles qui portent une preuve s'ouvrent au toucher. */
.recit + .recit { margin-top: var(--space-1); }
.recit.fait-ligne { cursor: pointer; min-height: var(--size-tap); display: flex; align-items: center; }

.signaux {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.signal {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent-soft) 28%, var(--color-surface));
  color: var(--color-ink);
}

/* ---------- Lignes de liste canoniques : contenu à même le fond, une hairline entre deux ---------- */
.ligne {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  padding: var(--space-3) 0;
  width: 100%;
  text-align: left;
}

.fiche .ligne:last-child,
#filList .ligne:last-child {
  border-bottom: 0;
}

button.ligne:active {
  background: var(--color-subtle);
}

.ligne .n {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-ink);
}

.ligne .s {
  color: var(--color-ink2);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.ligne .row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.ligne .row .grow {
  flex: 1;
  min-width: 0;
}

.ligne .src {
  display: block;
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-meta);
}

.ligne.fait-ligne {
  cursor: pointer;
}

.ligne.fait-ligne:hover,
.ligne.fait-ligne:active {
  background: var(--color-subtle);
}

.bt {
  min-height: var(--size-tap);
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
}

.bt:active {
  background: var(--color-subtle);
}

.g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  width: 100%;
}

.exemple {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  color: var(--color-meta);
}

/* --- SHORTLIST --- */
.shortlist-nav {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-hairline);
  background-color: var(--color-surface);
}

.sl-content {
  padding: var(--space-2) var(--space-4) calc(var(--size-bar) + var(--space-6));
  overflow-y: auto;
  flex: 1;
}

.grupo-lista {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  color: var(--color-meta);
}

.ligne.fila {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  border-radius: 0;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  min-height: 48px;
}

.ligne.fila .vig {
  position: relative;
  width: var(--size-thumb);
  height: var(--size-thumb);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-subtle);
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ligne.fila .vig .flag {
  position: absolute;
  left: var(--space-1);
  bottom: var(--space-1);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--font-weight-bold);
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
}

.ligne.fila .txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.ligne.fila .n {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ligne.fila .s {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-meta);
}

.ligne.fila .chev {
  color: var(--color-meta);
  font-size: var(--text-xl);
  line-height: var(--leading-md);
}

button.ligne.fila:active {
  background: var(--color-subtle);
}

/* --- VUE FICHE DÉDIÉE --- */
#view-fiche {
  background: var(--color-surface);
  overflow-y: auto;
  height: 100%;
}

#view-fiche.active {
  display: flex;
  flex-direction: column;
}

#view-fiche .top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-hairline);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-bar);
}

#view-fiche .top h1 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fiche-scroll {
  padding-bottom: var(--space-8);
}

/* --- FEUILLE DE PREUVE MODALE (HOJA) --- */
.hoja-fondo {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.4);
}

.hoja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  background: var(--color-surface);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding: var(--space-2) var(--space-4) var(--space-6);
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  max-height: 85vh;
  overflow-y: auto;
}

.hoja-asa {
  width: var(--size-handle);
  height: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-border);
  margin: 0 auto var(--space-2);
}

.datos {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.datos dt {
  color: var(--color-meta);
}

.datos dd {
  margin: 0;
  color: var(--color-ink);
}

.cita {
  margin: 0;
  padding: var(--space-3);
  border-left: 3px solid var(--color-primary);
  background: var(--color-subtle);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-style: italic;
}

/* --- TOAST --- */
.toast {
  position: fixed;
  bottom: calc(var(--size-bar) + var(--space-4));
  left: var(--space-4);
  right: var(--space-4);
  background-color: var(--color-ink);
  color: var(--color-surface);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.toast-undo {
  background: none;
  border: none;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  padding: 0 var(--space-2);
}

/* --- TABBAR --- */
/* --- TABBAR --- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--color-surface);
  border-top: 1px solid var(--color-hairline);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  padding: var(--space-2) var(--space-3);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: var(--space-1);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-meta);
  min-height: var(--size-tap);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  font-family: var(--font-body);
}

.tab.on {
  color: var(--color-ink);
}

.tab svg {
  width: var(--size-icon);
  height: var(--size-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab.on svg {
  stroke: var(--color-ink);
}

.tab.on::after {
  content: "";
  display: block;
  width: 20px;
  height: 3px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  margin-top: var(--space-1);
}

.vacio {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: var(--space-6);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-xl);
  box-sizing: border-box;
}

/* --- RECHERCHE ET CARTE DES ZONES --- */
.zmap {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-hairline);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-meta) 16%, var(--color-bg));
  margin: var(--space-2) 0;
}

.zmap svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 420;
}

.zmap .ctry {
  fill: var(--color-surface);
  stroke: var(--color-hairline);
  stroke-width: 1.2;
  cursor: pointer;
}

.zmap .ctry.sel {
  fill: var(--color-subtle);
  stroke: var(--color-primary);
}

.zmap .ctry.dim {
  fill: color-mix(in srgb, var(--color-surface) 55%, transparent);
}

.zmap .zl {
  font-family: var(--font-body);
  fill: var(--color-ink);
  font-weight: var(--font-weight-semibold);
  paint-order: stroke;
  stroke: var(--color-surface);
  pointer-events: none;
}

.zmap .terr {
  cursor: pointer;
}

.zmap .terr circle {
  fill: color-mix(in srgb, var(--color-primary) 30%, transparent);
  stroke: var(--color-primary);
}

.zmap .terr.sel circle {
  fill: var(--color-primary);
}

.zmap .zout {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  min-width: var(--size-tap);
  min-height: var(--size-tap);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.zmap .zfab {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  width: var(--size-tap);
  height: var(--size-tap);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.zmap .zfab svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-2) 0;
}

.crumbs .chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  min-height: var(--size-tap);
}

.crumbs .chip[aria-current="true"] {
  border-color: var(--color-primary);
  background: var(--color-subtle);
}

/* --- TIRER LE FIL --- */
.barre {
  width: 100%;
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-hairline);
  overflow: hidden;
  position: relative;
}

.barre i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

/* --- ÉCOSYSTÈME --- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.filtro {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  background: var(--color-surface);
  color: var(--color-ink2);
  cursor: pointer;
}

.filtro.on,
.filtro[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-subtle);
  color: var(--color-ink);
}

.mapa {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-hairline);
  overflow: hidden;
  background: var(--color-subtle);
}

.mapa svg {
  display: block;
  width: 100%;
  height: auto;
}

.mapa .pt {
  fill: var(--color-primary);
  stroke: var(--color-surface);
  stroke-width: 2.5;
}

.mapa .lbl {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--font-tracking-wide);
  fill: var(--color-ink2);
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 3px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fiche-h .mono-av {
    color: var(--color-ink);
  }
}


/* En-tête : le bouton de retour à la suite fait la cible minimale (règle 14). */
.top .home { min-width: var(--size-tap); min-height: var(--size-tap); display: inline-flex; align-items: center; justify-content: center; }

/* Les titres en haut ramènent à l'accueil : ce sont des cibles, donc 44 px au moins (règle 14). */
.top h1[role="button"] { min-height: var(--size-tap); display: flex; align-items: center; cursor: pointer; }

/* Le nom de l'acteur ouvre la fiche : c'est une cible, donc 44 px au moins (règle 14). */
.fiche-h h2[role="button"] { min-height: var(--size-tap); display: flex; align-items: center; margin: 0; cursor: pointer; }