/* La parure de l ecran : voisins. Cette feuille n habille que cet ecran.
   Le socle commun (cadre, banniere, rangee, sceau, jauge, vignette,
   parchemin, chemin, fanion) vit dans parure-socle.css.

   Le panneau d une terre voisine suit les deux planches du menu contextuel :
   un ecu pendu a gauche d une banniere de titre, une fiche qui dit qui tient
   la place avec sa vue peinte, des lignes chiffrees a marque et a jauge, puis
   les gestes empiles, le premier en rouge et chacun avec son chevron. */


/* ── La liste des terres ─────────────────────────────────────────────────── */

.guerre__fiefs {
  display: grid;
  gap: var(--e-4);
  margin: var(--e-2) 0 0;
  padding: 0;
  list-style: none;
}

.voisin {
  margin: 0;
  padding: var(--e-3) var(--e-3) var(--e-3);
  border-radius: 0;
}

.voisin.est-designe {
  outline: 2px solid var(--or-vif);
  outline-offset: 3px;
}


/* ── Le tableau des terres (22/09/2026) ──────────────────────────────────── */
/* Une terre par ligne, alignée sur l'en-tête : la même grille pour les deux,
   toutes les colonnes fixes sauf la première. Les colonnes suivent la largeur
   de la liste et non celle de l'écran : elle tient dans une moitié de page à
   l'ordinateur (580 à 660 px), prend toute la tablette (734 px) et 312 px au
   téléphone. Sa fiche se déplie sous la ligne, dans le cadre peint. */

#diplomatie-fiefs .guerre__moitie:has(> #guerre-fiefs) { container: terres / inline-size; }

#diplomatie-fiefs .voisins__entetes,
#diplomatie-fiefs #guerre-fiefs button.voisins__rangee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.2rem 3.4rem;
  align-items: center;
  column-gap: var(--e-2);
}

#diplomatie-fiefs .voisins__moyen,
#diplomatie-fiefs .voisins__large { display: none; }

#diplomatie-fiefs .voisins__entetes {
  margin: var(--e-2) 0 0;
  padding: 0 0.6rem 0.35rem calc(0.6rem + 3px);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
  font: 600 var(--t-1)/1.2 var(--police-titre);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
#diplomatie-fiefs .voisins__entetes:has(+ #guerre-fiefs:empty) { display: none; }
#diplomatie-fiefs .voisins__entetes .voisins__cellule:not(.voisins__fief) { text-align: center; }
#diplomatie-fiefs .voisins__entetes .voisins__long { display: none; }
#diplomatie-fiefs .voisins__entetes .voisins__court {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 auto;
}

#diplomatie-fiefs #guerre-fiefs.guerre__fiefs { gap: 0; margin-top: 0; }

#diplomatie-fiefs #guerre-fiefs > li.voisin--rangee {
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
  box-shadow: none;
  scroll-margin-top: 0.5rem;
}

#diplomatie-fiefs #guerre-fiefs button.voisins__rangee {
  width: 100%;
  min-height: 3.3rem;
  margin: 0;
  padding: var(--e-2) var(--e-2);
  color: var(--parchemin);
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  font: 400 var(--t-3)/1.2 var(--police-corps);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}
#diplomatie-fiefs #guerre-fiefs button.voisins__rangee:hover,
#diplomatie-fiefs #guerre-fiefs button.voisins__rangee:focus-visible { background: color-mix(in srgb, var(--or) 8%, transparent); }
/* Une terre hostile ou assiégée garde son filet rouge, ouverte ou non : au
   téléphone, la colonne de la relation n'a pas la place. */
#diplomatie-fiefs #guerre-fiefs li.voisin--sang > button.voisins__rangee { border-left-color: color-mix(in srgb, var(--cire-vif) 85%, transparent); }
#diplomatie-fiefs #guerre-fiefs li.est-ouvert > button.voisins__rangee { background: color-mix(in srgb, var(--or) 13%, transparent); }
#diplomatie-fiefs #guerre-fiefs li.est-ouvert:not(.voisin--sang) > button.voisins__rangee { border-left-color: var(--or-vif); }

