/*
 * Morpion : remplissage des pastilles du banner des pages internes (croix,
 * rond, croix). La mise en page vient de banner.css partagé, sans animation.
 */
.deco-banner.deco-croix, .deco-banner.deco-rond {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  position: relative;
}
.deco-banner.deco-croix::before, .deco-banner.deco-croix::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 2.5px;
  margin: -1.25px 0 0 -6.5px;
  border-radius: 2px;
  background: #818cf8;
  transform: rotate(45deg);
}
.deco-banner.deco-croix::after { transform: rotate(-45deg); }
.deco-banner.deco-rond::before {
  content: '';
  position: absolute;
  inset: 4.5px;
  border: 2.5px solid #f472b6;
  border-radius: 50%;
}

@media (max-width: 480px) {
  .deco-banner.deco-croix, .deco-banner.deco-rond { width: 18px; height: 18px; }
  .deco-banner.deco-croix::before, .deco-banner.deco-croix::after { width: 10px; margin-left: -5px; }
  .deco-banner.deco-rond::before { inset: 3.5px; }
}