.surface, .card, .feuille, .logo, .etiquette, .pastille, .tab, .set-carte, .vignette, .salon-joueurs li,
.partie-bandeau, .partie-joueur, .partie-message { color: var(--encre); }
:is(.surface, .card, .feuille) :is(.hint, .vide, .button--discret) { color: var(--crayon); }
:is(.surface, .card, .feuille) .hint a { color: var(--rouge); }
:is(.surface, .card, .feuille) .error { color: var(--alerte); }
:is(.surface, .card, .feuille) a:not(.button) { color: var(--or); text-decoration-color: rgba(217, 182, 108, .55); }

.surface, .card, .feuille {
  position: relative;
  padding: var(--espace-3);
  background: var(--papier-clair) var(--bruit);
  border-radius: 2px 4px 3px 5px;
  box-shadow: var(--ombre-feuille);
  transform: rotate(var(--incl, -.35deg));
}

.surface::before, .card::before, .feuille::before {
  content: '';
  position: absolute;
  top: -13px;
  left: 50%;
  width: 6.5rem;
  height: 1.7rem;
  margin-left: -3.25rem;
  background: repeating-linear-gradient(115deg, rgba(240, 168, 184, .88) 0 9px, rgba(255, 255, 255, .5) 9 12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transform: rotate(-2.5deg);
  pointer-events: none;
}

.feuille--menthe::before { background: repeating-linear-gradient(115deg, rgba(169, 216, 196, .92) 0 9px, rgba(255, 255, 255, .5) 9 12px); }
.feuille--jaune::before { background: repeating-linear-gradient(115deg, rgba(243, 211, 107, .92) 0 9px, rgba(255, 255, 255, .5) 9 12px); }
.feuille--sans-ruban::before { display: none; }
.feuille--droite, .surface--droite { transform: none; }
.feuille--ligne {
  background-image: repeating-linear-gradient(transparent 0 1.72rem, rgba(134, 168, 240, .16) 1.72rem calc(1.72rem + 1px)), var(--bruit);
  background-color: var(--blanc-gel);
  background-position: 0 1rem, 0 0;
}

.feuille--punaise::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 18px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--rouge) 12% 70%, #8d2a17 100%);
  box-shadow: 3px 4px 4px rgba(0, 0, 0, .4);
}

.surface--cliquable { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.surface--cliquable:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 2px 2px rgba(0, 0, 0, .2), 0 14px 22px -8px rgba(0, 0, 0, .45); }

.etiquette {
  position: relative;
  display: inline-block;
  padding: .15rem .9rem .15rem 1.7rem;
  font-family: var(--manuscrit);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--encre);
  background: var(--kraft);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}

.etiquette::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--ardoise);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .6);
}

.pastille {
  display: inline-flex;
  align-items: center;
  padding: .05rem .7rem;
  font-family: var(--manuscrit);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--encre);
  background: rgba(232, 183, 48, .45);
  border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px;
}

.souligne {
  background: linear-gradient(transparent 62%, rgba(232, 183, 48, .6) 62% 90%, transparent 90%);
  padding: 0 .15em;
}