#diplomatie-fiefs .voisins__fief {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
}
#diplomatie-fiefs #guerre-fiefs .voisins__ecu {
  flex: none;
  width: 1.7rem;
  height: 2.3rem;
  font-size: var(--t-3);
}
#diplomatie-fiefs .voisins__titre { display: grid; min-width: 0; }
#diplomatie-fiefs .voisins__nom {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  color: var(--or-vif);
  overflow-wrap: anywhere;
}
#diplomatie-fiefs .voisins__sous {
  overflow: hidden;
  font-size: var(--t-1);
  color: var(--texte-pale);
  white-space: nowrap;
  text-overflow: ellipsis;
}
#diplomatie-fiefs #guerre-fiefs .voisins__nombre {
  text-align: center;
  font-size: var(--t-4);
  font-variant-numeric: tabular-nums;
}
#diplomatie-fiefs #guerre-fiefs :is(.voisins__relation, .voisins__murs, .voisins__revenu) {
  font-size: var(--t-2);
  text-align: center;
  color: var(--texte);
}
#diplomatie-fiefs #guerre-fiefs :is(.voisins__menace.est-haute, .voisins__relation--hostile) { color: var(--parchemin-bas); }
#diplomatie-fiefs #guerre-fiefs .voisins__menace.est-moyenne { color: var(--or-vif); }
#diplomatie-fiefs #guerre-fiefs .voisins__relation--favorable { color: var(--gain); }

/* La fiche dépliée : le cadre peint que chaque ligne portait avant. La
   bannière y redirait le nom de la ligne juste au-dessus. */
#diplomatie-fiefs #guerre-fiefs .voisin__detail {
  margin: 0 0 var(--e-3);
  padding: var(--e-3) var(--e-3) var(--e-3);
}
#diplomatie-fiefs #guerre-fiefs .voisin__detail > .voisin__entete { display: none; }
#diplomatie-fiefs #guerre-fiefs .voisin__detail > .voisin__gestes:empty { display: none; }
/* Les gestes ouverts, un par ligne : la grille de deux colonnes du téléphone
   écrasait « Revendiquer cette terre » sur quatre lignes. */
#diplomatie-fiefs #guerre-fiefs .voisin__detail > .voisin__gestes { grid-template-columns: minmax(0, 1fr); }

/* Le retour d'un geste, sous les chiffres, juste au-dessus des gestes. */
#diplomatie-fiefs #guerre-fiefs .voisin__retour { margin: var(--e-3) 0 0; }
#diplomatie-fiefs #guerre-fiefs .voisin__retour.est-gagnee { color: var(--gain); }
#diplomatie-fiefs #guerre-fiefs .voisin__retour.est-perdue { color: var(--parchemin-bas); }

/* Les gestes fermés : une ligne par raison, les gestes qu'elle ferme dessous. */
.voisin__fermes {
  display: grid;
  gap: var(--e-1);
  margin: var(--e-3) 0 0;
  padding: 0;
  list-style: none;
}
.voisin__ferme {
  padding: var(--e-2) var(--e-3);
  background: color-mix(in srgb, var(--pierre-0) 55%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--cire-vif) 60%, transparent);
}
.voisin__ferme-raison {
  display: block;
  font-size: var(--t-2);
  color: var(--parchemin);
}
.voisin__ferme-gestes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-0) var(--e-4);
  margin-top: var(--e-1);
}
#gouverner.page #diplomatie-fiefs .voisin .voisin__ferme-gestes > button.rangee {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: var(--texte-pale);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: 400 var(--t-2)/1.35 var(--police-corps);
  letter-spacing: 0;
  text-transform: none;
  cursor: not-allowed;
}
#gouverner.page #diplomatie-fiefs .voisin .voisin__ferme-gestes .voisin__chevron { display: none; }
#gouverner.page #diplomatie-fiefs .voisin .voisin__ferme-gestes .voisin__marque {
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.5;
}
#gouverner.page #diplomatie-fiefs .voisin .voisin__ferme-gestes .rangee__dit {
  display: inline;
  margin: 0 0 0 var(--e-1);
  font-size: var(--t-1);
}

@container terres (min-width: 30rem) {
  #diplomatie-fiefs .voisins__entetes,
  #diplomatie-fiefs #guerre-fiefs button.voisins__rangee {
    grid-template-columns: minmax(8.5rem, 1.6fr) minmax(5.6rem, 1fr) 3.3rem minmax(5rem, 0.9fr) 3.5rem;
  }
  #diplomatie-fiefs .voisins__moyen { display: block; }
  #diplomatie-fiefs .voisins__entetes .voisins__court { display: none; }
  #diplomatie-fiefs .voisins__entetes .voisins__long { display: inline; }
}

@container terres (min-width: 44rem) {
  #diplomatie-fiefs .voisins__entetes,
  #diplomatie-fiefs #guerre-fiefs button.voisins__rangee {
    grid-template-columns: minmax(8.5rem, 1.6fr) minmax(5.6rem, 1fr) 3.3rem minmax(5rem, 0.9fr) 3.5rem minmax(6.5rem, 1fr);
  }
  #diplomatie-fiefs .voisins__large { display: block; }
}


/* ── La banniere et l ecu ────────────────────────────────────────────────── */

.voisin__entete {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-3);
}

.voisin__ecu {
  width: 2.5rem;
  height: 3.4rem;
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  letter-spacing: 0.02em;
}

.voisin .voisin__banniere {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: var(--e-1) var(--e-4);
}

.voisin .fief__nom {
  min-width: 0;
  font-family: var(--police-titre);
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
  color: var(--or-vif);
  text-shadow: var(--ombre-texte);
}

.voisin--sang .fief__nom { color: var(--parchemin); }


/* ── La fiche : qui tient la place, et la vue de la place ────────────────── */

.voisin__fiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem;
  gap: var(--e-3);
  align-items: stretch;
  padding: var(--e-2) var(--e-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 50%, transparent), color-mix(in srgb, var(--pierre-1) 50%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 18%, transparent);
}

.voisin__qui {
  display: grid;
  align-content: center;
  gap: var(--e-0);
  min-width: 0;
}

.voisin__vue {
  align-self: start;
  aspect-ratio: 8 / 5;
  width: 100%;
  margin: 0;
}

.voisin__vue img { height: 100%; }

@media (max-width: 720px) {
  .voisin__fiche { grid-template-columns: 1fr; }
  .voisin__vue { aspect-ratio: 16 / 7; }
}



/* ── Les lignes chiffrees ────────────────────────────────────────────────── */

.voisin__comptes {
  display: grid;
  margin-top: var(--e-2);
}

.voisin .voisin__compte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  padding: var(--e-2) var(--e-0);
  font-family: var(--police-corps);
  font-size: var(--t-3);
  font-style: normal;
  line-height: 1.35;
  color: var(--texte);
}

.voisin__comptes > .voisin__compte + .voisin__compte {
  border-top: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
}

.voisin__marque {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.voisin--sang .voisin__compte > .voisin__marque { stroke: var(--or); }

.voisin__mot {
  flex: 1;
  min-width: 8rem;
}

.voisin__valeur {
  flex: none;
  font-family: var(--police-titre);
  color: var(--parchemin);
}

.voisin .voisin__jauge {
  flex: none;
  width: 6.5rem;
  height: 0.6rem;
  margin: 0;
  background: color-mix(in srgb, var(--pierre-0) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
}

.voisin .fief__chances { overflow: hidden; }
.voisin .fief__part,

/* Le proprietaire, la relation, les accords : la meme ligne que les comptes,
   mais sans filet, puisque la fiche les regroupe deja. */
.voisin__qui > .voisin__compte { padding: var(--e-1) var(--e-0); }

.voisin .fief__relation,
.voisin .fief__champ,
.voisin .fief__maison {
  font-style: normal;
}

.voisin .fief__maison { color: var(--parchemin); }

.voisin .fief__revenu { color: var(--or); }

.voisin .fief__pronostic {
  font-family: var(--police-corps);
  font-size: var(--t-3);
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte);
}


/* ── Les hommes de la garnison, par corps ────────────────────────────────── */

.voisin__corps {
  display: flex;
  flex: none;
  gap: var(--e-1);
}

.voisin__jeton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-0);
  padding: var(--e-0) var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 95%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
}

.voisin__jeton .voisin__marque {
  width: 0.85rem;
  height: 0.85rem;
}


/* ── Les jarres de feu, posees comme une ligne chiffree ──────────────────── */

.voisin .fief__feu {
  justify-content: space-between;
  margin: 0;
}

.voisin .fief__feu-nom {
  flex: 1;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte);
}

.voisin .fief__feu input {
  flex: none;
  width: 4rem;
  padding: var(--e-1) var(--e-2);
  border-radius: 0;
}

/* Le depliant de la memoire se range avec les lignes chiffrees. */
.voisin__comptes > .voisin__depliant { margin: var(--e-2) 0 var(--e-0); }


/* ── La pile des gestes ──────────────────────────────────────────────────── */

.voisin .voisin__gestes {
  display: grid;
  gap: 2px;
  margin-top: var(--e-3);
}

#gouverner.page #diplomatie-fiefs .voisin .voisin__gestes > button.rangee {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 2.7rem;
  margin: 0;
  padding: var(--e-2) var(--e-3);
  flex-basis: auto;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 92%, transparent), color-mix(in srgb, var(--pierre-0) 92%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
  border-radius: 0;
  cursor: pointer;
}

#gouverner.page #diplomatie-fiefs .voisin .voisin__gestes > button.rangee:hover:not(:disabled),
#gouverner.page #diplomatie-fiefs .voisin .voisin__gestes > button.rangee:focus-visible {
  color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 96%, transparent), color-mix(in srgb, var(--pierre-2) 96%, transparent));
  border-color: color-mix(in srgb, var(--or) 60%, transparent);
  filter: none;
}

#gouverner.page #diplomatie-fiefs .voisin .voisin__gestes > button.rangee--premiere {
  color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cire) 95%, transparent), color-mix(in srgb, var(--cire-fonce) 95%, transparent));
  border-color: color-mix(in srgb, var(--cire-vif) 85%, transparent);
}

#gouverner.page #diplomatie-fiefs .voisin .voisin__gestes > button.rangee--premiere:hover:not(:disabled),
#gouverner.page #diplomatie-fiefs .voisin .voisin__gestes > button.rangee--premiere:focus-visible {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cire-vif) 98%, transparent), color-mix(in srgb, var(--cire-fonce) 98%, transparent));
  border-color: color-mix(in srgb, var(--or) 75%, transparent);
}

#gouverner.page #diplomatie-fiefs .voisin .voisin__gestes > button.rangee:disabled {
  color: var(--texte-pale);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 90%, transparent), color-mix(in srgb, var(--pierre-0) 90%, transparent));
  border-color: color-mix(in srgb, var(--or) 12%, transparent);
  opacity: 1;
  cursor: not-allowed;
}

#gouverner.page #diplomatie-fiefs .voisin .voisin__gestes > button.rangee:disabled .voisin__marque,
#gouverner.page #diplomatie-fiefs .voisin .voisin__gestes > button.rangee:disabled .voisin__chevron { opacity: 0.35; }

.voisin .rangee__mot {
  flex: 1;
  min-width: 0;
}

.voisin .rangee__dit {
  display: block;
  margin-top: 0.05rem;
  font-size: var(--t-2);
  color: var(--texte-pale);
}

.voisin .rangee--premiere .rangee__dit { color: var(--parchemin-bas); }

/* Le serment pris sans bataille ne coute pas un homme. Ouvert, il porte donc
   l or, sinon il se confond avec le serment par les armes, juste en dessous
   de lui. Le rouge reste a l assaut. */
#gouverner.page #diplomatie-fiefs .voisin .voisin__gestes > button.fief__exiger:not(:disabled):not(.rangee--premiere) {
  color: var(--or-vif);
  border-color: color-mix(in srgb, var(--or) 55%, transparent);
}

#gouverner.page #diplomatie-fiefs .voisin .voisin__gestes > button.fief__exiger:not(:disabled):not(.rangee--premiere) .rangee__dit {
  color: var(--or-sourd);
}

.voisin__chevron {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.65;
}

.voisin .rangee--premiere .voisin__marque,
.voisin .rangee--premiere .voisin__chevron { stroke: var(--parchemin); }

/* Par ou entrer dans la place : un choix, pas une rangee. Il se range sous
   l assaut auquel il sert. */
.voisin .fief__chemin {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-3);
  background: color-mix(in srgb, var(--pierre-0) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 18%, transparent);
}

.voisin .fief__chemin-titre {
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.08em;
  color: var(--or);
}

.voisin .fief__chemin-dit {
  margin: 0;
  font-size: var(--t-2);
  color: var(--texte-pale);
}


/* ── Les depliants : le marche, ce qu ils gardent en memoire ─────────────── */

.voisin__depliant {
  margin: 2px 0 0;
  color: var(--texte);
}

.voisin .voisin__depliant-titre {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 2.7rem;
  padding: var(--e-2) var(--e-3);
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 92%, transparent), color-mix(in srgb, var(--pierre-0) 92%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
  list-style: none;
  cursor: pointer;
}

.voisin .voisin__depliant-titre::-webkit-details-marker { display: none; }
.voisin .voisin__depliant-titre::marker { content: ""; }

.voisin .voisin__depliant-titre:hover,
.voisin .voisin__depliant-titre:focus-visible {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 96%, transparent), color-mix(in srgb, var(--pierre-2) 96%, transparent));
  border-color: color-mix(in srgb, var(--or) 60%, transparent);
}

.voisin__depliant[open] > .voisin__depliant-titre .voisin__chevron {
  transform: rotate(90deg);
}

.voisin .plateau,
.voisin .fief__memoire {
  background: none;
  border: 0;
}

.voisin .plateau[open],
.voisin .fief__memoire[open] {
  padding-bottom: var(--e-2);
  background: color-mix(in srgb, var(--pierre-0) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
}

.voisin .plateau[open] > .voisin__depliant-titre,
.voisin .fief__memoire[open] > .voisin__depliant-titre {
  border-width: 0 0 1px;
  border-color: color-mix(in srgb, var(--or) 20%, transparent);
}

.voisin .plateau > :not(summary),
.voisin .fief__memoire > :not(summary) {
  margin-left: var(--e-3);
  margin-right: var(--e-3);
}


/* ── Les terres deja tiennes, et les jures ───────────────────────────────── */

.voisin.est-tenu .voisin__banniere,
.voisin.est-jure .voisin__banniere {
  color: var(--or-vif);
}

.voisin.est-tenu .fief__etat,
.voisin.est-jure .fief__etat {
  font-family: var(--police-corps);
  font-size: var(--t-3);
  letter-spacing: 0;
  text-transform: none;
  color: var(--or);
}


/* ── Le camp de brigands ─────────────────────────────────────────────────── */

/* La liste des camps est faite des memes pieces que celle des terres. */
.routes__liste {
  display: grid;
  gap: var(--e-4);
  width: min(100%, 44rem);
  margin: var(--e-2) 0 0;
  padding: 0;
  list-style: none;
}

.voisin.camp {
  border-left-width: 1px;
  padding: var(--e-3) var(--e-3) var(--e-3);
}

.voisin .camp__sorte {
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--parchemin);
}

.voisin .camp__hommes,
.voisin .camp__butin,
.voisin .camp__xp,
.voisin .camp__vide,
.voisin .camp__chance {
  font-size: var(--t-3);
  color: var(--texte);
}

.voisin__ecu--crane .voisin__marque {
  width: 1.4rem;
  height: 1.4rem;
  stroke: var(--parchemin);
  opacity: 1;
}

.voisin .camp__marcher { margin-top: 0; }


/* ── Au telephone ────────────────────────────────────────────────────────── */

/* La jauge se serre pour rester sur la ligne de son mot. */
@media (max-width: 520px) {
  .voisin .voisin__jauge { width: 4.5rem; }
  .voisin__mot { min-width: 6rem; }
  .voisin .fief__nom { letter-spacing: 0.05em; }
}

/* Une marque peinte remplace le trace : l'image porte deja son or, alors le
   filet et le remplissage du SVG ne la concernent pas. */
img.voisin__marque--peinte {
  object-fit: contain;
  opacity: 0.95;
}

.voisin--sang .voisin__compte > img.voisin__marque--peinte {
  filter: sepia(0.5) saturate(1.7) hue-rotate(-18deg);
}